💄 调整战绩数据总览样式，更为紧凑

src/components/userRecord/tur-overview-grid.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="!modelValue">暂无数据</div>
   <div v-else>
-    <div class="tur-og-box">
+    <div class="tur-og-box grid4">
       <TurOverviewSub
         :text="modelValue.activeDays"
         icon="/source/UI/userRecord.webp"
@@ -83,6 +83,8 @@
         icon="/icon/material/107028.webp"
         title="火神瞳"
       />
+    </div>
+    <div class="tur-og-box grid5">
       <TurOverviewSub :text="modelValue.luxuriousChest" title="华丽宝箱数" />
       <TurOverviewSub :text="modelValue.preciousChest" title="珍贵宝箱数" />
       <TurOverviewSub :text="modelValue.exquisiteChest" title="精致宝箱数" />
@@ -102,13 +104,17 @@ defineProps<{ modelValue: TGApp.Sqlite.Record.Stats }>();
   width: 100%;
   gap: 8px;
   grid-template-columns: repeat(3, 0.33fr);
-}
 
-.tur-og-box-3 {
-  display: grid;
-  width: 100%;
-  margin-bottom: 8px;
-  gap: 8px;
-  grid-template-columns: repeat(3, 1fr);
+  &.grid4 {
+    grid-template-columns: repeat(4, 0.25fr);
+  }
+
+  &.grid5 {
+    grid-template-columns: repeat(5, 0.2fr);
+  }
+
+  & + & {
+    margin-top: 8px;
+  }
 }
 </style>

src/components/userRecord/tur-overview-sub.vue

@@ -8,7 +8,7 @@
       </div>
       <slot name="val-text">{{ props.text }}</slot>
     </div>
-    <div class="tur-os-title">
+    <div class="tur-os-label">
       <slot name="title">{{ props.title }}</slot>
     </div>
   </div>
@@ -22,10 +22,10 @@ const props = defineProps<TAOProps>();
 </script>
 <style lang="css" scoped>
 .tur-os-box {
+  position: relative;
   display: flex;
   width: 100%;
   height: auto;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 8px;
@@ -34,9 +34,13 @@ const props = defineProps<TAOProps>();
   background: var(--box-bg-1);
 }
 
-.tur-os-title {
+.tur-os-label {
+  position: absolute;
+  right: 2px;
+  bottom: 0;
   color: var(--box-text-4);
-  font-family: var(--font-title);
+  font-family: var(--font-text);
+  font-size: 12px;
 }
 
 .tur-os-text {
@@ -45,7 +49,7 @@ const props = defineProps<TAOProps>();
   justify-content: center;
   color: var(--tgc-yellow-1);
   column-gap: 4px;
-  font-family: var(--font-text);
+  font-family: var(--font-title);
   font-size: 18px;
   line-height: 24px;
 }

src/pages/User/Record.vue

@@ -51,20 +51,17 @@
       <TurRoleInfo :role="recordData.role" :uid="uidCur ?? 0" />
       <span class="sign">TeyvatGuide v{{ version }} | {{ recordData.updated }}</span>
     </div>
-    <PhCompCard>
-      <template #title>数据总览</template>
+    <PhCompCard title="数据总览">
       <TurOverviewGrid :model-value="recordData.stats" />
     </PhCompCard>
-    <PhCompCard>
-      <template #title>角色信息</template>
+    <PhCompCard title="角色信息">
       <TurAvatarGrid :model-value="recordData.avatars" />
     </PhCompCard>
-    <PhCompCard>
-      <template #title>世界探索</template>
+    <PhCompCard title="世界探索">
       <TurWorldGrid :worlds="recordData.worldExplore" />
     </PhCompCard>
-    <PhCompCard>
-      <template #title>尘歌壶</template>
+    <!-- TODO: 优化UI -->
+    <PhCompCard title="尘歌壶">
       <TurHomeGrid :model-value="recordData.homes" />
     </PhCompCard>
   </div>