qgb-process 0.2.3 → 0.2.7

package/src/views/Login/components/FormLogin.vue

@@ -1,1001 +1,1001 @@
-<!--
- * @Descripttion: 未描述
- * @version: 1.0.0
- * @Author: Chendajiang
- * @Date: 2019-08-09 11:22:34
- * @LastEditors: Yxj
- * @LastEditTime: 2020-10-09 19:36:39
- -->
-
-<template>
-  <div class="login-box-right" v-loading="loginloading">
-    <div class="QRcodeTab">
-      <img
-        v-if="logType==1"
-        @click="logTab(1)"
-        style="width:58px;height:58px;"
-        src="./image/qrcode.png"
-        alt
-      />
-      <img
-        v-if="logType==2"
-        @click="logTab(2)"
-        style="width:58px;height:58px;"
-        src="./image/diannao.png"
-        alt
-      />
-    </div>
-    <div class="toast" v-if="logType==1">
-      <section>
-        <img src="./image/anquan.png" alt />
-        <span>扫码登录更安全</span>
-      </section>
-    </div>
-    <div class="qrLog" v-show="logType==2">
-      <div class="tc-20"></div>
-      <div class="tc-15"></div>
-      <div class="titleText">
-        <span>手机扫码</span>
-        <span>安全登录</span>
-      </div>
-      <div class="tc-20"></div>
-      <div class="tc-11"></div>
-      <div class="QRCodeBox">
-        <canvas id="QRCode"></canvas>
-        <div v-show="shade" class="QRCodechenge">
-          <p>请重新刷新二维码</p>
-          <el-button type="primary" @click="getQRCode()">点击刷新</el-button>
-        </div>
-        <div v-show="successShade" class="QRCodechenge successShade">
-          <img src="./image/icon_success.png" alt />
-          <p>登录成功</p>
-        </div>
-      </div>
-      <div class="textBox">
-        <div class="left">
-          <img src="./image/sys.png" />
-        </div>
-        <div class="right">
-          <p>
-            打开
-            <span>企管帮APP</span>
-          </p>
-          <p>扫一扫</p>
-        </div>
-      </div>
-      <footer class="footer">
-        <div @click="logTab(2)">密码登录</div>
-        <div @click="$router.push({path:'/sign'})">用户注册</div>
-      </footer>
-    </div>
-    <div class="pasLog" v-show="logType==1">
-      <div class="tc-20"></div>
-      <div class="tc-20"></div>
-      <div class="login-box-right-tab">
-        <div :class="{'login-box-right-tab-click':tabClick == 1}" @click="clickTabClick(1)">账号登录</div>
-        <div :class="{'login-box-right-tab-click':tabClick == 2}" @click="clickTabClick(2)">短信登录</div>
-      </div>
-      <div class="tc-40"></div>
-      <div v-show="tabClick == 1">
-        <el-form ref="form1" :model="form1" :rules="rules1">
-          <el-form-item prop="username">
-            <div class="login-tel login-input">
-              <div class="bg-img"></div>
-              <div class="bg-line"></div>
-              <el-input
-                autocomplete="off"
-                v-model="form1.username"
-                placeholder="请输入手机号码"
-                @input="changeTel(1)"
-              ></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item prop="password">
-            <div class="login-password login-input">
-              <div class="bg-img"></div>
-              <div class="bg-line"></div>
-              <div class="bg-eye" @click="showEye = !showEye">
-                <img v-if="showEye" src="@/assets/login/close-eye.png" alt />
-                <img v-if="!showEye" src="@/assets/login/eye.png" alt />
-              </div>
-              <input type="text" style="display: none;" />
-              <el-input
-                autocomplete="new-password"
-                ref="password"
-                v-if="showEye"
-                :type="type"
-                @focus="onFocus"
-                onpaste="return false"
-                oncontextmenu="return false"
-                oncopy="return false"
-                oncut="return false"
-                oninput="if(value.length>20)value=value.slice(0,20)"
-                v-model="form1.password"
-                placeholder="请输入密码"
-              ></el-input>
-              <el-input
-                v-if="!showEye"
-                autocomplete="new-password"
-                type="text"
-                onpaste="return false"
-                oncontextmenu="return false"
-                oncopy="return false"
-                oncut="return false"
-                oninput="if(value.length>20)value=value.slice(0,20)"
-                v-model="form1.password"
-                placeholder="请输入密码"
-              ></el-input>
-            </div>
-          </el-form-item>
-        </el-form>
-      </div>
-      <div v-show="tabClick == 2">
-        <el-form ref="form2" :model="form2" :rules="rules2">
-          <el-form-item prop="username">
-            <div class="login-tel login-input">
-              <div class="bg-img"></div>
-              <div class="bg-line"></div>
-              <el-input
-                autocomplete="off"
-                v-model="form2.username"
-                placeholder="请输入手机号码"
-                @input="changeTel(2)"
-              ></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item prop="short">
-            <div class="login-short-box">
-              <div class="login-password login-input">
-                <div class="bg-img"></div>
-                <div class="bg-line"></div>
-                <el-input
-                  type="text"
-                  oninput="if(value.length>4)value=value.slice(0,4)"
-                  v-model="form2.short"
-                  placeholder="请输入验证码"
-                ></el-input>
-              </div>
-              <div>
-                <Button6 v-if="ifGetCode && codeFont == '获取验证码'" @click="getSMSLoginCode">获取验证码</Button6>
-                <Button6 v-if="!(ifGetCode && codeFont == '获取验证码')" :disabled="true">{{codeFont}}</Button6>
-              </div>
-            </div>
-          </el-form-item>
-        </el-form>
-      </div>
-      <div class="tc-40"></div>
-      <div class="login-button">
-        <!-- <el-button type="primary" @click="login">登录</el-button> -->
-        <Button6 @click="login">登录</Button6>
-      </div>
-      <div class="tc-10"></div>
-      <div class="login-font font14">
-        <div @click="$router.push({path:'/sign'})">用户注册</div>
-        <div @click="$router.push({path:'/passfind'})">忘记密码？</div>
-      </div>
-      <div class="tc-20"></div>
-      <div class="tc-30"></div>
-      <div class="tc-10"></div>
-    </div>
-  </div>
-</template>
-<script>
-import apiUser from "@/api/apiUser";
-import apiAuth from "@/api/apiAuth";
-import { isvalidPhone } from "@/components/form/validate";
-import apiMaterials from "@/api/apiMaterials/apiMaterials";
-import axios from "axios";
-import sessionStorage from "@/storage/sessionStorage.js";
-import cookie from "@/storage/cookies";
-import localStorage from "@/storage/localStorage";
-import { apiHome } from "@/api/apiHome";
-import qs from "qs";
-import QRCode from "qrcode";
-
-export default {
-  name: "FormLogin",
-  mixins: [],
-  extends: {},
-  props: {},
-  data() {
-    return {
-      successShade: false,
-      timeId: null,
-      time: 0,
-      shade: false,
-      QRCodeMsg: "生成二维码信息",
-      logType: 1,
-      loginloading: false,
-      codeFont: "获取验证码",
-      codeNum: 60,
-      ifGetCode: false,
-      tabClick: 1,
-      type: "text",
-      showEye: true,
-      showCode: false,
-      form1: {
-        username: "", // 17609321099
-        password: "", // 000qwer
-        code: "0000",
-        grant_type: "password",
-        randomStr: "",
-        remember_me: false,
-        short: ""
-      },
-      form2: {
-        username: "",
-        short: ""
-      },
-      img: `${process.env.VUE_APP_APIUSER}/code/`,
-      rules1: {
-        username: {
-          required: true,
-          validator: this.validPhone,
-          trigger: "blur"
-        },
-        password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
-      },
-      rules2: {
-        username: {
-          required: true,
-          validator: this.validPhone,
-          trigger: "blur"
-        },
-        short: [{ required: true, validator: this.validShort, trigger: "blur" }]
-      }
-    };
-  },
-  computed: {},
-  components: {},
-  filter: {},
-  watch: {
-    QRCodeMsg(val) {
-      // 获取页面的canvas
-      const msg = document.getElementById("QRCode");
-      // 将获取到的数据（val）画到msg（canvas）上
-      QRCode.toCanvas(msg, val, { width: 225, height: 225 }, function(error) {
-        console.log(error);
-      });
-    },
-    tabClick(newVal, oldVal) {
-      if (newVal == 1) {
-        // this.$refs.form2.resetFields()
-        this.form1.username = this.form2.username;
-        // if (this.form2.username.length == 11) {
-        //   if (!isvalidPhone(this.form2.username)) {
-        //     this.ifGetCode = false
-        //   } else {
-        //     this.ifGetCode = true
-        //   }
-        // }
-      } else {
-        // this.$refs.form1.resetFields()
-        this.form2.username = this.form1.username;
-        if (this.form2.username.length == 11) {
-          if (!isvalidPhone(this.form2.username)) {
-            this.ifGetCode = false;
-          } else {
-            this.ifGetCode = true;
-          }
-        }
-      }
-    }
-  },
-  methods: {
-    async generateUUID() {
-      const res = await apiUser.createQrCode();
-      if (res.data.code == 200) {
-        this.uuid = res.data.data.key;
-        this.QRCodeMsg = res.data.data.content;
-      }
-    },
-    async isLogin(uuid) {
-      const res = await apiUser.queryQRCode({ uuid });
-      if (res.data.code == 200) {
-        if (res.data.data.resourceToken != "") {
-          this.successShade = true;
-          window.clearTimeout(this.timeId);
-          cookie.cookieSet("token", res.data.data.resourceToken);
-          this.$router.push({ path: "/" });
-        }
-      }
-    },
-    getQRCode() {
-      const that = this;
-      that.shade = false;
-      that.time = 0;
-      that.generateUUID();
-      if (that.logType == 1) return;
-      that.timeId = setInterval(() => {
-        that.time++;
-        that.isLogin(that.uuid);
-        if (that.time == 60) {
-          that.shade = true;
-          window.clearTimeout(that.timeId);
-        }
-      }, 1000);
-    },
-    logTab(type) {
-      const that = this;
-      if (type == 1) {
-        that.logType = 2;
-        this.getQRCode();
-      } else {
-        window.clearTimeout(that.timeId);
-        this.logType = 1;
-      }
-    },
-    clickTabClick(num) {
-      this.tabClick = num;
-      // // console.log(num)
-      // if (num == 2) {
-      //   this.changeTel(2)
-      // }
-    },
-    setTime() {
-      this.codeFont = --this.codeNum + "s";
-      const setInter = setInterval(
-        function() {
-          this.codeFont = --this.codeNum + "s";
-          if (this.codeNum == 0) {
-            this.codeFont = "获取验证码";
-            this.codeNum = 60;
-            clearInterval(setInter);
-          }
-        }.bind(this),
-        1000
-      );
-    },
-    changeTel(type) {
-      // console.log(this.form2.username)
-      // ifGetCode  是否可以点击获取验证码
-      // console.log(type)
-      if (type == 1) {
-        if (this.form1.username.length > 11) {
-          this.form1.username = this.form1.username.slice(0, 11);
-        }
-        // this.form2.username = this.form1.username
-
-        return;
-      }
-
-      if (this.form2.username.length > 11) {
-        this.form2.username = this.form2.username.slice(0, 11);
-      }
-      // this.form1.username = this.form2.username
-
-      if (this.form2.username.length == 11) {
-        if (!isvalidPhone(this.form2.username)) {
-          this.ifGetCode = false;
-          // callback(new Error('请输入正确的手机号'))
-        } else {
-          this.ifGetCode = true;
-          // callback()
-        }
-        // this.ifGetCode = true
-        return;
-      }
-      this.ifGetCode = false;
-    },
-
-    async getSMSLoginCode() {
-      this.setTime();
-      const data = {
-        uname: this.form2.username,
-        type: 2,
-        channel: 2
-      };
-      const res = await apiAuth.getSMSLoginCode(data);
-
-      if (res.data.code == 0) {
-        this.$_toast({ msg: "发送成功" });
-        return;
-      }
-      if (res.data.code == 500) {
-        this.$_toast({ msg: res.data.msg, type: "error" });
-        return;
-      }
-      this.$_toast({ msg: res.data.msg, type: "error" });
-      // this.$_toast
-      // let res = await apiHome.getSMSLoginCode(data)
-      // console.log(res.data.data)
-      // /authentication/mobile?mobile=18699155392&smsCode=7825
-    },
-    async shortLogin() {
-      const that = this;
-      this.$refs["form2"].validate(async valid => {
-        if (valid) {
-          this.clickEnter(false);
-          this.loginloading = true;
-          const form = qs.stringify({
-            username: this.form2.username,
-            password: this.form2.short,
-            grant_type: "sms"
-          });
-          axios
-            .request({
-              method: "post",
-              data: form,
-              headers: {
-                Authorization:
-                  "Basic MTE3NTI3Njk0NDMyNjAwNDczNjo2M2NkMzYwM2Q5YTc0ZTNiYmI4ZDhiOGE5NmQ3MWVlZA=="
-              },
-              url: `${process.env.VUE_APP_API}${process.env.VUE_APP_AUTHURLTYPE}/oauth/token`
-            })
-            .then(async res => {
-              const data = res;
-              if (!data.data.code || data.data.code !== 1) {
-                const token = data.data.access_token;
-                cookie.cookieSet("token", token);
-                // await that.getUser();
-                // that.$router.push({ path: '/home' })
-                if (process.env.NODE_ENV !== "development") {
-                  that.jump();
-                } else {
-                  // that.$router.push({ path: "/home" });
-                  that.$router.push({ path: "/" });
-                }
-              } else {
-                that.loginloading = false;
-                that.clickEnter(true);
-                // that.errType(data.data);
-                that.$_toast({ type: "error", msg: data.data.msg, time: 3000 });
-              }
-            })
-            .catch(err => {
-              // console.log('error')
-              that.loginloading = false;
-              that.clickEnter(true);
-              that.$_toast({ type: "error", msg: err.msg, time: 3000 });
-            });
-        } else {
-          this.loginloading = false;
-          return false;
-        }
-      });
-
-      // /authentication/mobile?mobile=18699155392&smsCode=7825
-      // http://192.168.100.213:9090/authentication/mobile?mobile=18609942548&smsCode=2420
-    },
-    onFocus() {
-      this.type = "password";
-      // console.log(this.$refs.password)
-    },
-    clickEnter(bol) {
-      const that = this;
-      document.onkeydown = function(e) {
-        const key = window.event.keyCode;
-        if (key === 13) {
-          if (bol) {
-            that.login();
-          }
-        }
-      };
-    },
-    login() {
-      if (this.tabClick == 2) {
-        this.shortLogin();
-        return;
-      }
-      this.$refs["form1"].validate(async valid => {
-        if (valid) {
-          this.clickEnter(false);
-          this.submit();
-        } else {
-          this.loginloading = false;
-          return false;
-        }
-      });
-    },
-    submit() {
-      this.loginloading = true;
-      const that = this;
-      const form = qs.stringify({
-        username: this.form1.username,
-        password: this.form1.password,
-        code: this.form1.code,
-        grant_type: this.form1.grant_type,
-        randomStr: this.form1.randomStr,
-        remember_me: false
-      });
-      //
-      axios
-        .request({
-          method: "post",
-          data: form,
-          headers: {
-            Authorization:
-              "Basic MTE3NTI3Njk0NDMyNjAwNDczNjo2M2NkMzYwM2Q5YTc0ZTNiYmI4ZDhiOGE5NmQ3MWVlZA=="
-          },
-          url: `${process.env.VUE_APP_API}${process.env.VUE_APP_AUTHURLTYPE}/oauth/token`
-        })
-        .then(async res => {
-          const data = res;
-          if (!data.data.code || data.data.code !== 1) {
-            const token = data.data.access_token;
-            cookie.cookieSet("token", token);
-            // await that.getUser();
-            // that.$router.push({ path: '/home' })
-            if (process.env.NODE_ENV !== "development") {
-              that.jump();
-            } else {
-              // that.$router.push({ path: "/home" });
-              that.$router.push({ path: "/index" });
-            }
-          } else {
-            that.clickEnter(true);
-            that.loginloading = false;
-            // that.errType(data.data);
-            that.$_toast({ type: "error", msg: data.data.msg, time: 3000 });
-          }
-        })
-        .catch(err => {
-          that.clickEnter(true);
-          // console.log('err,lkkkk')
-          that.loginloading = false;
-          // if (err.response) {
-          //   that.errType(err.response.data);
-          // } else {
-          //   that.errType(err);
-          // }
-        });
-    },
-    async jump() {
-      const referrer = document.referrer;
-      const host = document.location.host;
-      const fromPath = sessionStorage.read("fromPath");
-      // console.log(fromPath, 'fromPath')
-      if (referrer && referrer.indexOf(host) === -1) {
-        if (fromPath == "/") {
-          window.history.go(-1);
-          // window.history.back()
-        } else {
-          this.$router.push({ path: "/" });
-        }
-      } else {
-        // await this.getUser()
-        this.$router.push({ path: "/" });
-      }
-    },
-    async shopHasFinish() {
-      const res = await apiMaterials.shopHasFinish();
-      switch (res.data.code) {
-        case 0:
-          this.$store.commit("SET_STORE_TYPE", true);
-          break;
-        case 1:
-          this.$store.commit("SET_STORE_TYPE", false);
-          break;
-        default:
-          break;
-      }
-      // console.log(res.data.code, 'shopHasFinish') // 1 未完善 0 已完善
-    },
-    async getUser() {
-      // 获取用户信息
-      const res = await apiUser.getUserInfo();
-      const user = res.data.data;
-      // let { data } = await apiUser.getCompanyAuthInfo()
-      // console.log(data.data)
-      // user['cno'] = data.data.no
-      this.$store.commit("SET_USER", user);
-      this.getAuth();
-      if (user.userRole !== 0) {
-        // this.shopHasFinish()
-      }
-    },
-    async getAuth() {
-      const { data } = await apiAuth.getAuthList();
-      if (data.code === 0) {
-        this.$store.commit("SET_AUTH_USER", data.result);
-        localStorage.set("menu", JSON.stringify(data.result.routes));
-      } else {
-        this.$message.error(data.msg);
-      }
-    },
-    errType(response) {
-      console.log(response);
-      switch (response.code) {
-        case 1001: // 验证码为空
-          this.rules.code = {
-            required: false,
-            validator: this.validCode,
-            trigger: "blur"
-          };
-          if (!this.showCode) {
-            // this.$_toast({ type: "error", msg: "请输入验证码" });
-            //
-          }
-          this.showCode = true;
-          break;
-        case 1002: // 验证码错误
-          this.$_toast({ type: "error", msg: "验证码输入有误" });
-          break;
-        case 1003: // 验证码已过期，请重新获取
-          this.$_toast({ type: "error", msg: "验证码已过期，请重新获取" });
-          break;
-        case 2001: // 用户不存在
-          this.$_toast({ type: "error", msg: "该手机号未注册" });
-          break;
-        case 2002: // 用户或密码错误
-          this.$_toast({ type: "error", msg: "手机号或密码有误，请重新输入" });
-          this.form1.password = "";
-          break;
-        case 2003: // 用户被禁用
-          this.$_toast({ type: "error", msg: "用户被禁用" });
-          this.form1.password = "";
-          break;
-      }
-      this.clickEnter(true);
-    },
-    setRandomStr() {
-      let time = new Date().getTime();
-      time = "" + time + parseInt(Math.random() * 1000);
-      this.form1.randomStr = time;
-    },
-    validPhone(rule, value, callback) {
-      if (!value) {
-        // this.ifGetCode = false
-        callback(new Error("请输入电话号码"));
-      } else if (!isvalidPhone(value)) {
-        // this.ifGetCode = false
-        callback(new Error("请输入正确的手机号"));
-      } else {
-        // this.ifGetCode = true
-        callback();
-      }
-    },
-    validShort(rule, value, callback) {
-      if (!value) {
-        callback(new Error("请输入验证码"));
-      } else if (value.length != 4) {
-        callback(new Error("请输入正确的四位验证码"));
-      } else {
-        callback();
-      }
-    },
-    validCode(rule, value, callback) {
-      if (!value) {
-        callback(new Error("验证码不能为空"));
-      } else if (value.length !== 4) {
-        callback(new Error("验证码输入有误"));
-      } else {
-        callback();
-      }
-    }
-  },
-  created() {
-    this.setRandomStr();
-    this.clickEnter(true);
-  },
-  mounted() {}
-};
-</script>
-
-<style lang="scss" rel="stylesheet/scss" scoped>
-.login-box-right {
-  width: 420px;
-  height: 400px;
-  background: #fff;
-  overflow: hidden;
-  position: absolute;
-  top: 60px;
-  right: 0;
-  .pasLog {
-    .login-box-right-tab {
-      width: 420px;
-      height: 47px;
-      line-height: 47px;
-      position: relative;
-      left: -40px !important;
-      .login-box-right-tab-click {
-        font-weight: bold;
-        color: rgba(2, 134, 223, 1);
-        border-bottom: 2px solid rgba(2, 134, 223, 1);
-      }
-      > div {
-        width: 70px;
-        height: 47px;
-        color: #333333;
-        font-size: 16px;
-        font-weight: 400;
-        cursor: pointer;
-        position: absolute;
-        text-align: center;
-        border-bottom: 2px solid #fff;
-        &:nth-child(1) {
-          left: 110px;
-          top: 0;
-        }
-        &:nth-child(2) {
-          right: 110px;
-          top: 0;
-        }
-      }
-    }
-  }
-
-  > div {
-    width: 340px;
-    margin: 0 auto;
-  }
-  .login-type {
-    height: 40px;
-    top: 55px;
-    > div {
-      cursor: pointer;
-      display: inline-block;
-      vertical-align: middle;
-      &:nth-child(3) {
-        text-align: right;
-      }
-    }
-    .type-line {
-      background: rgba(223, 228, 234, 1);
-      width: 1px;
-      height: 28px;
-    }
-    .type-click {
-      font-size: 30px;
-      color: $default;
-      width: 218px;
-    }
-    .type-noclick {
-      font-size: 24px;
-      color: #000;
-      width: 178px;
-    }
-  }
-  .login-tel {
-    .bg-img {
-      background: url("../../../assets/login/login-tel.png") 16px 8px no-repeat;
-      background-size: 18px 26px;
-    }
-  }
-  .login-user {
-    .bg-img {
-      background: url("../../../assets/login/login-user.png") 16px 11px
-        no-repeat;
-      background-size: 18px 18px;
-    }
-  }
-  .login-password {
-    .bg-img {
-      background: url("../../../assets/login/login-password.png") 16px 11px
-        no-repeat;
-      background-size: 17px 19px;
-    }
-  }
-
-  .login-font {
-    cursor: pointer;
-
-    > div {
-      color: #0286df;
-      font-weight: 400;
-      display: inline-block;
-      &:nth-child(1) {
-        float: left;
-      }
-      &:nth-child(2) {
-        float: right;
-      }
-    }
-  }
-}
-.QRcodeTab {
-  width: 58px !important;
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  z-index: 999;
-  cursor: pointer;
-}
-.toast {
-  width: 143px !important;
-  height: 28px;
-  background: rgba(2, 134, 223, 0.1);
-  position: absolute;
-  right: 68px;
-  top: 20px;
-  border: 1px solid #0286df;
-  section {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    position: relative;
-    img {
-      margin-left: 16px;
-      width: 12px;
-      height: 14px;
-    }
-    span {
-      margin-left: 9px;
-      font-size: 12px;
-      color: #0286df;
-    }
-  }
-  section:before {
-    content: "";
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-top: 7px solid transparent;
-    border-left: 7px solid #0082df;
-    border-bottom: 7px solid transparent;
-    font-size: 0;
-    line-height: 0;
-    right: -7px;
-  }
-  section:after {
-    content: "";
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-top: 6px solid transparent;
-    border-left: 6px solid #e5f3fc;
-    border-bottom: 6px solid transparent;
-    font-size: 0;
-    line-height: 0;
-    right: -6px;
-  }
-}
-.qrLog {
-  width: 420px !important;
-  .QRCodeBox {
-    width: 100%;
-    box-sizing: border-box;
-    padding: 0 99px;
-    position: relative;
-    .QRCodechenge,
-    .successShade {
-      width: 100%;
-      height: 100%;
-      box-sizing: border-box;
-      padding: 0 99px;
-      position: absolute;
-      left: 0;
-      top: 0;
-      background: rgba(255, 255, 255, 0.9);
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      & > p {
-        margin: 0;
-        padding: 0;
-        margin-bottom: 20px;
-        font-size: 12px;
-        color: #333333;
-      }
-    }
-    .successShade {
-      background: rgba(255, 255, 255, 0.9);
-      & > p {
-        font-size: 16px;
-        font-weight: bold;
-        margin-top: 10px;
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  .titleText {
-    display: flex;
-    justify-content: space-between;
-    padding: 0 118px;
-    span {
-      color: #0286df;
-      font-weight: bold;
-      font-size: 20px;
-    }
-  }
-
-  .textBox {
-    width: 100%;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    padding: 0 126px;
-    .left {
-      img {
-        width: 32px;
-        height: 32px;
-      }
-    }
-    .right {
-      margin-left: 16px;
-      & > p {
-        margin: 0;
-        padding: 0;
-        color: #969696;
-        font-size: 16px;
-        span {
-          color: #0286df;
-        }
-      }
-    }
-  }
-  .footer {
-    margin-top: 15px;
-    display: flex;
-    color: #666666;
-    font-size: 14px;
-    box-sizing: border-box;
-    padding-right: 20px;
-    float: right;
-    div {
-      cursor: pointer;
-    }
-    & > div:last-child {
-      margin-left: 25px;
-    }
-  }
-}
-</style>
-<style lang="scss" rel="stylesheet/scss">
-.login-box-right {
-  .el-input__inner {
-    border-radius: 0px;
-  }
-  .login-short-box {
-    width: 100%;
-    height: 100%;
-    > div {
-      height: 100%;
-      &:nth-child(1) {
-        width: 200px;
-        float: left;
-      }
-      &:nth-child(2) {
-        width: 120px;
-        float: right;
-        > button {
-          float: right;
-          border-radius: 0;
-        }
-      }
-    }
-  }
-  .login-input {
-    // background: #fff;
-    [type="text"],
-    [type="password"] {
-      text-indent: 50px;
-    }
-  }
-  .bg-line {
-    background: #dfe4ea;
-    width: 1px;
-    height: 38px;
-    position: absolute;
-    left: 50px;
-    top: 1px;
-    z-index: 1;
-  }
-
-  .el-input__inner {
-    height: 40px;
-    line-height: 40px;
-    font-size: 14px;
-    border: 1px solid #dfe4ea;
-  }
-  .bg-img {
-    z-index: 1;
-    position: absolute;
-    left: 0px;
-    top: 0px;
-    width: 49px;
-    height: 36px;
-    line-height: 20px;
-  }
-  .bg-eye {
-    top: 0px;
-    right: 16px;
-    z-index: 1;
-    position: absolute;
-  }
-}
-</style>
+<!--
+ * @Descripttion: 未描述
+ * @version: 1.0.0
+ * @Author: Chendajiang
+ * @Date: 2019-08-09 11:22:34
+ * @LastEditors: Yxj
+ * @LastEditTime: 2020-10-09 19:36:39
+ -->
+
+<template>
+  <div class="login-box-right" v-loading="loginloading">
+    <div class="QRcodeTab">
+      <img
+        v-if="logType==1"
+        @click="logTab(1)"
+        style="width:58px;height:58px;"
+        src="./image/qrcode.png"
+        alt
+      />
+      <img
+        v-if="logType==2"
+        @click="logTab(2)"
+        style="width:58px;height:58px;"
+        src="./image/diannao.png"
+        alt
+      />
+    </div>
+    <div class="toast" v-if="logType==1">
+      <section>
+        <img src="./image/anquan.png" alt />
+        <span>扫码登录更安全</span>
+      </section>
+    </div>
+    <div class="qrLog" v-show="logType==2">
+      <div class="tc-20"></div>
+      <div class="tc-15"></div>
+      <div class="titleText">
+        <span>手机扫码</span>
+        <span>安全登录</span>
+      </div>
+      <div class="tc-20"></div>
+      <div class="tc-11"></div>
+      <div class="QRCodeBox">
+        <canvas id="QRCode"></canvas>
+        <div v-show="shade" class="QRCodechenge">
+          <p>请重新刷新二维码</p>
+          <el-button type="primary" @click="getQRCode()">点击刷新</el-button>
+        </div>
+        <div v-show="successShade" class="QRCodechenge successShade">
+          <img src="./image/icon_success.png" alt />
+          <p>登录成功</p>
+        </div>
+      </div>
+      <div class="textBox">
+        <div class="left">
+          <img src="./image/sys.png" />
+        </div>
+        <div class="right">
+          <p>
+            打开
+            <span>企管帮APP</span>
+          </p>
+          <p>扫一扫</p>
+        </div>
+      </div>
+      <footer class="footer">
+        <div @click="logTab(2)">密码登录</div>
+        <div @click="$router.push({path:'/sign'})">用户注册</div>
+      </footer>
+    </div>
+    <div class="pasLog" v-show="logType==1">
+      <div class="tc-20"></div>
+      <div class="tc-20"></div>
+      <div class="login-box-right-tab">
+        <div :class="{'login-box-right-tab-click':tabClick == 1}" @click="clickTabClick(1)">账号登录</div>
+        <div :class="{'login-box-right-tab-click':tabClick == 2}" @click="clickTabClick(2)">短信登录</div>
+      </div>
+      <div class="tc-40"></div>
+      <div v-show="tabClick == 1">
+        <el-form ref="form1" :model="form1" :rules="rules1">
+          <el-form-item prop="username">
+            <div class="login-tel login-input">
+              <div class="bg-img"></div>
+              <div class="bg-line"></div>
+              <el-input
+                autocomplete="off"
+                v-model="form1.username"
+                placeholder="请输入手机号码"
+                @input="changeTel(1)"
+              ></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item prop="password">
+            <div class="login-password login-input">
+              <div class="bg-img"></div>
+              <div class="bg-line"></div>
+              <div class="bg-eye" @click="showEye = !showEye">
+                <img v-if="showEye" src="@/assets/login/close-eye.png" alt />
+                <img v-if="!showEye" src="@/assets/login/eye.png" alt />
+              </div>
+              <input type="text" style="display: none;" />
+              <el-input
+                autocomplete="new-password"
+                ref="password"
+                v-if="showEye"
+                :type="type"
+                @focus="onFocus"
+                onpaste="return false"
+                oncontextmenu="return false"
+                oncopy="return false"
+                oncut="return false"
+                oninput="if(value.length>20)value=value.slice(0,20)"
+                v-model="form1.password"
+                placeholder="请输入密码"
+              ></el-input>
+              <el-input
+                v-if="!showEye"
+                autocomplete="new-password"
+                type="text"
+                onpaste="return false"
+                oncontextmenu="return false"
+                oncopy="return false"
+                oncut="return false"
+                oninput="if(value.length>20)value=value.slice(0,20)"
+                v-model="form1.password"
+                placeholder="请输入密码"
+              ></el-input>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div v-show="tabClick == 2">
+        <el-form ref="form2" :model="form2" :rules="rules2">
+          <el-form-item prop="username">
+            <div class="login-tel login-input">
+              <div class="bg-img"></div>
+              <div class="bg-line"></div>
+              <el-input
+                autocomplete="off"
+                v-model="form2.username"
+                placeholder="请输入手机号码"
+                @input="changeTel(2)"
+              ></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item prop="short">
+            <div class="login-short-box">
+              <div class="login-password login-input">
+                <div class="bg-img"></div>
+                <div class="bg-line"></div>
+                <el-input
+                  type="text"
+                  oninput="if(value.length>4)value=value.slice(0,4)"
+                  v-model="form2.short"
+                  placeholder="请输入验证码"
+                ></el-input>
+              </div>
+              <div>
+                <Button6 v-if="ifGetCode && codeFont == '获取验证码'" @click="getSMSLoginCode">获取验证码</Button6>
+                <Button6 v-if="!(ifGetCode && codeFont == '获取验证码')" :disabled="true">{{codeFont}}</Button6>
+              </div>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="tc-40"></div>
+      <div class="login-button">
+        <!-- <el-button type="primary" @click="login">登录</el-button> -->
+        <Button6 @click="login">登录</Button6>
+      </div>
+      <div class="tc-10"></div>
+      <div class="login-font font14">
+        <div @click="$router.push({path:'/sign'})">用户注册</div>
+        <div @click="$router.push({path:'/passfind'})">忘记密码？</div>
+      </div>
+      <div class="tc-20"></div>
+      <div class="tc-30"></div>
+      <div class="tc-10"></div>
+    </div>
+  </div>
+</template>
+<script>
+import apiUser from "@/api/apiUser";
+import apiAuth from "@/api/apiAuth";
+import { isvalidPhone } from "@/components/form/validate";
+import apiMaterials from "@/api/apiMaterials/apiMaterials";
+import axios from "axios";
+import sessionStorage from "@/storage/sessionStorage.js";
+import cookie from "@/storage/cookies";
+import localStorage from "@/storage/localStorage";
+import { apiHome } from "@/api/apiHome";
+import qs from "qs";
+import QRCode from "qrcode";
+
+export default {
+  name: "FormLogin",
+  mixins: [],
+  extends: {},
+  props: {},
+  data() {
+    return {
+      successShade: false,
+      timeId: null,
+      time: 0,
+      shade: false,
+      QRCodeMsg: "生成二维码信息",
+      logType: 1,
+      loginloading: false,
+      codeFont: "获取验证码",
+      codeNum: 60,
+      ifGetCode: false,
+      tabClick: 1,
+      type: "text",
+      showEye: true,
+      showCode: false,
+      form1: {
+        username: "", // 17609321099
+        password: "", // 000qwer
+        code: "0000",
+        grant_type: "password",
+        randomStr: "",
+        remember_me: false,
+        short: ""
+      },
+      form2: {
+        username: "",
+        short: ""
+      },
+      img: `${process.env.VUE_APP_APIUSER}/code/`,
+      rules1: {
+        username: {
+          required: true,
+          validator: this.validPhone,
+          trigger: "blur"
+        },
+        password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
+      },
+      rules2: {
+        username: {
+          required: true,
+          validator: this.validPhone,
+          trigger: "blur"
+        },
+        short: [{ required: true, validator: this.validShort, trigger: "blur" }]
+      }
+    };
+  },
+  computed: {},
+  components: {},
+  filter: {},
+  watch: {
+    QRCodeMsg(val) {
+      // 获取页面的canvas
+      const msg = document.getElementById("QRCode");
+      // 将获取到的数据（val）画到msg（canvas）上
+      QRCode.toCanvas(msg, val, { width: 225, height: 225 }, function(error) {
+        console.log(error);
+      });
+    },
+    tabClick(newVal, oldVal) {
+      if (newVal == 1) {
+        // this.$refs.form2.resetFields()
+        this.form1.username = this.form2.username;
+        // if (this.form2.username.length == 11) {
+        //   if (!isvalidPhone(this.form2.username)) {
+        //     this.ifGetCode = false
+        //   } else {
+        //     this.ifGetCode = true
+        //   }
+        // }
+      } else {
+        // this.$refs.form1.resetFields()
+        this.form2.username = this.form1.username;
+        if (this.form2.username.length == 11) {
+          if (!isvalidPhone(this.form2.username)) {
+            this.ifGetCode = false;
+          } else {
+            this.ifGetCode = true;
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    async generateUUID() {
+      const res = await apiUser.createQrCode();
+      if (res.data.code == 200) {
+        this.uuid = res.data.data.key;
+        this.QRCodeMsg = res.data.data.content;
+      }
+    },
+    async isLogin(uuid) {
+      const res = await apiUser.queryQRCode({ uuid });
+      if (res.data.code == 200) {
+        if (res.data.data.resourceToken != "") {
+          this.successShade = true;
+          window.clearTimeout(this.timeId);
+          cookie.cookieSet("token", res.data.data.resourceToken);
+          this.$router.push({ path: "/" });
+        }
+      }
+    },
+    getQRCode() {
+      const that = this;
+      that.shade = false;
+      that.time = 0;
+      that.generateUUID();
+      if (that.logType == 1) return;
+      that.timeId = setInterval(() => {
+        that.time++;
+        that.isLogin(that.uuid);
+        if (that.time == 60) {
+          that.shade = true;
+          window.clearTimeout(that.timeId);
+        }
+      }, 1000);
+    },
+    logTab(type) {
+      const that = this;
+      if (type == 1) {
+        that.logType = 2;
+        this.getQRCode();
+      } else {
+        window.clearTimeout(that.timeId);
+        this.logType = 1;
+      }
+    },
+    clickTabClick(num) {
+      this.tabClick = num;
+      // // console.log(num)
+      // if (num == 2) {
+      //   this.changeTel(2)
+      // }
+    },
+    setTime() {
+      this.codeFont = --this.codeNum + "s";
+      const setInter = setInterval(
+        function() {
+          this.codeFont = --this.codeNum + "s";
+          if (this.codeNum == 0) {
+            this.codeFont = "获取验证码";
+            this.codeNum = 60;
+            clearInterval(setInter);
+          }
+        }.bind(this),
+        1000
+      );
+    },
+    changeTel(type) {
+      // console.log(this.form2.username)
+      // ifGetCode  是否可以点击获取验证码
+      // console.log(type)
+      if (type == 1) {
+        if (this.form1.username.length > 11) {
+          this.form1.username = this.form1.username.slice(0, 11);
+        }
+        // this.form2.username = this.form1.username
+
+        return;
+      }
+
+      if (this.form2.username.length > 11) {
+        this.form2.username = this.form2.username.slice(0, 11);
+      }
+      // this.form1.username = this.form2.username
+
+      if (this.form2.username.length == 11) {
+        if (!isvalidPhone(this.form2.username)) {
+          this.ifGetCode = false;
+          // callback(new Error('请输入正确的手机号'))
+        } else {
+          this.ifGetCode = true;
+          // callback()
+        }
+        // this.ifGetCode = true
+        return;
+      }
+      this.ifGetCode = false;
+    },
+
+    async getSMSLoginCode() {
+      this.setTime();
+      const data = {
+        uname: this.form2.username,
+        type: 2,
+        channel: 2
+      };
+      const res = await apiAuth.getSMSLoginCode(data);
+
+      if (res.data.code == 0) {
+        this.$_toast({ msg: "发送成功" });
+        return;
+      }
+      if (res.data.code == 500) {
+        this.$_toast({ msg: res.data.msg, type: "error" });
+        return;
+      }
+      this.$_toast({ msg: res.data.msg, type: "error" });
+      // this.$_toast
+      // let res = await apiHome.getSMSLoginCode(data)
+      // console.log(res.data.data)
+      // /authentication/mobile?mobile=18699155392&smsCode=7825
+    },
+    async shortLogin() {
+      const that = this;
+      this.$refs["form2"].validate(async valid => {
+        if (valid) {
+          this.clickEnter(false);
+          this.loginloading = true;
+          const form = qs.stringify({
+            username: this.form2.username,
+            password: this.form2.short,
+            grant_type: "sms"
+          });
+          axios
+            .request({
+              method: "post",
+              data: form,
+              headers: {
+                Authorization:
+                  "Basic MTE3NTI3Njk0NDMyNjAwNDczNjo2M2NkMzYwM2Q5YTc0ZTNiYmI4ZDhiOGE5NmQ3MWVlZA=="
+              },
+              url: `${process.env.VUE_APP_API}${process.env.VUE_APP_AUTHURLTYPE}/oauth/token`
+            })
+            .then(async res => {
+              const data = res;
+              if (!data.data.code || data.data.code !== 1) {
+                const token = data.data.access_token;
+                cookie.cookieSet("token", token);
+                // await that.getUser();
+                // that.$router.push({ path: '/home' })
+                if (process.env.NODE_ENV !== "development") {
+                  that.jump();
+                } else {
+                  // that.$router.push({ path: "/home" });
+                  that.$router.push({ path: "/" });
+                }
+              } else {
+                that.loginloading = false;
+                that.clickEnter(true);
+                // that.errType(data.data);
+                that.$_toast({ type: "error", msg: data.data.msg, time: 3000 });
+              }
+            })
+            .catch(err => {
+              // console.log('error')
+              that.loginloading = false;
+              that.clickEnter(true);
+              that.$_toast({ type: "error", msg: err.msg, time: 3000 });
+            });
+        } else {
+          this.loginloading = false;
+          return false;
+        }
+      });
+
+      // /authentication/mobile?mobile=18699155392&smsCode=7825
+      // http://192.168.100.213:9090/authentication/mobile?mobile=18609942548&smsCode=2420
+    },
+    onFocus() {
+      this.type = "password";
+      // console.log(this.$refs.password)
+    },
+    clickEnter(bol) {
+      const that = this;
+      document.onkeydown = function(e) {
+        const key = window.event.keyCode;
+        if (key === 13) {
+          if (bol) {
+            that.login();
+          }
+        }
+      };
+    },
+    login() {
+      if (this.tabClick == 2) {
+        this.shortLogin();
+        return;
+      }
+      this.$refs["form1"].validate(async valid => {
+        if (valid) {
+          this.clickEnter(false);
+          this.submit();
+        } else {
+          this.loginloading = false;
+          return false;
+        }
+      });
+    },
+    submit() {
+      this.loginloading = true;
+      const that = this;
+      const form = qs.stringify({
+        username: this.form1.username,
+        password: this.form1.password,
+        code: this.form1.code,
+        grant_type: this.form1.grant_type,
+        randomStr: this.form1.randomStr,
+        remember_me: false
+      });
+      //
+      axios
+        .request({
+          method: "post",
+          data: form,
+          headers: {
+            Authorization:
+              "Basic MTE3NTI3Njk0NDMyNjAwNDczNjo2M2NkMzYwM2Q5YTc0ZTNiYmI4ZDhiOGE5NmQ3MWVlZA=="
+          },
+          url: `${process.env.VUE_APP_API}${process.env.VUE_APP_AUTHURLTYPE}/oauth/token`
+        })
+        .then(async res => {
+          const data = res;
+          if (!data.data.code || data.data.code !== 1) {
+            const token = data.data.access_token;
+            cookie.cookieSet("token", token);
+            // await that.getUser();
+            // that.$router.push({ path: '/home' })
+            if (process.env.NODE_ENV !== "development") {
+              that.jump();
+            } else {
+              // that.$router.push({ path: "/home" });
+              that.$router.push({ path: "/index" });
+            }
+          } else {
+            that.clickEnter(true);
+            that.loginloading = false;
+            // that.errType(data.data);
+            that.$_toast({ type: "error", msg: data.data.msg, time: 3000 });
+          }
+        })
+        .catch(err => {
+          that.clickEnter(true);
+          // console.log('err,lkkkk')
+          that.loginloading = false;
+          // if (err.response) {
+          //   that.errType(err.response.data);
+          // } else {
+          //   that.errType(err);
+          // }
+        });
+    },
+    async jump() {
+      const referrer = document.referrer;
+      const host = document.location.host;
+      const fromPath = sessionStorage.read("fromPath");
+      // console.log(fromPath, 'fromPath')
+      if (referrer && referrer.indexOf(host) === -1) {
+        if (fromPath == "/") {
+          window.history.go(-1);
+          // window.history.back()
+        } else {
+          this.$router.push({ path: "/" });
+        }
+      } else {
+        // await this.getUser()
+        this.$router.push({ path: "/" });
+      }
+    },
+    async shopHasFinish() {
+      const res = await apiMaterials.shopHasFinish();
+      switch (res.data.code) {
+        case 0:
+          this.$store.commit("SET_STORE_TYPE", true);
+          break;
+        case 1:
+          this.$store.commit("SET_STORE_TYPE", false);
+          break;
+        default:
+          break;
+      }
+      // console.log(res.data.code, 'shopHasFinish') // 1 未完善 0 已完善
+    },
+    async getUser() {
+      // 获取用户信息
+      const res = await apiUser.getUserInfo();
+      const user = res.data.data;
+      // let { data } = await apiUser.getCompanyAuthInfo()
+      // console.log(data.data)
+      // user['cno'] = data.data.no
+      this.$store.commit("SET_USER", user);
+      this.getAuth();
+      if (user.userRole !== 0) {
+        // this.shopHasFinish()
+      }
+    },
+    async getAuth() {
+      const { data } = await apiAuth.getAuthList();
+      if (data.code === 0) {
+        this.$store.commit("SET_AUTH_USER", data.result);
+        localStorage.set("menu", JSON.stringify(data.result.routes));
+      } else {
+        this.$message.error(data.msg);
+      }
+    },
+    errType(response) {
+      console.log(response);
+      switch (response.code) {
+        case 1001: // 验证码为空
+          this.rules.code = {
+            required: false,
+            validator: this.validCode,
+            trigger: "blur"
+          };
+          if (!this.showCode) {
+            // this.$_toast({ type: "error", msg: "请输入验证码" });
+            //
+          }
+          this.showCode = true;
+          break;
+        case 1002: // 验证码错误
+          this.$_toast({ type: "error", msg: "验证码输入有误" });
+          break;
+        case 1003: // 验证码已过期，请重新获取
+          this.$_toast({ type: "error", msg: "验证码已过期，请重新获取" });
+          break;
+        case 2001: // 用户不存在
+          this.$_toast({ type: "error", msg: "该手机号未注册" });
+          break;
+        case 2002: // 用户或密码错误
+          this.$_toast({ type: "error", msg: "手机号或密码有误，请重新输入" });
+          this.form1.password = "";
+          break;
+        case 2003: // 用户被禁用
+          this.$_toast({ type: "error", msg: "用户被禁用" });
+          this.form1.password = "";
+          break;
+      }
+      this.clickEnter(true);
+    },
+    setRandomStr() {
+      let time = new Date().getTime();
+      time = "" + time + parseInt(Math.random() * 1000);
+      this.form1.randomStr = time;
+    },
+    validPhone(rule, value, callback) {
+      if (!value) {
+        // this.ifGetCode = false
+        callback(new Error("请输入电话号码"));
+      } else if (!isvalidPhone(value)) {
+        // this.ifGetCode = false
+        callback(new Error("请输入正确的手机号"));
+      } else {
+        // this.ifGetCode = true
+        callback();
+      }
+    },
+    validShort(rule, value, callback) {
+      if (!value) {
+        callback(new Error("请输入验证码"));
+      } else if (value.length != 4) {
+        callback(new Error("请输入正确的四位验证码"));
+      } else {
+        callback();
+      }
+    },
+    validCode(rule, value, callback) {
+      if (!value) {
+        callback(new Error("验证码不能为空"));
+      } else if (value.length !== 4) {
+        callback(new Error("验证码输入有误"));
+      } else {
+        callback();
+      }
+    }
+  },
+  created() {
+    this.setRandomStr();
+    this.clickEnter(true);
+  },
+  mounted() {}
+};
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+.login-box-right {
+  width: 420px;
+  height: 400px;
+  background: #fff;
+  overflow: hidden;
+  position: absolute;
+  top: 60px;
+  right: 0;
+  .pasLog {
+    .login-box-right-tab {
+      width: 420px;
+      height: 47px;
+      line-height: 47px;
+      position: relative;
+      left: -40px !important;
+      .login-box-right-tab-click {
+        font-weight: bold;
+        color: rgba(2, 134, 223, 1);
+        border-bottom: 2px solid rgba(2, 134, 223, 1);
+      }
+      > div {
+        width: 70px;
+        height: 47px;
+        color: #333333;
+        font-size: 16px;
+        font-weight: 400;
+        cursor: pointer;
+        position: absolute;
+        text-align: center;
+        border-bottom: 2px solid #fff;
+        &:nth-child(1) {
+          left: 110px;
+          top: 0;
+        }
+        &:nth-child(2) {
+          right: 110px;
+          top: 0;
+        }
+      }
+    }
+  }
+
+  > div {
+    width: 340px;
+    margin: 0 auto;
+  }
+  .login-type {
+    height: 40px;
+    top: 55px;
+    > div {
+      cursor: pointer;
+      display: inline-block;
+      vertical-align: middle;
+      &:nth-child(3) {
+        text-align: right;
+      }
+    }
+    .type-line {
+      background: rgba(223, 228, 234, 1);
+      width: 1px;
+      height: 28px;
+    }
+    .type-click {
+      font-size: 30px;
+      color: $default;
+      width: 218px;
+    }
+    .type-noclick {
+      font-size: 24px;
+      color: #000;
+      width: 178px;
+    }
+  }
+  .login-tel {
+    .bg-img {
+      background: url("../../../assets/login/login-tel.png") 16px 8px no-repeat;
+      background-size: 18px 26px;
+    }
+  }
+  .login-user {
+    .bg-img {
+      background: url("../../../assets/login/login-user.png") 16px 11px
+        no-repeat;
+      background-size: 18px 18px;
+    }
+  }
+  .login-password {
+    .bg-img {
+      background: url("../../../assets/login/login-password.png") 16px 11px
+        no-repeat;
+      background-size: 17px 19px;
+    }
+  }
+
+  .login-font {
+    cursor: pointer;
+
+    > div {
+      color: #0286df;
+      font-weight: 400;
+      display: inline-block;
+      &:nth-child(1) {
+        float: left;
+      }
+      &:nth-child(2) {
+        float: right;
+      }
+    }
+  }
+}
+.QRcodeTab {
+  width: 58px !important;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 999;
+  cursor: pointer;
+}
+.toast {
+  width: 143px !important;
+  height: 28px;
+  background: rgba(2, 134, 223, 0.1);
+  position: absolute;
+  right: 68px;
+  top: 20px;
+  border: 1px solid #0286df;
+  section {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    position: relative;
+    img {
+      margin-left: 16px;
+      width: 12px;
+      height: 14px;
+    }
+    span {
+      margin-left: 9px;
+      font-size: 12px;
+      color: #0286df;
+    }
+  }
+  section:before {
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-top: 7px solid transparent;
+    border-left: 7px solid #0082df;
+    border-bottom: 7px solid transparent;
+    font-size: 0;
+    line-height: 0;
+    right: -7px;
+  }
+  section:after {
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-top: 6px solid transparent;
+    border-left: 6px solid #e5f3fc;
+    border-bottom: 6px solid transparent;
+    font-size: 0;
+    line-height: 0;
+    right: -6px;
+  }
+}
+.qrLog {
+  width: 420px !important;
+  .QRCodeBox {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 99px;
+    position: relative;
+    .QRCodechenge,
+    .successShade {
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      padding: 0 99px;
+      position: absolute;
+      left: 0;
+      top: 0;
+      background: rgba(255, 255, 255, 0.9);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      & > p {
+        margin: 0;
+        padding: 0;
+        margin-bottom: 20px;
+        font-size: 12px;
+        color: #333333;
+      }
+    }
+    .successShade {
+      background: rgba(255, 255, 255, 0.9);
+      & > p {
+        font-size: 16px;
+        font-weight: bold;
+        margin-top: 10px;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .titleText {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 118px;
+    span {
+      color: #0286df;
+      font-weight: bold;
+      font-size: 20px;
+    }
+  }
+
+  .textBox {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 126px;
+    .left {
+      img {
+        width: 32px;
+        height: 32px;
+      }
+    }
+    .right {
+      margin-left: 16px;
+      & > p {
+        margin: 0;
+        padding: 0;
+        color: #969696;
+        font-size: 16px;
+        span {
+          color: #0286df;
+        }
+      }
+    }
+  }
+  .footer {
+    margin-top: 15px;
+    display: flex;
+    color: #666666;
+    font-size: 14px;
+    box-sizing: border-box;
+    padding-right: 20px;
+    float: right;
+    div {
+      cursor: pointer;
+    }
+    & > div:last-child {
+      margin-left: 25px;
+    }
+  }
+}
+</style>
+<style lang="scss" rel="stylesheet/scss">
+.login-box-right {
+  .el-input__inner {
+    border-radius: 0px;
+  }
+  .login-short-box {
+    width: 100%;
+    height: 100%;
+    > div {
+      height: 100%;
+      &:nth-child(1) {
+        width: 200px;
+        float: left;
+      }
+      &:nth-child(2) {
+        width: 120px;
+        float: right;
+        > button {
+          float: right;
+          border-radius: 0;
+        }
+      }
+    }
+  }
+  .login-input {
+    // background: #fff;
+    [type="text"],
+    [type="password"] {
+      text-indent: 50px;
+    }
+  }
+  .bg-line {
+    background: #dfe4ea;
+    width: 1px;
+    height: 38px;
+    position: absolute;
+    left: 50px;
+    top: 1px;
+    z-index: 1;
+  }
+
+  .el-input__inner {
+    height: 40px;
+    line-height: 40px;
+    font-size: 14px;
+    border: 1px solid #dfe4ea;
+  }
+  .bg-img {
+    z-index: 1;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 49px;
+    height: 36px;
+    line-height: 20px;
+  }
+  .bg-eye {
+    top: 0px;
+    right: 16px;
+    z-index: 1;
+    position: absolute;
+  }
+}
+</style>