Przeglądaj źródła

🎨 按要求优化适老,灰色文字修改,字号加大

快乐的梦鱼 4 tygodni temu
rodzic
commit
d1811c2fb3

+ 1 - 0
src/App.vue

@@ -4,6 +4,7 @@
     :theme="{
       token: {
         colorPrimary: '#bd4b36',
+        fontSize: 18,
       },
     }"
     :componentSize="'large'"

+ 20 - 1
src/assets/scss/fix.scss

@@ -22,11 +22,30 @@
 
  .ant-form-item-label > label {
   font-weight: 600;
-  font-size: 16px;
+  font-size: 1rem;
   line-height: 24px;
  }
 }
 
+.ant-input[disabled] {
+  color: #000000!important;
+}
+.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector {
+  color: #000000!important;
+}
+.ant-picker .ant-picker-input >input-disabled, .ant-picker .ant-picker-input >input[disabled] {
+  color: #000000!important;
+}
+.ant-input-number-disabled .ant-input-number-input, .ant-input-number-readonly .ant-input-number-input {
+  color: #000000!important;
+}
+.ant-radio-wrapper-disabled {
+  color: #000000!important;
+}
+.ant-checkbox-disabled+span {
+  color: #000000!important;
+}
+
 .ant-list.light-round {
   padding: 0.4rem;
 

+ 1 - 1
src/assets/scss/main.scss

@@ -8,7 +8,7 @@
 
 body,
 html {
-  font-size: 16px;
+  font-size: 20px;
   font-weight: normal;  
   margin: 0;
   padding: 0;

+ 35 - 19
src/components/NavBar.vue

@@ -31,10 +31,9 @@
       scrollValue > 200 ? 'nav-scrolled' : 'nav-not-scrolled',
     ]"
   >
-    <div></div>
-    <div class="group">
+    <div class="nav-box nav-left">
     </div>
-    <div class="group center">
+    <div class="nav-box nav-center">
       <div class="headerlogos">
         <img class="main-clickable" src="@/assets/images/LogoIcon.png" @click="goIndex" />
         <div>
@@ -42,22 +41,21 @@
         </div>
       </div>
     </div>
-    <div class="group">
+    <div class="nav-box nav-right">
+      <a-dropdown v-if="authStore.isLogged" :trigger="['click']">
+        <div class="flex flex-row items-center gap-2 cursor-pointer">
+          <span>{{ authStore.userInfo?.nickname || '请登录' }}</span>
+          <a-image :src="IconUser" class="right-button" :preview="false" />
+        </div>
+        <template #overlay>
+          <a-menu>
+            <a-menu-item key="2" @click="router.push('/change-password')">修改密码</a-menu-item>
+            <a-menu-item key="3" @click="logout">退出登录</a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+      <div v-else></div>
     </div>
-    
-    <a-dropdown v-if="authStore.isLogged" :trigger="['click']">
-      <div class="flex flex-row items-center gap-2 cursor-pointer">
-        <span>{{ authStore.userInfo?.nickname || '请登录' }}</span>
-        <a-image :src="IconUser" class="right-button" :preview="false" />
-      </div>
-      <template #overlay>
-        <a-menu>
-          <a-menu-item key="2" @click="router.push('/change-password')">修改密码</a-menu-item>
-          <a-menu-item key="3" @click="logout">退出登录</a-menu-item>
-        </a-menu>
-      </template>
-    </a-dropdown>
-    <div v-else></div>
   </nav>
 </template>
 
@@ -120,7 +118,7 @@ $nav-height: 70px;
 nav.main {
   position: fixed;
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
   align-items: center;
   z-index: 100;
   width: 100%;
@@ -153,6 +151,24 @@ nav.main {
     }
   }
 
+  .nav-box {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+  .nav-left {
+    width: 20%;
+    justify-content: flex-start;
+  }
+  .nav-center {
+    width: 60%;
+    justify-content: center;
+  }
+  .nav-right {
+    width: 20%;
+    justify-content: flex-end;
+  }
+
   .group {
     display: flex;
     gap: 1rem; 

+ 1 - 1
src/components/controls/Dropdown.vue

@@ -94,7 +94,7 @@ function selectOption(option: any) {
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 100%;
-  font-size: 16px;
+  font-size: 1rem;
 
   @media (max-width: 768px) {
     padding: 6px 8px;

+ 1 - 1
src/components/controls/SimpleInput.vue

@@ -62,7 +62,7 @@ function handleBlur() {
   justify-content: space-between;
   padding: 10px 14px;
   background-color: $box-color;
-  font-size: 16px;
+  font-size: 1rem;
   border: 1px solid $border-default-color;
 
   @media (max-width: 768px) {