优化登录相关组件

fantastic-admin · Sep 5, 2024 · 5c840a6 · 5c840a6
1 parent 76336c1
commit 5c840a6
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 116 deletions.
diff --git a/src/components/LoginForm/index.vue b/src/components/LoginForm/index.vue
@@ -80,14 +80,14 @@ function testAccount(account: string) {
       </h3>
       <div>
         <ElFormItem prop="account">
-          <ElInput v-model="form.account" placeholder="用户名" type="text" tabindex="1">
+          <ElInput v-model="form.account" size="large" placeholder="用户名" type="text" tabindex="1">
             <template #prefix>
               <SvgIcon name="i-ri:user-3-fill" />
             </template>
           </ElInput>
         </ElFormItem>
         <ElFormItem prop="password">
-          <ElInput v-model="form.password" type="password" placeholder="密码" tabindex="2" show-password @keyup.enter="handleLogin">
+          <ElInput v-model="form.password" type="password" size="large" placeholder="密码" tabindex="2" show-password @keyup.enter="handleLogin">
             <template #prefix>
               <SvgIcon name="i-ri:lock-2-fill" />
             </template>
@@ -131,42 +131,3 @@ function testAccount(account: string) {
     </div>
   </ElForm>
 </template>
-
-<style scoped>
-:deep(input[type="password"]::-ms-reveal) {
-  display: none;
-}
-
-.el-form-item {
-  margin-bottom: 24px;
-
-  :deep(.el-input) {
-    width: 100%;
-    height: 48px;
-    line-height: inherit;
-
-    input {
-      height: 48px;
-    }
-
-    .el-input__prefix,
-    .el-input__suffix {
-      display: flex;
-      align-items: center;
-    }
-
-    .el-input__prefix {
-      left: 10px;
-    }
-
-    .el-input__suffix {
-      right: 10px;
-    }
-  }
-}
-
-:deep(.el-divider__text) {
-  white-space: nowrap;
-  background-color: var(--g-container-bg);
-}
-</style>
diff --git a/src/components/RegisterForm/index.vue b/src/components/RegisterForm/index.vue
@@ -70,14 +70,14 @@ function handleRegister() {
     </h3>
     <div>
       <ElFormItem prop="account">
-        <ElInput v-model="form.account" placeholder="用户名" tabindex="1">
+        <ElInput v-model="form.account" size="large" placeholder="用户名" tabindex="1">
           <template #prefix>
             <SvgIcon name="i-ri:user-3-fill" />
           </template>
         </ElInput>
       </ElFormItem>
       <ElFormItem prop="captcha">
-        <ElInput v-model="form.captcha" placeholder="验证码" tabindex="2">
+        <ElInput v-model="form.captcha" size="large" placeholder="验证码" tabindex="2">
           <template #prefix>
             <SvgIcon name="i-ic:baseline-verified-user" />
           </template>
@@ -87,14 +87,14 @@ function handleRegister() {
         </ElInput>
       </ElFormItem>
       <ElFormItem prop="password">
-        <ElInput v-model="form.password" type="password" placeholder="密码" tabindex="3" show-password>
+        <ElInput v-model="form.password" type="password" size="large" placeholder="密码" tabindex="3" show-password>
           <template #prefix>
             <SvgIcon name="i-ri:lock-2-fill" />
           </template>
         </ElInput>
       </ElFormItem>
       <ElFormItem prop="checkPassword">
-        <ElInput v-model="form.checkPassword" type="password" placeholder="确认密码" tabindex="4" show-password>
+        <ElInput v-model="form.checkPassword" type="password" size="large" placeholder="确认密码" tabindex="4" show-password>
           <template #prefix>
             <SvgIcon name="i-ri:lock-2-fill" />
           </template>
@@ -112,37 +112,3 @@ function handleRegister() {
     </div>
   </ElForm>
 </template>
-
-<style scoped>
-:deep(input[type="password"]::-ms-reveal) {
-  display: none;
-}
-
-.el-form-item {
-  margin-bottom: 24px;
-
-  :deep(.el-input) {
-    width: 100%;
-    height: 48px;
-    line-height: inherit;
-
-    input {
-      height: 48px;
-    }
-
-    .el-input__prefix,
-    .el-input__suffix {
-      display: flex;
-      align-items: center;
-    }
-
-    .el-input__prefix {
-      left: 10px;
-    }
-
-    .el-input__suffix {
-      right: 10px;
-    }
-  }
-}
-</style>
diff --git a/src/components/ResetPasswordForm/index.vue b/src/components/ResetPasswordForm/index.vue
@@ -56,14 +56,14 @@ function handleReset() {
     </h3>
     <div>
       <ElFormItem prop="account">
-        <ElInput v-model="form.account" placeholder="用户名" type="text" tabindex="1">
+        <ElInput v-model="form.account" size="large" placeholder="用户名" type="text" tabindex="1">
           <template #prefix>
             <SvgIcon name="i-ri:user-3-fill" />
           </template>
         </ElInput>
       </ElFormItem>
       <ElFormItem prop="captcha">
-        <ElInput v-model="form.captcha" placeholder="验证码" type="text" tabindex="2">
+        <ElInput v-model="form.captcha" size="large" placeholder="验证码" type="text" tabindex="2">
           <template #prefix>
             <SvgIcon name="i-ic:baseline-verified-user" />
           </template>
@@ -73,7 +73,7 @@ function handleReset() {
         </ElInput>
       </ElFormItem>
       <ElFormItem prop="newPassword">
-        <ElInput v-model="form.newPassword" type="password" placeholder="新密码" tabindex="3" show-password>
+        <ElInput v-model="form.newPassword" type="password" size="large" placeholder="新密码" tabindex="3" show-password>
           <template #prefix>
             <SvgIcon name="i-ri:lock-2-fill" />
           </template>
@@ -90,37 +90,3 @@ function handleReset() {
     </div>
   </ElForm>
 </template>
-
-<style scoped>
-:deep(input[type="password"]::-ms-reveal) {
-  display: none;
-}
-
-.el-form-item {
-  margin-bottom: 24px;
-
-  :deep(.el-input) {
-    width: 100%;
-    height: 48px;
-    line-height: inherit;
-
-    input {
-      height: 48px;
-    }
-
-    .el-input__prefix,
-    .el-input__suffix {
-      display: flex;
-      align-items: center;
-    }
-
-    .el-input__prefix {
-      left: 10px;
-    }
-
-    .el-input__suffix {
-      right: 10px;
-    }
-  }
-}
-</style>