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

💄 组件样式变更

Browse Source
This commit is contained in:
BTMuli
2023-06-17 22:14:41 +08:00
parent 486109b899
commit da300ac24b
1 changed files with 7 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,7 +17,7 @@
<div v-show="modelValue.rt" class="tib-rt"> <div v-show="modelValue.rt" class="tib-rt">
{{ modelValue.rt }} {{ modelValue.rt }}
</div> </div>
<div v-if="modelValue.display==='inner'" class="tib-inner"> <div class="tib-inner">
<slot name="inner-icon"> <slot name="inner-icon">
<img v-show="modelValue.innerIcon" :src="modelValue.innerIcon" alt="inner-icon"> <img v-show="modelValue.innerIcon" :src="modelValue.innerIcon" alt="inner-icon">
</slot> </slot>
@@ -27,9 +27,6 @@
</div> </div>
</div> </div>
<div v-if="modelValue.display==='outer'" class="tib-outer"> <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"> <slot name="outer-text">
<span>{{ modelValue.outerText }}</span> <span>{{ modelValue.outerText }}</span>
</slot> </slot>
@@ -51,9 +48,8 @@ export interface TItemBoxData {
rtSize?: string, rtSize?: string,
innerHeight?: number, innerHeight?: number,
innerIcon?: string, innerIcon?: string,
innerText?: string, innerText: string,
outerHeight?: number, outerHeight?: number,
outerIcon?: string,
outerText?: string, outerText?: string,
} }
@@ -68,6 +64,7 @@ const props = withDefaults(defineProps<TItemBoxProps>(), {
lt: "", lt: "",
ltSize: "30px", ltSize: "30px",
display: "inner", display: "inner",
innerText: "",
size: "80px", size: "80px",
height: "80px", height: "80px",
}, },
@@ -83,7 +80,6 @@ const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
position: relative; position: relative;
width: v-bind(props["modelValue"]["size"]); width: v-bind(props["modelValue"]["size"]);
height: v-bind(props["modelValue"]["height"]); height: v-bind(props["modelValue"]["height"]);
cursor: pointer;
} }
.tib-bg { .tib-bg {
@@ -153,7 +149,7 @@ const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
right: 0; right: 0;
width: v-bind(props["modelValue"]["rtSize"]); width: v-bind(props["modelValue"]["rtSize"]);
height: v-bind(props["modelValue"]["rtSize"]); height: v-bind(props["modelValue"]["rtSize"]);
background: rgb(0 0 0 / 50%); background: rgb(0 0 0 / 40%);
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
display: flex; display: flex;
@@ -172,7 +168,7 @@ const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: rgb(20 20 20 / 50%); background: rgb(20 20 20 / 40%);
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
color: var(--common-color-white); color: var(--common-color-white);
@@ -189,22 +185,10 @@ const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
.tib-outer { .tib-outer {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
width: 100%; width: 100%;
height: v-bind(getOuterHeight); height: v-bind(getOuterHeight);
background: rgb(0 0 0/ 20%); text-align: center;
display: flex; color: var(--common-text);
justify-content: center;
align-items: center;
font-family: Genshin, serif;
color: var(--common-color-white);
font-size: v-bind(getOuterFont); font-size: v-bind(getOuterFont);
} }
.tib-outer img {
width: v-bind(getOuterHeight);
height: v-bind(getOuterHeight);
margin-right: 5px;
}
</style> </style>