Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2026-05-22 05:35:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
BTMuli
2026-01-31 00:36:15 +08:00
parent 3098581235
commit 46efb8fa7d
3 changed files with 28 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/userRecord/tur-overview-grid.vue
View File

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

14
src/components/userRecord/tur-overview-sub.vue
View File

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

13
src/pages/User/Record.vue
View File

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