🌱 荧/空 版本切换

src/pages/Archive/Birthday.vue

@@ -1,12 +1,14 @@
 <template>
   <div class="ab-container">
+    <div class="ab-draw-top">
+      <v-switch v-model="isLumine" :label="isLumine ? '荧' : '空'" />
+    </div>
     <div class="ab-draw-grid">
-      <div
-        v-for="item in selectedItem"
-        :key="`${item.birthday}_${item.role_id}`"
-        class="ab-draw-item"
-      >
-        <v-img :src="item.take_picture" :lazy-src="item.unread_picture" />
+      <div v-for="item in selectedItem" :key="item.op_id" class="ab-draw-item">
+        <v-img
+          :src="item.take_picture[isLumine ? 0 : 1]"
+          :lazy-src="item.unread_picture[isLumine ? 0 : 1]"
+        />
         <span>{{ item.year }} {{ item.birthday }} {{ item.role_name }}</span>
       </div>
     </div>
@@ -21,6 +23,7 @@ import { ArcBirDraw } from "../../data";
 const page = ref(1);
 const length = ref(0);
 const selectedItem = ref<TGApp.Archive.Birth.DrawItem[]>(ArcBirDraw);
+const isLumine = ref<boolean>(true);
 
 watch(page, (val) => {
   const start = (val - 1) * 12;
@@ -45,6 +48,12 @@ onMounted(() => {
   padding: 20px;
 }
 
+.ab-draw-top {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .ab-draw-grid {
   position: relative;
   display: grid;