Merge branch 'master' of http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template

08335 / hivui-platform-template

hivui平台项目模板

Browse code Merge branch 'master' of http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template master
commit ce01ba4d8aabcfdfe85f8b37a972df3e6a0e3a35 2 parents 887e317 + aaeeb25 caibinghong authored on 3 Sep 2021

Showing 3 changed files

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="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=window.HIVUI_SETTING.mainPageUrl?window.HIVUI_SETTING.mainPageUrl:("/"+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> <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>

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>
        </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">登&nbsp;&nbsp;录</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%);">
                        
                        <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">
                                
                                <p>扫描成功！</p>
                                <h4>请在手机上根据提示确认登录</h4>
                            </div>
                        </div>
                    </div>
                    <div class="qrDesc">
                        <div>
                            
                        </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=window.HIVUI_SETTING.mainPageUrl?window.HIVUI_SETTING.mainPageUrl:("/"+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>

}
    },
    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(){

Ignore Space Show notes View project/hivuiLogin/utils/auth.js
import Cookies from 'js-cookie' const TokenKey = 'EAP-Token' export function getToken() { return Cookies.get(TokenKey)\|\|'' } export function setToken(token) { return Cookies.set(TokenKey, token) } export function removeToken() { return Cookies.remove(TokenKey) } export function getUserId() { return Cookies.get("userId") } export function setUserId(userId) { return Cookies.set("userId",userId) } export function removeUserId() { return Cookies.remove("userId") } import Cookies from 'js-cookie' const TokenKey = 'Admin-Token' export function getToken() { return Cookies.get(TokenKey)\|\|'' } export function setToken(token) { return Cookies.set(TokenKey, token) } export function removeToken() { return Cookies.remove(TokenKey) } export function getUserId() { return Cookies.get("userId") } export function setUserId(userId) { return Cookies.set("userId",userId) } export function removeUserId() { return Cookies.remove("userId") }

Ignore Space Show notes View

project/hivuiLogin/utils/auth.js

Ignore Space Show notes View project/hivuiMain/utils/auth.js
import Cookies from 'js-cookie' const TokenKey = 'EAP-Token' export function getToken() { return Cookies.get(TokenKey) } export function setToken(token) { return Cookies.set(TokenKey, token) } export function removeToken() { return Cookies.remove(TokenKey) } import Cookies from 'js-cookie' const TokenKey = 'Admin-Token' export function getToken() { return Cookies.get(TokenKey) } export function setToken(token) { return Cookies.set(TokenKey, token) } export function removeToken() { return Cookies.remove(TokenKey) }

Ignore Space Show notes View

project/hivuiMain/utils/auth.js

Show line notes below