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

💄 队伍出场页面UI调整

Browse Source
This commit is contained in:
目棃
2024-10-30 22:49:33 +08:00
parent 9d08880c10
commit 41e71357ef
3 changed files with 73 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/hutaoAbyss/hta-tab-team.vue
View File

@@ -15,29 +15,19 @@
<div v-if="select" class="hta-tt-flex">
<div class="hta-tuf-box">
<div class="hta-tuf-title">上半</div>
<div v-for="items in selectItem.Up" :key="items.Rate" class="hta-tuf-item">
<div class="hta-tuf-item-icons">
<TibWikiAbyss2
v-for="item in items.Item.split(',')"
:key="item"
:model-value="item"
/>
</div>
<div class="hta-tuf-item-rate">上场{{ items.Rate }}次</div>
</div>
<v-virtual-scroll :items="selectItem.Up" item-height="100" class="hta-tuf-item">
<template #default="{ item }">
<HtaTeamLine :model-value="item" />
</template>
</v-virtual-scroll>
</div>
<div class="hta-tuf-box">
<div class="hta-tuf-title">下半</div>
<div v-for="items in selectItem.Down" :key="items.Rate" class="hta-tuf-item">
<div class="hta-tuf-item-icons">
<TibWikiAbyss2
v-for="item in items.Item.split(',')"
:key="item"
:model-value="item"
/>
</div>
<div class="hta-tuf-item-rate">上场{{ items.Rate }}次</div>
</div>
<v-virtual-scroll :items="selectItem.Down" item-height="100" class="hta-tuf-item">
<template #default="{ item }">
<HtaTeamLine :model-value="item" />
</template>
</v-virtual-scroll>
</div>
</div>
</v-window-item>
@@ -47,7 +37,7 @@
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import TibWikiAbyss2 from "../itembox/tib-wiki-abyss-2.vue";
import HtaTeamLine from "./hta-team-line.vue";
interface HtaTabTeamProps {
modelValue: TGApp.Plugins.Hutao.Abyss.TeamCombination[];
@@ -117,29 +107,10 @@ onMounted(async () => {
}
.hta-tuf-item {
display: flex;
position: relative;
width: 100%;
height: 100px;
align-items: center;
justify-content: flex-start;
padding: 5px;
max-height: calc(100vh - 200px);
border-radius: 5px;
background: var(--box-bg-1);
column-gap: 10px;
}
.hta-tuf-item-icons {
display: grid;
column-gap: 10px;
grid-template-columns: repeat(4, 1fr);
}
.hta-tuf-item-rate {
display: flex;
width: calc(100% - 360px);
height: 100%;
align-items: center;
justify-content: center;
font-family: var(--font-title);
}
</style>

48
src/components/hutaoAbyss/hta-team-line.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<div class="hta-tl-box">
<div class="hta-tl-item">
<TibWikiAbyss2
v-for="item in props.modelValue.Item.split(',')"
:key="item"
:model-value="item"
/>
</div>
<div class="hta-tl-rate">上场{{ props.modelValue.Rate }}次</div>
</div>
</template>
<script lang="ts" setup>
import TibWikiAbyss2 from "../itembox/tib-wiki-abyss-2.vue";
interface HtaTeamLineProps {
modelValue: { Item: string; Rate: number };
}
const props = defineProps<HtaTeamLineProps>();
</script>
<style lang="css" scoped>
.hta-tl-box {
position: relative;
display: flex;
width: calc(100% - 20px);
align-items: center;
justify-content: space-between;
padding: 10px;
border-radius: 5px;
margin: 10px;
background: var(--box-bg-2);
}
.hta-tl-item {
display: grid;
column-gap: 10px;
grid-template-columns: repeat(4, 1fr);
}
.hta-tl-rate {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
font-family: var(--font-title);
}
</style>