Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-15 09:48:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

💄 调整衣装样式

Browse Source
This commit is contained in:
目棃
2024-08-25 10:26:57 +08:00
parent a6141749df
commit e5a227032f
1 changed files with 36 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/userAvatarOld/tuc-detail-old.vue
View File

@@ -1,16 +1,6 @@
<template> <template>
<div class="tuc-do-box"> <div class="tuc-do-box">
<img :src="bg" alt="role" class="tuc-do-bg" /> <img :src="bg" alt="role" class="tuc-do-bg" />
<div v-if="props.modelValue.costumes.length > 0" class="tuc-do-costume">
<v-switch v-model="showCostumeSwitch" color="#fb7299" @click="switchBg">
<template #label>
<v-icon>mdi-tshirt-crew-outline</v-icon>
</template>
</v-switch>
</div>
<div v-if="showCostumeSwitch" class="tuc-do-costume-name">
{{ props.modelValue.costumes[0].name }}
</div>
<div class="tuc-do-show"> <div class="tuc-do-show">
<div class="tuc-do-main"> <div class="tuc-do-main">
<div class="tuc-do-left"> <div class="tuc-do-left">
@@ -34,7 +24,6 @@
<TucDetailRelic :model-value="item" :pos="index + 1" /> <TucDetailRelic :model-value="item" :pos="index + 1" />
</div> </div>
</div> </div>
<!-- 右侧环状排列6个命座 -->
<div class="tuc-do-right"> <div class="tuc-do-right">
<div class="tuc-dor-box"> <div class="tuc-dor-box">
<TucDetailConstellation <TucDetailConstellation
@@ -49,8 +38,23 @@
/> />
</div> </div>
</div> </div>
<div v-if="props.modelValue.costumes.length > 0" class="tuc-do-costume">
<v-switch
density="compact"
hide-details
v-model="showCostumeSwitch"
color="#fb7299"
@click="switchBg"
>
<template #label>
<v-icon>mdi-tshirt-crew-outline</v-icon>
</template>
</v-switch>
</div>
<div v-if="showCostumeSwitch" class="tuc-do-costume-name">
{{ props.modelValue.costumes[0].name }}
</div>
</div> </div>
<!-- 底部说明 -->
<div class="tuc-do-bottom"> <div class="tuc-do-bottom">
<TucDetailDescWeapon <TucDetailDescWeapon
v-if="selected.type === '武器'" v-if="selected.type === '武器'"
@@ -200,24 +204,33 @@ function switchBg(): void {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
top: 5px; top: 5px;
right: 10px; right: 5px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
border-radius: 5px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: var(--common-shadow-2);
color: var(--tgc-pink-1); color: var(--tgc-pink-1);
} }
.tuc-do-costume-name { .tuc-do-costume-name {
position: absolute; position: absolute;
top: 10px; right: 10px;
left: calc(50% - 80px); bottom: 10px;
width: 160px; display: flex;
align-items: center;
justify-content: center;
padding: 0 5px;
border-radius: 5px; border-radius: 5px;
-webkit-backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(5px); backdrop-filter: blur(10px);
background: var(--tgc-white-1); background: var(--common-shadow-2);
color: var(--tgc-yellow-1); color: var(--tgc-yellow-1);
font-family: var(--font-text); font-family: var(--font-title);
font-size: 16px; text-shadow: 0 0 5px var(--tgc-dark-1);
opacity: 0.8;
text-align: center;
} }
.tuc-do-show { .tuc-do-show {