Kaynağa Gözat

修改登录页

ZaiZai 1 yıl önce
ebeveyn
işleme
9100974275
2 değiştirilmiş dosya ile 51 ekleme ve 8 silme
  1. 33 1
      src/styles/view/new-login.scss
  2. 18 7
      src/views/login/new.vue

+ 33 - 1
src/styles/view/new-login.scss

@@ -42,7 +42,7 @@
             position: absolute;
             width: 5px;
             height: 90%;
-            right: 0px;
+            right: 0;
             top: 5%;
             background: rgba(138, 138, 138, 0.39);
         }
@@ -57,6 +57,38 @@
             .title {
                 color: #041015;
             }
+            .el-form .el-form-item {
+                .el-input {
+                    --el-input-bg-color: #E7E7E6;
+                    --el-input-placeholder-color: #787676;
+                    .el-input-group__prepend {
+                        padding: 0 10px;
+                        background-color: var(--el-input-bg-color);
+                        //#BBBBBB
+                        i {
+                            font-size: 20px;
+                            color: #626060;
+                        }
+                        &:before {
+                            content: '';
+                            background: #BBBBBB;
+                            position: absolute;
+                            right: 0;
+                            height: 26px;
+                            width: 1px;
+                        }
+                    }
+                }
+                &.checkbox-1, &.checkbox-2 {
+                    margin-bottom: 0;
+                    .el-form-item__content {
+                        line-height: 30px;
+                        .el-checkbox.el-checkbox--large {
+                            height: 30px;
+                        }
+                    }
+                }
+            }
         }
     }
 }

+ 18 - 7
src/views/login/new.vue

@@ -14,23 +14,34 @@
                             <div class="title font-bold text-center text-[24px] mb-8">登 录</div>
                             <el-form ref="formRef" :model="formValue" :rules="formRules" label-position="left" label-width="0px" size="large">
                                 <el-form-item prop="tenantId">
-                                    <el-input v-model="formValue.tenantId" clearable placeholder="请输入区域号" />
+                                    <el-input v-model="formValue.tenantId" clearable placeholder="请输入区域号">
+                                        <template #prepend>
+                                            <hc-icon name="megaphone" />
+                                        </template>
+                                    </el-input>
                                 </el-form-item>
                                 <el-form-item prop="username">
-                                    <el-input v-model="formValue.username" clearable placeholder="请输入账号" />
+                                    <el-input v-model="formValue.username" clearable placeholder="请输入账号">
+                                        <template #prepend>
+                                            <hc-icon name="user" />
+                                        </template>
+                                    </el-input>
                                 </el-form-item>
-                                <el-form-item class="mt-8" prop="password">
+                                <el-form-item prop="password">
                                     <el-input v-model="formValue.password" clearable placeholder="请输入密码" show-password type="password" @keyup="passwordKeyUp">
+                                        <template #prepend>
+                                            <hc-icon name="lock" />
+                                        </template>
                                         <template #suffix>
                                             <span class="clickable-text" @click="clickableClick">忘记密码</span>
                                         </template>
                                     </el-input>
                                 </el-form-item>
-                                <el-form-item>
-                                    <el-checkbox v-model="protocolCheckbox" />
-                                    <span class="form-protocol" @click="protocolClick">《软件产品用户使用服务协议》</span>
+                                <el-form-item class="checkbox-1">
+                                    <el-checkbox v-model="protocolCheckbox">我已经同意</el-checkbox>
+                                    <el-link type="primary" @click="protocolClick">软件产品用户使用服务协议</el-link>
                                 </el-form-item>
-                                <el-form-item>
+                                <el-form-item class="checkbox-2">
                                     <el-checkbox v-model="checkbox" label="记住密码" />
                                 </el-form-item>
                                 <el-form-item class="mt-8">