登录页新UI样式调整

front-vue/src/views/forgetUser.vue

@@ -2,13 +2,13 @@
     <div class="backdrop zap-login">
         <el-container>
             <!-- logo -->
-            <img class="zap-logo" src="../assets/images/login_logo.png" alt="">
+            <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/logo_name.png" alt="">
-                        <img class="login-illustration" src="../assets/images/login_img.png" alt="">
+                        <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">
@@ -96,8 +96,8 @@ export default {
         return {
             //默认背景图
             activeName: "login_shortMessage",
-            baseImg: require('../assets/images/login_img.png'),
-            BackgroundImg : require('../assets/images/login_img.png'),
+            baseImg: require('../assets/images/login/login_illustration.png'),
+            BackgroundImg : require('../assets/images/login/login_illustration.png'),
             scanningLogin: false, // 是否扫码登陆
             logo: '',
             // baseLogo: require('../assets/images/lgo.png'),

front-vue/src/views/login.vue

@@ -1,120 +1,137 @@
 <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_logo.png" alt="">
+            <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/logo_name.png" alt="">
-                        <img class="login-illustration" src="../assets/images/login_img.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="phone">
-                                        <el-input v-model="loginForm.phone" type="text" auto-complete="off" placeholder="手机号">
-                                            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
-                                        </el-input>
-                                    </el-form-item>
-                                    <el-form-item prop="cade">
-                                        <el-input v-model="loginForm.shortMessageCode" type="text"  maxlength="" auto-complete="off" placeholder="请输入验证码" id="">
-                                            <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 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-form-item>
-                                        <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">
+                            <template v-if="!scanningLogin">
+                                <div class="zap-2dcode">
+                                    <div class="zap-2dcode__text">
+                                        <img src="../assets/images/login/login_scantext.png" alt="">
+                                        <span>扫码登录更安全</span>
+                                    </div>
+                                    <img class="zap-2dcode__img" src="../assets/images/login/login_scancode.png" 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="phone">
+                                            <el-input v-model="loginForm.phone" type="text" auto-complete="off" placeholder="手机号">
+                                                <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+                                            </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="">
+                                                <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 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-form-item>
+                                            <div class="zap-agreement">
+                                                <span class="zap-agreement__text">登录视为同意并遵守</span>
+                                                <div class="zap-agreement__link">
+                                                    <span>《招采云链服务平台会员注册协议》</span>
+                                                    <span>《招采云链服务平台隐私政策》</span>
+                                                </div>
                                             </div>
-                                        </div>
-                                    </el-form-item>
-                                </el-tab-pane>
-                                <el-tab-pane label="密码登录" name="login_password">
-                                    <el-form-item prop="username">
-                                        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
-                                            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
-                                        </el-input>
-                                    </el-form-item>
-                                    <el-form-item prop="password">
-                                        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
-                                            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
-                                        </el-input>
-                                    </el-form-item>
-                                     <el-form-item prop="code">
-                                        <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" />
-                                        </el-input>
-                                        <div class="login-code">
-                                            <img :src="codeUrl" @click="getCode" class="login-code-img" />
-                                        </div>
-                                    </el-form-item>
-                                    <el-form-item style="width:100%;margin-bottom: 0;">
-                                        <el-checkbox v-model="loginForm.rememberMe">记住密码</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-form-item>
-                                        <div class="zap-agreement">
-                                            <span class="zap-agreement__text">登录视为同意并遵守</span>
-                                            <div class="zap-agreement__link">
-                                                <span>《招采云链服务平台会员注册协议》</span>
-                                                <span>《招采云链服务平台隐私政策》</span>
+                                        </el-form-item>
+                                    </el-tab-pane>
+                                    <el-tab-pane label="密码登录" name="login_password">
+                                        <el-form-item prop="username">
+                                            <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
+                                                <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+                                            </el-input>
+                                        </el-form-item>
+                                        <el-form-item prop="password">
+                                            <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
+                                                <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+                                            </el-input>
+                                        </el-form-item>
+                                        <el-form-item prop="code">
+                                            <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">
+                                                <img :src="codeUrl" @click="getCode" class="login-code-img" />
+                                            </div>
+                                        </el-form-item>
+                                        <el-form-item style="width:100%;margin-bottom: 0;" >
+                                            <el-row type="flex" justify="space-between" style="width: 100%;">
+                                                <el-checkbox v-model="loginForm.rememberMe">自动登录</el-checkbox>
+                                                <el-link href="/forgetUser" style="color: #389cf4;">忘记密码？</el-link>
+                                            </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">
+                                                <span v-if="!loading">登 录</span>
+                                                <span v-else>登 录 中...</span>
+                                            </el-button>
+                                        </el-form-item>
+                                        <el-link style="margin-right:50px; font-size: 16px;margin-bottom: 30px;color: #389cf4;" href="/registerUser">还没账号？立即注册</el-link>
+                                        <el-form-item>
+                                            <div class="zap-agreement">
+                                                <span class="zap-agreement__text">登录视为同意并遵守</span>
+                                                <div class="zap-agreement__link">
+                                                    <span>《招采云链服务平台会员注册协议》</span>
+                                                    <span>《招采云链服务平台隐私政策》</span>
+                                                </div>
                                             </div>
+                                        </el-form-item>
+                                        <!-- <el-divider class="divider_left"><span style="font-size:10px;word-break: keep-all;">第三方快捷登录</span></el-divider>
+                                        <el-form-item style="width:100%;">
+                                            <img :src="wxSrc" @mouseover="changeImg" @mouseleave="returnImg" @click="getWeChatImg" style="width:30px;margin-left: 77px;">
+                                        </el-form-item> -->
+                                    </el-tab-pane>
+                                </el-tabs>
+                            </template>
+                            <!-- 手机扫码 -->
+                            <div v-else class="zap-scanning">
+                                <div class="zap-2dcode">
+                                    <img class="zap-2dcode__img" src="../assets/images/code1_3.gif" alt="" @click="scanningLogin=false">
+                                </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__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>
+                                </div>
+                                <el-form-item>
+                                    <div class="zap-agreement" style="padding-top: 32px;padding-left: 60px;">
+                                        <span class="zap-agreement__text">登录视为同意并遵守</span>
+                                        <div class="zap-agreement__link">
+                                            <span>《招采云链服务平台会员注册协议》</span>
+                                            <span>《招采云链服务平台隐私政策》</span>
                                         </div>
-                                    </el-form-item>
-                                    <el-link style="margin-right:50px" href="/registerUser">注册</el-link><el-link href="/forgetUser">忘记密码？</el-link>
-                                    <!-- <el-divider class="divider_left"><span style="font-size:10px;word-break: keep-all;">第三方快捷登录</span></el-divider>
-                                    <el-form-item style="width:100%;">
-                                        <img :src="wxSrc" @mouseover="changeImg" @mouseleave="returnImg" @click="getWeChatImg" style="width:30px;margin-left: 77px;">
-                                    </el-form-item> -->
-                                </el-tab-pane>
-                            </el-tabs>
-                        </template>
-                        <!-- 手机扫码 -->
-                        <div v-else class="zap-scanning">
-                             <div class="zap-2dcode">
-                                <img class="zap-2dcode__img" src="../assets/images/code1_3.gif" alt="" @click="scanningLogin=false">
-                            </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__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>
-                            </div>
-                            <el-form-item>
-                                <div class="zap-agreement" style="padding-top: 32px;padding-left: 60px;">
-                                    <span class="zap-agreement__text">登录视为同意并遵守</span>
-                                    <div class="zap-agreement__link">
-                                        <span>《招采云链服务平台会员注册协议》</span>
-                                        <span>《招采云链服务平台隐私政策》</span>
                                     </div>
-                                </div>
-                            </el-form-item>
-                        </div>
-                    </el-form>
+                                </el-form-item>
+                            </div>
+                        </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="选择企业"
@@ -133,7 +150,6 @@
               </span>
             </el-dialog>
         </el-container>
-        <el-footer></el-footer>
 
         <!-- 密码登录验证码 -->
         <el-dialog
@@ -170,8 +186,8 @@ export default {
         return {
             //默认背景图
             activeName: "login_shortMessage",
-            baseImg: require('../assets/images/login_img.png'),
-            BackgroundImg : require('../assets/images/login_img.png'),
+            baseImg: require('../assets/images/login/login_illustration.png'),
+            BackgroundImg : require('../assets/images/login/login_illustration.png'),
             scanningLogin: false, // 是否扫码登陆
             logo: '',
             // baseLogo: require('../assets/images/lgo.png'),
@@ -453,32 +469,67 @@ export default {
 };
 </script>
 <style rel="stylesheet/scss" lang="scss">
+.el-main{
+    padding: 0;
+}
 // 大背景图
 .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 {
-        display: flex;
-        justify-content: center;
-        height: 100%;
-        background-size: cover;
-    }
-    // 中间背景图
+    position: relative;
+    width: 100%;
+    min-height: calc(100vh - 110px);
+    border-radius: 4px;
+    background-color: #ffffff;
     .login-form {
-        margin-left: 75px;
-        border-radius: 6px;
-        background-size: 935px 434px;
-        background-repeat: no-repeat;
-        margin-top: 40px;
+        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;
+        // height: 55px;
         width: 100%;
         background-image: linear-gradient(
             #fdfdfd,
@@ -489,16 +540,25 @@ export default {
         background-blend-mode: normal,
             normal;
         input {
-            height: 55px;
+            height: 40px;
             width: 100%;
-            font-size: 18px;
+            font-size: 16px;
+            color: #333333;
+            border: none;
+            border-radius: 4px;
+            background-color: #F4F5F6;
+        }
+        &.login-code-msg{
+            input{
+                width: 200px;
+            }
         }
     }
     .input-icon {
-        height: 53px;
-        width: 22px;
-        margin-left: 14px;
-        margin-right: 14px
+        height: 16px;
+        width: 16px;
+        margin-top: 12px;
+        margin-left: 16px;
     }
     .el-input--prefix .el-input__inner{
         padding-left: 50px;
@@ -513,7 +573,7 @@ export default {
     }
     // 验证码
     .login-code {
-        height: 55px;
+        height: 40px;
         img {
             cursor: pointer;
             vertical-align: middle;
@@ -521,7 +581,7 @@ export default {
     }
     .login-code-img {
         flex: 1;
-        height: 55px;
+        height: 40px;
         margin-left: 8px;
     }
 
@@ -535,9 +595,9 @@ export default {
 
     // 内部供应链
     .zap-tabs{
-        width: 410px;
+        width: 320px;
+        margin: 0 auto;
         min-height: 480px;
-        padding: 10px 48px 46px;
         box-sizing: border-box;
         background-image: linear-gradient(
             #ffffff,
@@ -545,9 +605,6 @@ export default {
         linear-gradient(
             #f3f3f3,
             #f3f3f3);
-        .el-tabs__nav-wrap{
-            padding: 0 12px;
-        }
         .el-tabs__nav-wrap::after{
             height: 0;
         }
@@ -555,68 +612,78 @@ export default {
             width: 100%;
         }
         .el-tabs__item{
-            height: 56px;
-            line-height: 56px;
-            font-size: 24px;
+            height: 22px;
+            line-height: 22px;
+            font-size: 16px;
             color: #333333;
             &:nth-of-type(3){
                 padding-left: 30px;
             }
         }
         .el-tabs__item.is-active{
-            color: #0056eb;
+            color: #4280F2;
         }
         .el-tabs__active-bar{
-            background-color: #0056eb;
-        }
-    }
-    .login-left{
-        width: 704px;
-        margin-top: 40px;
-        text-align: left;
-        .login-name{
-            width: 515px;
-        }
-        .login-illustration{
-            width: 704px;
+            display: none;
         }
     }
     .zap-logo{
         position: absolute;
-        top: 25px;
-        left: 45px;
-        width: 210px;
-        height: 60px;
+        top: 50px;
+        left: 58px;
+        width: 156px;
+        height: 44px;
     }
     .zap-2dcode{
         display: flex;
         justify-content: flex-end;
         align-items: center;
-        width: 410px;;
-        padding-top: 10px;
-        padding-right: 10px;
+        padding-top: 25px;
+        padding-right: 50px;
+        margin-bottom: 63px;
         font-size: 0;
         background-color: #ffffff;
         box-sizing: border-box;
     }
     .zap-2dcode__text{
-        width: 113px;
-        height: 28px;
+        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: 60px;
-        height: 61px;
+        width: 78px;
+        height: 78px;
         cursor: pointer;
     }
     .zap-button{
         margin-top: 25px;
         width: 100%;
-        height: 55px;
-        font-size: 18px;
+        height: 40px;
+        font-size: 16px;
         border-radius: 0;
         background-image: linear-gradient(
-            #0056eb,
-            #0056eb),
+            #4280F2,
+            #4280F2),
         linear-gradient(
             #e7f0ff,
             #e7f0ff);
@@ -641,12 +708,13 @@ export default {
         cursor: pointer;
     }
     .zap-code-button{
+        margin-left: 16px;
         padding: 0 16px;
-        line-height: 55px;
-        font-size: 18px;
-        color: #23b24b;
+        line-height: 40px;
+        font-size: 14px;
+        color: #ffffff;
         border: none;
-        background-color: transparent;
+        background-color: #4280F2;
     }
     .el-button.is-disabled, .el-button.is-disabled:hover, .el-button.is-disabled:focus{
         background-color: transparent;
@@ -697,10 +765,13 @@ export default {
         color: #23b24b;
     }
     .el-tabs__header{
-        margin-bottom: 38px;
+        margin-bottom: 32px;
     }
     .el-dialog:not(.is-fullscreen){
         margin-top: 25vh !important;
     }
+    .el-form-item--medium.el-form-item{
+        margin-bottom: 32px;
+    }
 }
 </style>

front-vue/src/views/register.vue

@@ -2,13 +2,13 @@
     <div class="backdrop zap-login">
         <el-container>
             <!-- logo -->
-            <img class="zap-logo" src="../assets/images/login_logo.png" alt="">
+            <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/logo_name.png" alt="">
-                        <img class="login-illustration" src="../assets/images/login_img.png" alt="">
+                        <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">
@@ -105,8 +105,8 @@ export default {
         return {
             //默认背景图
             activeName: "login_shortMessage",
-            baseImg: require('../assets/images/login_img.png'),
-            BackgroundImg : require('../assets/images/login_img.png'),
+            baseImg: require('../assets/images/login/login_illustration.png'),
+            BackgroundImg : require('../assets/images/login/login_illustration.png'),
             scanningLogin: false, // 是否扫码登陆
             logo: '',
             // baseLogo: require('../assets/images/lgo.png'),
@@ -450,8 +450,7 @@ export default {
     }
     .login-left{
         width: 704px;
-        margin-top: 40px;
-        text-align: left;
+        padding-top: 164px;
         .login-name{
             width: 515px;
         }

front-vue/src/views/registerUser.vue

@@ -2,13 +2,13 @@
     <div class="backdrop zap-login">
         <el-container>
             <!-- logo -->
-            <img class="zap-logo" src="../assets/images/login_logo.png" alt="">
+            <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/logo_name.png" alt="">
-                        <img class="login-illustration" src="../assets/images/login_img.png" alt="">
+                        <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">
@@ -127,8 +127,8 @@ export default {
         return {
             //默认背景图
             activeName: "login_shortMessage",
-            baseImg: require('../assets/images/login_img.png'),
-            BackgroundImg : require('../assets/images/login_img.png'),
+            baseImg: require('../assets/images/login/login_illustration.png'),
+            BackgroundImg : require('../assets/images/login/login_illustration.png'),
             scanningLogin: false, // 是否扫码登陆
             logo: '',
             // baseLogo: require('../assets/images/lgo.png'),
@@ -472,7 +472,8 @@ export default {
             width: 515px;
         }
         .login-illustration{
-            width: 704px;
+            width: 532px;
+            height: 419px;
         }
     }
     .zap-logo{

front-vue/vue.config.js

@@ -34,7 +34,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://47.94.193.84:8081`,
+        target: `http://120.46.151.137:8081`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''