登录页表单样式修改，发送验证码时看不见样式修改

front-vue/src/assets/styles/login.scss

@@ -1,287 +1,330 @@
-.el-main{
-    padding: 0;
+.el-main {
+  padding: 0;
 }
+
 // 大背景图
 .backdrop {
-    width: 100%;
-    min-height: 100%;
-    padding: 55px;
-    background-image: url("~@/assets/images/login/login_bg.png");
-    background-size:cover;
-    background-repeat:no-repeat;
-    background-position:center center;/*居中显示*/
-    box-sizing: border-box;
+  width: 100%;
+  min-height: 100%;
+  padding: 55px;
+  background-image: url("~@/assets/images/login/login_bg.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  /*居中显示*/
+  box-sizing: border-box;
 }
-.zap-login{
-    position: relative;
+
+.zap-login {
+  position: relative;
+  width: 100%;
+  min-height: calc(100vh - 110px);
+  border-radius: 4px;
+  background-color: #ffffff;
+
+  .login-form {
+    margin-left: 30px;
+  }
+
+  .login-media {
+    width: 532px;
+    margin: 0 auto;
+    padding-top: 164px;
+  }
+
+  .login-name {
+    width: 269px;
+    height: 29px;
+    margin-left: 26px;
+  }
+
+  .login-illustration {
     width: 100%;
-    min-height: calc(100vh - 110px);
-    border-radius: 4px;
-    background-color: #ffffff;
-    .login-form {
-        margin-left: 30px;
-    }
-    .login-media{
-        width: 532px;
-        margin: 0 auto;
-        padding-top: 164px;
-    }
-    .login-name{
-        width: 269px;
-        height: 29px;
-        margin-left: 26px;
-    }
-    .login-illustration{
-        width: 100%;
-        margin-top: 47px;
-    }
-    .login-text{
-        display: block;
-        width: 320px;
-        height: 16px;
-        margin-top: 20px;
-        margin-left: 26px;
-    }
-    // 输入框大小
-    .el-input {
-        width: 100%;
-        background-image: linear-gradient(
-            #fdfdfd,
-            #fdfdfd),
-        linear-gradient(
-            #e7f0ff,
-            #e7f0ff);
-        background-blend-mode: normal,
-            normal;
-        input {
-            height: 40px;
-            width: 100%;
-            font-size: 16px;
-            color: #333333;
-            border: none;
-            border-radius: 4px;
-            background-color: #F4F5F6;
-        }
-        &.login-code-msg{
-            input{
-                width: 200px;
-            }
-        }
-    }
-    .zap-login__icon {
-        height: 16px;
-        width: 16px;
-        margin-top: 12px;
-        margin-left: 16px;
-    }
-    .el-input--prefix .el-input__inner{
-        padding-left: 50px;
-    }
-    .login-tip {
-        font-size: 13px;
-        text-align: center;
-    }
-    .el-form-item--medium .el-form-item__content{
-        display: flex;
-        align-items: center;
-    }
-    // 验证码
-    .login-code {
-        height: 40px;
-        img {
-            cursor: pointer;
-            vertical-align: middle;
-        }
-    }
-    .login-code-img {
-        flex: 1;
-        height: 40px;
-        margin-left: 8px;
-    }
+    margin-top: 47px;
+  }
 
-    .rightulliimg{
-        width: 860px;
+  .login-text {
+    display: block;
+    width: 320px;
+    height: 16px;
+    margin-top: 20px;
+    margin-left: 26px;
+  }
 
-    }
-    .divider_left{
-        margin-left: -40px;
-    }
+  // 输入框大小
+  .el-input {
+    width: 100%;
+    background-image: linear-gradient(#fdfdfd,
+        #fdfdfd),
+      linear-gradient(#e7f0ff,
+        #e7f0ff);
+    background-blend-mode: normal,
+      normal;
 
-    // 内部供应链
-    .zap-tabs{
-        width: 320px;
-        margin: 0 auto;
-        min-height: 480px;
-        box-sizing: border-box;
-        background-image: linear-gradient(
-            #ffffff,
-            #ffffff),
-        linear-gradient(
-            #f3f3f3,
-            #f3f3f3);
-        .el-tabs__nav-wrap::after{
-            height: 0;
-        }
-        .el-tabs__nav{
-            width: 100%;
-        }
-        .el-tabs__item{
-            height: 22px;
-            line-height: 22px;
-            font-size: 16px;
-            color: #333333;
-            &:nth-of-type(3){
-                padding-left: 30px;
-            }
-        }
-        .el-tabs__item.is-active{
-            color: #4280F2;
-        }
-        .el-tabs__active-bar{
-            display: none;
-        }
-    }
-    .zap-logo{
-        position: absolute;
-        top: 50px;
-        left: 58px;
-        width: 156px;
-        height: 44px;
-    }
-    .zap-2dcode{
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        padding-top: 25px;
-        padding-right: 50px;
-        margin-bottom: 63px;
-        font-size: 0;
-        background-color: #ffffff;
-        box-sizing: border-box;
-    }
-    .zap-2dcode__text{
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        width: 131px;
-        height: 36px;
-        margin-right: -25px;
-        span{
-            position: relative;
-            display: block;
-            line-height: 14px;
-            padding-left: 12px;
-            font-size: 14px;
-            color: #ffffff;
-            z-index: 6;
-        }
-        img{
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            z-index: 0;
-        }
-    }
-    .zap-2dcode__img{
-        width: 78px;
-        height: 78px;
-        cursor: pointer;
-    }
-    .zap-button{
-        margin-top: 25px;
-        width: 100%;
-        height: 40px;
-        font-size: 16px;
-        border-radius: 0;
-        background-color: #4280F2;
-        background-blend-mode: normal,
-            normal;
-    }
-    .zap-agreement{
-        display: flex;
-        align-items: top;
-        margin-top: 8px;
-        line-height: 18px;
-        font-size: 12px;
-    }
-    .zap-agreement__text{
-        color: #666666;
-    }
-    .zap-agreement__link{
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        color: #4280F2;
-        cursor: pointer;
+    input {
+      height: 40px;
+      width: 100%;
+      font-size: 16px;
+      color: #333333;
+      border-radius: 4px;
     }
-    .zap-code-button{
-        margin-left: 16px;
-        padding: 0 16px;
-        line-height: 40px;
-        font-size: 14px;
-        color: #ffffff;
-        border: none;
-        background-color: #4280F2;
-    }
-    .el-button.is-disabled, .el-button.is-disabled:hover, .el-button.is-disabled:focus{
-        background-color: transparent;
-    }
-    // 扫码登录
-    .zap-scanning{
-        background-image: linear-gradient(
-            #ffffff,
-            #ffffff),
-        linear-gradient(
-            #f3f3f3,
-            #f3f3f3);
-        background-blend-mode: normal,
-            normal;
-        box-sizing: border-box;
-    }
-    .zap-scanning__content{
-        width: 320px;
-        margin: 0 auto;
-        text-align: center;
-    }
-    .zap-scanning__title{
-        text-align: left;
-        font-size: 24px;
-        color: #333333;
-    }
-    .zap-scanning__img{
-        display: block;
-        width: 220px;
-        height: 220px;
-        margin: 40px auto 0;
-        object-fit: cover;
+
+    &.login-code-msg {
+      flex: 1;
     }
-    .zap-scanning__bottom{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-top: 18px;
-        font-size: 14px;
+  }
+
+  .zap-login__icon {
+    height: 16px;
+    width: 16px;
+    margin-top: 12px;
+    margin-left: 16px;
+  }
+
+  .el-input--prefix .el-input__inner {
+    padding-left: 50px;
+  }
+
+  .login-tip {
+    font-size: 13px;
+    text-align: center;
+  }
+
+  .el-form-item--medium .el-form-item__content {
+    display: flex;
+    align-items: center;
+  }
+
+  // 验证码
+  .login-code {
+    height: 40px;
+
+    img {
+      cursor: pointer;
+      vertical-align: middle;
     }
-    .zap-scanning__icon{
-        width: 22px;
-        height: 22px;
-        margin-right: 10px;
+  }
+
+  .login-code-img {
+    flex: 1;
+    height: 40px;
+    margin-left: 8px;
+  }
+
+  .rightulliimg {
+    width: 860px;
+
+  }
+
+  .divider_left {
+    margin-left: -40px;
+  }
+
+  // 内部供应链
+  .zap-tabs {
+    width: 320px;
+    margin: 0 auto;
+    min-height: 480px;
+    box-sizing: border-box;
+    background-image: linear-gradient(#ffffff,
+        #ffffff),
+      linear-gradient(#f3f3f3,
+        #f3f3f3);
+
+    .el-tabs__nav-wrap::after {
+      height: 0;
     }
-    .zap-scanning__text{
-        color: #333333;
+
+    .el-tabs__nav {
+      width: 100%;
     }
-    .zap-scanning__color{
-        color: #23b24b;
+
+    .el-tabs__item {
+      height: 22px;
+      line-height: 22px;
+      font-size: 16px;
+      color: #333333;
+
+      &:nth-of-type(3) {
+        padding-left: 30px;
+      }
     }
-    .el-tabs__header{
-        margin-bottom: 32px;
+
+    .el-tabs__item.is-active {
+      color: #4280F2;
     }
-    .el-dialog:not(.is-fullscreen){
-        margin-top: 25vh !important;
+
+    .el-tabs__active-bar {
+      display: none;
     }
-    .el-form-item--medium.el-form-item{
-        margin-bottom: 32px;
+  }
+
+  .zap-logo {
+    position: absolute;
+    top: 50px;
+    left: 58px;
+    width: 156px;
+    height: 44px;
+  }
+
+  .zap-2dcode {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-top: 25px;
+    padding-right: 50px;
+    margin-bottom: 63px;
+    font-size: 0;
+    background-color: #ffffff;
+    box-sizing: border-box;
+  }
+
+  .zap-2dcode__text {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 131px;
+    height: 36px;
+    margin-right: -25px;
+
+    span {
+      position: relative;
+      display: block;
+      line-height: 14px;
+      padding-left: 12px;
+      font-size: 14px;
+      color: #ffffff;
+      z-index: 6;
     }
+
+    img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      z-index: 0;
+    }
+  }
+
+  .zap-2dcode__img {
+    width: 78px;
+    height: 78px;
+    cursor: pointer;
+  }
+
+  .zap-button {
+    margin-top: 25px;
+    width: 100%;
+    height: 40px;
+    font-size: 16px;
+    border-radius: 0;
+    background-color: #4280F2;
+    background-blend-mode: normal,
+      normal;
+  }
+
+  .zap-agreement {
+    display: flex;
+    align-items: top;
+    margin-top: 8px;
+    line-height: 18px;
+    font-size: 12px;
+  }
+
+  .zap-agreement__text {
+    color: #666666;
+  }
+
+  .zap-agreement__link {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    color: #4280F2;
+    cursor: pointer;
+  }
+
+  .zap-code-button {
+    margin-left: 16px;
+    padding: 0 16px;
+    line-height: 38px;
+    font-size: 14px;
+    color: #ffffff;
+    border: 1px solid #4280F2;
+    background-color: #4280F2;
+    box-sizing: border-box;
+  }
+
+  .el-button.is-disabled,
+  .el-button.is-disabled:hover,
+  .el-button.is-disabled:focus {
+    color: #4280F2;
+    border: 1px solid #4280F2;
+    background-color: transparent;
+  }
+
+  // 扫码登录
+  .zap-scanning {
+    background-image: linear-gradient(#ffffff,
+        #ffffff),
+      linear-gradient(#f3f3f3,
+        #f3f3f3);
+    background-blend-mode: normal,
+      normal;
+    box-sizing: border-box;
+  }
+
+  .zap-scanning__content {
+    width: 320px;
+    margin: 0 auto;
+    text-align: center;
+  }
+
+  .zap-scanning__title {
+    text-align: left;
+    font-size: 24px;
+    color: #333333;
+  }
+
+  .zap-scanning__img {
+    display: block;
+    width: 220px;
+    height: 220px;
+    margin: 40px auto 0;
+    object-fit: cover;
+  }
+
+  .zap-scanning__bottom {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 18px;
+    font-size: 14px;
+  }
+
+  .zap-scanning__icon {
+    width: 22px;
+    height: 22px;
+    margin-right: 10px;
+  }
+
+  .zap-scanning__text {
+    color: #333333;
+  }
+
+  .zap-scanning__color {
+    color: #23b24b;
+  }
+
+  .el-tabs__header {
+    margin-bottom: 32px;
+  }
+
+  .el-dialog:not(.is-fullscreen) {
+    margin-top: 25vh !important;
+  }
+
+  .el-form-item--medium.el-form-item {
+    margin-bottom: 32px;
+  }
 }

front-vue/src/views/login.vue

@@ -17,10 +17,12 @@
                             </el-input>
                         </el-form-item>
                         <el-form-item prop="cade">
-                            <el-input v-model="loginForm.shortMessageCode" type="text"  maxlength="" auto-complete="off" placeholder="请输入验证码" class="login-code-msg" id="">
+                            <el-row type="flex" align="center">
+                              <el-input v-model="loginForm.shortMessageCode" type="text"  maxlength="" auto-complete="off" placeholder="请输入验证码" class="login-code-msg" id="">
                                 <img slot="prefix" class="zap-login__icon" src="../assets/images/register/icon_verify.png" alt="">
-                                <el-button class="zap-code-button" slot="suffix" @click="sendMessage" :disabled="sendShortMessageBtn">{{codeBtnWord}}</el-button>
                             </el-input>
+                            <el-button class="zap-code-button" @click="sendMessage" :disabled="sendShortMessageBtn">{{codeBtnWord}}</el-button>
+                            </el-row>
                         </el-form-item>
                         <el-form-item style="width:100%;">
                             <el-button :loading="loading"  class="zap-button" size="medium" type="primary" @click.native.prevent="handleLogin">
@@ -133,9 +135,9 @@
             :close-on-click-modal="false"
             :visible.sync="codeDialogVisible"
             width="30%">
-            <div style="display:flex;">
-                <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 53%;" @keyup.enter.native="handleLogin">
-                    <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+            <div style="display:flex;padding:20px;">
+                <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" @keyup.enter.native="handleLogin">
+                    <img slot="prefix" class="zap-login__icon" src="../assets/images/login/icon_verify.png" alt="">
                 </el-input>
                 <div class="login-code">
                     <img :src="codeUrl" @click="getCode" class="login-code-img" />