更新

src/views/login/index.vue

@@ -6,41 +6,34 @@
       <div class="login_image"></div>
       <div class="auto">
         <span class="auto_title"> 登录 </span>
-        <el-form
-          :model="data"
-          size="medium"
-          ref="formRef"
-          @keyup.enter.native="handleSubmit"
-        >
+        <el-form :model="data" size="medium" ref="formRef" @keyup.enter.native="handleSubmit">
           <el-row :span="22">
             <el-form-item prop="user">
-              <el-input
-                v-model="data.user"
-                style="width: 100%; margin-bottom: 20px"
-                placeholder="帐号"
-                prefix-icon="User"
-              ></el-input>
+              <el-input v-model="data.user" style="width: 100%; margin-bottom: 20px" placeholder="帐号"
+                prefix-icon="User"></el-input>
             </el-form-item>
           </el-row>
           <el-row :span="22">
             <el-form-item prop="password">
-              <el-input
-                v-model="data.password"
-                style="width: 100%; margin-bottom: 48px"
-                type="password"
-                placeholder="密码"
-                prefix-icon="Lock"
-                show-password
-              >
+              <el-input v-model="data.password" style="width: 100%; margin-bottom: 20px" type="password" placeholder="密码"
+                prefix-icon="Lock" show-password>
               </el-input>
             </el-form-item>
           </el-row>
-          <el-button
-            class="login-btn-submit"
-            type="primary"
-            @click="handleSubmit()"
-            :loading="loading"
-          >
+          <div style="display: flex; align-items: center;margin-bottom: 30px;">
+            
+          <el-row :span="21">
+            <el-form-item prop="password">
+              <el-input v-model="data.password" style="width: 100%; margin-right: 20px;" type="password" placeholder="验证码"
+                prefix-icon="Paperclip" >
+              </el-input>
+            </el-form-item>
+          </el-row>
+            <el-form-item prop="password">
+              <img src="@/assets/images/login_bg.png" class="codeStyle" @click="handleCode">
+            </el-form-item>
+          </div>
+          <el-button class="login-btn-submit" type="primary" @click="handleSubmit()" :loading="loading">
             <span class="info1">登&nbsp;录</span>
           </el-button>
         </el-form>
@@ -65,7 +58,10 @@ const data = reactive({
 });
 const loading = ref(false);
 const formRef = ref();
+const handleCode = () =>{
+  console.log('111111111');
   
+}
 const handleSubmit = async () => {
   formRef.value.validate(async (valid) => {
     if (valid) {
@@ -101,12 +97,14 @@ const handleSubmit = async () => {
 .main {
   .login {
     .auto {
-      .el-row{
+      .el-row {
         width: 100%;
-        .el-form-item{
+
+        .el-form-item {
           width: 100%;
         }
       }
+
       .el-input__inner {
         width: 100%;
         height: 40px;
@@ -118,10 +116,14 @@ const handleSubmit = async () => {
         background-color: #fff;
         box-shadow: none;
       }
+
       .el-form-item__content {
-        -webkit-user-select: none; /*谷歌 /Chrome*/
-        -moz-user-select: none; /*火狐/Firefox*/
-        -ms-user-select: none; /*IE 10+*/
+        -webkit-user-select: none;
+        /*谷歌 /Chrome*/
+        -moz-user-select: none;
+        /*火狐/Firefox*/
+        -ms-user-select: none;
+        /*IE 10+*/
         user-select: none;
         width: 100%;
       }
@@ -133,7 +135,11 @@ const handleSubmit = async () => {
 .main {
   height: 100vh;
   width: 100%;
-
+.codeStyle{
+  width: 100px;
+  height: 44px;
+  cursor: pointer;
+}
   .login {
     position: relative;
     background: url(@/assets/images/login_bg_3.png);
@@ -176,7 +182,6 @@ const handleSubmit = async () => {
 
   .auto {
     z-index: 4;
-    height: 350px;
     width: 436px;
     position: absolute;
     padding: 58px 32px;
@@ -227,22 +232,26 @@ const handleSubmit = async () => {
     top: 50%;
     transform: translate(-50%, -60%);
   }
+
   .main .auto {
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     z-index: 99;
   }
+
   .main .login {
     background-size: 100% 100%;
   }
 }
+
 @media screen and (max-width: 662px) {
   .main .login .login_image {
     width: 100%;
     transform: translate(-56%, -60%);
   }
 }
+
 @media screen and (max-width: 420px) {
   .main .auto {
     width: 100%;