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

🎨 还差尘歌壶跟大地图探索没写

Browse Source
This commit is contained in:
BTMuli
2023-06-03 01:32:23 +08:00
parent 9f07918b27
commit 8704f513bd
6 changed files with 203 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/main/t-itembox.vue
View File

@@ -25,14 +25,14 @@
<span>{{ modelValue.innerText }}</span>
</slot>
</div>
<div v-if="modelValue.display==='outer'" class="tib-outer">
<slot name="outer-icon">
<img v-show="modelValue.outerIcon" :src="modelValue.outerIcon" alt="outer-icon">
</slot>
<slot name="outer-text">
<span>{{ modelValue.outerText }}</span>
</slot>
</div>
</div>
<div v-if="modelValue.display==='outer'" class="tib-outer">
<slot name="outer-icon">
<img v-show="modelValue.outerIcon" :src="modelValue.outerIcon" alt="outer-icon">
</slot>
<slot name="outer-text">
<span>{{ modelValue.outerText }}</span>
</slot>
</div>
</div>
</template>
@@ -147,6 +147,22 @@ const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
object-fit: cover;
}
.tib-rt {
position: absolute;
top: 0;
right: 0;
width: v-bind(props["modelValue"]["rtSize"]);
height: v-bind(props["modelValue"]["rtSize"]);
background: rgb(0 0 0 / 50%);
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
font-family: Genshin, serif;
color: #faf7e8;
}
.tib-inner {
position: absolute;
bottom: 0;
@@ -187,4 +203,10 @@ const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
font-size: v-bind(getOuterFont);
text-shadow: 0 0 5px #000;
}
.tib-outer img {
width: v-bind(getOuterHeight);
height: v-bind(getOuterHeight);
margin-right: 5px;
}
</style>