mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2026-04-15 21:03:29 +08:00
50 lines
1.3 KiB
Vue
50 lines
1.3 KiB
Vue
<template>
|
|
<v-list class="top-nc-box" @click="emit('selected', props.data)">
|
|
<v-list-item :title="props.data.name">
|
|
<template #subtitle>
|
|
<span class="desc" :title="props.data.desc">{{ props.data.desc }}</span>
|
|
</template>
|
|
<template #prepend>
|
|
<v-img
|
|
width="80px"
|
|
style="margin-right: 10px"
|
|
:src="`/WIKI/nameCard/icon/${props.data.name}.webp`"
|
|
/>
|
|
</template>
|
|
</v-list-item>
|
|
</v-list>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { computed } from "vue";
|
|
|
|
type TopNameCardProps = { data: TGApp.App.NameCard.Item };
|
|
type TopNameCardEmits = (e: "selected", v: TGApp.App.NameCard.Item) => void;
|
|
|
|
const props = defineProps<TopNameCardProps>();
|
|
const emit = defineEmits<TopNameCardEmits>();
|
|
|
|
const bgImage = computed<string>(() => {
|
|
if (props.data.name === "原神·印象") return "none;";
|
|
return `url("/WIKI/nameCard/bg/${props.data.name}.webp")`;
|
|
});
|
|
</script>
|
|
<style lang="css" scoped>
|
|
.top-nc-box {
|
|
width: 100%;
|
|
height: 80px;
|
|
border: 1px solid var(--common-shadow-2);
|
|
border-radius: 10px 50px 50px 10px;
|
|
margin-bottom: 10px;
|
|
background-color: var(--box-bg-1);
|
|
background-image: v-bind(bgImage);
|
|
background-position: right;
|
|
background-repeat: no-repeat;
|
|
cursor: pointer;
|
|
font-family: var(--font-title);
|
|
}
|
|
|
|
.desc {
|
|
text-shadow: 1px 1px 1px #222;
|
|
}
|
|
</style>
|