mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-12 09:18:14 +08:00
96 lines
2.2 KiB
Vue
96 lines
2.2 KiB
Vue
<template>
|
|
<div class="duc-dr-box">
|
|
<div class="duc-dr-bg">
|
|
<img :src="`/icon/relic/${props.pos}.webp`" alt="relic" />
|
|
</div>
|
|
<div v-if="props.modelValue" class="duc-dr-bg">
|
|
<img :src="`/icon/bg/${props.modelValue.rarity}-Star.webp`" alt="bg" />
|
|
</div>
|
|
<div v-if="props.modelValue" class="duc-dr-icon">
|
|
<TMiImg :ori="true" :src="props.modelValue.icon" alt="relic" />
|
|
</div>
|
|
<div v-if="props.modelValue !== false" class="duc-dr-level">
|
|
{{ props.modelValue.level }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import TMiImg from "@comp/app/t-mi-img.vue";
|
|
import { computed } from "vue";
|
|
|
|
type ducDetailRelicProps = { modelValue: TGApp.Game.Avatar.Relic | false; pos: number };
|
|
|
|
const props = defineProps<ducDetailRelicProps>();
|
|
const relicBg = computed<string>(() => {
|
|
if (props.modelValue === false) return "transparent";
|
|
if (props.modelValue.rarity === 0 || props.modelValue.rarity === 1) return "var(--tgc-od-white)";
|
|
if (props.modelValue.rarity === 2) return "var(--tgc-od-green)";
|
|
if (props.modelValue.rarity === 3) return "var(--tgc-od-blue)";
|
|
if (props.modelValue.rarity === 4) return "var(--tgc-od-purple)";
|
|
if (props.modelValue.rarity === 5) return "var(--tgc-od-orange)";
|
|
return "var(--tgc-od-red)";
|
|
});
|
|
</script>
|
|
<style lang="css" scoped>
|
|
.duc-dr-box {
|
|
position: relative;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
background: rgb(50 56 68/50%);
|
|
}
|
|
|
|
.duc-dr-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.duc-dr-bg:nth-child(1) {
|
|
padding: 5px;
|
|
}
|
|
|
|
.duc-dr-bg img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.duc-dr-icon {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.duc-dr-icon img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.duc-dr-level {
|
|
position: absolute;
|
|
right: -4px;
|
|
bottom: -4px;
|
|
display: flex;
|
|
width: 24px;
|
|
height: 24px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 2px solid var(--tgc-od-red);
|
|
border-radius: 50%;
|
|
background: v-bind(relicBg);
|
|
color: var(--tgc-white-1);
|
|
font-family: var(--font-title);
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
}
|
|
</style>
|