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

💄 调整UI

Browse Source
This commit is contained in:
目棃
2024-12-26 19:54:37 +08:00
parent 3bc70bbf46
commit c9aafac5d9
3 changed files with 21 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/app/t-sidebar.vue
View File

@@ -98,13 +98,12 @@
<img src="/source/UI/wikiWeapon.webp" alt="weaponIcon" class="side-icon-menu" /> <img src="/source/UI/wikiWeapon.webp" alt="weaponIcon" class="side-icon-menu" />
</template> </template>
</v-list-item> </v-list-item>
<v-list-item <v-list-item class="side-item-menu" :link="true" href="/wiki/nameCard">
class="side-item-menu" <template #default>
:link="true" <v-icon size="20" color="var(--tgc-yellow-2)">mdi-credit-card-outline</v-icon>
href="/wiki/nameCard" <span style="margin-left: 10px; font-size: 0.8125rem">名片图鉴</span>
prepend-icon="mdi-credit-card-outline" </template>
title="名片图鉴" </v-list-item>
/>
<v-list-item class="side-item-menu" title="材料图鉴" :link="true" href="/wiki/material"> <v-list-item class="side-item-menu" title="材料图鉴" :link="true" href="/wiki/material">
<template #prepend> <template #prepend>
<img src="/source/UI/wikiGCG.webp" alt="gcgIcon" class="side-icon-menu" /> <img src="/source/UI/wikiGCG.webp" alt="gcgIcon" class="side-icon-menu" />

19
src/components/userCombat/tuc-avatars.vue
View File

@@ -1,21 +1,16 @@
<template> <template>
<div class="tuca-box"> <div class="tuca-box" :class="{ grid: props.detail }">
<TItemBox v-for="(item, idx) in props.modelValue" :key="idx" :model-value="getItemBox(item)" /> <TItemBox v-for="(item, idx) in props.modelValue" :key="idx" :model-value="getItemBox(item)" />
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import TItemBox, { type TItemBoxData } from "@comp/app/t-itemBox.vue"; import TItemBox, { type TItemBoxData } from "@comp/app/t-itemBox.vue";
import { computed } from "vue";
import { getZhElement } from "@/utils/toolFunc.js"; import { getZhElement } from "@/utils/toolFunc.js";
type TucAvatarsProps = { modelValue: Array<TGApp.Game.Combat.Avatar> }; type TucAvatarsProps = { modelValue: Array<TGApp.Game.Combat.Avatar>; detail: boolean };
const props = defineProps<TucAvatarsProps>(); const props = defineProps<TucAvatarsProps>();
const columnCnt = computed<number>(() => {
if (props.modelValue.length % 2 === 1) return (props.modelValue.length + 1) / 2;
return props.modelValue.length / 2;
});
function getItemBox(item: TGApp.Game.Combat.Avatar): TItemBoxData { function getItemBox(item: TGApp.Game.Combat.Avatar): TItemBoxData {
return { return {
@@ -37,9 +32,17 @@ function getItemBox(item: TGApp.Game.Combat.Avatar): TItemBoxData {
</script> </script>
<style lang="css" scoped> <style lang="css" scoped>
.tuca-box { .tuca-box {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 10px;
&.grid {
display: grid; display: grid;
width: 100%; width: 100%;
grid-gap: 10px; grid-gap: 10px;
grid-template-columns: repeat(v-bind(columnCnt), 1fr); grid-template-columns: repeat(2, 1fr);
}
} }
</style> </style>

2
src/components/userCombat/tuc-round.vue
View File

@@ -7,7 +7,7 @@
</div> </div>
<div class="tucr-content"> <div class="tucr-content">
<TucSub title="出演角色" class="main"> <TucSub title="出演角色" class="main">
<TucAvatars :model-value="modelValue.avatars" /> <TucAvatars :model-value="modelValue.avatars" :detail="true" />
</TucSub> </TucSub>
<TucSub title="辉彩祝福" class="main"> <TucSub title="辉彩祝福" class="main">
<TucBuffs :model-value="modelValue.splendour_buff" /> <TucBuffs :model-value="modelValue.splendour_buff" />