💄 调整间距

2025-12-12 09:18:14 +08:00 · 2024-08-17 12:49:05 +08:00
parent 2f41679546
commit 373ec6a9dd
11 changed files with 47 additions and 195 deletions
--- 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,
--- 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`,
--- 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`,
--- 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,
    };
--- 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`,
--- 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",
  };
 });
--- 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",
--- 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 {
--- 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,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 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;
--- a/src/components/userAvatar/tua-item-box.vue
+++ b/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>
--- a/src/pages/User/Characters.vue
+++ b/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>