<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="showResetPw"
><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"
>
登 录<i
:hidden="!loginLoading"
class="el-icon-loading"
></i>
</button>
</div>
</div>
<div class="register_tips">
没有账号，
<span @click="goRegisterPage">马上注册！</span>
</div>
<el-popover v-if="config.appQRcode" class="login_form_appqr" placement="bottom-end" width="190" popper-class="appQRPopper">
<img :src="config.appQRcode">
<span slot="reference" class="login_form_app">APP下载</span>
</el-popover>
</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>
<el-dialog title="忘记密码" :visible.sync="isShowResetPw" width="400px" height="350px" :close-on-click-modal="false" @close="cancelResetPw">
<resetPw res="resetPw" @resetCb="cancelResetPw"></resetPw>
</el-dialog>
<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 "js-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";
import resetPw from "../components/resetPw.vue";
export default {
components: {resetPw},
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",
appQRcode:window.customSysCofig?.appQRcode||"",
},
currLoginType: "com",
rememberUserId: getUserId(),
loginLoading: false,
isShowResetPw: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;
},
},
created() {
if (window.HIVUI_SETTING.isSingleLogin) {
let loginUrl = window.HIVUI_SETTING.singleLoginUrl;
if (loginUrl.endsWith("=")) {
loginUrl = loginUrl + window.HIVUI_SETTING.mainPageUrl.replace(/#\//g, "");
}
window.location.href = loginUrl;
}
},
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();
}
if(!window.HIVUI_SETTING.isSingleLogin&&location.hash.indexOf("eapReturnUrl=")!=-1){
location=decodeURIComponent(location.hash.split("eapReturnUrl=")[1]);
}else{
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";
},
showResetPw() {
this.isShowResetPw=true;
},
cancelResetPw() {
this.isShowResetPw=false;
},
rememberUserEvent() {
if (this.isCheckRu) {
this.rememberUserId = "";
} else {
this.rememberUserId = true;
}
},
goRegisterPage(){
this.$router.push("/register");
},
},
};
</script>
<style lang="scss">
* {
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_appqr {
position: absolute;
bottom: 0;
right: 40px;
.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;
}
.register_tips{
padding-top: 15px;
font-size: 14px;
text-align: center;
span{
color:#3486d2;
cursor: pointer;
}
}
}
.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;
}
.appQRPopper{
text-align: center;
img{
width:150px;
}
}
</style>
GitBucket
4.6.0