Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2026-03-19 04:29:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

💄 添加背景以提升可见度

Browse Source
This commit is contained in:
BTMuli
2025-12-08 23:13:28 +08:00
parent 7008aa5604
commit a44bf0f5ba
1 changed files with 19 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/userGacha/gbr-data-line.vue
View File

@@ -3,7 +3,8 @@
<div class="gbr-dl-box">
<div class="gbr-dl-progress" />
<div class="gbr-dl-icon">
<img :alt="props.data.name" :src="getIcon()" />
<img :src="`/icon/bg/${props.data.rank}-BGC.webp`" alt="bg" class="bg" />
<img :alt="props.data.name" :src="getIcon()" class="icon" />
</div>
<div class="gbr-dl-base">
<div class="gbr-dl-name">{{ props.data.name }}</div>
@@ -81,14 +82,30 @@ const progressWidth = computed<string>(() => {
}
.gbr-dl-icon {
position: relative;
display: flex;
overflow: hidden;
width: 32px;
height: 32px;
box-sizing: border-box;
flex-shrink: 0;
align-items: center;
justify-content: center;
padding: 2px;
border-radius: 4px;
img {
.bg {
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.icon {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
}