<template>
  <div class="bg">
    <div class="login_hd">
      <div class="login_hd_logo" :style="logoStyle">
        <!-- <div class="login_hd_logo_tip">登录</div>-->
      </div>
    </div>
    <div class="login_bd">
      <div class="login_bd_bg" :style="bgStyle"></div>
      <div class="login_form">
        <div id="showQr" class="loginMainBox" :hidden="currLoginType != 'com'">
          <img
            @click="changeQr"
            class="icon-qrcode"
            :src="scanIcon"
            :hidden="!config.isScan"
          />
          <div class="login-tip" :hidden="!config.isScan">
            <div class="poptip">
              <div class="poptip-arrow">
                <em></em>
                <span></span>
              </div>
              <div class="poptip-content">扫码登录</div>
            </div>
          </div>
          <div class="login_form_bd">
            <div class="error_tips"></div>
            <input type="hidden" name="directAction" value="" />
            <input type="hidden" name="refererurl" value="" />
            <div class="login_field">
              <label>用户名/邮箱</label>
              <input
                class="login_field_text"
                v-model="username"
                type="text"
                id="txtUserName"
                name="userName"
                placeholder="用户名"
                autofocus
                required
                autocomplete="off"
                @keyup.enter="loginFunc"
              />
              <i class="fa fa-user"></i>
            </div>
            <div class="login_field">
              <label>登录密码</label>
              <input
                class="login_field_text"
                v-model="password"
                type="text"
                onfocus="this.type='password'"
                id="txtPassword"
                name="password"
                placeholder="请输入密码"
                required
                autocomplete="off"
                @keyup.enter="loginFunc"
              />
              <i class="fa fa-unlock-alt"></i>
            </div>
            <div class="saveCheckbox_box">
              <label for="saveCheckbox"
                ><i
                  :class="
                    'fa ' + (isCheckRu ? 'fa-check-square-o' : 'fa-square-o')
                  "
                ></i
                >记住用户名</label
              >
              <input
                type="checkbox"
                id="saveCheckbox"
                style="display: none"
                v-model="isCheckRu"
                @change="rememberUserEvent"
              />
              <span class="forgetPw" @click="resetPw"
                ><i class="fa fa-lock"></i
                ><span style="margin-left: 5px">忘记密码?</span></span
              >
            </div>
            <div class="login_form_btn">
              <div class="login_btn_area">
                <button
                  :style="btnStyle"
                  :class="'loginBtn' + (loginLoading ? ' disabled' : '')"
                  @click="loginFunc"
                >
                  登&nbsp;&nbsp;录<i
                    :hidden="!loginLoading"
                    class="el-icon-loading"
                  ></i>
                </button>
              </div>
            </div>
            <div hidden class="login_form_foot">
              <span class="login_form_app"
                ><i class="miniIcon" data-type="app"></i
                ><span style="margin-left: 5px">APP下载</span></span
              >
            </div>
          </div>
        </div>
        <div
          id="showCom"
          class="loginMainBox"
          :hidden="!(config.isScan && currLoginType == 'scan')"
        >
          <div class="login-title">扫码登录</div>
          <div class="login-tip">
            <div class="poptip">
              <div class="poptip-arrow">
                <em></em>
                <span></span>
              </div>
              <div class="poptip-content">密码登录</div>
            </div>
          </div>
          <img @click="changeCom" class="icon-qrcode" :src="comIcon" alt="" />
          <div
            style="
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            "
          >
            <!-- <img id="qrImg" src="./assets/logo.png" width="115px" height="115px" alt > -->
            <div class="login-error" style="display: none">登录失败!</div>
            <div class="qrcode-img" style="display: none">
              <canvas
                height="130"
                width="130"
                style="height: 130px; width: 130px"
              ></canvas>
              <div class="qrcode-error">
                <p>二维码失效</p>
                <button type="button" class="refresh">刷新二维码</button>
              </div>
            </div>
          </div>
          <div class="login-content nc-outer-box" style="display: none">
            <div class="qrcode-login">
              <div class="qrcode-success">
                <!-- <img src="" alt=""/> -->
                <p>扫描成功！</p>
                <h4>请在手机上根据提示确认登录</h4>
              </div>
            </div>
          </div>
          <div class="qrDesc">
            <div>
              <!-- <img src=""  alt="" /> -->
            </div>
            <div class="qrDesc_right">
              <span>
                打开<a style="color: blue">海创科技App</a><br />
                扫一扫登录</span
              >
            </div>
          </div>
        </div>
        <div id="qrcode"></div>
      </div>
    </div>
    <div class="login_ft">
      <div class="login_ft_main" id="login_copyright">
        {{ this.config.copyright }}
      </div>
    </div>
  </div>
</template>
<script>
import { baseLogin } from "./api/login";
import md5 from "md5";
import { projectName } from "./config";
import "font-awesome/css/font-awesome.css";
import comIcon from "./assets/computer.png"
import scanIcon from "./assets/qrcode_3.png"
import _loginLogoImg from "./assets/Logo1.png"
import _loginBgImg from "./assets/background.png"
import {
  setToken,
  removeToken,
  getUserId,
  setUserId,
  removeUserId,
} from "./utils/auth.js";
export default {
  components: {},
  data() {
    return {
      comIcon: comIcon,
      scanIcon: scanIcon,
      username: "",
      password: "",
      config: {
        title: window.customSysCofig?.loginTitle||"中海创科技",
        loginLogoImg: window.customSysCofig?.loginLogo||_loginLogoImg,
        loginLogoImg_height: window.customSysCofig?.loginLogo_h||56,
        loginLogoImg_width: window.customSysCofig?.loginLogo_w||206,
        loginBgImg: window.customSysCofig?.loginBgImg||_loginBgImg,
        copyright: window.customSysCofig?.copyright||"版权所有 © 2020-2025 中海创科技",
        isScan: window.customSysCofig?.isScan||false,
        mainColor:window.customSysCofig?.mainColor||"#06c",
      },
      currLoginType: "com",
      rememberUserId: getUserId(),
      loginLoading: false,
    };
  },
  computed: {
    btnStyle(){
      return {
        "background-color": this.config.mainColor,
      };
    },
    bgStyle() {
      return {
        "background-image": "url(" + this.config.loginBgImg + ")",
      };
    },
    logoStyle() {
      return {
        "background-image": "url(" + this.config.loginLogoImg + ")",
        height: this.config.loginLogoImg_height + "px",
        width: this.config.loginLogoImg_width + "px",
      };
    },
    isCheckRu() {
      return !!this.rememberUserId;
    },
  },
  mounted() {
    if (this.isCheckRu) {
      this.username = this.rememberUserId;
    }
  },
  methods: {
    loginFunc() {
      this.defaultLogin();
    },
    defaultLogin() {
      /*this.$refs.loginForm.validate(valid => {
                if (valid) {*/
      if(!this.username.trim()){
        this.$message.error("请输入用户名！");
        return;
      }else if(!this.password){
        this.$message.error("请输入密码！");
        return;
      }
      removeToken();
      this.loginLoading = true;
      baseLogin({
        username: this.username.trim(),
        password: md5(this.password),
      })
        .then((response) => {
          const data = response;
          setToken(data.token);
          if (this.isCheckRu) {
            setUserId(this.username);
          } else {
            removeUserId();
          }
          location = window.HIVUI_SETTING.mainPageUrl
            ? window.HIVUI_SETTING.mainPageUrl
            : "/" + projectName + "/hivuiMain/index.html#/";
        })
        .catch((error) => {
          this.loginLoading = false;
        });
      /*} else {
                    console.log("error submit!!");
                    return false;
                }
            });*/
    },
    changeQr() {
      this.currLoginType = "scan";
    },
    changeCom() {
      this.currLoginType = "com";
    },
    rememberUserEvent() {
      if (this.isCheckRu) {
        this.rememberUserId = "";
      } else {
        this.rememberUserId = true;
      }
    },
    resetPw() {},
  },
};
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
}
button {
  outline: none;
  border: none;
}
html,
body {
  height: 100%;
  width: 100%;
  background: #fff;
}
input,
body,
button {
  font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial,
    helvetica, clean, sans-serif;
}
body {
  font-size: 14px;
  color: #333;
}
.bg {
  height: 100%;
  width: 100%;
  position: relative;
}
.login_hd,
.login_ft {
  height: 100px;
  width: 100%;
  position: fixed;
  z-index: 99;
  left: 0;
}
.login_hd_main,
.login_ft_main {
  width: 1000px;
  height: 100%;
  margin: 0 auto;
}
.login_hd {
  top: 0;
  .login_hd_logo {
    height: 60px;
    width: 265px;
    position: absolute;
    top: 50px;
    left: 50px;
    background: no-repeat;
    img {
      height: 80px;
      width: 80px;
      margin-right: 90px;
      margin-top: 10px;
      float: right;
    }
    .login_hd_logo_tip {
      height: 32px;
      width: 84px;
      display: inline-block;
      padding: 0 20px;
      font-size: 22px;
      color: #fff;
      position: absolute;
      right: -104px;
      top: 0;
      bottom: 0;
      margin: auto;
      &:after {
        content: "";
        height: 20px;
        width: 2px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0px;
        background-color: #8691a8;
        margin: auto;
      }
    }
  }
}
.login_bd {
  overflow: hidden;
  min-width: 1210px;
  position: relative;
  height: 100%;
  background-color: #fff;
  .login_bd_bg {
    background: no-repeat center center;
    background-size: 100%;
    position: absolute;
    height: 100%;
    width: 100%;
  }
  .login_form {
    width: 370px;
    height: 360px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 40%;
    right: 0;
    bottom: 0;
    background-color: #fff;
    padding: 1px;
    z-index: 100;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
    .login_form_hd {
      color: #333;
      font-weight: bold;
      padding: 0 18px;
      box-sizing: border-box;
      width: 100%;
      font-size: 16px;
      text-align: left;
      line-height: 44px;
      height: 44px;
      border-bottom: 1px solid #ccc;
    }
    .login_form_bd {
      min-height: 231px;
      height: 100%;
      position: relative;
      padding: 24px 40px 0;
      .login_form_foot {
        line-height: 40px;
        margin-top: 20px;
        &i {
          color: #0190d4;
        }
        .login_form_app,
        .login_download_app {
          color: #0190d4;
          float: right;
          cursor: pointer;
          &:hover {
            color: #0f406c;
            &i {
              color: #0f406c;
            }
          }
        }
        .miniIcon {
          display: inline-block;
          height: 16px;
          width: 16px;
          background-position: center center;
          background-size: 100%;
          margin-left: 20px;
          vertical-align: middle;
          &[data-type="app"] {
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNGM0JDQ0E0OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNGM0JDQ0E1OTc2NTExRUJBNzIxQTZFMjg4NTg2N0FDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0YzQkNDQTI5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0YzQkNDQTM5NzY1MTFFQkE3MjFBNkUyODg1ODY3QUMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz65Y/jqAAADAElEQVR42gzOTWgcVRwA8P/7mJmdjzfZ2W6TNM2u3ebSYBNqNSaKiqCgbYUWGi8ebBPwIIrtRewHSNSIoIIIFU2VHop4aMFlPYiVXlI0EinkoEnapKZ1szG7ze52srOzb97Ozjx7/N1+iIfy0jz8PB//EUSog3OE3Auhj/ibhrnLBQlxh3VERe3p5YcP6m+9EKPLN+OPv/d8YXf6IdoCW0T3mRCuipue2qPoYIVqPdC7UlEx20w//iwjd3umSrimqqzs+k4m5m7gqPr4S/T0IX12qeYG7CG9bSxwV0j45pZO0NgUYTqFkOi0UtVAaBfP4idsv1R0jz3Z63nBSlnk0mqrjSILE49i22y3Oa1WNCjSRB32s6DHb6/d/rcwz18+CGeOK9vFf5b+CywK0bbScTok9fT5lkIRh4ln0JvjcHQUpVEj//cjHNTCQmN0TM3p2mod1n2NMWRYHCvJhLcB+/rWzp6AcrG5VNrIDHiFn9Zn54o/FnYslCoTr+z44g07m2oEHkQ1E1ebkMQbky/uDX1477Otwl9ZgJ1fT2WU4X2vPw/PZfunL/isGX973DZKD+RO/2EN9JY4Ogalapjq2339Fxi6s54/ZVfedSpI/rCIZi6L3F59YjxgpnZHGGjknFzc5gdyna8mmY1hasZ3es2Th8Td1cgTRtKK27fw8FNQuLd8MT8oGMCBD3j/+yE5IYffWcnP35IyaEl59XcJ48vmiLj2Z7zZuv3lNZk4WTZOhY99GBDjyHRcb1hmYlUYhRv3gwobHdRMc312beDtyXBwWDn9Te3CnEDOri4VpIyQfUZK2bAV229CnITGUjRktq586ibTGQ4Ppmfold8YdIOju1To1NDQo5/LShV4wA2qEwZlt8pE2gpq5w6v3SiNXJ2Ldu+JE4iLyA4IIJDok1/FpbwM+jQvWtbqmW7L2gyhikBbBMhKzJBDQaFbvJVCnBw70iDXv/toBdOFOnTLRIYGtchM9IbpThkP2U5UHbBoK6aRYmYkfm0/nH+V/C/AALR/bXSBworaAAAAAElFTkSuQmCC");
          }
          &[data-type="desk"] {
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjJGRUFBRDNFOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjJGRUFBRDNGOTc2NTExRUI5OTdGOTE0QkVGODlDRDIwIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MkZFQUFEM0M5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MkZFQUFEM0Q5NzY1MTFFQjk5N0Y5MTRCRUY4OUNEMjAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7jOkn1AAABSElEQVR42mL8//8/AymApXzd08fvfv36+58Rh4o///7LCrLZqPCEmQgCuYwMaWeINPv/TGOQDUC8OEkx2kzoHw63MTMxrjv/Yf/Nz1AnATE/JzMjIwMIYwO7rn3iZGWcHCGL0PDt1z9czrj7+qf7xNtAxslKDTMFbiCDCY+jP/3469B7C8J27L318O0vfBpuvfwhUXLpyftfEC7QFQpVl888/AZyEjsLFtdffvodGJRff/07dvcLkCvGy6IrzXnkDpCddmbN2Xf/cYD9Nz+Bwj3tTNOWZxARkA0hM+8JcDH//osSrEBuiau4uSI3hOupww8NpTJ3iXuvf37//Y8J1V3AuNeQ4AA6DMjWk+E0keeCxR9ewJJxFuiei4+/wUVwhtKbL39su28yMTGsz1QG2oCUQnCAE/e+1G58+vrzbzRxRlKTN0CAAQB1Gu32zyWjpAAAAABJRU5ErkJggg==");
          }
        }
      }
      .error_tips {
        position: absolute;
        line-height: 30px;
        font-size: 12px;
        color: #f60000;
        text-align: center;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        margin: auto;
      }
      .login_field {
        position: relative;
        padding-bottom: 20px;
        label {
          line-height: 35px;
          display: block;
          height: 35px;
          font-size: 16px;
        }
        i {
          font-size: 20px;
          color: #aaa;
          width: 35px;
          text-align: center;
          line-height: 40px;
          height: 40px;
          position: absolute;
          top: 35px;
          left: 0;
          margin: auto;
        }
        .login_field_text {
          height: 40px;
          width: 100%;
          line-height: 40px;
          border: 1px solid #ccc;
          border-radius: 5px;
          background-color: #fff;
          font-size: 16px;
          color: #000;
          padding-left: 35px;
          box-sizing: border-box;
          font-family: "Microsoft YaHei", proxima-nova, "Helvetica Neue", arial,
            helvetica, clean, sans-serif;
          &::input-placeholder {
            color: #ccc;
          }
        }
      }
      .saveCheckbox_box {
        height: 35px;
        line-height: 35px;
        padding-left: 30px;
        position: relative;
        top: 0px;
        label {
          cursor: pointer;
          user-select: none;
          i {
            font-size: 24px;
            position: absolute;
            top: 0;
            left: 2px;
            bottom: 0;
            margin: auto;
            height: 25px;
            width: 25px;
            color: #888;
            cursor: pointer;
            text-align: center;
          }
        }
        .occasion {
          float: right;
          &:after {
            content: "";
            background: no-repeat;
            width: 14px;
            height: 18px;
            position: absolute;
            top: 30%;
            pointer-events: none;
            right: 1px;
          }
          #selectStyle {
            border: none;
            outline: none;
            width: 62px;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
          }
        }
      }
      .forgetPw {
        float: right;
        color: #0190d4;
        cursor: pointer;
        margin-left: 5px;
        &:hover {
          color: #0f406c;
          i {
            color: #0f406c;
          }
        }
      }
      .login_form_btn {
        font-size: 13px;
        margin-top: 20px;
        .loginBtn {
          /* background-color: #135189; */
          width: 100%;
          height: 40px;
          border: none;
          border-radius: 5px;
          color: #fff;
          font-size: 16px;
          font-weight: bold;
          text-align: center;
          cursor: pointer;
          display: inline-block;
          i {
            margin-left: 5px;
          }
          &:hover {
            filter: brightness(0.8);
          }
          &.disabled {
            background-color: #ccc!important;
            &:hover {
              filter: brightness(1);
            }
          }
        }
      }
      /*二维码*/
      .qrCodeImg {
        /* position: absolute; */
        height: 139px;
        width: 139px;
        /* left:40% !important;
                right:0 !important;
                bottom:12%; */
        margin-top: 10px;
        margin-left: 85px;
        z-index: 999;
      }
    }
    .login_form_google {
      width: 280px;
      position: absolute;
      top: 317px;
      left: 0;
      bottom: 0;
      color: #fff;
      line-height: 20px;
      text-align: center;
      font-weight: bold;
      font-size: 13px;
      cursor: pointer;
      user-select: none;
      & > a {
        color: #fff;
      }
    }
    .loginMainBox {
      .login-title {
        height: 18px;
        line-height: 18px;
        font-size: 16px;
        color: #889aa4;
        margin-top: 12px;
        margin-left: 12px;
        padding-bottom: 8px;
        font-weight: 700;
      }
      .login-tip {
        position: absolute;
        top: 10px;
        right: 68px;
        display: block;
        .poptip {
          background-color: #e6f9fc;
          line-height: 16px;
          position: relative;
          z-index: 9999;
          border: 1px solid #0073be;
          padding: 5px 10px;
          .poptip-arrow {
            position: absolute;
            z-index: 10;
            top: 8px;
            right: 0;
            span {
              position: absolute;
              width: 0;
              height: 0;
              border-color: hsla(0, 0%, 100%, 0);
              border-style: solid;
              overflow: hidden;
              top: 0;
              left: 0;
              border-width: 6px 0 6px 6px;
              border-left-color: #e6f4fc;
            }
            em {
              position: absolute;
              width: 0;
              height: 0;
              border-color: hsla(0, 0%, 100%, 0);
              border-style: solid;
              overflow: hidden;
              top: 0;
              left: 0;
              border-width: 6px 0 6px 6px;
              border-left-color: #0073be;
              border-right-color: #0073be;
            }
          }
          .poptip-content {
            font-size: 12px;
            font-weight: 400;
            color: #0073be;
          }
        }
      }
      .qrDesc {
        font-size: 12px;
        color: #666;
        width: 160px;
        margin: auto;
        overflow: hidden;
        line-height: 17px;
        margin-top: 230px;
        .qrDesc_right {
          position: relative;
          left: 50px;
          top: -35px;
        }
      }
      .scanMain {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .qrcode-img {
          position: relative;
          margin: 20px auto;
          font-size: 14px;
          -webkit-box-shadow: 0 0 8px #ddd;
          box-shadow: 0 0 8px #ddd;
          opacity: 1;
          width: 140px;
          height: 140px;
          .qrcode-error {
            background: hsla(0, 0%, 100%, 0.95);
            position: absolute;
            left: 0;
            top: 0;
            z-index: 9999;
            width: 100%;
            height: 100%;
            p {
              font-weight: 700;
              color: #222;
              margin-top: 38px;
              margin-bottom: 8px;
              text-align: center;
            }
            .refresh {
              background: #f40;
              width: 110px;
              height: 34px;
              line-height: 34px;
              text-align: center;
              margin: 0 auto;
              background: #ff9000;
              border-color: #ff9000;
              display: block;
              color: #fff;
              border-radius: 3px;
              font-size: 14px;
              cursor: pointer;
            }
          }
          canvas {
            margin: 5px;
          }
        }
        .login-error {
          text-align: center;
          color: #222;
          font-weight: 700;
        }
      }
      /*二维码切换登录*/
      .icon-qrcode {
        position: absolute;
        right: 5px;
        top: 5px;
        font-size: 52px;
        line-height: 52px;
        cursor: pointer;
        width: 56px;
        z-index: 999;
      }

      .login-content {
        width: 100%;
        margin: 0 auto;
        padding-top: 55px;
        .qrcode-success {
          text-align: center;
          margin-top: 20px;
          .iconfont {
            color: #c5c5c5;
            font-size: 36px;
          }
          h4,
          p {
            margin-top: 10px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
.login_ft {
  bottom: 0;
  .login_ft_main {
    line-height: 60px;
    text-align: center;
    font-size: 14px;
  }
}
/*登录对话框*/
.loginDialog {
  height: 300px;
  width: 500px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 199;
  .loginDialog_hd {
    height: 35px;
    background-color: #0190d4;
    position: relative;
    h2 {
      height: 35px;
      line-height: 35px;
      font-size: 14px;
      color: #fff;
      padding: 0 20px;
    }
    .loginDialog_remove {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 5px;
      height: 20px;
      width: 20px;
      background-color: #f30;
      cursor: pointer;
      margin: auto;
      text-align: center;
      &i {
        line-height: 20px;
        font-size: 18px;
        color: #fff;
      }
      &:hover {
        background-color: #f00;
      }
    }
  }
  .loginDialog_bd {
    width: 100%;
    height: 215px;
    background-color: #fff;
  }
  .loginDialog_ft {
    height: 50px;
    width: 100%;
    border-top: 1px solid #ccc;
    background-color: #f5f5f5;
    &:after {
      content: "";
      display: block;
      clear: both;
    }
    button {
      display: block;
      padding: 0 12px;
      font-size: 14px;
      margin-top: 11px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      cursor: pointer;
      color: #333333;
      background-color: #e9e9e9;
      float: right;
      margin-right: 10px;
    }
    .loginDialog_confirmBtn {
      background-color: #5cb85c;
      color: #fff;
      &:hover {
        background-color: #47a447;
      }
    }
    .loginDialog_cancelmBtn:hover {
      background-color: #ddd;
    }
  }
}
.loginMask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0.5;
  z-index: 198;
}
#loginMsg {
  height: 170px;
  width: 400px;
  top: 10%;
  bottom: unset;
  z-index: 200;
  .loginDialog_bd {
    height: 85px;
    line-height: 85px;
    padding-left: 20px;
    font-size: 14px;
  }
}
.dropdown {
  border: 1px solid #bebebe;
  border-radius: 3px;
  width: 100px;
  position: absolute;
  right: 20px;
  top: 229px;
  background: #fff;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 100;
  overflow: auto;
  cursor: default;
  li {
    margin: 5px;
    :hover {
      background: #0190d4;
      color: #fff;
    }
    &.sceneActive {
      background: #0190d4;
      color: #fff;
    }
  }
}
.hideIframe {
  display: none;
}
</style>

