mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2026-04-05 07:15:06 +08:00
80 lines
1.8 KiB
Vue
80 lines
1.8 KiB
Vue
<template>
|
|
<div class="tucr-box">
|
|
<div class="tucr-title">
|
|
<img :src="`/icon/star/combat${modelValue.is_get_medal ? 1 : 0}.webp`" alt="combat" />
|
|
<span class="main">第{{ modelValue.round_id }}幕</span>
|
|
<span class="sub">{{ timestampToDate(Number(modelValue.finish_time) * 1000) }}</span>
|
|
</div>
|
|
<div class="tucr-content">
|
|
<TucSub title="出演角色" class="main">
|
|
<TucAvatars :model-value="modelValue.avatars" :detail="true" />
|
|
</TucSub>
|
|
<TucSub title="辉彩祝福" class="main">
|
|
<TucBuffs :model-value="modelValue.splendour_buff" />
|
|
</TucSub>
|
|
<TucSub :title="`神秘收获(${modelValue.choice_cards.length})`" class="sub">
|
|
<TucCards :model-value="modelValue.choice_cards" />
|
|
</TucSub>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { timestampToDate } from "@utils/toolFunc.js";
|
|
|
|
import TucAvatars from "./tuc-avatars.vue";
|
|
import TucBuffs from "./tuc-buffs.vue";
|
|
import TucCards from "./tuc-cards.vue";
|
|
import TucSub from "./tuc-sub.vue";
|
|
|
|
defineProps<{ modelValue: TGApp.Game.Combat.RoundData }>();
|
|
</script>
|
|
<style lang="css" scoped>
|
|
.tucr-box {
|
|
display: flex;
|
|
width: 100%;
|
|
height: fit-content;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
background: var(--box-bg-1);
|
|
row-gap: 4px;
|
|
}
|
|
|
|
.tucr-title {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
margin-right: auto;
|
|
column-gap: 4px;
|
|
|
|
img {
|
|
width: 30px;
|
|
aspect-ratio: 1;
|
|
}
|
|
|
|
.main {
|
|
color: var(--common-text-title);
|
|
font-family: var(--font-title);
|
|
font-size: 20px;
|
|
}
|
|
|
|
.sub {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.tucr-content {
|
|
display: flex;
|
|
width: 100%;
|
|
flex-shrink: 0;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
column-gap: 8px;
|
|
|
|
.sub {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|