mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-12 09:18:14 +08:00
47 lines
1.2 KiB
Vue
47 lines
1.2 KiB
Vue
<template>
|
|
<TItemBox :model-value="box" />
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, computed } from "vue";
|
|
|
|
import { AppCharacterData } from "../../data/index.js";
|
|
import TItemBox, { type TItemBoxData } from "../main/t-itembox.vue";
|
|
|
|
interface TibWikiAbyssProps {
|
|
modelValue: {
|
|
Item: number;
|
|
Rate: number;
|
|
};
|
|
}
|
|
|
|
const props = defineProps<TibWikiAbyssProps>();
|
|
|
|
const avatar = ref<TGApp.App.Character.WikiBriefInfo>();
|
|
|
|
const box = computed<TItemBoxData>(() => {
|
|
return {
|
|
bg: `/icon/bg/${avatar.value?.star}-Star.webp`,
|
|
clickable: false,
|
|
display: "outer",
|
|
height: "100px",
|
|
icon: `/WIKI/character/${avatar.value?.id}.webp`,
|
|
innerHeight: 20,
|
|
innerText: (props.modelValue.Rate * 100).toFixed(3) + "%",
|
|
lt:
|
|
avatar.value === undefined
|
|
? ""
|
|
: avatar.value.element !== ""
|
|
? `/icon/element/${avatar.value.element}元素.webp`
|
|
: `/icon/weapon/${avatar.value.weapon}.webp`,
|
|
ltSize: "20px",
|
|
outerHeight: 20,
|
|
outerText: avatar.value?.name ?? "旅行者",
|
|
size: "80px",
|
|
};
|
|
});
|
|
|
|
onMounted(async () => {
|
|
avatar.value = AppCharacterData.find((a) => a.id === props.modelValue.Item);
|
|
});
|
|
</script>
|