mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2026-03-19 04:29:45 +08:00
🎨 优化逻辑
This commit is contained in:
@@ -1,5 +1,10 @@
|
||||
<template>
|
||||
<v-list class="top-nc-box" @click="emit('selected', props.data)" :class="{ grey: isGrey }">
|
||||
<v-list
|
||||
class="top-nc-box"
|
||||
@click="emit('selected', props.data)"
|
||||
:class="{ grey: !props.finish }"
|
||||
:title.attr="props.data.name"
|
||||
>
|
||||
<v-list-item :title="props.data.name">
|
||||
<template #subtitle>
|
||||
<span class="desc" :title="props.data.desc">{{ props.data.desc }}</span>
|
||||
@@ -17,20 +22,18 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from "vue";
|
||||
|
||||
type TopNameCardProps = { data: TGApp.App.NameCard.Item; finish?: boolean };
|
||||
type TopNameCardProps = { data: TGApp.App.NameCard.Item; finish: boolean };
|
||||
type TopNameCardEmits = (e: "selected", v: TGApp.App.NameCard.Item) => void;
|
||||
|
||||
const props = defineProps<TopNameCardProps>();
|
||||
const props = withDefaults(defineProps<TopNameCardProps>(), {
|
||||
finish: true,
|
||||
});
|
||||
const emit = defineEmits<TopNameCardEmits>();
|
||||
|
||||
const bgImage = computed<string>(() => {
|
||||
if (props.data.name === "原神·印象") return "none;";
|
||||
return `url("/WIKI/nameCard/bg/${props.data.name}.webp")`;
|
||||
});
|
||||
const isGrey = computed<boolean>(() => {
|
||||
if (props.finish === undefined) return false;
|
||||
return !props.finish;
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@use "@styles/github.styles.scss" as github-styles;
|
||||
|
||||
Reference in New Issue
Block a user