<template>
|
<div class="login-wrapper">
|
<div class="login_container">
|
<div class="sliderCon">
|
<div class="logo">
|
<img :src="logoUrl" class="logoImg" />
|
{{ platformName }}
|
</div>
|
<img src="../assets/images/login-img.png" class="picImg" />
|
</div>
|
<div class="login_box">
|
<div class="login-tools">
|
<el-tooltip
|
effect="dark"
|
:content="loginType.text"
|
placement="top">
|
<i v-if="showPhoneLogin" :class="loginType.icon" @click="showPsdLogin"></i>
|
</el-tooltip>
|
</div>
|
<div class="title">{{ loginType.title }}</div>
|
<!-- 登录表单区 -->
|
<el-form
|
label-width="0px"
|
class="login_from"
|
:model="loginForm"
|
ref="loginFormRef"
|
v-if="psdLogin"
|
>
|
<!-- 用户名 -->
|
<el-form-item prop="username">
|
<el-input
|
class="input"
|
v-model="loginForm.username"
|
prefix-icon="el-icon-user"
|
@keyup.enter.native.stop="onSubmit"
|
></el-input>
|
</el-form-item>
|
<!-- 密码 -->
|
<el-form-item prop="password">
|
<el-input
|
class="input"
|
v-model="loginForm.password"
|
prefix-icon="el-icon-lock"
|
type="password"
|
@keyup.enter.native.stop="onSubmit"
|
></el-input>
|
</el-form-item>
|
<el-form-item v-if="sysConfig.verifyCode.value">
|
<el-row :gutter="8">
|
<el-col :span="14">
|
<el-input class="input" placeholder="验证码" v-model="loginForm.verify" @keyup.enter.native.stop="onSubmit"></el-input>
|
</el-col>
|
<el-col :span="8">
|
<v-sidentify :identifyCode="verifyCode" @click="changeVerifyCode"></v-sidentify>
|
</el-col>
|
</el-row>
|
</el-form-item>
|
<el-form-item class="btns">
|
<el-button
|
:loading="loading"
|
type="primary"
|
@click="onSubmit"
|
class="loginBtn"
|
>登录</el-button
|
>
|
</el-form-item>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item v-if="!register">
|
<a href="javascript:;" @click="license.show = true" class="regBtn"
|
>平台注册</a
|
>
|
</el-form-item>
|
<el-form-item v-else>
|
<a href="javascript:;" class="regBtn">已激活</a>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item>
|
<div class="text-right">
|
<a href="javascript:;" class="regBtn" @click="pwd.show=true">密码修改>></a>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<el-form
|
label-width="0px"
|
class="login_from"
|
:model="loginForm"
|
v-else>
|
<!-- 手机号 -->
|
<el-form-item>
|
<el-input
|
class="input"
|
v-model="phoneInfo.phoneNum"
|
prefix-icon="el-icon-phone">
|
</el-input>
|
</el-form-item>
|
<div class="flex-row">
|
<div class="flex-content">
|
<!-- 验证码 -->
|
<el-form-item>
|
<el-input v-model="phoneInfo.code"></el-input>
|
</el-form-item>
|
</div>
|
<div class="flex-footer">
|
<el-button type="primary" @click="getVerifyCode" :disabled="codeBtn.disabled">{{codeBtn.text}}</el-button>
|
</div>
|
</div>
|
<el-form-item class="btns">
|
<el-button
|
:loading="loading"
|
type="primary"
|
class="loginBtn"
|
@click="phoneVerifyCodeLogin">登录</el-button>
|
</el-form-item>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item v-if="!register">
|
<a href="javascript:;" @click="license.show = true" class="regBtn"
|
>平台注册</a
|
>
|
</el-form-item>
|
<el-form-item v-else>
|
<a href="javascript:;" class="regBtn">已激活</a>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item>
|
<div class="text-right">
|
<a href="javascript:;" class="regBtn" @click="pwd.show=true">密码修改>></a>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
<!-- license弹框输入面板 -->
|
<el-dialog
|
title="平台注册提示"
|
width="600px"
|
:visible.sync="license.show"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center"
|
:modal-append-to-body="false"
|
>
|
<add-license
|
v-if="license.show"
|
:visible.sync="license.show"
|
></add-license>
|
</el-dialog>
|
<!-- 人脸登陆 -->
|
<el-dialog
|
title="人脸登陆"
|
width="480px"
|
:visible.sync="face.show"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center"
|
:modal-append-to-body="false"
|
>
|
<face-login
|
v-if="face.show"
|
:visible.sync="face.show"
|
@success="checkServeLicense"
|
></face-login>
|
</el-dialog>
|
<!-- 功能描述 -->
|
<el-dialog
|
title="配置清单"
|
width="960px"
|
:visible.sync="config.show"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center"
|
:modal-append-to-body="false"
|
>
|
<config-info></config-info>
|
</el-dialog>
|
<!-- uKey的验证 -->
|
<el-dialog
|
title="uKey绑定"
|
width="750px"
|
:visible.sync="uKey.show"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center"
|
:modal-append-to-body="false"
|
>
|
<ukey-bind v-if="uKey.show" :visible.sync="uKey.show"></ukey-bind>
|
</el-dialog>
|
<!-- 密码修改 -->
|
<el-dialog
|
title="密码修改"
|
width="400px"
|
:visible.sync="pwd.show"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center"
|
:modal-append-to-body="false"
|
>
|
<pwd-change
|
v-if="pwd.show"
|
:show-name="showName"
|
:visible.sync="pwd.show"
|
:name="loginForm.username"
|
:first-change="true"></pwd-change>
|
</el-dialog>
|
<div class="tools-container">
|
<div
|
class="tools-item"
|
:class="uKeyState"
|
v-if="$CFG.uKey.value"
|
@click="uKey.show = true"
|
>
|
<span class="iconfont el-icon-CombinedShape"></span>
|
</div>
|
<div
|
class="tools-item"
|
v-if="$CFG.face.value"
|
@click="face.show = true"
|
>
|
<span class="iconfont el-icon-renlianshibie"></span>
|
</div>
|
<div class="tools-item" @click="config.show = true">
|
<span class="iconfont el-icon-peizhi"></span>
|
</div>
|
</div>
|
</div>
|
<div class="copy-right" v-if="copyRight.value">
|
{{ copyRight.data }}
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import AddLicense from "@/pages/AddLicense";
|
import FaceLogin from "@/components/face/FaceLogin";
|
import sysConfig from "@/assets/js/config"
|
import {
|
login,
|
initDBPool,
|
checkLoginSession,
|
uKeyLogin,
|
getRandomFromServer,
|
loginSignVerity,
|
phoneVerifyCodeLogin,
|
getLoginVerity
|
} from "@/assets/js/api";
|
import ConfigInfo from "@/pages/configInfo";
|
import UkeyBind from "@/components/UKeyBind";
|
import nfdw from "@/assets/images/nfdw-log.png";
|
import gjdw from "@/assets/images/gjdw-log.png";
|
import gjdx from "@/assets/images/gjdx-log.png";
|
import qwh from "@/assets/images/qwh-logo.png";
|
import yuanchange from "@/assets/images/yuanchang_logo2.png";
|
import platform from "@/assets/js/config";
|
import SoftUKey from "@/assets/js/tools/SoftUKey";
|
import SoftKey3W from "@/assets/js/Syunew3";
|
import verifyComponent from "@/components/verifyComponent";
|
import randomString from "@/assets/js/tools/randomString";
|
import pwdChange from "@/components/PwdChange";
|
import const_user from "@/assets/js/const/const_user";
|
import AES from "@/common/AES";
|
import md5 from "js-md5";
|
|
import {
|
getVerifyCode
|
} from "@/assets/js/api";
|
import {formatSeconds} from "@/assets/js/tools";
|
import RSA from "@/assets/js/tools/RSA";
|
import const_num from "@/assets/js/const/const_num";
|
|
export default {
|
components: {
|
UkeyBind,
|
ConfigInfo,
|
AddLicense,
|
FaceLogin,
|
'v-sidentify': verifyComponent,
|
pwdChange,
|
},
|
data() {
|
let readSeconds = Number(sessionStorage.getItem("readSeconds"));
|
return {
|
sysConfig: sysConfig,
|
register: false,
|
loading: false,
|
labelPosition: "right" /* 登录表单 */,
|
formLabelAlign: {
|
name: "",
|
region: "",
|
type: "",
|
},
|
/* 登录表单el-form 的 数据绑定 */
|
loginForm: {
|
username: "",
|
password: "",
|
verify: ""
|
},
|
verifyCode: "",
|
license: {
|
show: false,
|
},
|
face: {
|
show: false,
|
},
|
config: {
|
show: false,
|
},
|
uKey: {
|
show: false,
|
},
|
platformName: "",
|
logoConfig: platform.logo,
|
copyRight: platform.copyRight,
|
softUKey: new SoftUKey(SoftKey3W),
|
pwd: {
|
show: false,
|
},
|
userType: const_user.type,
|
userStatus: const_user.status,
|
showPhoneLogin: platform.messageCode.value,
|
psdLogin: true,
|
phoneInfo: {
|
phoneNum: "",
|
code: ""
|
},
|
readSeconds: readSeconds?readSeconds:0,
|
codeBtnLoading: false,
|
showName: true,
|
};
|
},
|
created() {
|
this.searchPlatformName();
|
},
|
methods: {
|
/* 初始化连接池 检测后台session*/
|
async woData() {
|
const [pool, sessions] = await Promise.all([
|
initDBPool,
|
checkLoginSession,
|
]);
|
/* console.log('pool',pool);
|
console.log('sessions',sessions); */
|
},
|
onSubmit() {
|
if (!this.register && process.env.NODE_ENV != "dev") {
|
this.$layer.msg("平台未注册，请先注册平台！");
|
return;
|
}
|
if (this.loading) {
|
return;
|
}
|
|
if (this.$CFG.uKey.value) {
|
this.uKeyLogin();
|
} else {
|
this.normalLogin();
|
}
|
},
|
normalLogin() {
|
// 校验用户
|
if (this.loginForm.username && this.loginForm.password) {
|
// 开启等待框
|
this.loading = true;
|
login(this.loginForm.username, this.loginForm.password, this.loginForm.verify)
|
.then((res) => {
|
// 对结果进行处理
|
this.handleLogin(res);
|
})
|
.catch((error) => {
|
// 关闭等待
|
this.loading = false;
|
console.log(error);
|
this.changeVerifyCode();
|
this.$message.error("网络异常");
|
});
|
} else {
|
this.$message.error("用户名或密码不能为空");
|
}
|
},
|
getRandomFromServer() {
|
getRandomFromServer()
|
.then((res) => {
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
let randomNumber = rs.data;
|
this.softUKey.getSign(randomNumber, this.checkUKeySign);
|
} else {
|
this.$message.error("服务器连接异常！");
|
}
|
})
|
.catch((error) => {
|
this.$message.error("服务器连接异常！");
|
});
|
},
|
checkUKeySign(result) {
|
let reg = new RegExp("&", "g");
|
result.inPath = result.inPath.replace(reg, "%26");
|
result.inPath = result.inPath.replace(/\\/g, "huodongwei");
|
loginSignVerity(result)
|
.then((res) => {
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
this.uKeyLogin();
|
} else {
|
this.$message.error("UKey签名校验失败！");
|
}
|
})
|
.catch((error) => {
|
this.$message.error("服务器连接异常！");
|
});
|
},
|
uKeyLogin() {
|
//
|
if (!this.$store.state.ukey.connect) {
|
this.$message.error("请先安装uKey客户端服务");
|
return;
|
}
|
if (!this.$store.state.ukey.isIn) {
|
this.$message.warning("请先插入uKey");
|
return;
|
}
|
|
// 校验用户
|
if (this.loginForm.username && this.loginForm.password) {
|
// 开启等待框
|
this.loading = true;
|
uKeyLogin(
|
this.loginForm.username,
|
this.loginForm.password,
|
this.$store.state.ukey.id
|
)
|
.then((res) => {
|
// 对结果进行处理
|
this.handleLogin(res);
|
})
|
.catch((error) => {
|
// 关闭等待
|
this.loading = false;
|
console.log(error);
|
this.$message.error("网络异常");
|
});
|
} else {
|
this.$message.error("用户名或密码不能为空");
|
}
|
},
|
getVerifyCode() {
|
let num = this.phoneInfo.phoneNum;
|
if (!this.register && process.env.NODE_ENV != "dev") {
|
this.$layer.msg("平台未注册，请先注册平台！");
|
return;
|
}
|
if(num.trim() == "") {
|
this.$message.error("手机号不能为空");
|
return;
|
}
|
this.codeBtnLoading = true;
|
getVerifyCode(num).then(res=>{
|
let rs = JSON.parse(res.data.result);
|
this.codeBtnLoading = false;
|
if(rs.code==1) {
|
this.$message.success("发送成功！");
|
this.readSeconds = 360;
|
this.startReadSeconds();
|
}else {
|
this.$message.error(rs.msg);
|
}
|
}).catch(error=>{
|
this.codeBtnLoading = false;
|
console.log(error);
|
});
|
},
|
phoneVerifyCodeLogin() {
|
let num = this.phoneInfo.phoneNum;
|
let code = this.phoneInfo.code;
|
if (!this.register && process.env.NODE_ENV != "dev") {
|
this.$layer.msg("平台未注册，请先注册平台！");
|
return;
|
}
|
if(num.trim() == "") {
|
this.$message.error("手机号不能为空");
|
return;
|
}
|
if(code.trim() == "") {
|
this.$message.error("验证码不能为空");
|
return;
|
}
|
this.loading = true;
|
phoneVerifyCodeLogin(num, code).then(res=>{
|
this.handleLogin(res, true)
|
}).catch(error => {
|
// 关闭等待
|
this.loading = false;
|
console.log(error);
|
this.$message.error("网络异常");
|
});
|
},
|
handleLogin(res, phoneLogin) {
|
// 关闭等待
|
this.loading = false;
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
this.$message.success("登录成功");
|
// 重置登录时间
|
this.readSeconds = 0;
|
sessionStorage.setItem("readSeconds", "0");
|
if(phoneLogin) {
|
sessionStorage.setItem("username", rs.msgN);
|
}else {
|
sessionStorage.setItem("username", this.loginForm.username);
|
}
|
sessionStorage.setItem("userId", rs.data);
|
sessionStorage.setItem("userPower", rs.data2);
|
// 自动登录无法返回登录页
|
if (this.$store.state.user.autoLogin) {
|
this.$router.replace("/home");
|
} else {
|
this.$router.push("/home");
|
}
|
|
// 设置用户的权限
|
this.$store.dispatch("user/getPermits");
|
}else if(rs.code == 3) {
|
this.pwd.show = true;
|
this.$nextTick(()=>{
|
this.$message.error(rs.msg);
|
});
|
} else {
|
this.changeVerifyCode();
|
this.$message.error(rs.msg);
|
}
|
},
|
checkServeLicense() {
|
// 校验服务器是否注册
|
this.$apis.license
|
.checkServeLicense()
|
.then((res) => {
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
this.register = true;
|
} else {
|
this.$layer.msg("平台未注册！请先注册。");
|
this.license.show = true;
|
this.register = false;
|
}
|
})
|
.catch((error) => {
|
console.log(error);
|
});
|
},
|
autoLogin() {
|
// 自动登录
|
// this.$apis.login
|
// .checkReferer()
|
// .then((res) => {
|
// let rs = JSON.parse(res.data.result);
|
// if (rs) {
|
// this.$store.dispatch("user/changeAutoLogin", 1);
|
// this.loginForm.username = "zhdl";
|
// this.loginForm.password = "123456";
|
// this.normalLogin();
|
// }
|
// })
|
// .catch((error) => {});
|
let autoLogin = this.$route.query.autoLogin;
|
let uid = this.$route.query.uid;
|
let pageName = this.$route.query.pageName;
|
if (autoLogin) {
|
this.$apis.userMager.userInfo
|
.getUserLoginInfo(uid)
|
.then((res) => {
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
let data = rs.data;
|
this.$store.dispatch("user/changeAutoLogin", 1);
|
this.$store.dispatch("user/changePage", pageName);
|
this.loginForm.username = data.UName;
|
this.loginForm.password = data.USnId;
|
this.normalLogin();
|
} else {
|
this.init();
|
}
|
})
|
.catch((error) => {
|
this.$notify.error({
|
title: "错误",
|
message: "输入信息无效，请手动登录！",
|
});
|
this.init();
|
console.log(error);
|
});
|
}
|
// let pattern = /(localhost)|(www\.sw-ht\.com)/;
|
// let where = document.referrer;
|
// if(pattern.test(where)) {
|
// this.$store.dispatch('user/changeAutoLogin', 1);
|
// this.loginForm.username = "zhdl";
|
// this.loginForm.password = "123456";
|
// this.normalLogin();
|
// }else {
|
// this.$store.dispatch('user/changeAutoLogin', 0);
|
// }
|
},
|
searchPlatformName() {
|
this.$apis.pageSetting.realTime
|
.searchName()
|
.then((res) => {
|
let rs = JSON.parse(res.data.result);
|
if (rs.code == 1) {
|
let data = rs.data[0];
|
this.platformName = data.param;
|
} else {
|
this.platformName = "蓄电池后台监控管理平台";
|
}
|
sessionStorage.setItem("platformName", this.platformName);
|
})
|
.catch((error) => {
|
this.platformName = "蓄电池后台监控管理平台";
|
sessionStorage.setItem("platformName", this.platformName);
|
});
|
},
|
init() {
|
// 初始化user的信息
|
this.$store.commit("user/init");
|
// 初始化登录状态
|
sessionStorage.setItem("username", "");
|
this.checkServeLicense();
|
if(this.readSeconds > 0) {
|
this.startReadSeconds();
|
}
|
|
// 初始化置动
|
this.$store.dispatch("user/changeAutoLogin", 0);
|
this.$store.dispatch("user/changePage", "m1c0");
|
},
|
changeVerifyCode() {
|
let loading = this.$layer.loading();
|
getLoginVerity().then(res=>{
|
this.$layer.close(loading);
|
let rs = JSON.parse(res.data.result);
|
if(rs.code == 1) {
|
this.verifyCode = rs.data+"";
|
}else{
|
this.verifyCode = "";
|
}
|
this.loginForm.verify = "";
|
}).catch(error=>{
|
this.$layer.close(loading);
|
this.verifyCode = "";
|
this.loginForm.verify = "";
|
});
|
},
|
showPsdLogin() {
|
this.psdLogin = this.psdLogin?false:true;
|
},
|
startReadSeconds() {
|
let timer = "";
|
timer = setInterval(()=>{
|
if(this.readSeconds == 0) {
|
clearInterval(timer);
|
}else {
|
this.readSeconds--;
|
sessionStorage.setItem("readSeconds", this.readSeconds);
|
}
|
}, 1000);
|
},
|
getServerTime(callback) {
|
this.$apis.login.getServerTime().then(res=>{
|
let rs = JSON.parse(res.data.result);
|
if(rs.code == 1) {
|
sessionStorage.setItem("serverStamp", rs.data);
|
}else {
|
sessionStorage.setItem("serverStamp", new Date().getTime()+"");
|
}
|
setTimeout(()=>{
|
callback();
|
}, 500);
|
|
}).catch(error => {
|
sessionStorage.setItem("serverStamp", new Date().getTime()+"");
|
callback();
|
console.log(error);
|
});
|
},
|
closeBrowser() {
|
this.$apis.login.closeBrowser().then(res=>{
|
console.log(res);
|
}).catch(error => {
|
console.log(error);
|
});
|
},
|
},
|
computed: {
|
uKeyState() {
|
let state = -1;
|
let uKey = this.$store.state.ukey;
|
let cls = "state-error";
|
// 设置uKey的状态
|
if (uKey.connect) {
|
if (uKey.isIn) {
|
state = 1;
|
} else {
|
state = 0;
|
}
|
} else {
|
state = -1;
|
}
|
// 根据状态确定uKey图表的颜色
|
switch (state) {
|
case 0:
|
cls = "state-default";
|
break;
|
case 1:
|
cls = "";
|
break;
|
default:
|
cls = "state-error";
|
break;
|
}
|
return cls;
|
},
|
logoUrl() {
|
let logoConfig = this.logoConfig;
|
let image = yuanchange;
|
|
if (!logoConfig.value) {
|
return image;
|
}
|
|
switch (logoConfig.fileName) {
|
case "nfdw":
|
image = nfdw;
|
break;
|
case "gjdx":
|
image = gjdx;
|
break;
|
case "qwh":
|
image = qwh;
|
break;
|
case "gjdw":
|
image = gjdw;
|
break;
|
}
|
return image;
|
},
|
loginType() {
|
if(this.psdLogin) {
|
return {
|
text: "手机号登录",
|
title: "账号密码登录",
|
icon: "el-icon-mobile-phone"
|
}
|
}else {
|
return {
|
text: "账号密码登录",
|
title: "手机号登录",
|
icon: "el-icon-lock"
|
}
|
}
|
},
|
codeBtn() {
|
let seconds = this.readSeconds;
|
if(seconds<=0) {
|
return {
|
text: "获取验证码",
|
disabled: false
|
}
|
}else {
|
return {
|
text: formatSeconds(seconds),
|
disabled: true,
|
}
|
}
|
}
|
},
|
mounted() {
|
this.getServerTime(()=>{
|
this.changeVerifyCode();
|
let autoLogin = this.$route.query.autoLogin;
|
if (autoLogin) {
|
// 自动登录
|
this.autoLogin();
|
} else {
|
// 初始化
|
this.init();
|
}
|
});
|
//console.log(AES.encrypt("123456"));
|
// console.log(encodeURIComponent("B17jjjYoBkbfZChw/fHzcA=="));
|
// console.log(decodeURIComponent("B17jjjYoBkbfZChw%2FfHzcA%3D%3D"))
|
//console.log(AES.decrypt("GrVhUWt7gpWu3jt1Y09uhQ=="));
|
// console.log(md5("a123456"));
|
// console.log(JSON.stringify("5OUaEnC33sVNY+jeXlx3Qg=="));
|
//let rsaWord = RSA.encrypt("hDw123456");
|
//console.log(rsaWord);
|
//console.log(RSA.decrypt("EodEO3pcoe6t9N10S/eMcpu3klF4vFEThI+0UtzK9Adou2O46pPYnmLubjLFxZfgl1h28q8lJYdV1ym8F6/DZOMQ8kPQ1UmMqglbG7yFAz+HWsnzKXU4U9qLXpX1SvOKqAZsh+cIB13r4SEvB96Ah47GN4G+6u9baYbRHFru9GU=", const_num.privateKey));
|
},
|
};
|
</script>
|
|
<style>
|
.login_from .el-input__inner {
|
height: 48px;
|
line-height: 48px;
|
}
|
|
.el-science-blue .login_from .el-input.is-disabled .el-input__inner,
|
.el-science-blue .login_from .el-input__inner {
|
background-color: transparent;
|
border-color: #e4e4e4;
|
color: #868686;
|
}
|
|
.el-science-blue .login_from .el-input__prefix,
|
.el-input__suffix,
|
.el-science-blue .login_from .el-select .el-input .el-select__caret {
|
color: #007fe1;
|
}
|
</style>
|
|
<style lang="less" scoped>
|
.login-wrapper {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
}
|
|
/* 登录大盒子背景 */
|
.login_container {
|
width: 100%;
|
height: 100%;
|
background: url(../assets/images/login-bg.jpg) 0 0 no-repeat;
|
background-size: 100% 100%;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
}
|
|
.tools-container {
|
position: absolute;
|
bottom: 0;
|
right: 0;
|
background-color: #ffffff;
|
}
|
|
.tools-container .tools-item {
|
padding: 8px;
|
cursor: pointer;
|
}
|
|
.tools-container .tools-item:hover {
|
background-color: #e4e4e4;
|
}
|
|
.tools-container .iconfont {
|
font-size: 22px;
|
color: #0080ff;
|
}
|
|
.tools-container .state-default .iconfont {
|
color: #808080;
|
}
|
|
.tools-container .state-error .iconfont {
|
color: #ff0000;
|
}
|
|
.sliderCon {
|
margin-top: -6vh;
|
|
.logo {
|
display: flex;
|
align-items: center;
|
font-size: 48px;
|
color: #007fe1;
|
font-weight: bold;
|
|
.logoImg {
|
height: 50px;
|
margin-right: 14px;
|
}
|
}
|
|
.picImg {
|
width: 580px;
|
margin-top: 12vh;
|
}
|
}
|
|
/* 登录框 */
|
.login_box {
|
width: 440px;
|
background-color: #fff;
|
border-radius: 3px;
|
padding: 40px 60px 10px 60px;
|
box-sizing: border-box;
|
position: relative;
|
z-index: 2;
|
outline: 8px solid hsla(0,0%,100%,.4);
|
.title {
|
font-size: 20px;
|
color: #007fe1;
|
font-weight: bold;
|
margin-bottom: 30px;
|
}
|
|
/* v图片的盒子 */
|
|
.avatar {
|
height: 130px;
|
width: 130px;
|
border: 1px solid #eee;
|
border-radius: 50%;
|
/* 边框圆角 */
|
padding: 10px;
|
box-shadow: 0 0 10px #ddd;
|
position: absolute;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
background-color: #fff;
|
/* v图片 */
|
|
img {
|
width: 130px;
|
height: 130px;
|
border-radius: 50%;
|
background-color: #eeeeee;
|
}
|
}
|
}
|
|
.login-tools {
|
position: absolute;
|
top: 25px;
|
right: 16px;
|
font-size: 26px;
|
z-index: 999;
|
}
|
.el-icon-mobile-phone,
|
.el-icon-lock {
|
color: #0b388a;
|
}
|
.el-icon-mobile-phone:hover,
|
.el-icon-lock:hover {
|
cursor: pointer;
|
color: #ff0000;
|
}
|
|
/* 登录按钮 */
|
.btns {
|
text-align: center;
|
}
|
|
.loginBtn {
|
width: 100%;
|
display: block;
|
text-align: center;
|
height: 48px;
|
margin-top: 10px;
|
}
|
|
.regBtn {
|
color: #007fe1;
|
margin-right: 10px;
|
}
|
|
@media screen and (max-width: 1680px) {
|
.sliderCon .logo {
|
font-size: 40px;
|
}
|
|
.sliderCon .picImg {
|
width: 480px;
|
}
|
|
.login_box {
|
width: 400px;
|
}
|
}
|
</style>
|
|
<style scoped>
|
.copy-right {
|
position: absolute;
|
width: 100%;
|
text-align: center;
|
bottom: 16px;
|
z-index: 999;
|
font-size: 12px;
|
}
|
.flex-row {
|
display: flex;
|
flex-direction: row;
|
}
|
.flex-row .flex-content {
|
flex: 1;
|
}
|
.flex-row .flex-footer {
|
margin-left: 8px;
|
}
|
.text-right {
|
text-align: right;
|
}
|
</style>
|
