💄 调整间距

BTMuli · Aug 17, 2024 · 373ec6a · 373ec6a
1 parent 2f41679
commit 373ec6a
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 195 deletions.
diff --git a/src/components/home/t-pool.vue b/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,

diff --git a/src/components/itembox/tib-abyss-detail.vue b/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`,

diff --git a/src/components/itembox/tib-abyss-overview.vue b/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`,

diff --git a/src/components/itembox/tib-calendar-item.vue b/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,
     };

diff --git a/src/components/itembox/tib-ur-avatar.vue b/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`,

diff --git a/src/components/itembox/tib-wiki-abyss-2.vue b/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",
   };
 });

diff --git a/src/components/itembox/tib-wiki-abyss.vue b/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",

diff --git a/src/components/main/t-itembox.vue b/src/components/main/t-itembox.vue
@@ -161,12 +161,11 @@ const props = defineProps<TItemBoxProps>();
 
 .tib-lt {
   position: absolute;
-  top: 0;
-  left: 0;
+  top: 3%;
+  left: 3%;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 5px;
 }
 
 .tib-lt img {

diff --git a/src/components/userAvatar/tua-avatar-box.vue b/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,26 +46,14 @@
         </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>
 import { computed, onMounted, ref } from "vue";
 
 import TGSqlite from "../../plugins/Sqlite/index.js";
 import { getZhElement } from "../../utils/toolFunc.js";
-
-import TuaItemBox, { TuaItemBoxType } from "./tua-item-box.vue";
+import TItembox, { TItemBoxData } from "../main/t-itembox.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",
-    rtSize: "15px",
+    innerText: "",
+    innerHeight: 0,
+    display: "inner",
     clickable: true,
   };
 });
@@ -145,12 +148,10 @@ onMounted(async () => {
 }
 
 .tua-abt-right {
-  display: flex;
-  width: 85px;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
+  display: grid;
+  padding: 5px;
   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;