Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-20 10:33:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

🌱 角色详情页 overlay 草创

Browse Source
This commit is contained in:
BTMuli
2023-06-16 23:31:53 +08:00
parent 0d7ed8d239
commit 0a34f4e483
7 changed files with 532 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/userCharacter/tuc-detail-itembox.vue Normal file
View File

@@ -0,0 +1,53 @@
<template>
<div class="tuc-dib-box">
<div v-if="modelValue.bg" class="tuc-dib-bg">
<img :src="modelValue.bg" alt="bg">
</div>
<div v-if="modelValue.icon" class="tuc-dib-icon">
<img :src="modelValue.icon" alt="icon">
</div>
</div>
</template>
<script lang="ts" setup>
interface TucDetailItemBoxProps {
modelValue: {
icon?: string,
bg?: string,
};
}
defineProps<TucDetailItemBoxProps>();
</script>
<style lang="css" scoped>
.tuc-dib-box {
width: 60px;
height: 60px;
border-radius: 5px;
position: relative;
}
.tuc-dib-bg {
position: absolute;
width: 100%;
height: 100%;
}
.tuc-dib-bg img {
width: 100%;
height: 100%;
border-radius: 5px;
}
.tuc-dib-icon {
position: absolute;
width: 100%;
height: 100%;
}
.tuc-dib-icon img {
width: 100%;
height: 100%;
border-radius: 5px;
}
</style>