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

💄 添加icon,调整布局

Browse Source
This commit is contained in:
目棃
2024-09-04 09:55:57 +08:00
parent 8d99e2f77f
commit 710685002d
2 changed files with 67 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>

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

@@ -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>