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

💄 调整默认样式，高度对齐

Browse Source
This commit is contained in:
BTMuli
2025-12-19 17:47:52 +08:00
parent 00c69d1763
commit 329a39011c
1 changed files with 46 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/components/app/t-itemBox.vue
View File

@@ -7,7 +7,7 @@
<slot name="icon"><img :src="props.modelValue.icon" alt="icon" /></slot>
</div>
<div class="tib-cover">
<div class="tib-lt" v-show="props.modelValue.lt !== ''">
<div v-show="props.modelValue.lt !== ''" class="tib-lt">
<img :src="props.modelValue.lt" alt="lt" />
</div>
<div v-show="props.modelValue.rt" class="tib-rt">{{ props.modelValue.rt }}</div>
@@ -54,7 +54,7 @@ type TItemBoxProps = { modelValue: TItemBoxData };
const props = defineProps<TItemBoxProps>();
</script>
<style lang="css" scoped>
<style lang="scss" scoped>
.tib-box {
position: relative;
width: v-bind("props.modelValue.size");
@@ -64,39 +64,43 @@ const props = defineProps<TItemBoxProps>();
.tib-bg {
position: absolute;
z-index: 0;
top: 0;
left: 0;
overflow: hidden;
width: v-bind("props.modelValue.size");
height: v-bind("props.modelValue.size");
border-radius: 4px;
}
.tib-bg img {
width: 100%;
height: 100%;
object-fit: cover;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.tib-icon {
position: relative;
z-index: 1;
overflow: hidden;
width: v-bind("props.modelValue.size");
height: v-bind("props.modelValue.size");
border-radius: 4px;
}
.tib-icon img {
width: 100%;
height: 100%;
object-fit: cover;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.tib-cover {
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: flex;
overflow: hidden;
width: v-bind("props.modelValue.size");
height: v-bind("props.modelValue.size");
flex-direction: column;
@@ -114,12 +118,12 @@ const props = defineProps<TItemBoxProps>();
height: v-bind("props.modelValue.ltSize");
align-items: center;
justify-content: center;
}
.tib-lt img {
width: 100%;
height: 100%;
object-fit: cover;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.tib-rt {
@@ -143,33 +147,38 @@ const props = defineProps<TItemBoxProps>();
bottom: 0;
left: 0;
display: flex;
overflow: hidden;
width: 100%;
height: v-bind("props.modelValue.innerHeight ?? 0") px;
height: v-bind("`${props.modelValue.innerHeight ?? 0}px`");
flex-grow: 1;
flex-shrink: 0;
align-items: center;
align-items: stretch;
justify-content: center;
border-radius: 0 0 4px 4px;
-webkit-backdrop-filter: blur(v-bind("props.modelValue.innerBlur ?? 0"));
backdrop-filter: blur(v-bind("props.modelValue.innerBlur ?? 0"));
background: #14141466;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background: #14141480;
color: var(--tgc-white-1);
font-family: var(--font-title);
font-size: v-bind("((props.modelValue.innerHeight ?? 0) / 2).toString() + 'px'");
}
font-size: v-bind("`${(props.modelValue.innerHeight ?? 0)/2}px`");
line-height: v-bind(
"props.modelValue.innerHeight ? `${props.modelValue.innerHeight}px` : 'auto'"
);
.tib-inner img {
width: v-bind("(props.modelValue.innerHeight ?? 0).toString() + 'px'");
height: v-bind("(props.modelValue.innerHeight ?? 0).toString() + 'px'");
padding: 1px;
}
img {
position: relative;
box-sizing: border-box;
flex-shrink: 0;
padding: 1%;
aspect-ratio: 1;
}
.tib-inner span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
}
}
.tib-outer {
@@ -177,11 +186,12 @@ const props = defineProps<TItemBoxProps>();
bottom: 0;
display: flex;
width: 100%;
height: v-bind("(props.modelValue.outerHeight ?? 0).toString() + 'px'");
height: v-bind("`${props.modelValue.outerHeight ?? 0}px`");
align-items: center;
justify-content: center;
color: var(--common-text-title);
font-size: v-bind("((props.modelValue.outerHeight ?? 0)/2).toString() + 'px'");
font-size: v-bind("`${(props.modelValue.outerHeight ?? 0)/2}px`");
line-height: v-bind("`${(props.modelValue.outerHeight ?? 0)/2}px`");
text-align: center;
}
</style>