fix(移动端): 修复移动端ui视觉问题

Encaik · Sep 14, 2024 · f73a1c9 · f73a1c9 · vercel · Sep 14, 2024
1 parent d0b029a
commit f73a1c9
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 16 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,8 +1,8 @@
-<nz-layout class="h-screen w-screen overflow-hidden">
-  <nz-content class="w-full h-full grid-content overflow-auto">
+<nz-layout class="h-auto sm:h-screen w-screen overflow-hidden">
+  <nz-content class="w-full h-full flex-1 grid-content overflow-auto">
     <app-header class="env" />
-    <app-character class="character overflow-auto" />
-    <div class="main min-w-min overflow-auto p-2 bg-white rounded shadow-md shadow-gray-200">
+    <app-character class="character overflow-hidden sm:overflow-auto" />
+    <div class="main min-w-min min-h-96 sm:min-h-full overflow-hidden sm:overflow-auto p-2 bg-white rounded shadow-md shadow-gray-200">
       <div class="flex flex-col h-full gap-2">
         <nz-segmented
           class="w-full"

diff --git a/src/app/app.component.less b/src/app/app.component.less
@@ -1,14 +1,12 @@
 :host {
   .grid-content {
     display: grid;
-    flex: 1 1 100vh;
     grid-template:
       'env' auto
       'character' auto
       'main' 1fr / auto;
     gap: 8px;
     min-width: 300px;
-    height: 0;
     padding: 12px;
 
   }

diff --git a/src/app/components/init-modal/init-modal.component.html b/src/app/components/init-modal/init-modal.component.html
@@ -5,14 +5,14 @@
 
 <div class="my-4">
   @if (current === 0) {
-    <div class="h-full grid grid-cols-2 sm:grid-cols-4 gap-4 overflow-auto border rounded p-4 bg-slate-100">
+    <div class="h-full grid grid-cols-2 md:grid-cols-4 gap-4 overflow-auto border rounded p-4 bg-slate-100">
       @for (item of characters; track $index) {
         <div
           [ngClass]="[item.baseInfo.gender === '男' ? ' border-blue-300 bg-blue-100' : ' border-red-300 bg-red-100']"
           class="flex flex-col justify-center items-center text-center p-4 rounded cursor-pointer hover:shadow-lg w-full border"
           (click)="onCharacterClick(item)"
         >
-          <nz-descriptions [nzColumn]="2">
+          <nz-descriptions [nzColumn]="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }">
             <nz-descriptions-item nzTitle="姓名" [nzSpan]="2">{{ item.baseInfo.name }}</nz-descriptions-item>
             <nz-descriptions-item nzTitle="性别">{{ item.baseInfo.gender }}</nz-descriptions-item>
             <nz-descriptions-item nzTitle="年龄">{{ item.baseInfo.age }}</nz-descriptions-item>

diff --git a/src/app/layouts/character/character.component.html b/src/app/layouts/character/character.component.html
@@ -1,5 +1,5 @@
 <div class="h-full overflow-auto p-2 bg-white rounded shadow-md shadow-gray-200">
-  <h5 nz-typography class="underline hidden sm:block decoration-sky-500">人物信息</h5>
+  <h5 nz-typography class="underline decoration-sky-500">人物信息</h5>
   <nz-descriptions nzSize="small" [nzColumn]="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 3 }">
     <nz-descriptions-item nzTitle="姓名" [nzSpan]="2">{{ character.baseInfo.name }}</nz-descriptions-item>
     <nz-descriptions-item nzTitle="性别">{{ character.baseInfo.gender }}</nz-descriptions-item>
@@ -10,7 +10,7 @@ <h5 nz-typography class="underline hidden sm:block decoration-sky-500">人物信
       }
     </nz-descriptions-item>
   </nz-descriptions>
-  <h5 nz-typography class="underline hidden sm:block decoration-sky-500">状态信息</h5>
+  <h5 nz-typography class="underline decoration-sky-500">状态信息</h5>
   <nz-descriptions nzSize="small" [nzColumn]="1">
     <nz-descriptions-item nzTitle="当前血量">
       <div class="w-full flex flex-col">
@@ -37,13 +37,13 @@ <h5 nz-typography class="underline hidden sm:block decoration-sky-500">状态信
       </div>
     </nz-descriptions-item>
   </nz-descriptions>
-  <h5 nz-typography class="underline hidden sm:block decoration-sky-500">修炼属性</h5>
-  <nz-descriptions class="hidden sm:block" nzSize="small" [nzColumn]="{ xxl: 1, xl: 1, lg: 1, md: 1, sm: 2, xs: 2 }">
+  <h5 nz-typography class="underline decoration-sky-500">修炼属性</h5>
+  <nz-descriptions nzSize="small" [nzColumn]="{ xxl: 1, xl: 1, lg: 1, md: 1, sm: 2, xs: 2 }">
     <nz-descriptions-item nzTitle="能量">{{ character.levelInfo.energy }}</nz-descriptions-item>
     <nz-descriptions-item nzTitle="境界">{{ getLevelByEnergy() }}</nz-descriptions-item>
   </nz-descriptions>
-  <h5 nz-typography class="underline hidden sm:block decoration-sky-500">战斗属性</h5>
-  <nz-descriptions class="hidden sm:block" nzSize="small" [nzColumn]="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 3 }">
+  <h5 nz-typography class="underline decoration-sky-500">战斗属性</h5>
+  <nz-descriptions nzSize="small" [nzColumn]="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 3 }">
     <nz-descriptions-item nzTitle="生命">{{ character.attrInfo.hp }}</nz-descriptions-item>
     <nz-descriptions-item nzTitle="灵力">{{ character.attrInfo.mp }}</nz-descriptions-item>
     <nz-descriptions-item nzTitle="攻击">{{ character.attrInfo.attack }}</nz-descriptions-item>
@@ -52,8 +52,8 @@ <h5 nz-typography class="underline hidden sm:block decoration-sky-500">战斗属
     <nz-descriptions-item nzTitle="暴击">{{ character.attrInfo.critRate }}%</nz-descriptions-item>
     <nz-descriptions-item nzTitle="爆伤">{{ character.attrInfo.critDamage }}%</nz-descriptions-item>
   </nz-descriptions>
-  <h5 nz-typography class="underline hidden sm:block decoration-sky-500">天资属性</h5>
-  <nz-descriptions class="hidden sm:block" nzSize="small" [nzColumn]="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 3 }">
+  <h5 nz-typography class="underline decoration-sky-500">天资属性</h5>
+  <nz-descriptions nzSize="small" [nzColumn]="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 3 }">
     <nz-descriptions-item nzTitle="生命">{{ character.skillInfo.hp }}</nz-descriptions-item>
     <nz-descriptions-item nzTitle="灵力">{{ character.skillInfo.mp }}</nz-descriptions-item>
     <nz-descriptions-item nzTitle="攻击">{{ character.skillInfo.attack }}</nz-descriptions-item>