mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2026-03-15 03:53:16 +08:00
111 lines
2.8 KiB
Vue
111 lines
2.8 KiB
Vue
<template>
|
|
<div class="hta-tt-box">
|
|
<v-tabs v-model="tab" class="hta-tt-tab" direction="vertical">
|
|
<v-tab :value="10">第10层</v-tab>
|
|
<v-tab :value="11">第11层</v-tab>
|
|
<v-tab :value="12">第12层</v-tab>
|
|
</v-tabs>
|
|
<v-window v-model="tab" class="hta-tt-window">
|
|
<v-window-item v-for="selectItem in select" :key="selectItem.Floor" :value="selectItem.Floor">
|
|
<div class="hta-tt-flex">
|
|
<div class="hta-tuf-box">
|
|
<div class="hta-tuf-title">上半</div>
|
|
<v-virtual-scroll :items="selectItem.Up" class="hta-tuf-item" item-height="100">
|
|
<template #default="{ item }">
|
|
<HtaTeamLine :model-value="item" />
|
|
</template>
|
|
</v-virtual-scroll>
|
|
<span v-if="selectItem.Up.length === 0">暂无数据</span>
|
|
</div>
|
|
<div class="hta-tuf-box">
|
|
<div class="hta-tuf-title">下半</div>
|
|
<v-virtual-scroll :items="selectItem.Down" class="hta-tuf-item" item-height="100">
|
|
<template #default="{ item }">
|
|
<HtaTeamLine :model-value="item" />
|
|
</template>
|
|
</v-virtual-scroll>
|
|
<span v-if="selectItem.Down.length === 0">暂无数据</span>
|
|
</div>
|
|
</div>
|
|
</v-window-item>
|
|
</v-window>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { onMounted, ref, shallowRef } from "vue";
|
|
|
|
import HtaTeamLine from "./hta-team-line.vue";
|
|
|
|
type HtaTabTeamProps = { modelValue: Array<TGApp.Plugins.Hutao.Abyss.TeamCombination> };
|
|
const props = defineProps<HtaTabTeamProps>();
|
|
|
|
const tab = ref<number>(10);
|
|
const select = shallowRef<Array<TGApp.Plugins.Hutao.Abyss.TeamCombination>>([]);
|
|
|
|
onMounted(async () => {
|
|
const tempData: Array<TGApp.Plugins.Hutao.Abyss.TeamCombination> = [];
|
|
for (const item of props.modelValue) {
|
|
item.Up.sort((a, b) => b.Rate - a.Rate);
|
|
item.Down.sort((a, b) => b.Rate - a.Rate);
|
|
tempData.push(item);
|
|
}
|
|
select.value = tempData;
|
|
});
|
|
</script>
|
|
<style lang="css" scoped>
|
|
.hta-tt-box {
|
|
display: flex;
|
|
height: 100%;
|
|
column-gap: 10px;
|
|
}
|
|
|
|
.hta-tt-tab {
|
|
height: 100%;
|
|
color: var(--box-text-4);
|
|
}
|
|
|
|
.hta-tt-window {
|
|
overflow: auto;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.hta-tt-flex {
|
|
position: relative;
|
|
display: flex;
|
|
overflow: auto;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding: 10px;
|
|
column-gap: 10px;
|
|
}
|
|
|
|
.hta-tuf-box {
|
|
display: flex;
|
|
overflow: hidden auto;
|
|
width: 100%;
|
|
max-height: 100%;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 5px;
|
|
row-gap: 10px;
|
|
}
|
|
|
|
.hta-tuf-title {
|
|
width: 100%;
|
|
font-family: var(--font-title);
|
|
font-size: 18px;
|
|
text-align: left;
|
|
}
|
|
|
|
.hta-tuf-item {
|
|
position: relative;
|
|
width: 100%;
|
|
max-height: calc(100vh - 160px);
|
|
border-radius: 5px;
|
|
background: var(--box-bg-1);
|
|
}
|
|
</style>
|