fj-dc-ui/.svn/pristine/ed/ed6fc7a0c7572d4e0d086ba7c5d5108beb99a227.svn-base

<template>
  <div :class="[isFj ? 'login fjB' : 'login otherB']">
    <div
      class="login_content"
      style="box-shadow: 0px 0px 13px 11px rgba(0, 0, 0, 0.08)"
    >
      <h2 style="text-align: center; margin-bottom: 20px; font-size: 28px">
        <img v-if="isFj" src="../../assets/images/titleFujian.png" alt="" />
        <span v-else>{{ loginT }}</span>
      </h2>
      <div class="login_content_left">
        <div class="province_logo">
          <!-- <p>福建水利监督</p> -->
          <img v-if="isSd" src="../../assets/images/shandong_logo.png" alt="" />
          <img v-else src="../../assets/images/province_logo.png" alt="" />
        </div>
        <span class="left_hr"></span>
        <div class="download_app">
          <p>扫码下载APP</p>
          <img :src="qrCodeDownImg" alt="" />
          <div class="llq_xz">
            <svg
              t="1590743046917"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2942"
              width="28"
              height="28"
            >
              <path
                d="M382.4 514.4c0 69.6 57.6 127.2 127.2 127.2S636.8 584 636.8 514.4s-57.6-127.2-127.2-127.2-127.2 57.6-127.2 127.2z"
                fill="#BBBBBB"
                p-id="2943"
              ></path>
              <path
                d="M509.6 320h400.8C838.4 171.2 687.2 70.4 512 70.4c-127.2 0-242.4 52.8-321.6 139.2l136.8 240C353.6 375.2 425.6 320 509.6 320z"
                fill="#F75B60"
                p-id="2944"
              ></path>
              <path
                d="M548 704c-12 2.4-26.4 4.8-38.4 4.8-69.6 0-129.6-36-163.2-88.8L144.8 267.2c-48 69.6-74.4 153.6-74.4 244.8 0 213.6 151.2 391.2 352.8 432l-9.6-4.8L548 704z"
                fill="#00D19C"
                p-id="2945"
              ></path>
              <path
                d="M934.4 387.2H656c28.8 33.6 48 79.2 48 127.2 0 38.4-9.6 72-28.8 103.2l-194.4 336c9.6 0 21.6 2.4 31.2 2.4 244.8 0 441.6-196.8 441.6-441.6 0-45.6-7.2-88.8-19.2-127.2z"
                fill="#FCA253"
                p-id="2946"
              ></path>
            </svg>
            <a
              href="http://pdc.goldenwater.com.cn/tools/chrome.exe"
              class="llq_text"
              >浏览器下载</a
            >
          </div>
        </div>
      </div>
      <div class="login_content_right">
        <div class="system_type_tab">
          <span
            :class="{ tabActived: tabActived == 2 }"
            @click="changeSystem(2)"
            v-if="tabHideOrShow"
            >水利稽察3</span
          >
          <span
            :class="{ tabActived: tabActived == 1 }"
            @click="changeSystem(1)"
            >水利督查</span
          >
          <span
            :class="{ tabActived: tabActived == 3 }"
            @click="changeSystem(3)"
            v-if="isChengDu"
            >日常检查</span
          >
        </div>
        <div class="login_types" v-if="loginType == 1 || loginType == 2">
          <div class="item">
            <i class="el-icon-s-custom"></i>
            <el-input
              v-model="account"
              :placeholder="accountPlaceHolder"
              @keyup.enter.native="toLogin"
              size="medium"
              maxlength="11"
            ></el-input>
          </div>
          <!--短信验证码图片验证-->
          <div
            class="item authCode"
            style="
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              align-items: center;
            "
          >
            <i
              ><svg
                t="1580975211684"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1275"
                width="18"
                height="18"
              >
                <path
                  d="M511.92574 1023.975247C357.959389 1023.975247 71.50029 794.49855 71.50029 577.448076V163.162251c0-10.049894 8.416167-18.16902 18.837362-18.379424l24.95146-0.420808c0.953007 0 98.766196-1.967898 199.599304-41.895185 103.481725-40.843164 170.179849-87.936569 170.885322-88.419261l14.691162-10.421195a19.86463 19.86463 0 0 1 11.398956-3.601625 19.480951 19.480951 0 0 1 11.324696 3.539741l14.975826 10.507832c0.680719 0.482692 67.440727 47.526591 170.798685 88.419262 100.932121 39.927287 198.74531 41.895185 199.747825 41.895184l24.753432 0.420809c10.433572 0.210404 18.824985 8.32953 18.824986 18.379423l0.210404 414.285825c0 217.02572-286.508606 446.527171-440.6111 446.527171z m372.625797-812.568556c-37.860375-2.846645-117.516921-12.624251-200.267646-45.385419-84.557726-33.417134-146.725972-71.005221-172.358151-87.602398-25.557919 16.535293-87.763295 54.135757-172.296268 87.602398-82.602205 32.686908-162.03597 42.464514-200.416167 45.385419v366.041385c0 170.216979 249.576484 378.281957 372.712435 378.281957 47.724618 0 140.723264-38.726745 232.137691-123.767163 88.12222-81.909108 140.723264-177.07368 140.723264-254.490041z m-407.948946 435.660414a33.305744 33.305744 0 0 1-23.899439 10.049894 33.738929 33.738929 0 0 1-23.998453-10.037517l-101.674724-102.330691a34.345388 34.345388 0 0 1 0-48.269193 33.664668 33.664668 0 0 1 47.935022 0l77.738155 78.183717 196.269967-197.69329a33.590408 33.590408 0 0 1 47.910269 0 34.18449 34.18449 0 0 1 0 48.269194z m0 0"
                  p-id="1276"
                ></path></svg
            ></i>

            <el-input
              style="flex-basis: 100%"
              v-model="vCode"
              placeholder="请输入图片验证码"
              size="medium"
              v-if="loginType == 1 || loginType == 2"
              maxlength="4"
            >
              <img
                slot="append"
                :src="imgUrl"
                alt=""
                style="
                  width: 112px;
                  height: 34px;
                  cursor: pointer;
                  vertical-align: middle;
                "
                @click="imgClick"
              />
            </el-input>
          </div>
          <div class="item" style="margin-bottom: 0px">
            <i class="el-icon-lock"></i>
            <el-input
              v-model="password"
              :type="passType"
              :placeholder="passwordPlaceHolder"
              @keyup.enter.native="toLogin"
              size="medium"
              v-if="loginType == 1 || loginType == 2"
              :maxlength="maxLength"
            >
              <el-button
                v-if="loginType == 1"
                slot="append"
                size="medium"
                plain
                style="flex-basis: 20%"
                @click="getMessage"
                :disabled="messageDisable"
                >{{ messageButton }}</el-button
              >
              <img
                src="../../assets/images/no_eye.png"
                v-if="loginType == 2 && passType == 'text'"
                @click="passType = 'password'"
                slot="append"
                style="width: 20px; height: 20px; cursor: pointer"
              />
              <img
                src="../../assets/images/eye-fill.png"
                v-if="loginType == 2 && passType == 'password'"
                @click="passType = 'text'"
                slot="append"
                style="width: 20px; height: 20px; cursor: pointer"
              />
            </el-input>
          </div>
          <div class="item">
            <el-checkbox v-model="rememberMe" style="margin: 10px 00px 10px"
              >记住手机号</el-checkbox
            >
            <el-button type="primary" round @click="toLogin">登 录</el-button>
          </div>
        </div>
        <div class="login_types" v-show="loginType == 3">
          <div
            class="item"
            style="padding-top: 10%; display: flex; justify-content: center"
          >
            <div style="width: 132px; height: 132px; position: relative">
              <div
                v-if="!isExpire && loginType == 3"
                style="
                  width: 132px;
                  height: 132px;
                  position: absolute;
                  z-index: 1000;
                  left: 0;
                  top: 0;
                  background: rgba(0, 0, 0, 0.7);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <div
                  style="
                    color: white;
                    opacity: 1;
                    width: 100%;
                    height: 60px;
                    text-align: center;
                  "
                >
                  <span
                    style="
                      font-size: 14px;
                      font-weight: bold;
                      line-height: 30px;
                    "
                    >二维码失效</span
                  >
                  <div
                    style="
                      color: white;
                      opacity: 1;
                      width: 60px;
                      height: 25px;
                      margin: 0 auto;
                      background: #ff2213;
                      color: white;
                      line-height: 25px;
                      font-size: 14px;
                      font-weight: bold;
                      cursor: pointer;
                    "
                    @click="getQrCode"
                  >
                    刷新
                  </div>
                </div>
              </div>
              <canvas id="canvas" style="width: 100%; height: 100%"></canvas>
            </div>
          </div>
        </div>
        <p class="login_text"><span></span> 登录方式 <span></span></p>
        <div
          class="item login_item"
          style="
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
          "
        >
          <div :class="{ item: true, active: loginType == 3 }">
            <el-button
              type="text"
              icon="iconfont watericon1-erweima1 loginTypeButton"
              size="default"
              @click="loginTypeChange(3)"
            ></el-button>
            <p>二维码</p>
          </div>
          <div :class="{ item: true, active: loginType == 1 }">
            <el-button
              type="text"
              icon="iconfont watericon1-yanzhengma loginTypeButton"
              size="default"
              @click="loginTypeChange(1)"
              style="cursor: pointer"
            ></el-button>
            <p>验证码</p>
          </div>
          <div :class="{ item: true, active: loginType == 2 }">
            <el-button
              type="text"
              icon="icon iconfont watericon1-mima loginTypeButton"
              size="default"
              @click="loginTypeChange(2)"
              style="cursor: pointer"
            ></el-button>
            <p>密码</p>
          </div>
        </div>
      </div>
      <div class="login_tips" v-if="isChengDu">
        本平台为互联网非涉密平台，严禁处理、传输国家秘密。
      </div>
    </div>
  </div>
</template>
<script>
import {
  sendMessage,
  loginWithMessage,
  qrCodeSubmit,
  qrCodeLogin,
  loginWithAccount,
} from "@api/loginAPI.js";
import { ipPath } from "../../utils/component";
import request from "@util/gw_ajax_request";
const QRCode = require("qrcode");
const uuidv4 = require("uuid/v4");
import aes from "../../utils/aes";
export default {
  components: {},
  computed: {
    changeData() {
      const { account, vCode } = this;
      return {
        account,
        vCode,
      };
    },
  },
  data() {
    return {
      isExpire: true,
      isFj: false,
      isSd: false,
      isChengDu: false,
      tabHideOrShow: true,
      qrCodeDownImg: "",
      loginT: "水利监督",
      passType: "password",
      account: "",
      password: "",
      vCode: "",
      messageButton: "获取验证码",
      loginTitle: "APP扫码登录",
      messageDisable: true,
      loginType: 3,
      accountPlaceHolder: "请输入手机号码",
      passwordPlaceHolder: "请输入验证码",
      qrUuid: "",
      pubKey: "",
      rememberPwd: false,
      tabActived: 1,
      countTimeNum: 0,
      imgUrl: null,
      maxLength: 6,
      rememberMe: true,
    };
  },
  mounted() {
    this.$nextTick(() => {
      ipPath(this);
      this.imgClick();
      this.getQrCode();
      if (this.getCookie()) {
        localStorage.setItem("ownApp", this.getCookie());
        this.tabActived = this.getCookie();
      } else {
        localStorage.setItem("ownApp", this.tabActived);
      }
    });
    if (this.getPCookie()) {
      this.account = this.getPCookie();
    }
  },
  methods: {
    getPCookie() {
      var str = document.cookie;
      var arr = str.split(";");
      var phone = "";
      for (var i = 0; i < arr.length; i++) {
        var value = arr[i].split("=");
        if (value[0].trim() == "ownphone") {
          phone = value[1];
        }
      }
      return phone;
    },
    setCookie(val) {
      var expires = new Date();
      expires.setTime(expires.getTime() + 100 * 24 * 60 * 60 * 1000);
      document.cookie =
        "ownphone=" + escape(val) + ";expires=" + expires.toGMTString();
    },
    toLogin() {
      if (this.loginType == 1) {
        this.toLoginWithMessage();
      }
      if (this.loginType == 2) {
        this.toLoginWithUserName();
      }
    },
    toLoginWithMessage() {
      if (!this.account) {
        this.$message("请输入手机号");
        return;
      }
      if (!this.vCode) {
        this.$message("请输入图片验证码");
        return;
      }
      if (!this.password) {
        this.$message("请输入验证码");
        return;
      }
      try {
        loginWithMessage(this.account, this.password).then(
          (res) => {
            console.log(res);
            if (res.success == true) {
              if (this.rememberMe) {
                this.setCookie(this.account);
              } else {
                this.setCookie("");
              }
              let token = res.data.token;
              let userid = res.data.guid;
              let loginName = res.data.persName;
              let guid = res.data.orgId;
              let orgNm = res.data.orgNm;
              let accessToken = res.accessToken; //token是否过期
              localStorage.setItem("token", token);
              localStorage.setItem("userid", userid);
              localStorage.setItem("account", loginName);
              localStorage.setItem("guid", guid);
              localStorage.setItem("orgNm", orgNm);
              localStorage.setItem("accessToken", accessToken);
              let persType = res.data.persType;
              let isAdmin = res.data.permission;
              localStorage.setItem("persType", persType);
              let allNode = JSON.stringify(res.data.allNode); //当前用户所在组信息
              let allOrg = JSON.stringify(res.data.allOrg);
              localStorage.setItem("isAdmin", isAdmin);
              let orgId = res.data.orgId;
              localStorage.setItem("orgId", orgId);
              localStorage.setItem("allOrg", allOrg);
              localStorage.setItem("currentOrgId", res.data.defaultOrg.orgId); //省级当前的机构id
              localStorage.setItem("currentRlcode", res.data.defaultOrg.rlcode); //省级当前的行政区划编码
              localStorage.setItem("departId", res.data.departId); //人员所属责任处室id-浙江
              localStorage.setItem("departNm", res.data.departNm); //人员所属责任处室名称-浙江
              // 改变全局adcode状态
              this.$store.commit("changeAdCode", res.data.defaultOrg.rlcode);
              localStorage.setItem("currentOrgNm", res.data.defaultOrg.orgNm); //省级当前的机构名称
              localStorage.setItem("allNode", allNode);
              this.$message.success({
                message: "登录成功",
                duration: 700,
              });
              this.$router.push("/");
            } else {
              this.$message(res.message);
            }
          },
          (err) => {
            this.$message.error({
              message: "用户名或验证码错误",
              duration: 700,
            });
          }
        );
      } catch (e) {}
    },
    toLoginWithUserName() {
      if (!this.account) {
        this.$message("请输入用户名");
        return;
      }
      if (!this.vCode) {
        this.$message("请输入图片验证码");
        return;
      }
      if (!this.password) {
        this.$message("请输入密码");
        return;
      }
      this.imgClick();
      try {
        loginWithAccount(
          this.account,
          this.vCode,
          this.imgcodeid,
          aes.encrypt(this.password)
        ).then(
          (res) => {
            if (res.success == true) {
              if (this.rememberMe) {
                this.setCookie(this.account);
              } else {
                this.setCookie("");
              }
              let token = res.data.token;
              let userid = res.data.guid;
              let loginName = res.data.persName;
              let guid = res.data.orgId;
              let orgNm = res.data.orgNm;
              let accessToken = res.accessToken; //token是否过期
              localStorage.setItem("token", token);
              localStorage.setItem("userid", userid);
              localStorage.setItem("account", loginName);
              localStorage.setItem("guid", guid);
              localStorage.setItem("orgNm", orgNm);
              localStorage.setItem("accessToken", accessToken);
              let persType = res.data.persType;
              let isAdmin = res.data.permission;
              localStorage.setItem("persType", persType);
              let allNode = JSON.stringify(res.data.allNode); //当前用户所在组信息
              let allOrg = JSON.stringify(res.data.allOrg);
              localStorage.setItem("isAdmin", isAdmin);
              let orgId = res.data.orgId;
              localStorage.setItem("orgId", orgId);
              localStorage.setItem("allOrg", allOrg);
              localStorage.setItem("currentOrgId", res.data.defaultOrg.orgId); //省级当前的机构id
              localStorage.setItem("currentRlcode", res.data.defaultOrg.rlcode); //省级当前的行政区划编码
              localStorage.setItem("departId", res.data.departId); //人员所属责任处室id-浙江
              localStorage.setItem("departNm", res.data.departNm); //人员所属责任处室名称-浙江
              // 改变全局adcode状态
              this.$store.commit("changeAdCode", res.data.defaultOrg.rlcode);
              localStorage.setItem("currentOrgNm", res.data.defaultOrg.orgNm); //省级当前的机构名称
              localStorage.setItem("allNode", allNode);
              this.$message.success({
                message: "登录成功",
                duration: 700,
              });
              this.$router.push("/");
            } else {
              this.$message(res.message);
            }
          },
          (err) => {
            this.$message.error({
              message: "用户名或验证码错误",
              duration: 700,
            });
          }
        );
      } catch (e) {}
    },
    getMessage: function () {
      try {
        sendMessage(this.account, this.imgcodeid, this.vCode).then(
          (res) => {
            this.messageDisable = true;
            if (res.success) {
              this.messageButton = "已发送(" + 60 + ")";
              this.countTime(59);
            } else {
              this.$message.warning(res.message);
              this.messageDisable = false;
              this.messageButton = "发送验证码";
            }
          },
          (err) => {
            this.messageDisable = false;
            this.messageButton = "发送验证码";
          }
        );
      } catch (e) {
        _self.messageDisable = false;
        _self.messageButton = "发送验证码";
      }
    },
    countTime: function (countTime) {
      var _self = this;
      setTimeout(function () {
        if (countTime > 0) {
          _self.messageButton = "已发送(" + countTime + ")";
          countTime--;
          _self.countTime(countTime);
        } else {
          _self.messageDisable = false;
          _self.messageButton = "发送验证码";
        }
      }, 1000);
    },
    loginTypeChange: function (loginType) {
      console.log(loginType, "走这里了");
      this.account = this.getPCookie();
      this.vCode = "";
      this.password = "";
      if (this.tabActived == "2") {
        localStorage.setItem("ownApp", "2");
      } else if (this.tabActived == "3") {
        localStorage.setItem("ownApp", "3");
      } else {
        localStorage.setItem("ownApp", "1");
      }
      if (this.loginType != loginType) {
        this.getQrCode();
      }
      this.loginType = loginType;
      if (this.loginType == 1) {
        this.loginTitle = "短信验证码登录";
        this.accountPlaceHolder = "请输入手机号码";
        this.passwordPlaceHolder = "请输入验证码";
        this.passType = "text";
        this.maxLength = 6;
      } else if (this.loginType == 2) {
        this.loginTitle = "手机密码登录";
        this.accountPlaceHolder = "请输入手机号码";
        this.passwordPlaceHolder = "请输入密码";
        this.maxLength = 30;
        this.passType = "password";
      } else {
        this.loginTitle = "APP扫码登录";
      }
    },
    getQrCode: function () {
      this.isExpire = true;
      var canvas = document.getElementById("canvas");
      let _self = this;
      this.qrUuid = uuidv4();
      console.log(this.qrUuid);
      qrCodeSubmit(this.qrUuid).then(
        (res) => {
          if (res.success) {
            _self.qrUuid = res.data.key;
            setTimeout(function () {
              QRCode.toCanvas(canvas, _self.qrUuid, function (error) {
                if (error) console.error(error);
                console.log("success!");
                _self.toLoginWithQrCode();
              });
            }, 1000);
          }
        },
        (err) => {}
      );
    },
    toLoginWithQrCode: function () {
      var _self = this;
      let qrCode = _self.qrUuid;
      let logtyp = this.loginType;
      let timer = setTimeout(function () {
        _self.countTimeNum++;
        if (_self.countTimeNum > 20) {
          _self.isExpire = false;
          clearTimeout(timer);
          _self.countTimeNum = 0;
        } else {
          if (logtyp == 3) {
            console.log("调用二维码登录");
            qrCodeLogin(qrCode).then((res) => {
              console.log(res);
              if (res.success) {
                let userid = res.data.guid;
                let loginName = res.data.persName;
                let guid = res.data.orgId;
                let orgNm = res.data.orgNm;
                let isAdmin = res.data.permission;
                let allNode = JSON.stringify(res.data.allNode); //当前用户所在组信息
                let allOrg = JSON.stringify(res.data.allOrg);
                let persType = res.data.persType;
                let accessToken = res.accessToken; //token是否过期
                localStorage.setItem("userid", userid);
                localStorage.setItem("account", loginName);
                localStorage.setItem("guid", guid);
                localStorage.setItem("orgNm", orgNm);
                localStorage.setItem("isAdmin", isAdmin);
                localStorage.setItem("persType", persType);
                localStorage.setItem("accessToken", accessToken);
                let orgId = res.data.orgId;
                localStorage.setItem("orgId", orgId);
                localStorage.setItem("allOrg", allOrg);
                localStorage.setItem("currentOrgId", res.data.defaultOrg.orgId); //省级当前的机构id
                localStorage.setItem(
                  "currentRlcode",
                  res.data.defaultOrg.rlcode
                ); //省级当前的行政区划编码
                localStorage.setItem("departId", res.data.departId); //人员所属责任处室id-浙江
                localStorage.setItem("departNm", res.data.departNm); //人员所属责任处室名称-浙江
                // 改变全局adcode状态
                _self.$store.commit("changeAdCode", res.data.defaultOrg.rlcode);
                localStorage.setItem("currentOrgNm", res.data.defaultOrg.orgNm); //省级当前的机构名称
                localStorage.setItem("allNode", allNode);
                _self.$message.success({
                  message: "登录成功",
                  duration: 700,
                });
                _self.$router.push("/");
              } else {
                _self.toLoginWithQrCode();
              }
            });
          }
        }
      }, 3000);
    },
    // 选择登入系统
    changeSystem(val) {
      this.tabActived = val;
      localStorage.setItem("ownApp", val);
      var expires = new Date();
      expires.setTime(expires.getTime() + 100 * 24 * 60 * 60 * 1000);
      document.cookie =
        "ownApp=" + escape(val) + ";expires=" + expires.toGMTString();
    },
    getCookie() {
      var str = document.cookie;
      //将值切割成数组
      var arr = str.split(";");
      var ownApp;
      //遍历数组
      for (var i = 0; i < arr.length; i++) {
        var value = arr[i].split("=");
        if (value[0] == "ownApp") {
          ownApp = value[1];
        }
      }
      return ownApp;
    },
    imgClick() {
      this.imgUrl = null;
      request
        .get(`/bis/insp/getCaptchaImage`)
        .then((res) => {
          this.$nextTick(() => {
            this.imgcodeid = res.data.imgCodeId;
            this.imgUrl = "data:image/jpg;base64," + res.data.img;
          });
        })
        .catch((err) => {});
    },
  },
  watch: {
    changeData: {
      handler: function (newval, oldval) {
        if (newval) {
          for (var key in newval) {
            if (!newval[key]) {
              this.messageDisable = true;
              return;
            } else {
              this.messageDisable = false;
            }
          }
        }
      },
      deep: true,
    },
    loginType: {
      handler: function (newval, oldval) {
        var canvas = document.getElementById("canvas");
        if (newval == 3) {
          canvas.style.display = "block";
        } else {
          canvas.style.display = "none";
        }
      },
      deep: true,
    },
  },
};
</script>
<style lang="scss">
@import url("/src/assets/iconfont/iconfont.css");
.fjB {
  background-image: url("../../assets/images/login_bj1.png");
}
.otherB {
  background-image: url("../../assets/images/login_bj.jpg");
}
.login {
  width: 100%;
  height: 100vh;
  /*background-image: url('../../assets/images/login_bj1.png');*/
  background-size: 100% 100%;
  background-color: #0077c6;
  overflow: hidden;
  font-family: "微软雅黑";
  .llq_xz {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
  }
  .llq_text {
    margin-left: 4px;
    text-decoration: none;
    font-size: 14px;
  }
}
.login > p {
  font-size: 28px;
  color: #333;
  text-align: center;
  margin-top: 22vh;
  letter-spacing: 5px;
}
.login .login_content {
  width: 860px;
  margin: 40px auto;
  margin-top: 20vh;
  color: #333;
  background-color: rgba(255, 255, 255, 0.85);
  padding: 50px 30px;
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
  .login_content_left {
    width: 35%;
    float: left;
    text-align: center;
    border-right: dashed 1px #b2b2b2;
    padding: 10px 10px 10px 0;
    .left_hr {
      display: block;
      height: 1px;
      margin: 0 10px 20px;
      background-color: #b2b2b2;
    }
    .province_logo {
      margin-bottom: 20px;
      font-size: 20px;
      font-weight: bold;
      img {
        width: 130px;
      }
    }
    .download_app {
      font-size: 14px;
    }
    .download_app img {
      width: 110px;
    }
  }
  .login_content_right {
    width: 52%;
    float: right;
    padding: 10px 30px;
    text-align: center;
    .system_type_tab {
      width: 100%;
      border: solid 1px #d7d7d7;
      border-radius: 8px;
      padding: 8px 20px;
      font-size: 18px;
      color: #999;
      box-sizing: border-box;
      margin-bottom: 20px;
      span {
        display: inline-block;
        width: 32%;
        &:first-child {
          border-right: solid 1px #d6d3d6;
        }
      }
      span:nth-child(3) {
        border-left: solid 1px #d6d3d6;
      }
      span {
        cursor: pointer;
      }
      .tabActived {
        color: #3d9afe;
        font-weight: bold;
      }
    }
    .login_types {
      width: 100%;
      height: 250px;
      .item {
        position: relative;
        i {
          position: absolute;
          top: 10px;
          left: 2px;
          color: #666;
          font-size: 18px;
        }
      }
      .el-input-group__append {
        background-color: transparent;
        border: none;
        border-bottom: 1px solid #dcdfe6;
      }
    }
    .item {
      width: 100%;
    }
    .login_text {
      font-size: 12px;
      color: #666;
      span {
        display: inline-block;
        width: 30%;
        height: 1px;
        margin: 0 10px;
        background-color: #aaa;
        vertical-align: middle;
      }
    }
    .login_item {
      p {
        font-size: 12px;
        color: #666;
      }
      .el-button--text {
        color: #666;
      }
      .item:hover {
        .el-button--text,
        p {
          color: #66b1ff;
        }
      }
      .item.active .el-button--text,
      .item.active p {
        color: #66b1ff;
      }
    }
    input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
      background-color: transparent;
      background-image: none;
      transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
    }
    .el-input__inner {
      padding-left: 30px;
      background: transparent;
      border-top: none;
      border-left: none;
      border-right: none;
    }
  }
  .login_tips {
    color: #ff070a;
    font-weight: bold;
    font-size: 18px;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.login .login_content .login_content_left p {
  text-align: center;
  margin-bottom: 10px;
}
.login .login_content .item {
  margin-bottom: 20px;
  width: 80%;
}
.login .el-input {
  width: 100%;
}
.login .el-button--mini,
.el-button--mini.is-round {
  width: 100%;
  padding: 10px;
  font-size: 16px;
}
.loginTypeChange:hover {
  color: blue;
  cursor: pointer;
}
.loginTypeButton {
  font-size: xx-large !important;
}
.authCode .el-input-group__append,
.el-input-group__prepend {
  padding: 0 !important;
}
@media screen and (max-width: 1600px) {
  .login .login_content {
    width: 600px;
    margin: 40px auto;
    margin-top: 10vh;
    padding: 36px 20px;
  }
  .login .login_content .item {
    margin-bottom: 10px;
  }
  .login .el-button--mini,
  .el-button--mini.is-round {
    margin-top: 10px;
  }
}
</style>