登录注册优化

src/main/zhi-rong-web/src/components/PageHeader.vue

@@ -8,12 +8,17 @@
                     <div class="header_top_title">白下高新区专利运营服务平台</div>
                 </div>
                 <div class="header_top_right">
-                    <div class="header_top_login" @click.prevent="$refs.registrationReset.login = true" v-if="!isLogin">
-                        [登录]
-                    </div>
+                    <div class="header_top_login" @click="$router.push('/login')" v-if="!isLogin">[登录]</div>
                     <div
                         class="header_top_login"
-                        @click.prevent="($refs.agreement3.register = true), ($refs.agreement3.identification = 1)"
+                        @click="
+                            $router.push({
+                                path: '/register',
+                                query: {
+                                    type: 1
+                                }
+                            })
+                        "
                         v-if="!isLogin"
                     >
                         [注册]
@@ -156,16 +161,17 @@
                     <div class="header_top_titles">白下高新区专利运营服务平台</div>
                 </div>
                 <div class="header_top_right">
+                    <div class="header_top_logins" @click="$router.push('/login')" v-if="!isLogin">[登录]</div>
                     <div
                         class="header_top_logins"
-                        @click.prevent="$refs.registrationReset.login = true"
-                        v-if="!isLogin"
-                    >
-                        [登录]
-                    </div>
-                    <div
-                        class="header_top_logins"
-                        @click.prevent="($refs.agreement3.register = true), ($refs.agreement3.identification = 1)"
+                        @click="
+                            $router.push({
+                                path: '/register',
+                                query: {
+                                    type: 1
+                                }
+                            })
+                        "
                         v-if="!isLogin"
                     >
                         [注册]
@@ -430,7 +436,6 @@ export default {
 
     watch: {
         loginHome() {
-            console.log('3846467a');
             if (this.loginHome) {
                 this.$refs.registrationReset.login = true;
             }
@@ -492,6 +497,7 @@ export default {
         } else {
             this.toMeta = false;
         }
+        console.log('141414', this.loginHome);
         if (this.loginHome) {
             this.$refs.registrationReset.login = true;
         }

src/main/zhi-rong-web/src/components/popup/registrationReset.vue

@@ -54,11 +54,11 @@
                     <div @keyup.enter="loginPhone">
                         <el-form-item prop="code" :rules="{ required: true, message: '请输入', trigger: 'blur' }">
                             <span class="icon">
-                                <img
-                                    src="../../assets/login_icon_yanzhengma@3x (1).png"
+                                <!-- <img
+                                    src=""
                                     alt=""
                                     class="verification_code_img"
-                                />
+                                /> -->
                             </span>
                             <div>
                                 <el-input style="width: 300px" v-model="form.code" maxlength="4" placeholder="请输入短信验证码">

src/main/zhi-rong-web/src/mixins/common.js

@@ -117,10 +117,11 @@ export default {
                         cancelButtonText: '取消'
                     })
                     .then(() => {
-                        this.$store.commit('loginVerification', true);
-                        this.$router.push({
-                            name: "home"
-                        });
+                        // this.$store.commit('loginVerification', true);
+                        this.$router.push('/login')
+                        // this.$router.push({
+                        //     name: "home"
+                        // });
                     })
                     .catch(() => {});
 

src/main/zhi-rong-web/src/router/index.js

@@ -191,6 +191,7 @@ const routes = [{
                         meta: {
                             title: '专利',
                             prePath: '/patent?caseType=GENERAL',
+                            // checkLogin: true
                             // isNavation: true
                         }
                     },
@@ -201,6 +202,7 @@ const routes = [{
                         meta: {
                             title: '专利',
                             prePath: '/patentDemand?caseType=GENERAL',
+                            // checkLogin: true
                             // isNavation: true
                         }
                     },
@@ -211,6 +213,7 @@ const routes = [{
                         meta: {
                             title: '技术/产品',
                             prePath: '/patent?caseType=DECLASSIFICATION',
+                            // checkLogin: true
                             // isNavation: true
                         }
                     },
@@ -221,6 +224,7 @@ const routes = [{
                         meta: {
                             title: '技术经理人',
                             prePath: '/technicalManager',
+                            // checkLogin: true,
                             isNavation: true
                         }
                     },
@@ -260,7 +264,8 @@ const routes = [{
                         meta: {
                             title: '专利',
                             prePath: '/successCases?category=DECLASSIFICATION',
-                            isNavation: true
+                            isNavation: true,
+                            // checkLogin: true
                         }
                     },
                     {
@@ -270,7 +275,8 @@ const routes = [{
                         meta: {
                             title: '商标',
                             prePath: '/successCases?category=DECLASSIFICATION',
-                            isNavation: true
+                            isNavation: true,
+                            // checkLogin: true
                         }
                     },
                     {
@@ -280,7 +286,8 @@ const routes = [{
                         meta: {
                             title: '版权/软著',
                             prePath: '/successCases?category=DECLASSIFICATION',
-                            isNavation: true
+                            isNavation: true,
+                            // checkLogin: true
                         }
                     },
                     {
@@ -288,9 +295,10 @@ const routes = [{
                         name: 'successProduct',
                         component: () => import('../views/market/SuccessProduct.vue'),
                         meta: {
-                            title: '产品/服务',
+                            title: '技术/产品',
                             prePath: '/successCases?category=DECLASSIFICATION',
-                            isNavation: true
+                            isNavation: true,
+                            // checkLogin: true
                         }
                     },
                     {
@@ -310,6 +318,7 @@ const routes = [{
                         meta: {
                             title: '版权/软著',
                             prePath: '/patent?caseType=DECLASSIFICATION',
+                            // checkLogin: true
                             // isNavation: true
                         }
                     },
@@ -320,6 +329,7 @@ const routes = [{
                         meta: {
                             title: '版权/软著',
                             prePath: '/patentDemand?type=COPY',
+                            // checkLogin: true
                             // isNavation: true
                         }
                     },
@@ -330,6 +340,7 @@ const routes = [{
                         meta: {
                             title: '技术/产品',
                             prePath: '/patentDemand?caseType=DECLASSIFICATION',
+                            // checkLogin: true
                             // isNavation: true
                         }
                     },
@@ -340,6 +351,7 @@ const routes = [{
                         meta: {
                             title: '商标',
                             prePath: '/patent?caseType=DECLASSIFICATION',
+                            // checkLogin: true
                             // isNavation: true
                         }
                     },
@@ -350,6 +362,7 @@ const routes = [{
                         meta: {
                             title: '商标',
                             prePath: '/patentDemand?caseType=DECLASSIFICATION',
+                            // checkLogin: true
                             // isNavation: true
                         }
                     },
@@ -400,7 +413,8 @@ const routes = [{
                 meta: {
                     title: '专利详情',
                     needHistory: true,
-                    pageDeep: 'third'
+                    pageDeep: 'third',
+                    checkLogin: true
                 }
             },
             {
@@ -410,7 +424,8 @@ const routes = [{
                 meta: {
                     title: '商标详情',
                     needHistory: true,
-                    pageDeep: 'third'
+                    pageDeep: 'third',
+                    checkLogin: true
                 }
             },
             {
@@ -420,7 +435,8 @@ const routes = [{
                 meta: {
                     title: '版权详情',
                     needHistory: true,
-                    pageDeep: 'third'
+                    pageDeep: 'third',
+                    checkLogin: true
                 }
             },
             {
@@ -430,7 +446,8 @@ const routes = [{
                 meta: {
                     title: '产品详情',
                     needHistory: true,
-                    pageDeep: 'third'
+                    pageDeep: 'third',
+                    checkLogin: true
                 }
             },
             {
@@ -440,7 +457,8 @@ const routes = [{
                 meta: {
                     title: '专利详情',
                     needHistory: true,
-                    pageDeep: 'third'
+                    pageDeep: 'third',
+                    checkLogin: true
                 }
             },
             {
@@ -450,7 +468,8 @@ const routes = [{
                 meta: {
                     title: '商标详情',
                     needHistory: true,
-                    pageDeep: 'third'
+                    pageDeep: 'third',
+                    checkLogin: true
                 }
             },
             {
@@ -460,7 +479,8 @@ const routes = [{
                 meta: {
                     title: '版权详情',
                     needHistory: true,
-                    pageDeep: 'third'
+                    pageDeep: 'third',
+                    checkLogin: true
                 }
             },
             {
@@ -470,7 +490,8 @@ const routes = [{
                 meta: {
                     title: '产品详情',
                     needHistory: true,
-                    pageDeep: 'third'
+                    pageDeep: 'third',
+                    checkLogin: true
                 }
             },
             {
@@ -577,7 +598,8 @@ const routes = [{
                 meta: {
                     title: '案例详情',
                     needHistory: true,
-                    pageDeep: 'third'
+                    pageDeep: 'third',
+                    checkLogin: true
                 }
             },
             {
@@ -978,10 +1000,11 @@ router.beforeEach((to, from, next) => {
                             cancelButtonText: '取消'
                         })
                         .then(() => {
-                            this.$store.commit('loginVerification', true);
-                            router.push({
-                                name: "home"
-                            })
+                            // this.$store.commit('loginVerification', true);
+                            router.push('/login')
+                            // router.push({
+                            //     name: "home"
+                            // })
                         })
                         .catch(() => {});
                     // next('/login');

src/main/zhi-rong-web/src/views/Index.vue

@@ -1,35 +1,43 @@
 <template>
-    <el-container id="app" direction="vertical">
-        <page-header></page-header>
-
-        <el-container direction="vertical">
-            <el-main class="main" style="width: 100%; overflow: hidden">
-                <!-- <nav-menu></nav-menu> -->
-
-                <keep-alive :include="keeps">
-                    <router-view class="appContainer" />
-                </keep-alive>
-            </el-main>
-            <el-footer height="257px">
-                <div class="footer-content">
-                    <div class="footer-content_con">
-                        <div class="center-item center-item_one">
-                            <div class="link">友情链接</div>
-                            <a href="http://jsip.jiangsu.gov.cn/" class="link_con" target="_blank">江苏省知识产权局</a>
-                            <a href="https://www.jstec.com.cn/" class="link_con" target="_blank">江苏省技术产权交易市场</a>
-                            <a href="https://ip.jsipp.cn/" class="link_con" target="_blank">江苏省知识产权公共服务平台</a>
-                            <a href="https://www.jspc.org.cn/" class="link_con" target="_blank">江苏省生产力促进中心</a>
-                        </div>
-                        <div class="center-item center-item_two">
-                            <div class="link"></div>
-                            <a href="http://amr.nanjing.gov.cn/" class="link_con" target="_blank">南京市市场监督管理局南京市知识产权局</a>
-                            <a href="http://www.njdbc.cn/" class="link_con" target="_blank">南京专利代办处</a>
-                            <a href="https://www.bxgxq.com/" class="link_con" target="_blank">白下高新智慧园区</a>
-                            <a class="link_con" target="_blank">智戎知识产权公共服务平台</a>
-                            <!-- <a href="http://gxt.jiangsu.gov.cn/" class="link_con">江苏省工业和信息化厅</a>
+    <div>
+        <el-container id="app" direction="vertical" v-if="loginRegistration == false">
+            <page-header></page-header>
+            <el-container direction="vertical">
+                <el-main class="main" style="width: 100%; overflow: hidden">
+                    <keep-alive :include="keeps">
+                        <router-view class="appContainer" />
+                    </keep-alive>
+                </el-main>
+                <el-footer height="257px">
+                    <div class="footer-content">
+                        <div class="footer-content_con">
+                            <div class="center-item center-item_one">
+                                <div class="link">友情链接</div>
+                                <a href="http://jsip.jiangsu.gov.cn/" class="link_con" target="_blank"
+                                    >江苏省知识产权局</a
+                                >
+                                <a href="https://www.jstec.com.cn/" class="link_con" target="_blank"
+                                    >江苏省技术产权交易市场</a
+                                >
+                                <a href="https://ip.jsipp.cn/" class="link_con" target="_blank"
+                                    >江苏省知识产权公共服务平台</a
+                                >
+                                <a href="https://www.jspc.org.cn/" class="link_con" target="_blank"
+                                    >江苏省生产力促进中心</a
+                                >
+                            </div>
+                            <div class="center-item center-item_two">
+                                <div class="link"></div>
+                                <a href="http://amr.nanjing.gov.cn/" class="link_con" target="_blank"
+                                    >南京市市场监督管理局南京市知识产权局</a
+                                >
+                                <a href="http://www.njdbc.cn/" class="link_con" target="_blank">南京专利代办处</a>
+                                <a href="https://www.bxgxq.com/" class="link_con" target="_blank">白下高新智慧园区</a>
+                                <a class="link_con" target="_blank">智戎知识产权公共服务平台</a>
+                                <!-- <a href="http://gxt.jiangsu.gov.cn/" class="link_con">江苏省工业和信息化厅</a>
                             <a href="http://kxjst.jiangsu.gov.cn/" class="link_con">江苏省科学技术厅</a> -->
-                        </div>
-                        <!-- <div class="center-item center-item_two">
+                            </div>
+                            <!-- <div class="center-item center-item_two">
                             <div class="link"></div>
                             <a href="http://www.smejs.cn/" class="link_con">江苏省中小企业发展中心</a>
                             <a href="http://fzggw.jiangsu.gov.cn/" class="link_con">江苏省发展和改革委员会</a>
@@ -44,26 +52,24 @@
                             <a href="http://jxw.nanjing.gov.cn/" class="link_con">南京市工业和信息化局</a>
                             <a href="http://www.njsmzx.gov.cn/" class="link_con">南京市中小企业公共服务平台</a>
                         </div> -->
-                        <!-- <div class="center-item center-item_three">
+                            <!-- <div class="center-item center-item_three">
                             <div class="link">核心服务</div>
                             <router-link to="" class="link_con">专利运营</router-link>
                             <router-link to="" class="link_con">培训服务</router-link>
                             <router-link to="" class="link_con">综合服务</router-link>
                         </div> -->
-                        <div class="center-item center-item_four">
-                            <div class="link">联系我们</div>
-                            <router-link to="/about#connect" class="link_con">电话：{{phone}}</router-link>
-                            <router-link to="/about#connect" class="link_con">邮箱：{{email}}</router-link>
-                            <router-link to="/about#connect" class="link_con"
-                                >地址：{{address}}</router-link
-                            >
-                        </div>
-                        <!-- <div>
+                            <div class="center-item center-item_four">
+                                <div class="link">联系我们</div>
+                                <router-link to="/about#connect" class="link_con">电话：{{ phone }}</router-link>
+                                <router-link to="/about#connect" class="link_con">邮箱：{{ email }}</router-link>
+                                <router-link to="/about#connect" class="link_con">地址：{{ address }}</router-link>
+                            </div>
+                            <!-- <div>
                             <img src="../assets/erweima-jpg-01.png" alt="" class="footer-content_con_img" />
                             <div class="link_con">官方微信公众号</div>
                         </div> -->
-                    </div>
-                    <!-- <div class="left"></div>
+                        </div>
+                        <!-- <div class="left"></div>
                     <div style="padding-right: 80px">
                         <div class="img">
                             <img src="../assets/erweima-jpg-01.png" alt="" />
@@ -98,18 +104,26 @@
                         style="display: block; width: 32px; height: 32px; margin-bottom: 15px"
                         alt=""
                     /> -->
-                    <!-- <div class="tips"> -->
-                    <!-- 页面所涉及产品信息仅用于展示目的，本网站及本网站展商合作方保留更改网页上所列产品相关信息的权利，恕不另行通知。 -->
-                    <!-- </div> -->
-                </div>
-                <div class="footer-content_pIc record_jump" @click="recordJump">白下高新区专利运营服务平台 © 2019 - 2022 版权所有 苏ICP备17027521号</div>
-            </el-footer>
-        </el-container>
-
-        <pop-components></pop-components>
+                        <!-- <div class="tips"> -->
+                        <!-- 页面所涉及产品信息仅用于展示目的，本网站及本网站展商合作方保留更改网页上所列产品相关信息的权利，恕不另行通知。 -->
+                        <!-- </div> -->
+                    </div>
+                    <div class="footer-content_pIc record_jump" @click="recordJump">
+                        白下高新区专利运营服务平台 © 2019 - 2022 版权所有 苏ICP备17027521号
+                    </div>
+                </el-footer>
+            </el-container>
 
-        <!-- <login /> -->
-    </el-container>
+            <pop-components></pop-components>
+        </el-container>
+        <el-container id="app" direction="vertical" v-else>
+            <el-main class="main" style="width: 100%; overflow: hidden">
+                <keep-alive :include="keeps">
+                    <router-view />
+                </keep-alive>
+            </el-main>
+        </el-container>
+    </div>
 </template>
 
 <script>
@@ -133,14 +147,29 @@ export default {
             return this.$route.meta.title || '白下知识产权';
         }
     },
-    data(){
-        return{
+    data() {
+        return {
             address: '',
             email: '',
-            phone: ''
+            phone: '',
+            loginRegistration: false
+        };
+    },
+    watch: {
+        $route() {
+            if (this.$route.name == 'login' || this.$route.name == 'register') {
+                this.loginRegistration = true;
+            } else {
+                this.loginRegistration = false;
+            }
         }
     },
     mounted() {
+        if (this.$route.name == 'login' || this.$route.name == 'register') {
+            this.loginRegistration = true;
+        } else {
+            this.loginRegistration = false;
+        }
         this.$http.get('/sysConfig/get/ADDRESS').then(res => {
             this.address = res.value;
         });
@@ -152,8 +181,8 @@ export default {
         });
     },
     methods: {
-        recordJump(){
-            location.href = 'https://beian.miit.gov.cn/'
+        recordJump() {
+            location.href = 'https://beian.miit.gov.cn/';
         }
     }
 };
@@ -181,7 +210,7 @@ export default {
 
     .flex-col();
 }
-.record_jump{
+.record_jump {
     cursor: pointer;
 }
 .footer-content {

src/main/zhi-rong-web/src/views/Login.vue

@@ -1,80 +1,112 @@
 <template>
     <div class="container">
-        <!-- <div class="top">
-            <div class="box">
-                <div></div>
-                <div class="title">{{ !phoneLogin ? '登录账号' : '短信验证登录' }}</div>
-                <img @click="all('/Home')" src="../assets/icon／close@3x.png" alt="" />
-            </div>
-        </div> -->1
-        <div class="con">
-            <el-form v-if="!phoneLogin" :model="form" ref="form" :rules="rules" label-width="0">
-                <el-form-item
-                    prop="username"
-                    :rules="{
-                        pattern: /^1[3-9]\d{9}$/,
-                        message: '请输入正确的手机号',
-                        trigger: 'blur'
-                    }"
-                >
-                    <span class="el-icon-user"></span>
-                    <el-input style="width: 300px" v-model="form.username" placeholder="请输入手机号"></el-input>
-                </el-form-item>
-                <div @keyup.enter="Login">
-                    <el-form-item prop="password" :rules="{ required: true, message: '请输入', trigger: 'blur' }">
-                        <span class="el-icon-unlock"></span>
-                        <el-input
-                            style="width: 300px"
-                            v-model="form.password"
-                            placeholder="请输入密码"
-                            type="password"
-                        ></el-input>
-                    </el-form-item>
+        <div class="container_login">
+            <div class="container_login_con">
+                <img src="../assets/nav_logo@3x.png" alt="" class="container_login_con_img" />
+                <div class="container_login_con_tips">
+                    <div
+                        class="container_login_con_tips_con"
+                        :class="{ container_login_con_tips_con_active: active === 0 }"
+                        @click="active = 0"
+                    >
+                        账号登录
+                    </div>
+                    <div
+                        class="container_login_con_tips_con"
+                        :class="{ container_login_con_tips_con_active: active === 1 }"
+                        @click="active = 1"
+                    >
+                        免密登录
+                    </div>
                 </div>
-            </el-form>
-
-            <el-form v-else :model="form" ref="form" label-width="0">
-                <el-form-item
-                    prop="phone"
-                    :rules="{
-                        pattern: /^1[3-9]\d{9}$/,
-                        message: '请输入正确的手机号',
-                        trigger: 'blur'
-                    }"
-                >
-                    <span class="el-icon-user"></span>
-                    <el-select style="width: 90px" v-model="form.region" placeholder="请选择">
-                        <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id"> </el-option>
-                    </el-select>
-                    <el-input v-model="form.phone" style="width: 210px" placeholder="请输入手机号"> </el-input>
-                </el-form-item>
-                <div @keyup.enter="loginPhone">
-                    <el-form-item prop="code" :rules="{ required: true, message: '请输入', trigger: 'blur' }">
-                        <span class="icon">
-                            <img src="../assets/login_icon_yanzhengma@3x.png" alt="" />
-                        </span>
-                        <div>
-                            <el-input style="width: 300px" v-model="form.code" placeholder="请输入短信验证码">
-                                <el-link @click="send" class="code" type="primary" :underline="false" slot="append">{{
-                                    time === 0 ? '发送验证码' : `重新发送${time}s`
-                                }}</el-link>
-                            </el-input>
+                <div class="login">
+                    <el-form v-if="active === 0" :model="form" ref="form" :rules="rules" label-width="0">
+                        <el-form-item
+                            prop="username"
+                            :rules="{
+                                required: true,
+                                pattern: /^1[3-9]\d{9}$/,
+                                message: '请输入正确的手机号',
+                                trigger: 'blur'
+                            }"
+                        >
+                            <span class="el-icon-user"></span>
+                            <el-input
+                                style="width: 300px"
+                                v-model="form.username"
+                                placeholder="请输入账号/手机号"
+                            ></el-input>
+                        </el-form-item>
+                        <div @keyup.enter="Login">
+                            <el-form-item
+                                prop="password"
+                                :rules="{ required: true, message: '请输入', trigger: 'blur' }"
+                            >
+                                <span class="el-icon-unlock"></span>
+                                <el-input
+                                    style="width: 300px"
+                                    v-model="form.password"
+                                    placeholder="请输入密码"
+                                    type="password"
+                                ></el-input>
+                            </el-form-item>
                         </div>
-                    </el-form-item>
+                    </el-form>
+                    <el-form v-else :model="form" ref="form" label-width="0">
+                        <el-form-item
+                            prop="phone"
+                            :rules="{
+                                pattern: /^1[3-9]\d{9}$/,
+                                message: '请输入正确的手机号',
+                                trigger: 'blur'
+                            }"
+                        >
+                            <span class="el-icon-user"></span>
+                            <el-select style="width: 100px" v-model="form.region" placeholder="请选择">
+                                <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id">
+                                </el-option>
+                            </el-select>
+                            <el-input v-model="form.phone" style="width: 210px" placeholder="请输入手机号"> </el-input>
+                        </el-form-item>
+                        <div @keyup.enter="loginPhone">
+                            <el-form-item prop="code" :rules="{ required: true, message: '请输入', trigger: 'blur' }">
+                                <span class="icon">
+                                    <img src="../assets/login_icon_yanzhengma@3x (1).png" alt="" class="verification_code_img" />
+                                </span>
+                                <div>
+                                    <el-input
+                                        style="width: 310px"
+                                        v-model="form.code"
+                                        maxlength="4"
+                                        placeholder="请输入短信验证码"
+                                    >
+                                        <el-link
+                                            @click="send"
+                                            :class="time === 0 ?'code':'code2'"
+                                            type="primary"
+                                            :underline="false"
+                                            slot="suffix"
+                                            >{{ time === 0 ? '发送验证码' : `重新发送${time}s` }}</el-link
+                                        >
+                                    </el-input>
+                                </div>
+                            </el-form-item>
+                        </div>
+                    </el-form>
+                    <div class="forgot_password" @click="forgotPassword">忘记密码？</div>
+                    <div class="btn">
+                        <div class="btn_one" @click="Login" v-if="active === 0">登录</div>
+                        <div class="btn_one" @click="loginPhone" v-else>登录</div>
+                        <div class="btn_two" @click="registeredAccount">注册账号</div>
+                    </div>
                 </div>
-            </el-form>
-
-            <div class="btn">
-                <el-link @click="phoneLogin = !phoneLogin">{{ phoneLogin ? '密码登录' : '短信验证码登录' }}</el-link>
-                <el-link type="primary" v-if="!phoneLogin" @click="password">忘记密码？</el-link>
-            </div>
-            <div class="sub-btn">
-                <el-button v-if="!phoneLogin" @click="Login" type="primary" class="btn-block">登录</el-button>
-                <el-button v-else @click="loginPhone" type="primary" class="btn-block">登录</el-button>
-                <el-button style="background: #f2f3f5; color: #292c33" type="info" class="btn-block" @click="Register"
-                    >还没有账号？立即注册</el-button
-                >
+                <img src="../assets/icon／close@3x (1).png" alt="" @click="$router.replace('/')" class="container_login_con_return">
             </div>
+            <el-image
+                fit="cover"
+                src="https://baixiaip.oss-cn-hangzhou.aliyuncs.com/image/2022-11-14-14-08-53xGBeEcaO.png"
+                class="container_login_img"
+            />
         </div>
     </div>
 </template>
@@ -84,8 +116,10 @@
 export default {
     data() {
         return {
+            login: false,
+            active: 0,
             show: false,
-            phoneLogin: false,
+            phoneLogin: true,
             form: {
                 region: '0'
             },
@@ -99,7 +133,27 @@ export default {
             ]
         };
     },
+    mounted(){
+        // this.active = this.$route.query.type
+    },
+    components: {},
     methods: {
+        forgotPassword() {
+            this.$router.push({
+                path: '/register',
+                query: {
+                    type: 2,
+                }
+            });
+        },
+        registeredAccount() {
+            this.$router.push({
+                path: '/register',
+                query: {
+                    type: 1,
+                }
+            });
+        },
         loginPhone() {
             this.$refs.form.validate(valid => {
                 if (valid) {
@@ -185,116 +239,196 @@ export default {
 
 <style lang="less" scoped>
 .container {
-    background: #ffffff !important;
-}
-.el-form {
-    /deep/ .el-input {
-        .el-input__inner {
-            border-width: 0px;
-            border-bottom: 1px solid #f2f3f5;
-            padding: 0 0 0;
-            height: 50px;
-            background: none;
-            line-height: 50px;
-            margin-left: 10px;
+    width: 100%;
+    height: 100vh;
+    background-image: url('../assets/png-denglu-bg@3x.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    .container_login {
+        width: 1850px;
+        margin: 0 auto;
+        margin-top: 20vh !important;
+        display: flex;
+        position: relative;
+        .container_login_con {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 450px;
+            height: 800px;
+            background: rgba(255,255,255,0.8);
+            border-radius: 8px 0px 0px 8px;
+            backdrop-filter: blur(20px);
+            z-index: 1;
+            .container_login_con_img {
+                margin-left: 26px;
+                margin-top: 30px;
+                width: 150px;
+                height: 50px;
+                margin-bottom: 90px;
+            }
+            .container_login_con_tips {
+                padding: 0px 79px;
+                display: flex;
+                justify-content: space-between;
+                margin-bottom: 50px;
+                .container_login_con_tips_con {
+                    font-size: 24px;
+                    font-family: PingFangSC-Medium, PingFang SC;
+                    font-weight: bold;
+                    color: #a4acb6;
+                    line-height: 34px;
+                    cursor: pointer;
+                }
+                .container_login_con_tips_con_active {
+                    color: #000000;
+                    position: relative;
+                    &::after {
+                        content: '';
+                        width: 48px;
+                        height: 2px;
+                        background: #000000;
+                        border-radius: 2px;
+                        position: absolute;
+                        left: 24px;
+                        bottom: -2px;
+                    }
+                }
+            }
         }
-
-        .el-input__prefix {
-            color: #292c33;
-            font-size: 18px;
+        .container_login_con_return{
+            margin-left: 206px;
+            margin-top: 157px;
+            width: 38px;
+            height: 38px;
         }
-
-        .el-input-group__append {
-            background-color: transparent;
-            border-width: 0;
-            border-bottom: 1px solid @bg;
+        .container_login_img {
+            width: 1850px;
+            height: 800px;
         }
     }
-    .el-form-item {
-        margin-bottom: 20px;
+}
+/deep/ .el-dialog {
+    margin-top: 25vh !important;
+    position: relative;
+}
+.tips {
+    position: absolute;
+    top: 30px;
+    left: 134px;
+    display: flex;
+    font-weight: 500;
+    .tips_con {
+        color: #bcc1cc;
+        font-size: 24px !important;
+        line-height: 34px;
+        cursor: pointer;
+    }
+    .tips_con:nth-of-type(odd) {
+        margin-right: 100px;
+    }
+    .active {
+        color: #292c33;
+        line-height: 34px;
+        position: relative;
+        &::after {
+            content: '';
+            width: 48px;
+            height: 2px;
+            background: #000000;
+            border-radius: 2px;
+            position: absolute;
+            left: 24px;
+            bottom: -2px;
+        }
     }
 }
-/deep/ .el-form-item__error {
-    top: 50px;
-    left: 43.5%;
+/deep/ .el-form {
+    margin-left: 60px !important;
+    margin-right: 60px !important;
+    margin-top: 0px !important;
 }
 /deep/ .el-form-item__content {
     display: flex;
-    justify-content: center;
+    border-bottom: solid 1px #DDDEE0 ;
 }
-/deep/ .el-input__prefix {
-    .el-input__icon {
-        color: orange;
-    }
+/deep/ .el-input__inner {
+    border: none;
+    background: rgba(255,255,255,0) !important;
 }
-.code {
-    color: #ff8700;
+.el-icon-user {
+    font-size: 24px;
+    margin-top: 8px;
 }
-/deep/.el-dialog--center .el-dialog__body {
-    padding: 45px 75px 55px;
+.el-icon-unlock {
+    font-size: 24px;
+    margin-top: 8px;
 }
-.top {
-    margin-bottom: 50px;
+.forgot_password {
+    font-size: 12px;
+    font-weight: 400;
+    color: #01a041;
+    line-height: 17px;
+    margin-left: 330px;
+    margin-top: 10px;
+    cursor: pointer;
 }
-.box {
-    margin: auto;
-    width: 900px;
-    height: 60px;
-    .flex();
-    background: linear-gradient(to right, #ffffff 0%, rgba(520, 226, 200, 0.2) 50%, #ffffff 100%);
-    justify-content: space-between;
-    box-shadow: -2px 0px 0px 0px #ff8700;
-    .title {
-        font-weight: 500;
-        color: #ff8700;
-        font-size: 16px;
-    }
-    img {
-        width: 24px;
-        height: 24px;
-        z-index: 1;
-    }
-}
-
-.con {
-    text-align: center;
-    .el-icon-user {
-        color: orange;
-        font-size: 24px;
-        margin-top: 13px;
-    }
-    .el-icon-unlock {
-        color: orange;
-        font-size: 24px;
-        margin-top: 12px;
-    }
-    .icon {
-        color: orange;
-        img {
-            width: 28px;
-            height: 28px;
-            padding-top: 10px;
-        }
-    }
-    .btn {
-        .flex();
+.btn {
+    margin-top: 40px;
+    margin-left: 60px;
+    cursor: pointer;
+    .btn_one {
         width: 330px;
-        justify-content: space-between;
-        margin: 0 auto;
+        height: 40px;
+        background: #01a041;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 40px;
+        margin-bottom: 20px;
+        text-align: center;
     }
-    .sub-btn {
-        padding-top: 67px;
+    .btn_two {
+        width: 330px;
+        height: 40px;
+        background: #ffffff;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: bold;
+        color: #939599;
+        line-height: 40px;
         text-align: center;
-        width: 300px;
-        margin: 0 auto;
-        .el-button {
-            font-size: 12px;
-            line-height: 16px;
-            border-width: 0px;
-            &.el-button--default {
-                background-color: @bg;
-            }
-        }
     }
 }
+.verification_code_img {
+    width: 24px;
+    height: 24px;
+    margin-top: 8px;
+}
+/deep/ .el-link--primary {
+        color: #ffffff !important;
+    }
+.code {
+    width: 100px;
+    height: 34px;
+    background: #c8c9cc;
+    border-radius: 4px;
+    font-size: 13px;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 34px;
+    cursor: pointer;
+}
+.code2 {
+    width: 100px;
+    height: 34px;
+    background: #01A041;
+    border-radius: 4px;
+    font-size: 13px;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 34px;
+    cursor: pointer;
+}
 </style>

src/main/zhi-rong-web/src/views/Register.vue

@@ -1,120 +1,152 @@
 <template>
-    <div class="container" style="margin-left: 7px">
-        <div class="top">
-            <div v-if="this.$route.query.identification == 1" class="box">
-                <div></div>
-                <div class="title">重置密码</div>
-                <img @click="all('/Home')" src="../assets/icon／close@3x.png" alt="" />
-            </div>
-            <div v-else class="box">
-                <div></div>
-                <div class="title">注册账号</div>
-                <img @click="all('/Home')" src="../assets/icon／close@3x.png" alt="" />
-            </div>
-        </div>
-        <div class="con">
-            <el-form :model="form" ref="form" :rules="rules" label-width="0">
-                <el-form-item
-                    prop="phone"
-                    :rules="{
-                        pattern: /^1[3-9]\d{9}$/,
-                        message: '请输入正确的手机号',
-                        trigger: 'blur'
-                    }"
-                >
-                    <span class="el-icon-user"></span>
-                    <el-select style="width: 90px" v-model="form.region" placeholder="请选择">
-                        <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id"> </el-option>
-                    </el-select>
-                    <el-input v-model="form.phone" style="width: 210px" placeholder="请输入手机号"> </el-input>
-                </el-form-item>
-                <el-form-item prop="code">
-                    <span class="icon">
-                        <img src="../assets/login_icon_yanzhengma@3x.png" alt="" />
-                    </span>
-                    <div>
-                        <el-input style="width: 300px" v-model="form.code" placeholder="请输入短信验证码">
-                            <div v-if="!form.phone" class="code" type="primary" :underline="false" slot="suffix">
-                                发送验证码
-                            </div>
-                            <div
-                                v-if="form.phone"
-                                @click="send"
-                                class="code1"
-                                type="primary"
-                                :underline="false"
-                                slot="suffix"
+    <div class="container">
+        <div class="container_login">
+            <div class="container_login_con">
+                <img src="../assets/nav_logo@3x.png" alt="" class="container_login_con_img" />
+                <div class="container_login_con_tips" v-if="identification == 1">注册账号</div>
+                <div class="container_login_con_tips" v-else-if="identification == 2">重置密码</div>
+                <div class="register">
+                    <el-form :model="form" ref="form" :rules="rules" label-width="0">
+                        <div>
+                            <el-form-item
+                                prop="phone"
+                                :rules="{
+                                    required: true,
+                                    pattern: /^1[3-9]\d{9}$/,
+                                    message: '请输入正确的手机号',
+                                    trigger: 'blur'
+                                }"
+                            >
+                                <span class="el-icon-user"></span>
+                                <el-select style="width: 110px" v-model="form.region" placeholder="请选择">
+                                    <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id">
+                                    </el-option>
+                                </el-select>
+                                <el-input v-model="form.phone" style="width: 240px" placeholder="请输入手机号">
+                                </el-input>
+                            </el-form-item>
+                        </div>
+                        <div>
+                            <el-form-item
+                                prop="code"
+                                :rules="{
+                                    required: true,
+                                    message: '请输入验证码',
+                                    trigger: 'blur'
+                                }"
                             >
-                                {{ time === 0 ? '发送验证码' : `重新发送${time}s` }}
-                            </div>
-                        </el-input>
+                                <span class="icon">
+                                    <img
+                                        src="../assets/login_icon_yanzhengma@3x (1).png"
+                                        alt=""
+                                        class="verification_code_img"
+                                    />
+                                </span>
+                                <div>
+                                    <el-input
+                                        style="width: 310px"
+                                        maxlength="4"
+                                        v-model="form.code"
+                                        placeholder="请输入短信验证码"
+                                    >
+                                        <div
+                                            v-if="!form.phone"
+                                            class="code"
+                                            type="primary"
+                                            :underline="false"
+                                            slot="suffix"
+                                        >
+                                            发送验证码
+                                        </div>
+                                        <div
+                                            v-if="form.phone"
+                                            @click="send"
+                                            :class="time === 0 ?'code1':'code2'"
+                                            type="primary"
+                                            :underline="false"
+                                            slot="suffix"
+                                        >
+                                            {{ time === 0 ? '发送验证码' : `重新发送${time}s` }}
+                                        </div>
+                                    </el-input>
+                                </div>
+                            </el-form-item>
+                        </div>
+                        <div>
+                            <el-form-item
+                                prop="password"
+                                :rules="{
+                                    required: true,
+                                    message: '请输入密码',
+                                    trigger: 'blur'
+                                }"
+                            >
+                                <span class="el-icon-unlock"></span>
+                                <el-input
+                                    style="width: 330px"
+                                    v-model="form.password"
+                                    type="password"
+                                    autocomplete="off"
+                                    placeholder="请输入8-16位密码，建议数字、大小写字母组合"
+                                ></el-input>
+                            </el-form-item>
+                        </div>
+                        <!-- <el-form-item prop="pass">
+                        <span class="el-icon-unlock"></span>
+                        <el-input
+                            style="width: 300px"
+                            v-model="form.pass"
+                            type="password"
+                            autocomplete="off"
+                            placeholder="请再次输入密码"
+                        ></el-input>
+                    </el-form-item> -->
+                    </el-form>
+                    <div class="xieyi">
+                        <el-checkbox v-model="checked">
+                            <template>
+                                <img class="img-icon" :src="checked ? activeIcon : inactiveIcon" />
+                            </template>
+                            <el-link style="margin-left: 23px" @click.prevent="$refs.argeement.flag = true"
+                                >点击同意注册协议</el-link
+                            >
+                        </el-checkbox>
                     </div>
-                </el-form-item>
-                <el-form-item prop="password">
-                    <span class="el-icon-unlock"></span>
-                    <el-input
-                        style="width: 300px"
-                        v-model="form.password"
-                        type="password"
-                        autocomplete="off"
-                        placeholder="请输入8-16位密码，建议数字、大小写字母组合"
-                    ></el-input>
-                </el-form-item>
-                <el-form-item prop="pass">
-                    <span class="el-icon-unlock"></span>
-                    <el-input
-                        style="width: 300px"
-                        v-model="form.pass"
-                        type="password"
-                        autocomplete="off"
-                        placeholder="请再次输入密码"
-                    ></el-input>
-                </el-form-item>
-            </el-form>
-            <template v-if="this.$route.query.identification != 1">
-                <el-checkbox v-model="checked">
-                    <el-link style="margin-bottom: 2px" @click.prevent="$refs.argeement.flag = true"
-                        >点击同意注册协议</el-link
-                    >
-                </el-checkbox>
-            </template>
-            <div class="sub-btn" style="width: 300px" v-if="this.$route.query.identification == 1">
-                <el-button type="primary" class="btn-block" @click="password">确定</el-button>
-                <el-button
-                    style="background: #f2f3f5; color: #292c33"
-                    type="info"
-                    class="btn-block"
-                    @click="all('/Login')"
-                    >想起密码，立即登录</el-button
-                >
-            </div>
-
-            <div class="sub-btn" style="width: 300px" v-else>
-                <el-button type="primary" class="btn-block" @click="doRegister">立即注册</el-button>
-                <el-button
-                    style="background: #f2f3f5; color: #292c33"
-                    type="info"
-                    class="btn-block"
-                    @click="all('/Login')"
-                    >已有账号</el-button
-                >
+                    <div class="sub-btn" style="width: 300px" v-if="identification == 1">
+                        <div class="btn-block" @click="doRegister">注册</div>
+                        <div class="btn-blocks" @click="loginNumber">已有账号，马上登录</div>
+                    </div>
+                    <div class="sub-btn" style="width: 300px" v-else-if="identification == 2">
+                        <div class="btn-block" @click="password">确定</div>
+                        <div class="btn-blocks" @click="loginNumber">
+                            想起密码，立即登录
+                        </div>
+                    </div>
+                </div>
+                <img src="../assets/icon／close@3x (1).png" alt="" @click="$router.replace('/')" class="container_login_con_return">
             </div>
+            <el-image
+                fit="cover"
+                src="https://baixiaip.oss-cn-hangzhou.aliyuncs.com/image/2022-11-14-14-08-53xGBeEcaO.png"
+                class="container_login_img"
+            />
         </div>
-        <agreement ref="argeement"></agreement>
     </div>
 </template>
 
 <script>
 import Agreement from '../components/popup/Agreement.vue';
 export default {
-    components: { Agreement},
     data() {
         return {
+            register: false,
+            identification: 1,
             show: false,
-            identification: 2,
             form: {
                 region: '0'
             },
+            activeIcon: require('../assets/png-Selected@3x.png'),
+            inactiveIcon: require('../assets/png-normal@3x.png'),
             checked: false,
             time: 0,
             rules: {
@@ -136,11 +168,26 @@ export default {
             list: [{ id: '0', name: 'CH +86' }]
         };
     },
+    mounted() {
+        this.identification = this.$route.query.type;
+    },
     methods: {
+        loginNumber() {
+            this.$router.push({
+                path: '/login',
+                query: {
+                    type: 0,
+                }
+            });
+        },
         send() {
             this.sendCode(this.form.phone);
         },
         password() {
+            if (this.checked == false) {
+                this.$message.warning('请点击同意注册协议');
+                return;
+            }
             this.$refs.form.validate(valid => {
                 if (valid) {
                     this.loading = true;
@@ -189,14 +236,15 @@ export default {
                             this.$http
                                 .post('/auth/register', {
                                     phone: this.form.phone,
-                                    password: this.form.password,
-                                    code: this.form.code
+                                    password: this.form.password
                                 })
                                 .then(res => {
                                     localStorage.setItem('webToken', res);
                                     this.$message.warning('注册成功');
                                     this.$store.dispatch('getUserInfo');
-                                    this.$router.push('/registration');
+                                })
+                                .then(() => {
+                                    this.$router.replace('/');
                                 })
                                 .catch(e => {
                                     this.$message.error(e.error);
@@ -208,152 +256,197 @@ export default {
                 }
             });
         }
+    },
+    components: {
+        Agreement
     }
 };
 </script>
-
 <style lang="less" scoped>
 .container {
-    background: #ffffff !important;
-    margin-bottom: -20px;
-    // margin-left: 2px;
-}
-/deep/ .el-checkbox {
-    margin-left: -129px;
-}
-.el-form {
-    /deep/ .el-input {
-        .el-input__inner {
-            border-width: 0px;
-            border-bottom: 1px solid #f2f3f5;
-            padding: 0 0 0;
-            height: 50px;
-            background: none;
-            line-height: 50px;
-            margin-left: 10px;
+    width: 100%;
+    height: 100vh;
+    background-image: url('../assets/png-denglu-bg@3x.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    .container_login {
+        width: 1850px;
+        margin: 0 auto;
+        margin-top: 20vh !important;
+        display: flex;
+        position: relative;
+        .container_login_con {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 450px;
+            height: 800px;
+            background: rgba(255,255,255,0.8);
+            border-radius: 8px 0px 0px 8px;
+            backdrop-filter: blur(20px);
+            z-index: 1;
+            .container_login_con_img {
+                margin-left: 26px;
+                margin-top: 30px;
+                width: 150px;
+                height: 50px;
+                margin-bottom: 90px;
+            }
+            .container_login_con_tips {
+                font-size: 24px;
+                font-family: PingFangSC-Semibold, PingFang SC;
+                font-weight: bold;
+                color: #000000;
+                line-height: 34px;
+                text-align: center;
+                margin-bottom: 54px;
+            }
         }
-
-        .el-input__prefix {
-            color: #292c33;
-            font-size: 18px;
+        .container_login_con_return {
+            margin-left: 206px;
+            margin-top: 87px;
+            width: 38px;
+            height: 38px;
         }
-
-        .el-input-group__append {
-            background-color: transparent;
-            border-width: 0;
+        .container_login_img {
+            width: 1850px;
+            height: 800px;
         }
     }
-    .el-form-item {
-        margin-bottom: 20px;
+}
+/deep/ .el-dialog {
+    margin-top: 25vh !important;
+    position: relative;
+}
+.tips {
+    position: absolute;
+    top: 30px;
+    left: 232px;
+    display: flex;
+    font-weight: 500;
+    .tips_con {
+        color: #000000;
+        line-height: 34px;
+        cursor: pointer;
+        position: relative;
+        font-size: 24px;
+        &::after {
+            content: '';
+            width: 48px;
+            height: 2px;
+            background: #000000;
+            border-radius: 2px;
+            position: absolute;
+            left: 24px;
+            bottom: -2px;
+        }
     }
 }
+/deep/ .el-form {
+    margin-left: 60px !important;
+    margin-right: 60px !important;
+    margin-top: 0px !important;
+}
 /deep/ .el-form-item__content {
     display: flex;
-    justify-content: center;
+    border-bottom: solid 1px #DDDEE0;
 }
-/deep/ .el-checkbox__inner {
-    border-radius: 50%;
+/deep/ .el-input__inner {
+    border: none;
+    background: rgba(255,255,255,0) !important;
 }
-/deep/ .el-checkbox__label {
-    font-size: 13px;
+.el-icon-user {
+    font-size: 24px;
+    margin-top: 8px;
 }
-/deep/ .el-input__prefix {
-    .el-input__icon {
-        color: orange;
-    }
+.el-icon-unlock {
+    font-size: 24px;
+    margin-top: 8px;
 }
-/deep/ .el-form-item__error {
-    top: 50px;
-    left: 43.5%;
+.verification_code_img {
+    width: 24px;
+    height: 24px;
+    margin-top: 8px;
 }
-.code {
+.code1 {
     width: 100px;
-    line-height: 40px;
+    height: 34px;
     background: #c8c9cc;
     border-radius: 4px;
-    cursor: pointer;
-    margin-bottom: -6px;
-    text-align: center;
+    font-size: 13px;
+    font-weight: 400;
     color: #ffffff;
+    line-height: 34px;
+    cursor: pointer;
 }
-.code1 {
+.code2 {
     width: 100px;
-    line-height: 40px;
-    background: orange;
+    height: 34px;
+    background: #01A041;
     border-radius: 4px;
-    cursor: pointer;
-    margin-bottom: -6px;
-    text-align: center;
+    font-size: 13px;
+    font-weight: 400;
     color: #ffffff;
-}
-/deep/.el-dialog--center .el-dialog__body {
-    padding: 45px 75px 55px;
-}
-/deep/ .el-radio {
-    margin-right: 120px;
-}
-.el-dropdown-link {
+    line-height: 34px;
     cursor: pointer;
-    color: #000000;
 }
-.el-icon-arrow-down {
-    font-size: 12px;
+.code {
+    width: 100px;
+    height: 34px;
+    background: #c8c9cc;
+    border-radius: 4px;
+    font-size: 13px;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 34px;
 }
-.top {
-    margin-bottom: 50px;
+.xieyi {
+    margin-left: 60px;
+    margin-bottom: 39px;
 }
-.box {
-    margin: auto;
-    width: 900px;
-    height: 60px;
-    .flex();
-    background: linear-gradient(to right, #ffffff 0%, rgba(520, 226, 200, 0.2) 50%, #ffffff 100%);
-    justify-content: space-between;
-    box-shadow: -2px 0px 0px 0px #ff8700;
-    img {
-        width: 24px;
-        height: 24px;
-        z-index: 1;
-    }
-    .title {
-        font-weight: 500;
-        color: #ff8700;
-        font-size: 16px;
-    }
+/deep/ .el-link.el-link--default{
+    color: #01a041;
 }
-.con {
+.sub-btn {
+    margin-left: 60px;
     text-align: center;
-    .el-icon-user {
-        color: orange;
-        font-size: 24px;
-        margin-top: 13px;
-    }
-    .el-icon-unlock {
-        color: orange;
-        font-size: 24px;
-        margin-top: 12px;
-    }
-    .icon {
-        color: orange;
-        img {
-            width: 28px;
-            height: 28px;
-            padding-top: 10px;
-        }
+    cursor: pointer;
+    .btn-block {
+        width: 330px;
+        height: 40px;
+        background: #01a041;
+        border-radius: 4px;
+        font-size: 12px;
+        color: #ffffff;
+        font-weight: bold;
+        line-height: 40px;
+        margin-bottom: 20px;
     }
-    .sub-btn {
-        padding-top: 67px;
-        text-align: center;
-        width: 300px;
-        margin: 0 auto;
-        .el-button {
-            font-size: 12px;
-            line-height: 16px;
-            border-width: 0px;
-            &.el-button--default {
-                background-color: @bg;
-            }
-        }
+    .btn-blocks {
+        width: 330px;
+        height: 40px;
+        background: #ffffff;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: bold;
+        color: #939599;
+        line-height: 40px;
     }
 }
+.img-icon {
+    width: 18px;
+    height: 18px;
+    position: absolute;
+    left: 0;
+    top: 2px;
+}
+/deep/ .el-checkbox__input {
+    display: none;
+}
+/deep/ .el-checkbox__label {
+    padding-left: 0px;
+    position: relative;
+    // display: flex;
+    // align-items: center;
+}
 </style>