💄 调整间距

src/components/home/t-pool.vue

@@ -205,7 +205,7 @@ function getCBox(info: TGApp.App.Character.WikiBriefInfo): TItemBoxData {
     display: "inner",
     clickable: true,
     lt: `/icon/element/${info.element}元素.webp`,
-    ltSize: "25px",
+    ltSize: "20px",
     innerHeight: 20,
     innerIcon: `/icon/weapon/${info.weapon}.webp`,
     innerText: info.name,

src/components/itembox/tib-abyss-detail.vue

@@ -21,7 +21,7 @@ onMounted(async () => {
     box.value = {
       clickable: false,
       height: "70px",
-      ltSize: "25px",
+      ltSize: "20px",
       bg: `/icon/bg/${props.modelValue.star}-Star.webp`,
       icon: `/WIKI/character/${props.modelValue.id}.webp`,
       lt: `/icon/weapon/${res.weapon}.webp`,
@@ -34,7 +34,7 @@ onMounted(async () => {
     box.value = {
       clickable: false,
       height: "70px",
-      ltSize: "25px",
+      ltSize: "20px",
       bg: `/icon/bg/${props.modelValue.star}-Star.webp`,
       icon: `/WIKI/character/${props.modelValue.id}.webp`,
       lt: `/icon/element/${res.element}元素.webp`,

src/components/itembox/tib-abyss-overview.vue

@@ -19,7 +19,7 @@ onMounted(async () => {
   const res = await TGSqlite.getAppCharacter(props.modelValue.id);
   box.value = {
     height: "80px",
-    ltSize: "30px",
+    ltSize: "20px",
     clickable: false,
     bg: `/icon/bg/${props.modelValue.star}-Star.webp`,
     icon: `/WIKI/character/${props.modelValue.id}.webp`,

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

@@ -22,7 +22,7 @@ const box = ref<TItemBoxData>({
   display: "inner",
   clickable: false,
   lt: "",
-  ltSize: "30px",
+  ltSize: "20px",
   innerHeight: 25,
   innerIcon: "",
   innerText: "",
@@ -38,7 +38,7 @@ onMounted(() => {
       display: "inner",
       clickable: props.clickable,
       lt: props.data.elementIcon ?? "",
-      ltSize: "30px",
+      ltSize: "20px",
       innerHeight: 25,
       innerIcon: props.data.weaponIcon,
       innerText: props.data.name,
@@ -52,7 +52,7 @@ onMounted(() => {
       display: "inner",
       clickable: props.clickable,
       lt: props.data.weaponIcon,
-      ltSize: "30px",
+      ltSize: "20px",
       innerHeight: 25,
       innerText: props.data.name,
     };

src/components/itembox/tib-ur-avatar.vue

@@ -26,7 +26,7 @@ onMounted(async () => {
   box.value = {
     size: "80px",
     height: "80px",
-    ltSize: "30px",
+    ltSize: "20px",
     clickable: false,
     bg: `/icon/bg/${props.modelValue.star}-Star.webp`,
     icon: `/WIKI/character/${props.modelValue.id}.webp`,

src/components/itembox/tib-wiki-abyss-2.vue

@@ -39,7 +39,7 @@ const box = computed<TItemBoxData>(() => {
       avatar.value.element !== ""
         ? `/icon/element/${avatar.value.element}元素.webp`
         : `/icon/weapon/${avatar.value.weapon}.webp`,
-    ltSize: "30px",
+    ltSize: "20px",
     size: "80px",
   };
 });

src/components/itembox/tib-wiki-abyss.vue

@@ -36,13 +36,12 @@ const box = computed<TItemBoxData>(() => {
     height: "100px",
     icon: `/WIKI/character/${avatar.value?.id}.webp`,
     innerHeight: 20,
-    // 0.24688451 => 24.688%
     innerText: (props.modelValue.Rate * 100).toFixed(3) + "%",
     lt:
       avatar.value.element !== ""
         ? `/icon/element/${avatar.value.element}元素.webp`
         : `/icon/weapon/${avatar.value.weapon}.webp`,
-    ltSize: "30px",
+    ltSize: "20px",
     outerHeight: 20,
     outerText: avatar.value.name,
     size: "80px",

src/components/main/t-itembox.vue

@@ -161,12 +161,11 @@ const props = defineProps<TItemBoxProps>();
 
 .tib-lt {
   position: absolute;
-  top: 0;
+  top: 3%;
-  left: 0;
+  left: 3%;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 5px;
 }
 
 .tib-lt img {

src/components/userAvatar/tua-avatar-box.vue

@@ -2,9 +2,9 @@
   <div class="tua-ab-box">
     <!-- 左侧角色、武器、天赋、好感、衣装、名片 -->
     <div class="tua-ab-top">
-      <TuaItemBox v-model="avatarBox" />
+      <TItembox v-model="avatarBox" />
       <div class="tua-abt-right">
-        <TuaItemBox v-model="weaponBox" />
+        <TItembox v-model="weaponBox" />
         <div v-for="(relic, index) in relicsBox" :key="index" class="tua-relic-box">
           <div class="tua-relic-bg">
             <img :src="`/icon/bg/${relic.rarity}-Star.webp`" alt="bg" v-if="relic !== false" />
@@ -22,6 +22,17 @@
       </div>
     </div>
     <div class="tua-abl-mid">
+      <div class="tua-abl-bg">
+        <img v-if="nameCard !== false && isFetterMax" :src="nameCard" alt="nameCard" />
+      </div>
+      <div class="tua-abl-skills">
+        <div v-for="skill in skills" :key="skill.skill_id" class="tua-abl-skill">
+          <img :src="skill.icon" alt="skill" />
+          <span>Lv.{{ skill.level }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="tua-abl-bottom">
       <div class="tua-abl-fetter">
         <img src="/icon/material/105.webp" alt="fetter" />
         <span>{{ props.modelValue.avatar.fetter }}</span>
@@ -35,17 +46,6 @@
         </span>
       </div>
     </div>
-    <div class="tua-abl-bottom">
-      <div class="tua-abl-bg">
-        <img v-if="nameCard !== false && isFetterMax" :src="nameCard" alt="nameCard" />
-      </div>
-      <div class="tua-abl-skills">
-        <div v-for="skill in skills" :key="skill.skill_id" class="tua-abl-skill">
-          <img :src="skill.icon" alt="skill" />
-          <span>Lv.{{ skill.level }}</span>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -53,8 +53,7 @@ import { computed, onMounted, ref } from "vue";
 
 import TGSqlite from "../../plugins/Sqlite/index.js";
 import { getZhElement } from "../../utils/toolFunc.js";
-
+import TItembox, { TItemBoxData } from "../main/t-itembox.vue";
-import TuaItemBox, { TuaItemBoxType } from "./tua-item-box.vue";
 
 interface TuaAvatarBoxProps {
   modelValue: TGApp.Sqlite.Character.UserRole;
@@ -65,31 +64,35 @@ const props = defineProps<TuaAvatarBoxProps>();
 type FixedLenArr<T, N extends number> = [T, ...T[]] & { length: N };
 type AvatarRelics = FixedLenArr<TGApp.Game.Avatar.Relic | false, 5>;
 
-const avatarBox = computed<TuaItemBoxType>(() => {
+const avatarBox = computed<TItemBoxData>(() => {
   const avatar = props.modelValue.avatar;
   return {
-    star: avatar.rarity,
-    type: "character",
-    id: avatar.id,
     size: "130px",
+    height: "130px",
+    bg: `/icon/bg/${avatar.rarity}-Star.webp`,
+    icon: `/WIKI/character/${avatar.id}.webp`,
     lt: `/icon/element/${getZhElement(avatar.element)}元素.webp`,
-    ltSize: "30px",
+    ltSize: "20px",
     rt: avatar.actived_constellation_num.toString() || "0",
     rtSize: "20px",
+    innerText: avatar.name,
+    innerHeight: 30,
+    display: "inner",
     clickable: true,
   };
 });
-const weaponBox = computed<TuaItemBoxType>(() => {
+const weaponBox = computed<TItemBoxData>(() => {
   const weapon = props.modelValue.weapon;
   return {
-    star: weapon.rarity,
-    type: "weapon",
-    id: weapon.id,
     size: "40px",
+    height: "40px",
+    bg: `/icon/bg/${weapon.rarity}-Star.webp`,
+    icon: `/WIKI/weapon/${weapon.id}.webp`,
     lt: `/icon/weapon/${weapon.type_name}.webp`,
     ltSize: "15px",
-    rt: weapon.affix_level.toString() || "0",
+    innerText: "",
-    rtSize: "15px",
+    innerHeight: 0,
+    display: "inner",
     clickable: true,
   };
 });
@@ -145,12 +148,10 @@ onMounted(async () => {
 }
 
 .tua-abt-right {
-  display: flex;
+  display: grid;
-  width: 85px;
+  padding: 5px;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
   gap: 5px;
+  grid-template-columns: repeat(2, 40px);
 }
 
 .tua-relic-box {
@@ -198,7 +199,7 @@ onMounted(async () => {
   }
 }
 
-.tua-abl-mid {
+.tua-abl-bottom {
   display: flex;
   width: 100%;
   align-items: center;
@@ -222,7 +223,7 @@ onMounted(async () => {
   }
 }
 
-.tua-abl-bottom {
+.tua-abl-mid {
   position: relative;
   width: 100%;
   height: 80px;
@@ -255,8 +256,6 @@ onMounted(async () => {
 .tua-abl-skills {
   position: relative;
   display: flex;
-  width: 210px;
-  height: 100%;
   align-items: center;
   justify-content: space-between;
   padding: 5px;

src/components/userAvatar/tua-item-box.vue

@@ -1,145 +0,0 @@
-<template>
-  <div
-    class="tua-item-box"
-    :style="{
-      width: modelValue.size,
-      height: modelValue.size,
-      cursor: modelValue.clickable ? 'pointer' : 'default',
-    }"
-  >
-    <div
-      class="tib-bg"
-      :style="{
-        width: modelValue.size,
-        height: modelValue.size,
-      }"
-    >
-      <img :src="`/icon/bg/${props.modelValue.star}-Star.webp`" alt="bg" />
-    </div>
-    <div
-      class="tib-icon"
-      :style="{
-        width: modelValue.size,
-        height: modelValue.size,
-      }"
-    >
-      <img :src="`/WIKI/${props.modelValue.type}/${props.modelValue.id}.webp`" alt="icon" />
-    </div>
-    <div
-      class="tib-cover"
-      :style="{
-        width: modelValue.size,
-        height: modelValue.size,
-      }"
-    >
-      <div
-        class="tib-lt"
-        :style="{
-          width: modelValue.ltSize,
-          height: modelValue.ltSize,
-        }"
-      >
-        <img :src="modelValue.lt" alt="lt" />
-      </div>
-      <div
-        class="tib-rt"
-        :style="{
-          width: modelValue.rtSize,
-          height: modelValue.rtSize,
-        }"
-      >
-        {{ modelValue.rt }}
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-export interface TuaItemBoxType {
-  star: number;
-  type: "character" | "weapon";
-  id: number;
-  size: string;
-  lt: string;
-  ltSize: string;
-  rt: string;
-  rtSize: string;
-  clickable: boolean;
-}
-
-interface TuaItemBoxProps {
-  modelValue: TuaItemBoxType;
-}
-
-const props = defineProps<TuaItemBoxProps>();
-</script>
-<style lang="css" scoped>
-.tua-item-box {
-  position: relative;
-}
-
-.tib-bg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  overflow: hidden;
-  border-radius: 5px;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-}
-
-.tib-icon {
-  position: relative;
-  overflow: hidden;
-  border-radius: 5px;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-}
-
-.tib-cover {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border-radius: 5px;
-}
-
-.tib-lt {
-  position: absolute;
-  top: 3%;
-  left: 3%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-}
-
-.tib-rt {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgb(0 0 0 / 40%);
-  border-bottom-left-radius: 5px;
-  border-top-right-radius: 5px;
-  color: var(--tgc-white-1);
-  font-family: var(--font-title);
-}
-</style>

src/pages/User/Characters.vue

@@ -240,6 +240,6 @@ function selectRole(role: TGApp.Sqlite.Character.UserRole): void {
 .uc-grid {
   display: grid;
   grid-gap: 10px;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
 }
 </style>