fix(login): fix `auto fill` style in dark-theme

修复黑暗主题下的自动填充表单域样式

fix(login): fix `auto fill` style in dark-theme
修复黑暗主题下的自动填充表单域样式
无木
1 parent 525484e7
Showing 4 changed files with 28 additions and 4 deletions
src/views/sys/login/Login.vue
src/views/sys/login/LoginForm.vue
src/views/sys/login/MobileForm.vue
src/views/sys/login/RegisterForm.vue
@@ -140,6 +140,12 @@
         color: #fff;
       }
     }
+
+    input.fix-auto-fill,
+    .fix-auto-fill input {
+      -webkit-text-fill-color: #c9d1d9 !important;
+      box-shadow: inherit !important;
+    }
   }
   .@{prefix-cls} {
@@ -9,7 +9,12 @@
     @keypress.enter="handleLogin"
   >
     <FormItem name="account" class="enter-x">
-      <Input size="large" v-model:value="formData.account" :placeholder="t('sys.login.userName')" />
+      <Input
+        size="large"
+        v-model:value="formData.account"
+        :placeholder="t('sys.login.userName')"
+        class="fix-auto-fill"
+      />
     </FormItem>
     <FormItem name="password" class="enter-x">
       <InputPassword
@@ -3,11 +3,17 @@
     <LoginFormTitle class="enter-x" />
     <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
       <FormItem name="mobile" class="enter-x">
-        <Input size="large" v-model:value="formData.mobile" :placeholder="t('sys.login.mobile')" />
+        <Input
+          size="large"
+          v-model:value="formData.mobile"
+          :placeholder="t('sys.login.mobile')"
+          class="fix-auto-fill"
+        />
       </FormItem>
       <FormItem name="sms" class="enter-x">
         <CountdownInput
           size="large"
+          class="fix-auto-fill"
           v-model:value="formData.sms"
           :placeholder="t('sys.login.smsCode')"
         />
@@ -4,17 +4,24 @@
     <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
       <FormItem name="account" class="enter-x">
         <Input
+          class="fix-auto-fill"
           size="large"
           v-model:value="formData.account"
           :placeholder="t('sys.login.userName')"
         />
       </FormItem>
       <FormItem name="mobile" class="enter-x">
-        <Input size="large" v-model:value="formData.mobile" :placeholder="t('sys.login.mobile')" />
+        <Input
+          size="large"
+          v-model:value="formData.mobile"
+          :placeholder="t('sys.login.mobile')"
+          class="fix-auto-fill"
+        />
       </FormItem>
       <FormItem name="sms" class="enter-x">
         <CountdownInput
           size="large"
+          class="fix-auto-fill"
           v-model:value="formData.sms"
           :placeholder="t('sys.login.smsCode')"
         />
@@ -52,7 +59,7 @@
       >
         {{ t('sys.login.registerButton') }}
       </Button>
-      <Button size="large" block class="enter-x mt-4" @click="handleBackLogin">
+      <Button size="large" block class="mt-4 enter-x" @click="handleBackLogin">
         {{ t('sys.login.backSignIn') }}
       </Button>
     </Form>