ソースを参照

style(autofill): 修复深色模式输入框自动填充后样式异常; 修正登录页不恰当全局样式 (#3435)

* fix(autofill): 修复深色模式输入框自动填充后样式异常

* perf(Login): 去除登录页重复autofill样式;ant-divider-inner-text样式改为仅对登录页深色模式生效

---------

Co-authored-by: 苗大 <caoshengmiao@hypergryph.com>
苗大 1 年間 前
コミット
2bc8981b4f
2 ファイル変更12 行追加18 行削除
  1. 2 1
      src/design/index.less
  2. 10 17
      src/views/sys/login/Login.vue

+ 2 - 1
src/design/index.less

@@ -6,7 +6,8 @@
 @import './entry.css';
 
 input:-webkit-autofill {
-  box-shadow: 0 0 0 1000px white inset !important;
+  box-shadow: 0 0 0 1000px transparent inset;
+  -webkit-text-fill-color: @text-color-base;
 }
 
 :-webkit-autofill {

+ 10 - 17
src/views/sys/login/Login.vue

@@ -48,17 +48,17 @@
   </div>
 </template>
 <script lang="ts" setup>
+  import { AppDarkModeToggle, AppLocalePicker, AppLogo } from '@/components/Application';
+  import { useGlobSetting } from '@/hooks/setting';
+  import { useDesign } from '@/hooks/web/useDesign';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { useLocaleStore } from '@/store/modules/locale';
   import { computed } from 'vue';
-  import { AppLogo, AppLocalePicker, AppDarkModeToggle } from '@/components/Application';
-  import LoginForm from './LoginForm.vue';
   import ForgetPasswordForm from './ForgetPasswordForm.vue';
-  import RegisterForm from './RegisterForm.vue';
+  import LoginForm from './LoginForm.vue';
   import MobileForm from './MobileForm.vue';
   import QrCodeForm from './QrCodeForm.vue';
-  import { useGlobSetting } from '@/hooks/setting';
-  import { useI18n } from '@/hooks/web/useI18n';
-  import { useDesign } from '@/hooks/web/useDesign';
-  import { useLocaleStore } from '@/store/modules/locale';
+  import RegisterForm from './RegisterForm.vue';
 
   defineProps({
     sessionTimeout: {
@@ -103,17 +103,10 @@
       .app-iconify {
         color: #fff;
       }
-    }
-
-    input.fix-auto-fill,
-    .fix-auto-fill input {
-      -webkit-text-fill-color: #c9d1d9 !important;
-      box-shadow: inherit !important;
-    }
 
-    .ant-divider-inner-text {
-      color: @text-color-secondary;
-      font-size: 12px;
+      .ant-divider-inner-text {
+        color: @text-color-secondary;
+      }
     }
   }