|
|
|
|
<template>
|
|
|
|
|
<div v-loading="this.$store.getters.loading" class="newlogin_container">
|
|
|
|
|
<div class="newlogin_container_tb">
|
|
|
|
|
<img style="" src="../../assets/img/login/img.png" alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="newlogin_login_container">
|
|
|
|
|
<div class="newlogin_login_logo">
|
|
|
|
|
<img style="" src="../../assets/img/login/logo.png" alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="newlogin_login_title">欢迎使用中品调度管理平台</div>
|
|
|
|
|
<div class="newlogin_login_from_container">
|
|
|
|
|
<el-form ref="form" :model="loginForm">
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="loginForm.username"
|
|
|
|
|
placeholder="请输入用户名"
|
|
|
|
|
|
|
|
|
|
oninput="if(value.length>11)value=value.slice(0,11)" type="Number" onkeyup="this.value = this.value.replace(/[^\d]/g,'');"
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
slot="prefix"
|
|
|
|
|
src="@/assets/img/login/yhm.png"
|
|
|
|
|
style="width: 20px; height: 20px"
|
|
|
|
|
/>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-input
|
|
|
|
|
v-show="swich == 1"
|
|
|
|
|
class="password"
|
|
|
|
|
type="password"
|
|
|
|
|
show-password
|
|
|
|
|
v-model="loginForm.password"
|
|
|
|
|
placeholder="请输入密码"
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
slot="prefix"
|
|
|
|
|
src="@/assets/img/login/mm.png"
|
|
|
|
|
style="width: 20px; height: 20px"
|
|
|
|
|
/>
|
|
|
|
|
</el-input>
|
|
|
|
|
<el-input
|
|
|
|
|
v-show="swich == 2"
|
|
|
|
|
class="verifyCode"
|
|
|
|
|
v-model="loginForm.verifyCode"
|
|
|
|
|
placeholder="请输入密码"
|
|
|
|
|
>
|
|
|
|
|
<span slot="suffix">获取验证码</span>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<div class="login_switch">
|
|
|
|
|
<span>验证码登录</span>
|
|
|
|
|
<span>二维码登录</span>
|
|
|
|
|
</div>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button
|
|
|
|
|
:loading="loading"
|
|
|
|
|
@click="handleLogin"
|
|
|
|
|
class="newlogin_login_from_butten"
|
|
|
|
|
type="primary"
|
|
|
|
|
>登录</el-button
|
|
|
|
|
>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<el-dialog
|
|
|
|
|
:visible.sync="companySelectDialog"
|
|
|
|
|
:close-on-click-modal="false"
|
|
|
|
|
:close-on-press-escape="false"
|
|
|
|
|
width="500px"
|
|
|
|
|
title="请选择登录企业"
|
|
|
|
|
>
|
|
|
|
|
<!-- <div class="login-company">请选择登录企业</div> -->
|
|
|
|
|
<el-table :data="companyList">
|
|
|
|
|
<el-table-column
|
|
|
|
|
property="companyName"
|
|
|
|
|
label="公司名称"
|
|
|
|
|
width="200"
|
|
|
|
|
/>
|
|
|
|
|
<el-table-column property="parentMark" label="公司性质">
|
|
|
|
|
<template slot-scope="{ row }">
|
|
|
|
|
<el-tag
|
|
|
|
|
v-if="row.parentMark === 0"
|
|
|
|
|
effect="dark"
|
|
|
|
|
size="normal"
|
|
|
|
|
>主体公司</el-tag
|
|
|
|
|
>
|
|
|
|
|
<el-tag v-else effect="dark" type="info" size="normal"
|
|
|
|
|
>分公司</el-tag
|
|
|
|
|
>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column property="name" label="操作">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button
|
|
|
|
|
type="text"
|
|
|
|
|
size="small"
|
|
|
|
|
@click="loginAgain(scope.row.companyId)"
|
|
|
|
|
>登录</el-button
|
|
|
|
|
>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import { sendManagerLoginSms, loginDispatch } from "@/api/identity/user";
|
|
|
|
|
import markApi from "@/api/dict/oilDicMark";
|
|
|
|
|
// import newIndexVue from "./newIndex.vue";
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
// newIndexVue,
|
|
|
|
|
},
|
|
|
|
|
name: "Login",
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
companySelectDialog: false,
|
|
|
|
|
companyList: [],
|
|
|
|
|
swich: 1,
|
|
|
|
|
verifyCodeToken: null, // 验证码发送令牌
|
|
|
|
|
activeName: "first",
|
|
|
|
|
checked: false,
|
|
|
|
|
loginForm: {
|
|
|
|
|
username: "",
|
|
|
|
|
networkId: "",
|
|
|
|
|
password: "",
|
|
|
|
|
verifyCode: ""
|
|
|
|
|
},
|
|
|
|
|
sendSmsState: false, // 是否发送验证码
|
|
|
|
|
sendTime: 10, // 验证码发送间隔
|
|
|
|
|
passwordType: "password",
|
|
|
|
|
smsInterval: null,
|
|
|
|
|
capsTooltip: false,
|
|
|
|
|
loading: false,
|
|
|
|
|
showDialog: false,
|
|
|
|
|
// 滑块验证图片
|
|
|
|
|
verifyImg: [
|
|
|
|
|
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3395864961,1527657332&fm=26&gp=0.jpg",
|
|
|
|
|
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1384621569,26460893&fm=26&gp=0.jpg",
|
|
|
|
|
"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1792020650,1788455602&fm=26&gp=0.jpg",
|
|
|
|
|
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3641201435,3528700244&fm=26&gp=0.jpg",
|
|
|
|
|
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=175284648,2825480163&fm=26&gp=0.jpg",
|
|
|
|
|
"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1799863833,1998296432&fm=26&gp=0.jpg",
|
|
|
|
|
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=108505343,1242322480&fm=26&gp=0.jpg",
|
|
|
|
|
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3192751729,2284926480&fm=26&gp=0.jpg",
|
|
|
|
|
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3807748365,3630410488&fm=26&gp=0.jpg"
|
|
|
|
|
],
|
|
|
|
|
// 滑块验证
|
|
|
|
|
verifyDialog: false,
|
|
|
|
|
// 是否强制验证
|
|
|
|
|
needVerify: false,
|
|
|
|
|
// 是否验证成功
|
|
|
|
|
verifyState: false,
|
|
|
|
|
redirect: ""
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
$route: {
|
|
|
|
|
handler: function(route) {
|
|
|
|
|
const query = route.query;
|
|
|
|
|
if (query) {
|
|
|
|
|
this.redirect = query.redirect;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
immediate: true
|
|
|
|
|
},
|
|
|
|
|
sendTime: function(newVal, oldVal) {
|
|
|
|
|
if (newVal === 0) {
|
|
|
|
|
clearInterval(this.smsInterval);
|
|
|
|
|
this.sendSmsState = false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
// require('./css/index.css');
|
|
|
|
|
// let a = document.getElementsByTagName('html');
|
|
|
|
|
// a[0].style.fontSize= '16'+'px'
|
|
|
|
|
console.log("111", localStorage.getItem("size"));
|
|
|
|
|
this.windowChange();
|
|
|
|
|
if (localStorage.getItem("size")) {
|
|
|
|
|
let a = document.getElementsByTagName("html");
|
|
|
|
|
a[0].style.fontSize = localStorage.getItem("size");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
localStorage.setItem(
|
|
|
|
|
"size",
|
|
|
|
|
getComputedStyle(window.document.documentElement)["font-size"]
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
if (this.loginForm.username === "") {
|
|
|
|
|
this.$refs.username.focus();
|
|
|
|
|
} else if (this.loginForm.password === "") {
|
|
|
|
|
this.$refs.password.focus();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
destroyed() {
|
|
|
|
|
console.log("baibai1");
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
pagerem(width) {
|
|
|
|
|
let a = document.getElementsByTagName("html")[0];
|
|
|
|
|
// if(width>){
|
|
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
},
|
|
|
|
|
windowChange(callBack) {
|
|
|
|
|
let taht = this;
|
|
|
|
|
window.addEventListener("resize", res => {
|
|
|
|
|
console.log(res.currentTarget.innerWidth);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
handleClick(tab, event) {},
|
|
|
|
|
checkCapslock({ shiftKey, key } = {}) {
|
|
|
|
|
if (key && key.length === 1) {
|
|
|
|
|
if (
|
|
|
|
|
(shiftKey && key >= "a" && key <= "z") ||
|
|
|
|
|
(!shiftKey && key >= "A" && key <= "Z")
|
|
|
|
|
) {
|
|
|
|
|
this.capsTooltip = true;
|
|
|
|
|
} else {
|
|
|
|
|
this.capsTooltip = false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (key === "CapsLock" && this.capsTooltip === true) {
|
|
|
|
|
this.capsTooltip = false;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
sendSms() {
|
|
|
|
|
// 发送验证码
|
|
|
|
|
if (!this.loginForm.username) {
|
|
|
|
|
this.$message.error("请输入手机号");
|
|
|
|
|
}
|
|
|
|
|
sendManagerLoginSms(this.loginForm.username).then(res => {
|
|
|
|
|
this.$message.success(res.msg);
|
|
|
|
|
// 发送成功，修改发送状态
|
|
|
|
|
this.sendSmsState = true;
|
|
|
|
|
this.verifyCodeToken = res.data.verifyCodeToken;
|
|
|
|
|
this.sendTime = 60;
|
|
|
|
|
this.smsInterval = setInterval(() => {
|
|
|
|
|
this.sendTime--;
|
|
|
|
|
}, 1000);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
showPwd() {
|
|
|
|
|
if (this.passwordType === "password") {
|
|
|
|
|
this.passwordType = "";
|
|
|
|
|
} else {
|
|
|
|
|
this.passwordType = "password";
|
|
|
|
|
}
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.$refs.password.focus();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
handleLogin() {
|
|
|
|
|
// 判断公司是否输入
|
|
|
|
|
// if (!this.loginForm.networkId) {
|
|
|
|
|
// this.$message.error('请输入公司')
|
|
|
|
|
// return
|
|
|
|
|
// }
|
|
|
|
|
// if (this.needVerify && !this.verifyState) {
|
|
|
|
|
// // 需要验证并且验证没通过
|
|
|
|
|
// this.$message.error('请滑动验证码进行验证')
|
|
|
|
|
// return
|
|
|
|
|
// }
|
|
|
|
|
if (!this.loginForm.username) {
|
|
|
|
|
this.$message.error("请输入手机号");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (!this.loginForm.password) {
|
|
|
|
|
this.$message.error("请输入密码");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
this.loading = true;
|
|
|
|
|
this.loginForm.checked = this.checked;
|
|
|
|
|
this.$store
|
|
|
|
|
.dispatch("user/login", this.loginForm)
|
|
|
|
|
.then( async res => {
|
|
|
|
|
if (res && res.code === 42014) {
|
|
|
|
|
loginDispatch(this.loginForm.username).then(res => {
|
|
|
|
|
this.companyList = res.data;
|
|
|
|
|
this.companySelectDialog = true;
|
|
|
|
|
return;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
if (res && res.data.state === 1) {
|
|
|
|
|
this.needVerify = true;
|
|
|
|
|
this.verifyState = false;
|
|
|
|
|
this.verifyDialog = true;
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// await this.$store.dispatch('user/getInfo')
|
|
|
|
|
this.shareLogin();
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {
|
|
|
|
|
this.loading = false;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
loginAgain(companyId) {
|
|
|
|
|
this.loginForm.networkId = companyId;
|
|
|
|
|
console.log(this.loginForm);
|
|
|
|
|
this.handleLogin();
|
|
|
|
|
},
|
|
|
|
|
handleLoginSms() {
|
|
|
|
|
this.loading = true;
|
|
|
|
|
this.loginForm.verifyCodeToken = this.verifyCodeToken;
|
|
|
|
|
this.$store
|
|
|
|
|
.dispatch("user/loginSms", this.loginForm)
|
|
|
|
|
.then(() => {
|
|
|
|
|
this.shareLogin();
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {
|
|
|
|
|
this.loading = false;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
shareLogin() {
|
|
|
|
|
markApi.getAllMark().then(markRes => {
|
|
|
|
|
this.$store.commit("global/SET_MARK", markRes.data);
|
|
|
|
|
this.$router.push({
|
|
|
|
|
path: this.redirect || "/",
|
|
|
|
|
query: this.otherQuery
|
|
|
|
|
});
|
|
|
|
|
this.loading = false;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
onSuccess(detail) {
|
|
|
|
|
this.$message.success("验证通过");
|
|
|
|
|
this.verifyDialog = false;
|
|
|
|
|
this.needVerify = false;
|
|
|
|
|
this.verifyState = true;
|
|
|
|
|
this.loginForm.verifyCode = detail;
|
|
|
|
|
this.handleLogin();
|
|
|
|
|
},
|
|
|
|
|
onAgain() {
|
|
|
|
|
// 非人为验证触发
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped>
|
|
|
|
|
@import url("./css/index.css");
|
|
|
|
|
</style>
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
/* 修复input 背景不协调 和光标变色 */
|
|
|
|
|
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
|
|
|
|
|
|
|
|
|
|
$bg: #fff;
|
|
|
|
|
$light_gray: #2d3a4b;
|
|
|
|
|
$cursor: #5a37bc;
|
|
|
|
|
$main_color: #5a37bc;
|
|
|
|
|
|
|
|
|
|
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
|
|
|
|
|
.login-container .el-input input {
|
|
|
|
|
color: $cursor;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* reset element-ui css */
|
|
|
|
|
.login-container {
|
|
|
|
|
.el-input {
|
|
|
|
|
width: 75%;
|
|
|
|
|
|
|
|
|
|
.el-input__inner::placeholder {
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input {
|
|
|
|
|
background: transparent;
|
|
|
|
|
border: 0px;
|
|
|
|
|
-webkit-appearance: none;
|
|
|
|
|
border-radius: 0px;
|
|
|
|
|
padding: 6px 5px 6px 8px;
|
|
|
|
|
color: $light_gray;
|
|
|
|
|
height: 30px;
|
|
|
|
|
caret-color: $cursor;
|
|
|
|
|
|
|
|
|
|
&:-webkit-autofill {
|
|
|
|
|
box-shadow: 0 0 0px 1000px $bg inset !important;
|
|
|
|
|
-webkit-text-fill-color: $cursor !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-form-item {
|
|
|
|
|
border: 1px solid $main_color;
|
|
|
|
|
background: #fff;
|
|
|
|
|
// border-radius: 500px;
|
|
|
|
|
color: #454545;
|
|
|
|
|
|
|
|
|
|
.el-form-item__content {
|
|
|
|
|
// line-height: 30px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media only screen and (max-width: 1295px) {
|
|
|
|
|
input {
|
|
|
|
|
height: 30px;
|
|
|
|
|
line-height: 24px;
|
|
|
|
|
font-size: 0.8rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-form-item {
|
|
|
|
|
margin-bottom: 40px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
$bg: #2d3a4b;
|
|
|
|
|
$main_color: #05ffff;
|
|
|
|
|
$dark_gray: #889aa4;
|
|
|
|
|
$light_gray: #2d3a4b;
|
|
|
|
|
|
|
|
|
|
.el-input-group__append {
|
|
|
|
|
background-color: $dark_gray !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-form-item {
|
|
|
|
|
margin-bottom: 40px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-container {
|
|
|
|
|
// min-height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
// background-color: $bg;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
// padding-top: 15%;
|
|
|
|
|
.login-bg {
|
|
|
|
|
position: absolute;
|
|
|
|
|
z-index: -1;
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
background-size: cover;
|
|
|
|
|
max-width: 58.65vw;
|
|
|
|
|
max-height: 100vh;
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
vertical-align: bottom;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-col-8 {
|
|
|
|
|
position: relative;
|
|
|
|
|
max-height: 500px;
|
|
|
|
|
max-width: 450px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media only screen and (max-width: 1296px) {
|
|
|
|
|
.el-col-8 {
|
|
|
|
|
// background: #fff;
|
|
|
|
|
margin-top: 9%;
|
|
|
|
|
position: relative;
|
|
|
|
|
max-width: 300px;
|
|
|
|
|
max-height: 650px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.center-left-col {
|
|
|
|
|
border-radius: 6px 0 0 6px;
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
position: relative;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
user-select: none;
|
|
|
|
|
height: 108%;
|
|
|
|
|
left: -4%;
|
|
|
|
|
top: -4%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.center-right-col {
|
|
|
|
|
border-radius: 0 6px 6px 0;
|
|
|
|
|
|
|
|
|
|
.login-tabs {
|
|
|
|
|
width: 80%;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
padding: 0 2rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media only screen and (max-width: 1295px) {
|
|
|
|
|
.el-col {
|
|
|
|
|
// background: #fff;
|
|
|
|
|
margin-top: 3%;
|
|
|
|
|
position: relative;
|
|
|
|
|
max-width: 250px;
|
|
|
|
|
max-height: 250px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.center-left-col {
|
|
|
|
|
img {
|
|
|
|
|
position: relative;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
user-select: none;
|
|
|
|
|
height: 50%;
|
|
|
|
|
left: -4%;
|
|
|
|
|
top: -4%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-tabs {
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
padding: 0 1rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-form {
|
|
|
|
|
position: relative;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
padding-top: 1rem;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
p.forget {
|
|
|
|
|
// padding: 0 10px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #666;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-button {
|
|
|
|
|
padding: 16px 0;
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media only screen and (max-width: 1295px) {
|
|
|
|
|
.el-button {
|
|
|
|
|
// padding: 10px 0;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tips {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
&:first-of-type {
|
|
|
|
|
margin-right: 16px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.svg-container {
|
|
|
|
|
padding: 6px 5px 6px 15px;
|
|
|
|
|
color: $dark_gray;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
width: 30px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title-container {
|
|
|
|
|
position: relative;
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 1.5rem 0 0.6rem;
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
user-select: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
color: $light_gray;
|
|
|
|
|
margin: 0px auto 40px auto;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.set-language {
|
|
|
|
|
color: #fff;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 3px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
right: 0px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.over-border {
|
|
|
|
|
height: 106%;
|
|
|
|
|
width: 200%;
|
|
|
|
|
left: -96%;
|
|
|
|
|
top: -3%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
border: $main_color 1px solid;
|
|
|
|
|
box-shadow: $main_color 0 0 5px;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media only screen and (max-width: 1295px) {
|
|
|
|
|
.oil-logo {
|
|
|
|
|
position: relative;
|
|
|
|
|
padding-top: 2rem;
|
|
|
|
|
padding-left: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.admin-name {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-input {
|
|
|
|
|
input {
|
|
|
|
|
line-height: 24px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-col {
|
|
|
|
|
margin-top: 9%;
|
|
|
|
|
// max-width: 327px;
|
|
|
|
|
max-height: 360px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-form-item--medium {
|
|
|
|
|
.el-form-item__content {
|
|
|
|
|
line-height: 24px;
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.over-border {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-tabs {
|
|
|
|
|
padding: 0 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-form {
|
|
|
|
|
padding-top: 0rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title-container {
|
|
|
|
|
padding: 1rem 0 0rem;
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
user-select: none;
|
|
|
|
|
height: 2.2rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.show-pwd {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 10px;
|
|
|
|
|
top: 7px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: $dark_gray;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
user-select: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.thirdparty-button {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media only screen and (max-width: 470px) {
|
|
|
|
|
.thirdparty-button {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<style scoped>
|
|
|
|
|
.login-container >>> .el-form-item--medium .el-form-item__content {
|
|
|
|
|
/* line-height: 26px !important; */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-sms-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sms-button.el-button {
|
|
|
|
|
margin-top: 0 !important;
|
|
|
|
|
/* padding: 10px 20px !important; */
|
|
|
|
|
/* line-height: 20px; */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tar {
|
|
|
|
|
text-align: right;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.verify-container >>> .el-dialog__header {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* .el-tabs >>> .el-tabs__item:hover {
|
|
|
|
|
color: #05FFFF;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
} */
|
|
|
|
|
.el-tabs >>> .el-tabs__item {
|
|
|
|
|
color: #5a37bc;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* .sms-button */
|
|
|
|
|
.el-tabs >>> .el-tabs__item.is-active {
|
|
|
|
|
color: #5a37bc;
|
|
|
|
|
/* font-weight:bold; */
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-tabs >>> .el-tabs__active-bar {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
height: 2px;
|
|
|
|
|
background-color: #5a37bc;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
|
|
|
list-style: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-checkbox >>> .el-checkbox__input.is-checked + .el-checkbox__label {
|
|
|
|
|
color: #5a37bc;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-checkbox >>> .el-checkbox__input.is-checked .el-checkbox__inner {
|
|
|
|
|
background-color: #5a37bc;
|
|
|
|
|
border-color: #5a37bc;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 新样式 */
|
|
|
|
|
.login-pannel {
|
|
|
|
|
min-width: 41%;
|
|
|
|
|
padding: 3rem 0;
|
|
|
|
|
padding-left: 1.5rem;
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.oil-logo {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 11vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.admin-name {
|
|
|
|
|
color: #5a37bc;
|
|
|
|
|
position: absolute;
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
top: 26vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-tabs-div {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 80%;
|
|
|
|
|
top: 35vh;
|
|
|
|
|
max-width: 480px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.upper-img {
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-bg.upper-img.upper-img img {
|
|
|
|
|
position: absolute;
|
|
|
|
|
height: 71vh;
|
|
|
|
|
width: 53.66vw;
|
|
|
|
|
min-width: inherit;
|
|
|
|
|
min-height: inherit;
|
|
|
|
|
margin-top: 14vh;
|
|
|
|
|
min-width: inherit;
|
|
|
|
|
min-height: inherit;
|
|
|
|
|
margin-left: 8vw;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
