Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-18 10:18:14 +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

55
src/components/userCharacter/tuc-detail-constellation.vue Normal file
View File

@@ -0,0 +1,55 @@
<template>
<div class="tuc-dc-box">
<div v-if="!modelValue.active" class="tuc-dc-lock">
<v-icon color="white">
mdi-lock
</v-icon>
</div>
<div class="tuc-dc-icon">
<img :src="modelValue.icon" alt="constellation">
</div>
</div>
</template>
<script lang="ts" setup>
interface TucDetailConstellationProps {
modelValue: TGApp.Sqlite.Character.RoleConstellation
}
defineProps<TucDetailConstellationProps>();
</script>
<style lang="css" scoped>
.tuc-dc-box {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.tuc-dc-lock {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgb(0 0 0 / 50%);
display: flex;
justify-content: center;
align-items: center;
}
.tuc-dc-icon {
width: 50px;
height: 50px;
border-radius: 50%;
padding: 5px;
background: rgb(0 0 0/ 20%);
}
.tuc-dc-icon img {
width: 100%;
height: 100%;
border-radius: 50%;
}
</style>