注册页面新UI样式调整

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

@@ -0,0 +1,299 @@
+.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;
+}
+.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: 532px;
+        height: 419px;
+        margin-top: 47px;
+    }
+    .login-text{
+        display: block;
+        width: 320px;
+        height: 16px;
+        margin-top: 20px;
+        margin-left: 26px;
+    }
+    .login-footer{
+        margin-top: 57px;
+        margin-bottom: 25px;
+        text-align: center;
+    }
+    .login-footer__text{
+        margin-right: 25px;
+        font-size: 14px;
+        color: #999999;
+        &:nth-last-child(1){
+            margin-right: 0;
+        }
+    }
+    // 输入框大小
+    .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;
+            }
+        }
+    }
+    .input-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;
+    }
+
+    .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;
+        }
+        .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: #389cf4;
+        cursor: pointer;
+    }
+    .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{
+        text-align: center;
+    }
+    .zap-scanning__title{
+        padding: 0 60px;
+        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

@@ -107,7 +107,9 @@
                                 </div>
                                 <div class="zap-scanning__title">手机扫码</div>
                                 <!-- <img class="zap-scanning__img" :src="wxSrc" alt=""> -->
-                                <wxlogin :appid="wx_appid" :scope="wx_scope" :redirect_uri="wx_redirect_uri"></wxlogin>
+                                <div class="zap-scanning__content">
+                                    <wxlogin :appid="wx_appid" :scope="wx_scope" :redirect_uri="wx_redirect_uri"></wxlogin>
+                                </div>
                                 <div class="zap-scanning__bottom">
                                     <img class="zap-scanning__icon" src="../assets/images/icon_scanning.png" alt="">
                                     <div class="zap-scanning__text">打开<span class="zap-scanning__color">微信</span>扫码登录</div>
@@ -469,309 +471,5 @@ export default {
 };
 </script>
 <style rel="stylesheet/scss" lang="scss">
-.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;
-}
-.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: 532px;
-        height: 419px;
-        margin-top: 47px;
-    }
-    .login-text{
-        display: block;
-        width: 320px;
-        height: 16px;
-        margin-top: 20px;
-        margin-left: 26px;
-    }
-    .login-footer{
-        margin-top: 57px;
-        margin-bottom: 25px;
-        text-align: center;
-    }
-    .login-footer__text{
-        margin-right: 25px;
-        font-size: 14px;
-        color: #999999;
-        &:nth-last-child(1){
-            margin-right: 0;
-        }
-    }
-    // 输入框大小
-    .el-input {
-        // height: 55px;
-        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;
-            }
-        }
-    }
-    .input-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;
-    }
-
-    .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;
-        }
-        .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-image: linear-gradient(
-            #4280F2,
-            #4280F2),
-        linear-gradient(
-            #e7f0ff,
-            #e7f0ff);
-        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: #389cf4;
-        cursor: pointer;
-    }
-    .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{
-        width: 410px;
-        min-height: 550px;
-        padding-bottom: 66px;
-        background-image: linear-gradient(
-            #ffffff,
-            #ffffff),
-        linear-gradient(
-            #f3f3f3,
-            #f3f3f3);
-        background-blend-mode: normal,
-            normal;
-        box-sizing: border-box;
-    }
-    .zap-scanning__title{
-        padding: 0 60px;
-        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;
-    }
-}
+  @import "~@/assets/styles/login.scss";
 </style>

front-vue/src/views/register.vue

@@ -333,11 +333,14 @@ export default {
 <style rel="stylesheet/scss" lang="scss">
 // 大背景图
 .backdrop {
-    padding-top: 100px;
-    background-color: #ebf3ff;
     width: 100%;
     min-height: 100%;
-    text-align: center;
+    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{
     .login {

front-vue/src/views/registerUser.vue

@@ -1,77 +1,84 @@
 <template>
-    <div class="backdrop zap-login">
-        <el-container>
+    <div class="backdrop">
+        <el-container class="zap-login">
             <!-- logo -->
             <img class="zap-logo" src="../assets/images/login/login_logo.png" alt="">
              <el-main>
                 <!-- 中间部分 -->
-                <div class="login">
-                    <div class="login-left">
-                        <img class="login-name" src="../assets/images/login/login_name.png" alt="">
-                        <img class="login-illustration" src="../assets/images/login/login_illustration.png" alt="">
-                    </div>
-                    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-                        <template v-if="!scanningLogin">
-                            <div class="zap-2dcode">
-                                <!-- <img class="zap-2dcode__text" src="../assets/images/code1_1.png" alt=""> -->
-                                <!-- <img class="zap-2dcode__img" src="../assets/images/code1_2.gif" alt="" @click="scanningLogin=true"> -->
-                            </div>
-                            <el-tabs v-model="activeName" class="zap-tabs" @tab-click="changeLoginType">
-                                <el-tab-pane label="注册" name="login_shortMessage">
-                                    <el-form-item prop="company">
-                                        <el-input v-model="loginForm.company" type="text" auto-complete="off" placeholder="企业名称" maxlength="15">
-                                            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
-                                        </el-input>
-                                    </el-form-item>
-                                    <el-form-item prop="username">
-                                        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="联系人" maxlength="15">
-                                            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
-                                        </el-input>
-                                    </el-form-item>
-                                    <el-form-item prop="phone">
-                                        <el-input v-model="loginForm.phone" type="text" auto-complete="off" placeholder="手机号" maxlength="11">
-                                            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
-                                        </el-input>
-                                    </el-form-item>
-                                    <el-form-item prop="shortMessageCode">
-                                        <el-input v-model="loginForm.shortMessageCode" type="text"  maxlength="" auto-complete="off" placeholder="请输入验证码" id="" onkeydown="enterHandler(event)">
-                                            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
-                                            <el-button class="zap-code-button" slot="suffix" @click="sendMessage" :disabled="sendShortMessageBtn">{{codeBtnWord}}</el-button>
-                                        </el-input>
-                                    </el-form-item>
-                                    <el-form-item prop="password">
-                                        <el-input v-model="loginForm.password" type="text" auto-complete="off" placeholder="密码" maxlength="20">
-                                            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
-                                        </el-input>
-                                    </el-form-item>
-                                    <el-form-item prop="again">
-                                        <el-input v-model="loginForm.again" type="text" auto-complete="off" placeholder="确认密码" maxlength="20">
-                                            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
-                                        </el-input>
-                                    </el-form-item>
-                                    <el-form-item>
-                                        <el-checkbox v-model="loginForm.checked">
-                                            <div class="zap-agreement">
-                                                <span class="zap-agreement__text">我已阅读</span>
-                                                <div class="zap-agreement__link">
-                                                    <span>《招采云链服务平台会员注册协议》</span>
-                                                    <span>《招采云链服务平台隐私政策》</span>
+                <el-row class="login">
+                    <el-col :span="13">
+                        <el-row class="login-media">
+                            <img class="login-name" src="../assets/images/login/login_name.png" alt="">
+                            <img class="login-text" src="../assets/images/login/login_text.png" alt="">
+                            <img class="login-illustration" src="../assets/images/login/login_illustration.png" alt="">
+                        </el-row>
+                    </el-col>
+                    <el-col :span="11">
+                        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" style="margin-top: 75px;">
+                            <template v-if="!scanningLogin">
+                                <el-tabs v-model="activeName" class="zap-tabs" @tab-click="changeLoginType">
+                                    <el-tab-pane label="账号注册" name="login_shortMessage">
+                                        <el-form-item prop="company">
+                                            <el-input v-model="loginForm.company" type="text" auto-complete="off" placeholder="企业名称" maxlength="15">
+                                                <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+                                            </el-input>
+                                        </el-form-item>
+                                        <el-form-item prop="username">
+                                            <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="联系人" maxlength="15">
+                                                <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+                                            </el-input>
+                                        </el-form-item>
+                                        <el-form-item prop="phone">
+                                            <el-input v-model="loginForm.phone" type="text" auto-complete="off" placeholder="手机号" maxlength="11">
+                                                <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+                                            </el-input>
+                                        </el-form-item>
+                                        <el-form-item prop="shortMessageCode">
+                                            <el-input v-model="loginForm.shortMessageCode" type="text"  maxlength="" auto-complete="off" placeholder="请输入验证码" id="" class="login-code-msg"  onkeydown="enterHandler(event)">
+                                                <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+                                                <el-button class="zap-code-button" slot="suffix" @click="sendMessage" :disabled="sendShortMessageBtn">{{codeBtnWord}}</el-button>
+                                            </el-input>
+                                        </el-form-item>
+                                        <el-form-item prop="password">
+                                            <el-input v-model="loginForm.password" type="text" auto-complete="off" placeholder="密码" maxlength="20">
+                                                <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+                                            </el-input>
+                                        </el-form-item>
+                                        <el-form-item prop="again">
+                                            <el-input v-model="loginForm.again" type="text" auto-complete="off" placeholder="确认密码" maxlength="20">
+                                                <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+                                            </el-input>
+                                        </el-form-item>
+                                        <el-form-item>
+                                            <el-checkbox v-model="loginForm.checked">
+                                                <div class="zap-agreement">
+                                                    <span class="zap-agreement__text">我已阅读</span>
+                                                    <div class="zap-agreement__link">
+                                                        <span>《招采云链服务平台会员注册协议》</span>
+                                                        <span>《招采云链服务平台隐私政策》</span>
+                                                    </div>
                                                 </div>
-                                            </div>
-                                        </el-checkbox>
-                                    </el-form-item>
-                                    <el-form-item style="width:100%;">
-                                        <el-button :loading="loading"  class="zap-button" size="medium" type="primary" @click.native.prevent="handleLogin">
-                                            <span v-if="!loading">注 册</span>
-                                            <span v-else>请 稍 后...</span>
-                                        </el-button>
-                                    </el-form-item>
-                                </el-tab-pane>
-                            </el-tabs>
-                        </template>
-                    </el-form>
+                                            </el-checkbox>
+                                        </el-form-item>
+                                        <el-form-item style="width:100%;">
+                                            <el-button :loading="loading"  class="zap-button" size="medium" type="primary" @click.native.prevent="handleLogin">
+                                                <span v-if="!loading">注 册</span>
+                                                <span v-else>请 稍 后...</span>
+                                            </el-button>
+                                        </el-form-item>
+                                    </el-tab-pane>
+                                </el-tabs>
+                            </template>
+                        </el-form>
+                    </el-col>
                     <!--  底部  -->
-                </div>
+                </el-row>
+                <el-row class="login-footer">
+                    <span class="login-footer__text">联系方式：0531-00001234</span>
+                    <span class="login-footer__text">邮箱：zcyl@zcylian.com</span>
+                    <span class="login-footer__text">公安联网备案号：1234567</span>
+                    <span class="login-footer__text">Copyright@招采云链（山东）信息</span>
+                </el-row>
             </el-main>
             <el-dialog
               title="选择企业"
@@ -99,7 +106,7 @@
             :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">
+                <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" @keyup.enter.native="handleLogin">
                     <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
                 </el-input>
                 <div class="login-code">
@@ -347,254 +354,5 @@ export default {
 };
 </script>
 <style rel="stylesheet/scss" lang="scss">
-// 大背景图
-.backdrop {
-    padding-top: 100px;
-    background-color: #ebf3ff;
-    width: 100%;
-    min-height: 100%;
-    text-align: center;
-}
-.zap-login{
-    .login {
-        display: flex;
-        justify-content: center;
-        height: 100%;
-        background-size: cover;
-    }
-    // 中间背景图
-    .login-form {
-        margin-left: 75px;
-        border-radius: 6px;
-        background-size: 935px 434px;
-        background-repeat: no-repeat;
-        margin-top: 40px;
-    }
-    // 输入框大小
-    .el-input {
-        height: 55px;
-        width: 100%;
-        background-image: linear-gradient(
-            #fdfdfd,
-            #fdfdfd),
-        linear-gradient(
-            #e7f0ff,
-            #e7f0ff);
-        background-blend-mode: normal,
-            normal;
-        input {
-            height: 55px;
-            width: 100%;
-            font-size: 18px;
-        }
-    }
-    .input-icon {
-        height: 53px;
-        width: 22px;
-        margin-left: 14px;
-        margin-right: 14px
-    }
-    .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: 55px;
-        img {
-            cursor: pointer;
-            vertical-align: middle;
-        }
-    }
-    .login-code-img {
-        flex: 1;
-        height: 55px;
-        margin-left: 8px;
-    }
-
-    .rightulliimg{
-        width: 860px;
-
-    }
-    .divider_left{
-        margin-left: -40px;
-    }
-
-    // 内部供应链
-    .zap-tabs{
-        width: 410px;
-        min-height: 480px;
-        padding: 10px 48px 46px;
-        box-sizing: border-box;
-        background-image: linear-gradient(
-            #ffffff,
-            #ffffff),
-        linear-gradient(
-            #f3f3f3,
-            #f3f3f3);
-        .el-tabs__nav-wrap{
-            padding: 0 12px;
-        }
-        .el-tabs__nav-wrap::after{
-            height: 0;
-        }
-        .el-tabs__nav{
-            width: 100%;
-        }
-        .el-tabs__item{
-            height: 56px;
-            line-height: 56px;
-            font-size: 24px;
-            color: #333333;
-            &:nth-of-type(3){
-                padding-left: 30px;
-            }
-        }
-        .el-tabs__item.is-active{
-            color: #0056eb;
-        }
-        .el-tabs__active-bar{
-            background-color: #0056eb;
-        }
-    }
-    .login-left{
-        width: 704px;
-        margin-top: 40px;
-        text-align: left;
-        .login-name{
-            width: 515px;
-        }
-        .login-illustration{
-            width: 532px;
-            height: 419px;
-        }
-    }
-    .zap-logo{
-        position: absolute;
-        top: 25px;
-        left: 45px;
-        width: 210px;
-        height: 60px;
-    }
-    .zap-2dcode{
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        width: 410px;;
-        padding-top: 10px;
-        padding-right: 10px;
-        font-size: 0;
-        background-color: #ffffff;
-        box-sizing: border-box;
-    }
-    .zap-2dcode__text{
-        width: 113px;
-        height: 28px;
-    }
-    .zap-2dcode__img{
-        width: 60px;
-        height: 61px;
-        cursor: pointer;
-    }
-    .zap-button{
-        margin-top: 25px;
-        width: 100%;
-        height: 55px;
-        font-size: 18px;
-        border-radius: 0;
-        background-image: linear-gradient(
-            #0056eb,
-            #0056eb),
-        linear-gradient(
-            #e7f0ff,
-            #e7f0ff);
-        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: #389cf4;
-        cursor: pointer;
-    }
-    .zap-code-button{
-        padding: 0 16px;
-        line-height: 55px;
-        font-size: 18px;
-        color: #23b24b;
-        border: none;
-        background-color: transparent;
-    }
-    .el-button.is-disabled, .el-button.is-disabled:hover, .el-button.is-disabled:focus{
-        background-color: transparent;
-    }
-    // 扫码登录
-    .zap-scanning{
-        width: 410px;
-        height: 550px;
-        background-image: linear-gradient(
-            #ffffff,
-            #ffffff),
-        linear-gradient(
-            #f3f3f3,
-            #f3f3f3);
-        background-blend-mode: normal,
-            normal;
-        box-sizing: border-box;
-    }
-    .zap-scanning__title{
-        padding: 0 60px;
-        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: 38px;
-    }
-    .el-dialog:not(.is-fullscreen){
-        margin-top: 25vh !important;
-    }
-}
+  @import "~@/assets/styles/login.scss";
 </style>