GitBucket
4.6.0
Toggle navigation
Sign in
Files
Branches
1
Tags
Issues
Pull Requests
Labels
Milestones
Wiki
08335
/
hivui-platform-template
hivui平台项目模板
Browse code
登录页图标
master
1 parent
75c8330
commit
8be3dfd94d89e8464cac2f35b69d771a201dfda0
20278
authored
on 29 Jul 2021
Showing
1 changed file
project/hivuiLogin/App.vue
Ignore Space
Show notes
View
project/hivuiLogin/App.vue
<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>
<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"> </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="fa fa-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 'font-awesome/css/font-awesome.css' 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; } .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; &: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>
Show line notes below
GitBucket
4.6.0
GitBucket
4.6.0