From 329a39011c154c20b493ffb0860bad5009a1b140 Mon Sep 17 00:00:00 2001
From: BTMuli <bt-muli@outlook.com>
Date: Fri, 19 Dec 2025 17:47:52 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E8=B0=83=E6=95=B4=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E6=A0=B7=E5=BC=8F=EF=BC=8C=E9=AB=98=E5=BA=A6=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/app/t-itemBox.vue | 82 ++++++++++++++++++--------------
 1 file changed, 46 insertions(+), 36 deletions(-)

diff --git a/src/components/app/t-itemBox.vue b/src/components/app/t-itemBox.vue
index a22eeefa..7ca918cb 100644
--- a/src/components/app/t-itemBox.vue
+++ b/src/components/app/t-itemBox.vue
@@ -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>