<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="hcIcon hcIcon-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="hcIcon hcIcon-unlock-alt"></i>
</div>
<div class="saveCheckbox_box">
<label for="saveCheckbox"><i :class="'hcIcon '+(isCheckRu?'hcIcon-check-square-o':'hcIcon-square-o')"></i>记住用户名</label>
<input type="checkbox" id="saveCheckbox" style="display:none;" v-model="isCheckRu" @change="rememberUserEvent">
</div>
<div class="login_form_btn">
<div class="login_btn_area">
<button class="loginBtn" @click="loginFunc">登 录</button>
</div>
</div>
<div class="login_form_foot">
<span class="forgetPw" @click="resetPw"><i class="hcIcon hcIcon-lock"></i><span style="margin-left: 5px">忘记密码?</span></span>
<span class="login_form_app"><i class="miniIcon" data-type="app"></i><span style="margin-left: 5px">APP下载</span></span>
</div>
<div style="display:none;">
<form id="singleSign" action="" method="post">
<input type="hidden" name="username" v-model="username">
<input type="hidden" name="password" v-model="password">
<input type="hidden" name="service" value="">
<input type="hidden" name="loginUrl" value="">
<input type="hidden" name="submit1" value="true">
</form>
</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{setToken,getUserId,setUserId,removeUserId} from "./utils/auth.js"
export default {
components:{
},
data(){
return {
comIcon:"./assets/computer.png",
scanIcon:"./assets/qrcode_3.png",
username:"",
password:"",
config:{
title:"中海创科技",
loginLogoImg:"./assets/Logo1.png",
loginLogoImg_height:56,
loginLogoImg_width:206,
loginBgImg:"./assets/background.png",
copyright:"版权所有 © 2020-2025 中海创科技",
isSingleLogin:false,
isScan:true,
},
currLoginType:"com",
rememberUserId:getUserId(),
}
},
computed:{
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();
console.log(this.username);
console.log(this.password);
},
defaultLogin() {
/*this.$refs.loginForm.validate(valid => {
if (valid) {*/
this.loading = 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="/"+projectName+"/hivuiMain/index.html#/"
}).catch(error => {
this.loading = 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;
}
.hcIcon{
background: no-repeat center center;
display: inline-block;
&.hcIcon-user{
width:20px;
height:20px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAEgSURBVHjarNXBh8QwFMfxHvfUv2H/1P17qkQJ3RBqGKIMlVOUsrOUymktpUr47qGn0UynnZ3D7xQ+3svzkgRIXpmNw5BOQ4s5KWRRok6G1s88CYZ0qCVZlq0i64EAb4fA0FXkEWyJ4PwdOACG1Ol72JK86o6AHlNsg1nZ8AtmJzh9NuUDULccusPJ6Y07zKm6wMEpj1enRRQUVccIHzvB8fpVa6Qo0E1Pb88oKRBCIKTGtD3ftaIQEt30zPC+AYZ0MMVtRaKkMg3WWi5nRSluqy1qz31wsqjswTBW0bgAUTA4dRBbsgw8Aq7a3ZnC+Dj4aDv2bs2/wUy7OOifbFlefuIgo0PnB8Fc0053hgIkzJ7OWuyudPh5/UAkr/4C/gYA12DKlTbM6ygAAAAASUVORK5CYII=);
}
&.hcIcon-unlock-alt{
width:20px;
height:20px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAADkSURBVHja7NTBhsNAHMfxPkGfYR9nH6vPM8IYyjSEvyWMnCKnKKF6qmGJEEYZvntIrd1K06Ry2z38TjP/j5nxMxtg8zQx7Lq2q0Lk7dneycWrrxCToJT6jk4dpy6yGOwbQf+AfmdPcRlHx8FQkyXDcGIdTXsF4jZcKjJ9Q43DA7PAUNphSOec491QX2KVQilNfp4JemeG00kzcq1wKO1wSluGZaBxnvH3dYjk1C3rgItrsyIYt591TnrrXmJSRGQiHxSnngmwJnvYvQe5q88/+AdBT7FfBmo5EuB91gf7SlYHvwYA5l7PPZq02KEAAAAASUVORK5CYII=);
}
&.hcIcon-check-square-o{
width:24px;
height:24px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAFFSURBVHja1JWha8QwFIcr92dP/qAiolBRcaIQcWIwUVExqBycqKgYVJw4qKg4Uai4QcU3cQfb3ZKu6djGxHMv35e8JO9FQPSTEf2SYKCtLJkxmMBINiXtCWYE42tjDZKQ4kBBjLENI9wz7ikyIbOlGd+F0WmXIwljawZ4XlWKcU+R6rLJa0n0shVSRjX4jxkEv4R53J8FjRWSpWGFwAOX2VB1fFOwAO4VdFVOkuRXiWvgTkFXbTAzC0LgnwXHJ9K5hYFwxwk6Sh+gbYPh7jvw7VLz8G5XOX+0+xUtkXyAD7XFKKXslwq+ktyUpS9TFCzwSRw1Xy+4lXgudIEgZzfTcpl66qKgPrpzDoXxC4YqQxJpcWCCu+B+NNRYIxQ/0DqqEF29/Th84MQSksGe+7Nnok099Ta7JIdFnOSU7cBfz+R/LHgbAJrGsWE4kOsrAAAAAElFTkSuQmCC);
}
&.hcIcon-square-o{
width:24px;
height:24px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAADeSURBVHja7JWhisNAEIbzWPcI92g/rFgRWBFREVgRcXAiYl1koSIiohAZOBG5R0VExFfRmEIqNtCW4yJ+N8PHzMB8GZA9M9nrALGn8QXW2sTkHL5bxpnfx4BLh7dCEjKJALP02YrzBCuAKZxKIVl8G0lfw/wxBIck8npYA5ypJFQ0RDhu2/VAbYVcYOR+igw6vIR8x/ZjjgS3A3bADvgPgPLEBJ9P+EWRphCSox7mTVPE1mMlzFfPug9+Ak63v26ShWMWH3i6Czw02jy2VMVSnBRDXgb6CG928l8FXAcAw3nIblDAk5UAAAAASUVORK5CYII=);
}
&.hcIcon-lock{
width:20px;
height:20px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAADrSURBVHja7JS9CoJgFIbtBrqGLqGxsbGxS2jsErqDxpwDiaYGh29LGqLROVChsBT7cYk0KIIIngZdIo2MfoYanunlfTh83+FIgPRKpA8KTyXf9uiIKbX2hIaYoy32PCncIroGOfmWslgRgJ5BeHB11YwFJrW+x2i8pKdaFGJpZbDhcaEzoyQb5GSLzuJ0VTyadpxN0HbwkNAfWtF06iqhENJToimbZkZhdRgmFnTVuJu/U3jOB+M5DSX6kKIypSXsG+ptI85thHPgjnBNU05elVQUF5/rt/wLf0wYpl6YNMpizREq3zqwz3EZAJA1f9Uxd7xEAAAAAElFTkSuQmCC);
}
}
.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:-10px;
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;
display: inline-flex;
align-items: center;
&:hover{
color: blue;
i{
color: blue;
}
}
}
.login_form_btn{
font-size: 13px;
margin-top: 0px;
.loginBtn{
/* background-color: #135189; */
background-color: #06c;
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;
&:hover{
background-color: #0f406c;
}
}
}
/*二维码*/
.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%,.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,.2);
box-shadow: 0 0 10px rgba(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>
GitBucket
4.6.0