💄 添加icon,调整布局

BTMuli · Sep 4, 2024 · 7106850 · 7106850
1 parent 8d99e2f
commit 7106850
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 24 deletions.
diff --git a/src/components/userRecord/tur-overview-grid.vue b/src/components/userRecord/tur-overview-grid.vue
@@ -1,25 +1,41 @@
 <template>
   <div v-if="!props.modelValue">暂无数据</div>
-  <div v-else class="tur-og-box">
-    <TurOverviewSub title="活跃天数" :text="data.activeDays" />
-    <TurOverviewSub title="成就达成数" :text="data.achievementNumber" />
-    <TurOverviewSub title="获得角色数" :text="data.avatarNumber" />
-    <TurOverviewSub title="满好感角色数" :text="data.avatarFetter" />
-    <TurOverviewSub title="深境螺旋" :text="data.sprialAbyss" />
-    <TurOverviewSub title="幻想真境剧诗" :text="data.combatRole" />
-    <TurOverviewSub title="解锁传送点" :text="data.wayPoints" />
-    <TurOverviewSub title="解锁秘境" :text="data.domainNumber" />
-    <TurOverviewSub title="风神瞳" :text="data.anemoCulus" />
-    <TurOverviewSub title="岩神瞳" :text="data.geoCulus" />
-    <TurOverviewSub title="雷神瞳" :text="data.electroCulus" />
-    <TurOverviewSub title="草神瞳" :text="data.dendroCulus" />
-    <TurOverviewSub title="水神瞳" :text="data.hydroCulus" />
-    <TurOverviewSub title="火神瞳" :text="data.pyroCulus" />
-    <TurOverviewSub title="华丽宝箱数" :text="data.luxuriousChest" />
-    <TurOverviewSub title="珍贵宝箱数" :text="data.preciousChest" />
-    <TurOverviewSub title="精致宝箱数" :text="data.exquisiteChest" />
-    <TurOverviewSub title="普通宝箱数" :text="data.commonChest" />
-    <TurOverviewSub title="奇馈宝箱数" :text="data.magicChest" />
+  <div v-else>
+    <div class="tur-og-box-3">
+      <TurOverviewSub title="活跃天数" :text="data.activeDays" icon="/source/UI/userRecord.webp" />
+      <TurOverviewSub title="深境螺旋" :text="data.sprialAbyss" icon="/source/UI/userAbyss.webp" />
+      <TurOverviewSub title="幻想真境剧诗" :text="data.combatRole" icon="/icon/material/201.webp" />
+    </div>
+    <div class="tur-og-box">
+      <TurOverviewSub
+        title="获得角色数"
+        :text="data.avatarNumber"
+        icon="/source/UI/userAvatar.webp"
+      />
+      <TurOverviewSub
+        title="满好感角色数"
+        :text="data.avatarFetter"
+        icon="/icon/material/105.webp"
+      />
+      <TurOverviewSub
+        title="成就达成数"
+        :text="data.achievementNumber"
+        icon="/src/assets/icons/achievements.svg"
+      />
+      <TurOverviewSub title="解锁传送点" :text="data.wayPoints" icon="/icon/material/220005.webp" />
+      <TurOverviewSub title="解锁秘境" :text="data.domainNumber" />
+      <TurOverviewSub title="火神瞳" :text="data.pyroCulus" icon="/icon/material/107028.webp" />
+      <TurOverviewSub title="风神瞳" :text="data.anemoCulus" icon="/icon/material/107001.webp" />
+      <TurOverviewSub title="岩神瞳" :text="data.geoCulus" icon="/icon/material/107003.webp" />
+      <TurOverviewSub title="雷神瞳" :text="data.electroCulus" icon="/icon/material/107014.webp" />
+      <TurOverviewSub title="草神瞳" :text="data.dendroCulus" icon="/icon/material/107017.webp" />
+      <TurOverviewSub title="水神瞳" :text="data.hydroCulus" icon="/icon/material/107023.webp" />
+      <TurOverviewSub title="华丽宝箱数" :text="data.luxuriousChest" />
+      <TurOverviewSub title="珍贵宝箱数" :text="data.preciousChest" />
+      <TurOverviewSub title="精致宝箱数" :text="data.exquisiteChest" />
+      <TurOverviewSub title="普通宝箱数" :text="data.commonChest" />
+      <TurOverviewSub title="奇馈宝箱数" :text="data.magicChest" />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -39,6 +55,14 @@ const data = computed<TGApp.Sqlite.Record.Stats>(() => JSON.parse(<string>props.
   display: grid;
   width: 100%;
   grid-gap: 10px;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(4, 0.25fr);
+}
+
+.tur-og-box-3 {
+  display: grid;
+  width: 100%;
+  margin-bottom: 10px;
+  grid-gap: 10px;
+  grid-template-columns: repeat(3, 1fr);
 }
 </style>
diff --git a/src/components/userRecord/tur-overview-sub.vue b/src/components/userRecord/tur-overview-sub.vue
@@ -2,12 +2,15 @@
   <div class="tur-os-box">
     <div class="tur-os-title">
       <slot name="title">
-        {{ title }}
+        {{ props.title }}
       </slot>
     </div>
     <div class="tur-os-text">
+      <div v-if="props.icon" class="tur-os-icon">
+        <img :src="props.icon" alt="icon" />
+      </div>
       <slot name="val-text">
-        {{ text }}
+        {{ props.text }}
       </slot>
     </div>
   </div>
@@ -16,9 +19,10 @@
 interface TAOProps {
   title: string;
   text: string | number | undefined;
+  icon?: string;
 }
 
-defineProps<TAOProps>();
+const props = defineProps<TAOProps>();
 </script>
 <style lang="css" scoped>
 .tur-os-box {
@@ -40,13 +44,28 @@ defineProps<TAOProps>();
 }
 
 .tur-os-text {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
   color: var(--tgc-yellow-1);
   font-family: var(--font-text);
   font-size: 20px;
+  gap: 5px;
 }
 
 .dark .tur-os-text {
   color: var(--tgc-yellow-1);
   text-shadow: none;
 }
+
+.tur-os-icon {
+  width: 25px;
+  height: 25px;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
 </style>