From 83ddadd4516d63a79419851449f1731ddfb0abdd Mon Sep 17 00:00:00 2001
From: BTMuli <bt-muli@outlook.com>
Date: Thu, 26 Feb 2026 17:27:53 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20UI=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#221
---
 src/components/pageWiki/twc-character.vue | 28 +++++++++++------------
 src/pages/WIKI/Character.vue              |  5 ++--
 src/pages/WIKI/Weapon.vue                 |  6 +++--
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/components/pageWiki/twc-character.vue b/src/components/pageWiki/twc-character.vue
index 2e9fdcee..cf27e391 100644
--- a/src/components/pageWiki/twc-character.vue
+++ b/src/components/pageWiki/twc-character.vue
@@ -18,7 +18,7 @@
           </div>
           <div class="twc-bi-desc">{{ data.description }}</div>
         </div>
-        <div class="twc-bi-grid1">
+        <div class="twc-bi-grid">
           <div class="twc-big-item">
             <span>{{ data.elePrefix }}</span>
             <span>{{ data.element }}</span>
@@ -40,7 +40,7 @@
             <span>{{ data.brief.birth }}</span>
           </div>
         </div>
-        <div class="twc-bi-grid2">
+        <div class="twc-bi-grid">
           <div class="twc-big-item">
             <span>汉语CV</span>
             <span>{{ data.brief.cv.cn }}</span>
@@ -182,7 +182,7 @@ async function toBirth(date: string): Promise<void> {
   await router.push({ name: "留影叙佳期", params: { date: birth } });
 }
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
 :deep(.v-expansion-panel-title) {
   background: var(--common-shadow-1);
 }
@@ -191,7 +191,7 @@ async function toBirth(date: string): Promise<void> {
   display: flex;
   flex-direction: column;
   margin: 0 auto;
-  row-gap: 10px;
+  row-gap: 8px;
 }
 
 .twc-brief {
@@ -201,7 +201,9 @@ async function toBirth(date: string): Promise<void> {
 }
 
 .twc-brief-info {
+  position: relative;
   display: flex;
+  width: 100%;
   flex-direction: column;
   justify-content: space-between;
 }
@@ -212,8 +214,10 @@ async function toBirth(date: string): Promise<void> {
 }
 
 .twc-bi-title {
+  position: relative;
   display: flex;
   width: fit-content;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   color: var(--common-text-title);
@@ -240,16 +244,12 @@ async function toBirth(date: string): Promise<void> {
   opacity: 0.8;
 }
 
-.twc-bi-grid1 {
-  display: grid;
-  column-gap: 10px;
-  grid-template-columns: repeat(4, 1fr);
-}
-
-.twc-bi-grid2 {
-  display: grid;
-  column-gap: 10px;
-  grid-template-columns: repeat(2, 1fr);
+.twc-bi-grid {
+  position: relative;
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  column-gap: 16px;
 }
 
 .twc-big-item {
diff --git a/src/pages/WIKI/Character.vue b/src/pages/WIKI/Character.vue
index acc9bd3c..095e8dc8 100644
--- a/src/pages/WIKI/Character.vue
+++ b/src/pages/WIKI/Character.vue
@@ -139,7 +139,7 @@ async function toOuter(item?: TGApp.App.Character.WikiBriefInfo): Promise<void>
 .wc-left {
   position: relative;
   display: flex;
-  width: fit-content;
+  flex: 3;
   flex-direction: column;
   flex-shrink: 0;
   gap: 8px;
@@ -169,13 +169,14 @@ async function toOuter(item?: TGApp.App.Character.WikiBriefInfo): Promise<void>
   width: 100%;
   padding-right: 8px;
   gap: 8px;
-  grid-template-columns: repeat(3, 160px);
+  grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
 }
 
 .wc-detail {
   position: relative;
   width: 100%;
   box-sizing: border-box;
+  flex: 5;
   padding: 8px;
   border-radius: 4px;
   box-shadow: 0 0 4px var(--common-shadow-2);
diff --git a/src/pages/WIKI/Weapon.vue b/src/pages/WIKI/Weapon.vue
index 018e8346..12609ae5 100644
--- a/src/pages/WIKI/Weapon.vue
+++ b/src/pages/WIKI/Weapon.vue
@@ -117,8 +117,9 @@ async function toOuter(item?: TGApp.App.Weapon.WikiBriefInfo): Promise<void> {
 }
 
 .ww-left {
+  position: relative;
   display: flex;
-  width: fit-content;
+  flex: 3;
   flex-direction: column;
   flex-shrink: 0;
   gap: 8px;
@@ -148,13 +149,14 @@ async function toOuter(item?: TGApp.App.Weapon.WikiBriefInfo): Promise<void> {
   width: 100%;
   padding-right: 8px;
   gap: 8px;
-  grid-template-columns: repeat(3, 160px);
+  grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
 }
 
 .ww-detail {
   position: relative;
   width: 100%;
   box-sizing: border-box;
+  flex: 5;
   padding: 8px;
   border-radius: 4px;
   box-shadow: 0 0 4px var(--common-shadow-2);