将登录布局抽成组件

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

@@ -6,7 +6,7 @@
     width: 100%;
     min-height: 100%;
     padding: 55px;
-    background-image: url("../assets/images/login/login_bg.png");
+    background-image: url("~@/assets/images/login/login_bg.png");
     background-size:cover;
     background-repeat:no-repeat;
     background-position:center center;/*居中显示*/
@@ -43,19 +43,6 @@
         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%;
@@ -255,10 +242,12 @@
         box-sizing: border-box;
     }
     .zap-scanning__content{
+        width: 320px;
+        margin: 0 auto;
         text-align: center;
     }
     .zap-scanning__title{
-        padding: 0 60px;
+        text-align: left;
         font-size: 24px;
         color: #333333;
     }

front-vue/src/components/Copyright/index.vue

@@ -0,0 +1,30 @@
+<template>
+<el-row class="copyright">
+    <span class="copyright__text">联系方式：0531-00001234</span>
+    <span class="copyright__text">邮箱：zcyl@zcylian.com</span>
+    <span class="copyright__text">公安联网备案号：1234567</span>
+    <span class="copyright__text">Copyright@招采云链（山东）信息</span>
+</el-row>
+</template>
+
+<script>
+export default {
+    name: 'Copyright'
+}
+</script>
+
+<style lang="scss">
+.copyright{
+        margin-top: 57px;
+        margin-bottom: 25px;
+        text-align: center;
+    }
+    .copyright__text{
+        margin-right: 25px;
+        font-size: 14px;
+        color: #999999;
+        &:nth-last-child(1){
+            margin-right: 0;
+        }
+    }
+</style>

front-vue/src/components/LoginContent/index.vue

@@ -0,0 +1,39 @@
+<template>
+<div class="backdrop">
+    <el-container class="zap-login">
+        <!-- logo -->
+        <img class="zap-logo" src="../../assets/images/login/login_logo.png" alt="">
+        <el-main>
+            <!-- 中间部分 -->
+            <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">
+                    <slot></slot>
+                </el-col>
+                <!--  底部  -->
+            </el-row>
+            <copyright></copyright>
+        </el-main>
+    </el-container>
+</div>
+</template>
+
+<script>
+import Copyright from '@/components/Copyright/index.vue'
+export default {
+    name: "LoginContent",
+    components: {
+        Copyright: Copyright
+    }
+}
+</script>
+
+<style lang="scss">
+@import "~@/assets/styles/login.scss";
+</style>

front-vue/src/views/forgetUser.vue

@@ -1,69 +1,50 @@
 <template>
-    <div class="backdrop">
-        <el-container class="zap-login">
-            <!-- logo -->
-            <img class="zap-logo" src="../assets/images/login/login_logo.png" alt="">
-             <el-main>
-                <!-- 中间部分 -->
-                <el-row>
-                    <el-col :span="13">
-                        <el-row class="login-media">
-                            <img class="login-name" src="../assets/images/login/login_name.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">
-                                    <!-- <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" v-if="!passwordUpdate">
-                                            <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" v-if="!passwordUpdate">
-                                            <el-input v-model="loginForm.shortMessageCode" type="text"  maxlength="" auto-complete="off" placeholder="请输入验证码" class="login-code-msg" 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 style="width:100%;" v-if="!passwordUpdate">
-                                            <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 prop="password" v-if="passwordUpdate">
-                                            <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" v-if="passwordUpdate">
-                                            <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 style="width:100%;" v-if="passwordUpdate">
-                                            <el-button :loading="loading"  class="zap-button" size="medium" type="primary" @click.native.prevent="handleUpdate">
-                                                <span v-if="!loading">下 一 步</span>
-                                                <span v-else>请 稍 后...</span>
-                                            </el-button>
-                                        </el-form-item>
-                                    </el-tab-pane>
-                                </el-tabs>
-                            </template>
-                        </el-form>
-                    </el-col>
-                    <!--  底部  -->
-                </el-row>
-            </el-main>
-        </el-container>
-        <el-footer></el-footer>
+    <login-content>
+        <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" v-if="!passwordUpdate">
+                            <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" v-if="!passwordUpdate">
+                            <el-input v-model="loginForm.shortMessageCode" type="text"  maxlength="" auto-complete="off" placeholder="请输入验证码" class="login-code-msg" 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 style="width:100%;" v-if="!passwordUpdate">
+                            <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 prop="password" v-if="passwordUpdate">
+                            <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" v-if="passwordUpdate">
+                            <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 style="width:100%;" v-if="passwordUpdate">
+                            <el-button :loading="loading"  class="zap-button" size="medium" type="primary" @click.native.prevent="handleUpdate">
+                                <span v-if="!loading">下 一 步</span>
+                                <span v-else>请 稍 后...</span>
+                            </el-button>
+                        </el-form-item>
+                    </el-tab-pane>
+                </el-tabs>
+            </template>
+        </el-form>
 
         <!-- 密码登录验证码 -->
         <el-dialog
@@ -83,7 +64,7 @@
                 <el-button type="primary" @click="handleImgCodeSubmit">确 定</el-button>
             </span>
         </el-dialog>
-    </div>
+    </login-content>
 </template>
 <script>
 import { getCodeImg, sendShortMessage, chooseCompanyLogin, forgetUser, updateUser} from "@/api/login";
@@ -91,9 +72,11 @@ import { wxImg } from "@/api/system/weChat";
 import Cookies from "js-cookie";
 import { encrypt, decrypt } from "@/utils/jsencrypt";
 import wxlogin from 'vue-wxlogin'
+import LoginContent from "@/components/LoginContent/index.vue"
 export default {
   components: {
-    wxlogin : wxlogin
+    wxlogin : wxlogin,
+    LoginContent: LoginContent
   },
     name: "Login",
     data() {

front-vue/src/views/login.vue

@@ -1,158 +1,132 @@
 <template>
-    <div class="backdrop">
-        <el-container class="zap-login">
-            <!-- logo -->
-            <img class="zap-logo" src="../assets/images/login/login_logo.png" alt="">
-             <el-main>
-                <!-- 中间部分 -->
-                <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>
-                                        </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=""> -->
-                                <div class="zap-scanning__content">
-                                    <wxlogin :appid="wx_appid" :scope="wx_scope" :redirect_uri="wx_redirect_uri"></wxlogin>
+    <login-content>
+        <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 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>
+                    </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>
-                                <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-col>
-                    <!--  底部  -->
-                </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="选择企业"
-              :visible.sync="dialogVisible"
-              width="30%">
-              <el-select v-model="chooseCompanyId" placeholder="请选择">
-                <el-option
-                  v-for="item in companyList"
-                  :key="item.scyId"
-                  :label="item.scyName"
-                  :value="item.scyId">
-                </el-option>
-              </el-select>
-              <span slot="footer" class="dialog-footer">
-                <el-button type="primary" @click="chooseLogin()">确 定</el-button>
-              </span>
-            </el-dialog>
-        </el-container>
-
+                        </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>
+                <!-- <img class="zap-scanning__img" :src="wxSrc" alt=""> -->
+                <div class="zap-scanning__content">
+                    <div class="zap-scanning__title">手机扫码</div>
+                    <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;">
+                            <span class="zap-agreement__text">登录视为同意并遵守</span>
+                            <div class="zap-agreement__link">
+                                <span>《招采云链服务平台会员注册协议》</span>
+                                <span>《招采云链服务平台隐私政策》</span>
+                            </div>
+                        </div>
+                    </el-form-item>
+                </div>
+            </div>
+        </el-form>
+        <el-dialog
+            title="选择企业"
+            :visible.sync="dialogVisible"
+            width="30%">
+            <el-select v-model="chooseCompanyId" placeholder="请选择">
+            <el-option
+                v-for="item in companyList"
+                :key="item.scyId"
+                :label="item.scyName"
+                :value="item.scyId">
+            </el-option>
+            </el-select>
+            <span slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="chooseLogin()">确 定</el-button>
+            </span>
+        </el-dialog>
         <!-- 密码登录验证码 -->
         <el-dialog
             title="验证码"
@@ -171,7 +145,7 @@
                 <el-button type="primary" @click="handleImgCodeSubmit">确 定</el-button>
             </span>
         </el-dialog>
-    </div>
+    </login-content>
 </template>
 <script>
 import { getCodeImg, sendShortMessage, chooseCompanyLogin} from "@/api/login";
@@ -179,9 +153,11 @@ import { wxImg, getWxParam } from "@/api/system/weChat";
 import Cookies from "js-cookie";
 import { encrypt, decrypt } from "@/utils/jsencrypt";
 import wxlogin from 'vue-wxlogin'
+import LoginContent from "@/components/LoginContent/index.vue"
 export default {
   components: {
-    wxlogin : wxlogin
+    wxlogin : wxlogin,
+    LoginContent: LoginContent
   },
     name: "Login",
     data() {
@@ -470,6 +446,4 @@ export default {
     }
 };
 </script>
-<style rel="stylesheet/scss" lang="scss">
-  @import "~@/assets/styles/login.scss";
-</style>
+

front-vue/src/views/registerUser.vue

@@ -1,104 +1,77 @@
 <template>
-    <div class="backdrop">
-        <el-container class="zap-login">
-            <!-- logo -->
-            <img class="zap-logo" src="../assets/images/login/login_logo.png" alt="">
-             <el-main>
-                <!-- 中间部分 -->
-                <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>
-                                            </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>
-                    <!--  底部  -->
-                </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="选择企业"
-              :visible.sync="dialogVisible"
-              width="30%">
-              <el-select v-model="chooseCompanyId" placeholder="请选择">
-                <el-option
-                  v-for="item in companyList"
-                  :key="item.scyId"
-                  :label="item.scyName"
-                  :value="item.scyId">
-                </el-option>
-              </el-select>
-              <span slot="footer" class="dialog-footer">
-                <el-button type="primary" @click="chooseLogin()">确 定</el-button>
-              </span>
-            </el-dialog>
-        </el-container>
-        <el-footer></el-footer>
-
+    <login-content>
+        <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>
+                            </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-dialog
+            title="选择企业"
+            :visible.sync="dialogVisible"
+            width="30%">
+            <el-select v-model="chooseCompanyId" placeholder="请选择">
+            <el-option
+                v-for="item in companyList"
+                :key="item.scyId"
+                :label="item.scyName"
+                :value="item.scyId">
+            </el-option>
+            </el-select>
+            <span slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="chooseLogin()">确 定</el-button>
+            </span>
+        </el-dialog>
         <!-- 密码登录验证码 -->
         <el-dialog
             title="验证码"
@@ -117,7 +90,7 @@
                 <el-button type="primary" @click="handleImgCodeSubmit">确 定</el-button>
             </span>
         </el-dialog>
-    </div>
+    </login-content>
 </template>
 <script>
 import { getCodeImg, sendShortMessage, chooseCompanyLogin, registerUser} from "@/api/login";
@@ -125,9 +98,11 @@ import { wxImg } from "@/api/system/weChat";
 import Cookies from "js-cookie";
 import { encrypt, decrypt } from "@/utils/jsencrypt";
 import wxlogin from 'vue-wxlogin'
+import LoginContent from "@/components/LoginContent/index.vue"
 export default {
   components: {
-    wxlogin : wxlogin
+    wxlogin : wxlogin,
+    LoginContent: LoginContent
   },
     name: "Login",
     data() {