💄 UI适配

#221

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 {

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);

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);