用户修改密码，登录增加短信验证功能

src/api/system.js

@@ -2,11 +2,11 @@
  * 系统管理的api管理
  * 系统管理的api管理
  */
  */
 import { getAction, postAction,postFormAction } from '@/api/manage'
 import { getAction, postAction,postFormAction } from '@/api/manage'
-let prefix = 'auth/ciop/'
+let prefix = 'auth/ciop'
 
 
 //忘记密码
 //忘记密码
-let register = (params) => postAction(prefix+"forgerpw/changePwd", params);
-let registercode = (params) => postAction(prefix+"forgerpw/verificationCode", params);
+let register = (params) => postAction(prefix+"/forgerpw/changePwd", params);
+let registercode = (params) => postAction(prefix+"/forgerpw/verificationCode", params);
 // 用户管理
 // 用户管理
 let getList = (params) => getAction(prefix+"/dept/tree", params);
 let getList = (params) => getAction(prefix+"/dept/tree", params);
 let tabList = (params) => getAction(prefix+"/mgr/list", params);
 let tabList = (params) => getAction(prefix+"/mgr/list", params);
@@ -19,7 +19,7 @@ let roleTreeList = (params) => postAction(prefix+"/role/roleTreeListByUserId", p
 let roleTreeList2 = (params) => postAction(prefix+"/role/roleTreeListByUserId/"+params["id"], {});
 let roleTreeList2 = (params) => postAction(prefix+"/role/roleTreeListByUserId/"+params["id"], {});
 let userFreeze= (params) => postAction(prefix+"/mgr/freeze", params);
 let userFreeze= (params) => postAction(prefix+"/mgr/freeze", params);
 let userUnFreeze= (params) => postAction(prefix+"/mgr/unfreeze", params);
 let userUnFreeze= (params) => postAction(prefix+"/mgr/unfreeze", params);
-let changeOtherPwd= (params) => postAction(prefix+"/mgr/changeOtherPwd", params);//超级用户修改密码
+let changeOtherPwd= (params) => postAction(prefix+"/forgerpw/changeOtherPwd", params);//修改密码
 //部门管理
 //部门管理
 const departmentList = (params) => getAction(prefix+"/dept/departmentList", params);
 const departmentList = (params) => getAction(prefix+"/dept/departmentList", params);
 let deptAdd = (params) => postAction(prefix+"/dept/add", params);
 let deptAdd = (params) => postAction(prefix+"/dept/add", params);

src/config/router.config.js

@@ -14,7 +14,13 @@ export const asyncRouterMap = [{
         path: 'login',
         path: 'login',
         name: 'login',
         name: 'login',
         component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login')
         component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login')
-      },
+      }
+        ,
+        {
+            path: 'register',
+            name: 'register',
+            component: () => import(/* webpackChunkName: "user" */ '@/views/user/register')
+        },
         {
         {
             path: 'ueditor2',
             path: 'ueditor2',
             name: 'ueditor2',
             name: 'ueditor2',

src/views/system/systemUser.vue

@@ -90,8 +90,13 @@
         </s-table>
         </s-table>
       <!-- 修改密码 -->
       <!-- 修改密码 -->
       <a-modal title="密码修改" v-model="editpaswordmodel" @ok="editPassword" @cancel="editPasswordcancel">
       <a-modal title="密码修改" v-model="editpaswordmodel" @ok="editPassword" @cancel="editPasswordcancel">
-        <a-form :form="EditPassFrom">
-          <a-form-item label="新密码" >
+        <a-form :form="EditPassFrom" >
+
+            <a-form-item label="原密码" v-if="hasOperationPermission(['超级管理员'])">
+                <a-input placeholder="原密码" type="password" v-model="editpasswordfrom.oldPwd"></a-input>
+            </a-form-item>
+
+            <a-form-item label="新密码" >
             <a-input placeholder="新密码"  v-decorator="['editpassword',{rules: [{ required: true, message: '新密码不能为空！' }]}]"  type="password"></a-input>
             <a-input placeholder="新密码"  v-decorator="['editpassword',{rules: [{ required: true, message: '新密码不能为空！' }]}]"  type="password"></a-input>
           </a-form-item>
           </a-form-item>
           <a-form-item label="确认密码" >
           <a-form-item label="确认密码" >
@@ -252,6 +257,7 @@ export default {
       //修改密码窗口
       //修改密码窗口
       editpaswordmodel:false,
       editpaswordmodel:false,
       editpasswordfrom:{
       editpasswordfrom:{
+          oldPwd:'',
         newPwd:"",
         newPwd:"",
         rePwd:"",
         rePwd:"",
         changeId:"",
         changeId:"",
@@ -356,26 +362,29 @@ export default {
     },
     },
     //提交密码修改
     //提交密码修改
     editPassword() {
     editPassword() {
+        if(this.hasOperationPermission(['超级管理员'])){
+            if(this.editpasswordfrom.oldPwd == '' || this.editpasswordfrom.oldPwd==undefined){
+                this.$message.error("请输入原密码！", 5);
+            }
+        }
       this.EditPassFrom.validateFields(err => {
       this.EditPassFrom.validateFields(err => {
         if (!err) {
         if (!err) {
           this.editpasswordfrom.newPwd= encodeURIComponent(this.getPass(this.EditPassFrom.getFieldValue('editpassword')))
           this.editpasswordfrom.newPwd= encodeURIComponent(this.getPass(this.EditPassFrom.getFieldValue('editpassword')))
+            this.editpasswordfrom.oldPwd= encodeURIComponent(this.getPass(this.editpasswordfrom.oldPwd))
           this.editpasswordfrom.rePwd=this.editpasswordfrom.newPwd
           this.editpasswordfrom.rePwd=this.editpasswordfrom.newPwd
           changeOtherPwd(this.editpasswordfrom).then(res => {
           changeOtherPwd(this.editpasswordfrom).then(res => {
-            if (res.code == 200) {
+            if (res.state == 'success') {
+                this.editpasswordfrom.oldPwd = ''
+                this.editpasswordfrom.editrepassword = ''
+                this.editpasswordfrom.editpassword = ''
               this.EditPassFrom.setFieldsValue({editpassword:""});
               this.EditPassFrom.setFieldsValue({editpassword:""});
               this.EditPassFrom.setFieldsValue({editrepassword:""});
               this.EditPassFrom.setFieldsValue({editrepassword:""});
-              if(res.message==undefined){
                 this.$message.success(res.data != "" ? res.data : "修改成功", 5);
                 this.$message.success(res.data != "" ? res.data : "修改成功", 5);
-              }else {
-                this.$message.success(res.message != "" ? res.message : "修改成功", 5);
-              }
-
             }else{
             }else{
-              if(res.message==undefined){
-                this.$message.error(res.data != "" ? res.data : "失败修改", 5);
-              }else {
-                this.$message.error(res.message != "" ? res.message : "失败修改", 5);
-              }
+                this.editpasswordfrom.oldPwd = ''
+                this.editpasswordfrom.editrepassword = ''
+                this.editpasswordfrom.editpassword = ''
+                this.$message.error(res.msg != "" ? res.msg : "修改失败", 5);
             }
             }
             this.editpaswordmodel = false
             this.editpaswordmodel = false
           })
           })
@@ -577,6 +586,14 @@ export default {
         that.$refs.table.refresh({ search: true })
         that.$refs.table.refresh({ search: true })
       })
       })
     },
     },
+      hasOperationPermission(marks = []) {
+          for (const index in marks) {
+              if (this.$store.state.user.info.role.indexOf(marks[index]) > -1) {
+                  return false;
+              }
+          }
+          return true;
+      },
     updatePassword(userid){
     updatePassword(userid){
       this.editpaswordmodel=true
       this.editpaswordmodel=true
       this.editpasswordfrom.changeId=userid;
       this.editpasswordfrom.changeId=userid;

src/views/user/Login.vue

@@ -39,6 +39,31 @@
           </a-col>
           </a-col>
         </a-row>
         </a-row>
 
 
+          <a-row :gutter="0">
+            <a-col :span="14">
+              <a-form-item>
+                <a-input
+                        :disabled="!loginBtn"
+                        v-decorator="['phonecode',validatorRules.phoneCode]"
+                        size="large"
+                        type="text"
+                        placeholder="请输入手机验证码">
+                  <a-icon slot="prefix" type="message" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+                </a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :span="10">
+              <a-button
+                      size="small"
+                      type="primary"
+                      htmlType="submit"
+                      class="code-button"
+                      @click.stop.prevent="getCode"
+                      :disabled="!loginBtn">{{codeMsg}}
+              </a-button>
+              <!--            <j-graphic-code @success="generateCode" style="float: right"></j-graphic-code>-->
+            </a-col>
+          </a-row>
           <a-form-item>
           <a-form-item>
             <a-input
             <a-input
                     :disabled="!loginBtn"
                     :disabled="!loginBtn"
@@ -50,7 +75,7 @@
               <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
               <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
             </a-input>
             </a-input>
           </a-form-item>
           </a-form-item>
-<!--          <div class="register">忘记密码?<router-link :to="{path: '/user/register'}">找回密码</router-link></div>-->
+          <div class="register">忘记密码?<router-link :to="{path: '/user/register'}">找回密码</router-link></div>
 
 
         <a-form-item style="margin-top:24vw/@vw">
         <a-form-item style="margin-top:24vw/@vw">
           <a-button
           <a-button
@@ -125,7 +150,6 @@ export default {
   created() {
   created() {
     Vue.ls.remove(ACCESS_TOKEN)
     Vue.ls.remove(ACCESS_TOKEN)
     this.getRouterData();
     this.getRouterData();
-    this.browserTips();
   },
   },
   methods: {
   methods: {
     ...mapActions(["Login", "Logout"]),
     ...mapActions(["Login", "Logout"]),
@@ -150,6 +174,17 @@ export default {
         let data = {
         let data = {
           username: username,
           username: username,
         }
         }
+        getPhoneCode(data).then(res => {
+          if (res.code == 200) {
+            this.$notification.success({
+              message: res.message ? res.message :"发送成功",
+            });
+            return null;
+          }
+          this.$notification.error({
+            message: res.message ? res.message :"发送错误",
+          });
+        })
         //初始化倒计时
         //初始化倒计时
         this.countdown=60;
         this.countdown=60;
         this.timer = setInterval(() => {
         this.timer = setInterval(() => {
@@ -174,11 +209,12 @@ export default {
         smsCode: "xxxx"
         smsCode: "xxxx"
       };
       };
       // 使用账户密码登陆
       // 使用账户密码登陆
-      that.form.validateFields(['username', 'password', 'inputCode'], {force: true}, (err, values) => {
+      that.form.validateFields(['username', 'password', 'inputCode',"phonecode"], {force: true}, (err, values) => {
         if (!err) {
         if (!err) {
           loginParams.username = values.username;
           loginParams.username = values.username;
           loginParams.password = encodeURIComponent(this.getPass(values.password));
           loginParams.password = encodeURIComponent(this.getPass(values.password));
           loginParams.remember = that.formLogin.remember;
           loginParams.remember = that.formLogin.remember;
+          loginParams.phonecode=encodeURIComponent(this.getPass(values.phonecode));
           //console.log(loginParams);
           //console.log(loginParams);
           that.Login(loginParams).then(() => {
           that.Login(loginParams).then(() => {
             this.departConfirm({});
             this.departConfirm({});
@@ -290,54 +326,6 @@ export default {
         });
         });
       })
       })
     },
     },
-    // 提示浏览器版本
-    browserTips() {
-      //取得浏览器的userAgent字符串
-      let userAgent = navigator.userAgent;
-      try {
-        //判断是否IE<11浏览器
-        let isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
-        //判断是否IE的Edge浏览器
-        let isEdge = userAgent.indexOf("Edge") > -1 && !isIE;
-        let isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
-        if (isIE) {
-          let reIE = new RegExp("MSIE (\\d+\\.\\d+);");
-          reIE.test(userAgent);
-          let fIEVersion = parseFloat(RegExp["$1"]);
-          if (fIEVersion == 7) {
-            this.$notification.error({
-              message: "系统不兼容 IE 7 浏览器，推荐使用Chrome。请到https://www.google.cn/chrome 下载。如果使用双核浏览器请切换极速模式！"
-            });
-          } else if (fIEVersion == 8) {
-            this.$notification.error({
-              message: "系统不兼容 IE 8 浏览器，推荐使用Chrome。请到https://www.google.cn/chrome 下载。如果使用双核浏览器请切换极速模式！"
-            });
-          } else if (fIEVersion == 9) {
-            this.$notification.error({
-              message: "系统不兼容 IE 9 浏览器，推荐使用Chrome。请到https://www.google.cn/chrome 下载。如果使用双核浏览器请切换极速模式！"
-            });
-          } else if (fIEVersion == 10) {
-            this.$notification.error({
-              message: "系统不兼容 IE 10 浏览器，推荐使用Chrome。请到https://www.google.cn/chrome 下载。如果使用双核浏览器请切换极速模式！"
-            });
-          } else {
-            this.$notification.error({
-              message: "系统不兼容 IE 6及其以下版本浏览器，推荐使用Chrome。请到https://www.google.cn/chrome 下载。如果使用双核浏览器请切换极速模式！"
-            });
-          }
-        } else if (isEdge) {
-          this.$notification.error({
-            message: "系统不兼容 IE Edge 浏览器，推荐使用Chrome。请到https://www.google.cn/chrome 下载。如果使用双核浏览器请切换极速模式！"
-          });
-        } else if (isIE11) {
-          this.$notification.error({
-            message: "系统不兼容 IE 11 浏览器，推荐使用Chrome。请到https://www.google.cn/chrome 下载。如果使用双核浏览器请切换极速模式！"
-          });
-        }
-      } finally {
-        console.log(userAgent);
-      }
-    }
   }
   }
 }
 }
 </script>
 </script>

src/views/user/register.vue

+<template>
+  <div class="main clearfix">
+    <div class="caption">
+
+    </div>
+    <div class="form">
+      <span class="form_title">密码重置</span>
+      <a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
+        <a-form-item>
+          <a-input
+                  size="large"
+                  v-decorator="['username',validatorRules.username,{ validator: this.handleUsernameOrEmail }]"
+                  type="text"
+                  placeholder="请输入账号">
+            <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+          </a-input>
+        </a-form-item>
+
+        <a-row :gutter="0">
+          <a-col :span="14">
+            <a-form-item>
+              <a-input
+                      v-decorator="['inputCode',validatorRules.inputCode]"
+                      size="large"
+                      type="text"
+                      @change="inputCodeChange"
+                      placeholder="请输入验证码">
+                <a-icon
+                        slot="prefix"
+                        v-if=" inputCodeContent==verifiedCode "
+                        type="smile"
+                        :style="{ color: 'rgba(0,0,0,.25)' }"/>
+                <a-icon slot="prefix" v-else type="frown" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+              </a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :span="10">
+            <a-button
+                    size="small"
+                    type="primary"
+                    htmlType="submit"
+                    class="code-button"
+                    :loading="loginBtn"
+                    @click.stop.prevent="getCode"
+                    :disabled="loginBtn">{{codeMsg}}
+            </a-button>
+<!--            <j-graphic-code @success="generateCode" style="float: right"></j-graphic-code>-->
+          </a-col>
+        </a-row>
+
+        <a-form-item>
+          <a-input
+                  v-decorator="['password',validatorRules.password]"
+                  size="large"
+                  type="password"
+                  autocomplete="false"
+                  placeholder="新密码(6-12位数字和字母组合)">
+            <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+          </a-input>
+        </a-form-item>
+
+        <a-form-item>
+          <a-input
+                  v-decorator="['password2',validatorRules.password2]"
+                  size="large"
+                  type="password"
+                  autocomplete="false"
+                  placeholder="再次输入密码">
+            <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+          </a-input>
+        </a-form-item>
+
+          <router-link :to="{name: '/user/Login'}" class="back_login">返回登录</router-link>
+          <a-button
+                  size="small"
+                  type="primary"
+                  htmlType="submit"
+                  class="login-button"
+                  :loading="loginBtn"
+                  @click.stop.prevent="handleSubmit"
+                  :disabled="loginBtn">确定
+          </a-button>
+      </a-form>
+
+<!--      <two-step-captcha-->
+<!--        v-if="requiredTwoStepCaptcha"-->
+<!--        :visible="stepCaptchaVisible"-->
+<!--        @success="stepCaptchaSuccess"-->
+<!--        @cancel="stepCaptchaCancel">-->
+<!--      </two-step-captcha>-->
+    </div>
+  </div>
+</template>
+
+<script>
+import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
+import {mapActions} from "vuex"
+import {timeFix} from "@/utils/util"
+import Vue from 'vue'
+import {ACCESS_TOKEN} from "@/store/mutation-types"
+import JGraphicCode from '@/components/jeecg/JGraphicCode'
+import {setMaxDigits , RSAKeyPair , encryptedString} from '@/utils/RSA'
+import {
+    register,registercode
+} from '@/api/system'
+
+export default {
+  components: {
+    TwoStepCaptcha,
+    JGraphicCode
+  },
+  data() {
+    return {
+      customActiveKey: "tab1",
+      loginBtn: false,
+      // login type: 0 email, 1 username, 2 telephone
+      loginType: 0,
+      requiredTwoStepCaptcha: false,
+      stepCaptchaVisible: false,
+      form: this.$form.createForm(this),
+      formLogin: {
+        username: "",
+        password: "",
+        captcha: "",
+        mobile: ""
+      },
+      validatorRules: {
+        username: {rules: [{required: true, message: '请输入手机号码!', validator: 'click'}]},
+        password: {rules: [{required: true, message: '请输入密码!', validator: 'click'}]},
+        password2: {rules: [{required: true, message: '请再次输入密码!'},{validator:  this.validateToNextPassword}]},
+        mobile: {rules: [{validator: this.validateMobile}]},
+        captcha: {rule: [{required: true, message: '请输入验证码!'}]},
+        inputCode: {rules: [{required: true, message: '请输入验证码!'}, {validator: this.validateInputCode}]}
+      },
+
+      codeDisabled: false,// 是否禁用按钮
+      countdown: 60,// 倒计时秒数
+      codeMsg: '获取验证码', // 按钮上的文字
+      timer: null,// 定时器
+      verifiedCode: "",
+      inputCodeContent: "",
+      inputCodeNull: true,
+    }
+  },
+  created() {
+    Vue.ls.remove(ACCESS_TOKEN)
+    this.getRouterData();
+  },
+  methods: {
+    // handler
+    handleUsernameOrEmail(rule, value, callback) {
+      const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
+      if (regex.test(value)) {
+        this.loginType = 0
+      } else {
+        this.loginType = 1
+      }
+      callback()
+    },
+    handleTabClick(key) {
+      this.customActiveKey = key
+      // this.form.resetFields()
+    },
+    getCode(){
+      // 验证码60秒倒计时
+      if (!this.timer) {
+        let data={
+          account:this.form.getFieldValue("username")
+        }
+        registercode(data).then(res=>{
+          if (res.code==200){
+            this.$notification.success({
+              message: res.data,
+            });
+            return null;
+          }
+          this.$notification.error({
+            message: res.data,
+          });
+        })
+        this.timer = setInterval(() => {
+          if (this.countdown > 0 && this.countdown <= 60) {
+            this.countdown--;
+            if (this.countdown !== 0) {
+              this.codeMsg = "重新发送(" + this.countdown + ")";
+            } else {
+              clearInterval(this.timer);
+              this.codeMsg = "获取验证码";
+              this.countdown = 60;
+              this.timer = null;
+              this.codeDisabled = false;
+            }
+          }
+        }, 1000)
+      }
+    },
+    handleSubmit() {
+      let that = this
+
+      let loginParams = {
+        smsCode: "xxxx"
+      };
+      let data={
+          account:"",
+          verificationCode:"",
+          newPwd:"",
+          rePwd:''
+      }
+      // 确定修改密码
+      that.form.validateFields(['username', 'password', 'password2', 'inputCode'], {force: true}, (err, values) => {
+        if (!err) {
+          values.password = encodeURIComponent(this.getPass(values.password));
+          values.password2 = encodeURIComponent(this.getPass(values.password2));
+          let data = {
+            account: values.username,
+            verificationCode: values.inputCode,
+            newPwd: values.password,
+            rePwd: values.password
+          }
+          register(data).then(res => {
+            if (res.code==200) {
+              this.registerSuccess(res.data);
+              return null;
+            }
+            this.registerRrror(res.data)
+          })
+        }
+      })
+
+    },
+  requestFailed(err) {
+    this.$notification['error']({
+      message: '登录失败',
+      description: ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试",
+      duration: 4,
+    });
+    this.loginBtn = false;
+  },
+    registerSuccess(data) {
+      this.$notification.success({
+        message: data,
+        description: `${timeFix()}，请再次登录`,
+      });
+    },
+    registerRrror(data) {
+      this.$notification.warn({
+        message: data,
+      });
+    },
+    validateMobile(rule, value, callback) {
+      if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
+        callback();
+      } else {
+        callback("您的手机号码格式不正确!");
+      }
+    },
+    validateInputCode(rule, value, callback) {
+      if (!value || this.verifiedCode == this.inputCodeContent) {
+        callback();
+      } else {
+        callback("您输入的验证码不正确!");
+      }
+    },
+    inputCodeChange(e) {
+
+    },
+    getRouterData() {
+      this.$nextTick(() => {
+        this.form.setFieldsValue({
+          'username': this.$route.params.username
+        });
+      })
+    },
+   validateToNextPassword  (rule, value, callback) {
+    const form = this.form;
+    if (value!= form.getFieldValue("password")) {
+      callback("两次输入的密码不一样！");
+    }
+    callback();
+  },
+    //密码加密
+    getPass(text){
+      /*let keyss = setMaxDigits(130);
+      keyss = new RSAKeyPair("10001","","a5d210338760bdbe2baabef73c410582e812dad8d9669d8c6ebfe026450e5cc10005290f17a0474c7351031edbff81bd8217a518bdf1a02855f53105ead0370e8a9e30b8560feab1d333a0b055b29419476b0eea1ea54315662ddfc46ec066f076e9490ec34c825afad9e44cf38e5ab600f3136acfe3a0ac0e672e2cb8e50371");
+      let password = encryptedString(keyss,text);*/
+      let publicKey = "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCAcsbUyeRD2lQGPEnu5LbXOL2lycUJwK/8BsoZD3b932l4JehAvOKR/YNzs6EG4gnZ7gaXLCnWbE5kB1wuUooo6bv8fSAg0W5QmM1TH8zaIImdAaN6c8mw5dUS/2VJ/2GHI54R1NJziX9VHecpf2DrHnWngETsNytmXaVl3JiXywIDAQAB";
+      let encrypt = new window.JSEncrypt();
+      encrypt.setPublicKey(publicKey);
+      var encryptPwd = encrypt.encryptLong(text);
+      return encryptPwd;
+      //return text;
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import '~@/assets/less/style';
+  .main{
+    .caption{
+      width: 666vw/@vw;
+      height: 792vw/@vw;
+      background: url("~@/assets/bg_content.png") no-repeat center;
+      background-size: cover;
+      float: left;
+    }
+    .form{
+      width: calc(100% - 666vw/@vw);
+      height: 792vw/@vw;
+      box-sizing: border-box;
+      padding:80vw/@vw 80vw/@vw 0 60vw/@vw;
+      float:left;
+      .form_title{
+        font-size:40vw/@vw;
+        font-family:PingFang SC;
+        font-weight:500;
+        color:rgba(51,51,51,1);
+        display: inline-block;
+        height: 55vw/@vw;
+        margin: 25vw/@vw 0vw/@vw 50vw/@vw 0;
+        border-bottom: 6vw/@vw solid #57bbff;
+      }
+      /deep/ .ant-form-item{
+        margin-bottom: 24vw/@vw;
+      }
+      @media (min-width: 1920px) {
+        /deep/.ant-input-affix-wrapper .ant-input-prefix{
+          font-size: 22vw/@vw;
+          top: 38% !important;
+        }
+      }
+      @media (min-width: 1400px) {
+        /deep/.ant-input-affix-wrapper .ant-input-prefix{
+          font-size: 22vw/@vw;
+          top: 40.5% !important;
+        }
+      }
+      /deep/.ant-input-affix-wrapper .ant-input-prefix{
+        font-size: 22vw/@vw;
+        top: 39%;
+      }
+      /deep/ .user-layout-login div .ant-input{
+        width:100%;
+        height:68vw/@vw;
+        margin-bottom: 15vw/@vw;
+        padding-left: 44vw/@vw;
+        background:rgba(245,245,245,1);
+        border:1vw/@vw solid rgba(221,221,221,1);
+        opacity:0.5;
+        border-radius:4vw/@vw;
+        &::-webkit-input-placeholder {
+          font-size:24vw/@vw;
+          font-family:PingFang SC;
+          font-weight:500;
+          color:#333;
+          line-height:88vw/@vw;
+        }
+        &::-moz-placeholder {
+          font-size:24vw/@vw;
+          font-family:PingFang SC;
+          font-weight:500;
+          color:#333;
+          line-height:88vw/@vw;
+        }
+        &:-ms-input-placeholder {
+          font-size:24vw/@vw;
+          font-family:PingFang SC;
+          font-weight:500;
+          color:#333;
+          line-height:88vw/@vw;
+        }
+      }
+      /deep/ #gc-canvas{
+        height: 67vw/@vw;
+      }
+      .code-button{
+        width:calc(100% - 10vw/@vw);
+        height:68vw/@vw;
+        margin-left: 10vw/@vw;
+        background:#e6e6e6;
+        /*border-radius:40vw/@vw;*/
+        font-size:24vw/@vw;
+        font-family:PingFang SC;
+        font-weight:bold;
+        color:#adadad;
+      }
+      .back_login{
+        width:290vw/@vw;
+        height:80vw/@vw;
+        margin-right: 10vw/@vw;
+        background:rgba(87,148,255,1);
+        border-radius:40vw/@vw;
+        font-size:36vw/@vw;
+        font-family:PingFang SC;
+        font-weight:bold;
+        color:rgba(255,255,255,1);
+        text-decoration: none;
+        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+        line-height: 80vw/@vw;
+        display: inline-block;
+        white-space: nowrap;
+        text-align: center;
+        border: 1px solid transparent;
+        cursor: pointer;
+        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        -ms-touch-action: manipulation;
+        touch-action: manipulation;
+      }
+      /deep/ .user-layout-login button.login-button{
+        width:290vw/@vw;
+        height:80vw/@vw;
+        background:rgba(87,148,255,1);
+        border-radius:40vw/@vw;
+        font-size:36vw/@vw;
+        font-family:PingFang SC;
+        font-weight:bold;
+        color:rgba(255,255,255,1);
+      }
+    }
+  }
+
+  /*.user-layout-login {
+    margin-top: 20px;
+
+    label {
+      font-size: 14px;
+    }
+
+    .getCaptcha {
+      display: block;
+      width: 100%;
+      height: 40px;
+    }
+
+    .forge-password {
+      font-size: 14px;
+    }
+
+    button.login-button {
+      padding: 0 15px;
+      font-size: 16px;
+      height: 40px;
+      width: 100%;
+    }
+
+    .user-login-other {
+      text-align: left;
+      margin-top: 24px;
+      line-height: 22px;
+
+      .item-icon {
+        font-size: 24px;
+        color: rgba(0, 0, 0, .2);
+        margin-left: 16px;
+        vertical-align: middle;
+        cursor: pointer;
+        transition: color .3s;
+
+        &:hover {
+          color: #1890ff;
+        }
+      }
+
+      .register {
+        float: right;
+      }
+    }
+  }*/
+
+</style>
+<style>
+  .valid-error .ant-select-selection__placeholder {
+    color: #f5222d;
+  }
+</style>