♻️ 代码精简

src/components/home/t-calendar.vue

@@ -5,7 +5,6 @@
         <v-icon size="small"> mdi-calendar-clock</v-icon>
         <span>今日素材</span>
         <span>{{ dateNow }}</span>
-        <!-- todo 添加剩余刷新时间 -->
       </div>
       <div class="calendar-title-mid">
         <v-btn

src/components/itembox/tib-calendar-material.vue

@@ -1,25 +1,82 @@
 <template>
-  <TItemBox2 v-model="box" />
+  <div class="tcm-box">
+    <div class="tcm-left">
+      <div class="tcm-bg">
+        <img :src="props.item.bg" alt="bg" />
+      </div>
+      <div class="tcm-icon">
+        <img :src="props.item.icon" alt="icon" />
+      </div>
+      <div class="tcm-star">
+        <img :src="props.item.starIcon" alt="element" />
+      </div>
+    </div>
+    <div class="tcm-right">
+      {{ props.item.name }}
+    </div>
+  </div>
 </template>
 <script lang="ts" setup>
-// vue
-import { computed } from "vue";
-import TItemBox2 from "../main/t-itembox-2.vue";
-// types
-import type { TItemBox2Data } from "../main/t-itembox-2.vue";
-
 interface TMiniWeaponProps {
   item: TGApp.App.Calendar.Material;
 }
+
 const props = defineProps<TMiniWeaponProps>();
-const box = computed<TItemBox2Data>(() => {
-  return {
-    bg: props.item.bg,
-    icon: props.item.icon,
-    star: props.item.starIcon,
-    width: "150px",
-    height: "45px",
-    name: props.item.name,
-  };
-});
 </script>
+<style lang="css" scoped>
+.tcm-box {
+  position: relative;
+  display: flex;
+  width: 180px;
+  height: 45px;
+  border: 1px solid var(--common-shadow-1);
+  border-radius: 5px;
+  background: var(--box-bg-1);
+  gap: 10px;
+}
+
+.tcm-left {
+  width: 45px;
+  height: 45px;
+  border-bottom-left-radius: 5px;
+  border-top-left-radius: 5px;
+}
+
+.tcm-bg,
+.tcm-icon {
+  position: absolute;
+  top: 0;
+  width: 45px;
+  height: 45px;
+  border-bottom-left-radius: 5px;
+  border-top-left-radius: 5px;
+}
+
+.tcm-bg img,
+.tcm-icon img {
+  width: 100%;
+  height: 100%;
+  border-bottom-left-radius: 5px;
+  border-top-left-radius: 5px;
+  object-fit: cover;
+}
+
+.tcm-star {
+  position: absolute;
+  bottom: -8px;
+  width: 45px;
+  height: auto;
+}
+
+.tcm-star img {
+  width: 100%;
+}
+
+.tcm-right {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--box-text-2);
+  font-size: 14px;
+}
+</style>

src/components/overlay/to-calendar.vue

@@ -3,13 +3,11 @@
     <div class="toc-box">
       <div class="box-div">
         <div class="toc-top">
-          <div class="toc-icon" style="cursor: default">
-            <TibCalendarItem
-              :model="itemType"
-              :data="<TGApp.App.Calendar.Item>itemVal"
-              :clickable="false"
-            />
-          </div>
+          <TibCalendarItem
+            :model="itemType"
+            :data="<TGApp.App.Calendar.Item>itemVal"
+            :clickable="false"
+          />
           <div class="toc-material-grid">
             <TibCalendarMaterial
               v-for="(item, index) in itemVal.materials"
@@ -25,12 +23,7 @@
             <img :src="`/icon/nation/${itemVal.source.area}.webp`" alt="icon" />
             <div class="toc-src-text">{{ itemVal.source.area }} - {{ itemVal.source.name }}</div>
           </div>
-          <v-btn variant="outlined" @click="toDetail(itemVal)">
-            <template #append>
-              <img src="../../assets/icons/arrow-right.svg" alt="right" class="toc-btn-img" />
-            </template>
-            详情
-          </v-btn>
+          <v-btn variant="outlined" @click="toDetail(itemVal)">详情</v-btn>
         </div>
       </div>
       <div class="close-div">
@@ -97,34 +90,33 @@ function toDetail(item: TGApp.App.Calendar.Item): void {
 <style scoped>
 /* overlay 盒子 */
 .toc-box {
-  width: 440px;
-  height: 260px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
 }
 
 .box-div {
-  height: 200px;
-  align-items: center;
+  display: flex;
+  width: 500px;
+  flex-direction: column;
   padding: 10px;
   border-radius: 5px;
-  background: rgb(255 255 255 / 30%);
-  color: #faf7e8;
+  background-color: var(--app-page-bg);
+  gap: 10px;
 }
 
 .toc-top {
   display: flex;
-  width: 100%;
-  height: 100px;
-}
-
-.toc-icon {
-  width: 100px;
-  height: 100px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
 }
 
 .toc-material-grid {
   display: grid;
-  margin-left: 10px;
-  font-family: Genshin, serif;
+  font-family: var(--font-title);
   grid-gap: 10px;
   grid-template-columns: repeat(2, 1fr);
 }
@@ -136,41 +128,38 @@ function toDetail(item: TGApp.App.Calendar.Item): void {
 
 .toc-bottom {
   display: flex;
-  width: 420px;
   align-items: center;
   justify-content: space-between;
-  padding: 3px 10px;
+  padding-right: 10px;
+  padding-left: 10px;
+  border: 1px solid var(--common-shadow-1);
   border-radius: 5px;
-  background: rgb(0 0 0 / 30%);
-}
-
-.toc-bottom img {
-  width: 50px;
-  height: 50px;
+  background: var(--box-bg-1);
 }
 
 .toc-src-box {
   display: flex;
-  width: 300px;
-  height: 50px;
   align-items: center;
-  justify-content: left;
+  justify-content: flex-start;
+}
+
+.toc-src-box :nth-child(2) {
+  height: 30px;
+  border-radius: 50%;
+  margin: 5px;
+  aspect-ratio: 1;
+  background: var(--common-shadow-4);
 }
 
 .toc-src-text {
   display: flex;
   height: 50px;
   align-items: center;
   justify-content: center;
-  font-family: Genshin-Light, serif;
+  font-family: var(--font-title);
   font-size: 20px;
 }
 
-.toc-btn-img {
-  width: 18px !important;
-  height: 18px !important;
-}
-
 .close-div {
   display: flex;
   width: 100%;
@@ -185,9 +174,10 @@ function toDetail(item: TGApp.App.Calendar.Item): void {
   height: 30px;
   align-items: center;
   justify-content: center;
+  border: 1px solid var(--common-shadow-2);
   border-radius: 50%;
-  background: rgb(255 255 255 / 30%);
-  color: #faf7e8;
+  background: var(--app-page-bg);
+  color: var(--tgc-yellow-1);
   cursor: pointer;
 }
 </style>