|
|
|
|
@ -1,491 +1,507 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="main">
|
|
|
|
|
<div class="title">镇海平安企业（园区）</div>
|
|
|
|
|
<div class="loginContainer">
|
|
|
|
|
<div class="loginBox">
|
|
|
|
|
<div class="topZS"></div>
|
|
|
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
|
|
<el-tab-pane label="账号密码登录" name="first">
|
|
|
|
|
<el-form class="loginForm">
|
|
|
|
|
<el-form-item class="user">
|
|
|
|
|
<img src="../assets/login/密码.png" />
|
|
|
|
|
<el-input class="eInput" v-model="ruleForm.username" placeholder="请输入用户名" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<br>
|
|
|
|
|
<el-form-item class="user">
|
|
|
|
|
<img src="../assets/login/用户名.png" />
|
|
|
|
|
<el-input class="eInput" type="password" v-model="ruleForm.password" autocomplete="off"
|
|
|
|
|
placeholder="请输入密码" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item class="userKey">
|
|
|
|
|
<div class="userKeybox">
|
|
|
|
|
<img src="../assets/login/验证码（1x）.png" />
|
|
|
|
|
<el-input class="keyInput" v-model="ruleForm.checkcode" placeholder="请输入验证码" />
|
|
|
|
|
</div>
|
|
|
|
|
<div ref="img" @click="getCode()" class="codeimgBox">
|
|
|
|
|
<img :src="pic" class="yanzheng" />
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item class="loginbtn">
|
|
|
|
|
<el-button @click="login">登录</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
<el-tab-pane label="数字证书登录" name="second">
|
|
|
|
|
<div class="shuziZS_box">
|
|
|
|
|
<div class="keyBox">
|
|
|
|
|
<div class="keyText">请输入电子数字证书</div>
|
|
|
|
|
|
|
|
|
|
<div class="huanhang"></div>
|
|
|
|
|
<div class="keyIcon">
|
|
|
|
|
<img src="../assets/login/钥匙.png" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="loginbtn">
|
|
|
|
|
<el-button>登录</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
</el-tabs>
|
|
|
|
|
<div class="bottomZS"></div>
|
|
|
|
|
<div class="main">
|
|
|
|
|
<div class="title">镇海平安企业（园区）</div>
|
|
|
|
|
<div class="loginContainer">
|
|
|
|
|
<div class="loginBox">
|
|
|
|
|
<div class="topZS"></div>
|
|
|
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
|
|
<el-tab-pane label="账号密码登录" name="first">
|
|
|
|
|
<el-form class="loginForm">
|
|
|
|
|
<el-form-item class="user">
|
|
|
|
|
<img src="../assets/login/password.png" />
|
|
|
|
|
<el-input
|
|
|
|
|
class="eInput"
|
|
|
|
|
v-model="ruleForm.username"
|
|
|
|
|
placeholder="请输入用户名"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<br />
|
|
|
|
|
<el-form-item class="user">
|
|
|
|
|
<img src="../assets/login/user.png" />
|
|
|
|
|
<el-input
|
|
|
|
|
class="eInput"
|
|
|
|
|
type="password"
|
|
|
|
|
v-model="ruleForm.password"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
placeholder="请输入密码"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item class="userKey">
|
|
|
|
|
<div class="userKeybox">
|
|
|
|
|
<img src="../assets/login/code01.png" />
|
|
|
|
|
<el-input
|
|
|
|
|
class="keyInput"
|
|
|
|
|
v-model="ruleForm.checkcode"
|
|
|
|
|
placeholder="请输入验证码"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div ref="img" @click="getCode()" class="codeimgBox">
|
|
|
|
|
<img :src="pic" class="yanzheng" />
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item class="loginbtn">
|
|
|
|
|
<el-button @click="login">登录</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
<el-tab-pane label="数字证书登录" name="second">
|
|
|
|
|
<div class="shuziZS_box">
|
|
|
|
|
<div class="keyBox">
|
|
|
|
|
<div class="keyText">请输入电子数字证书</div>
|
|
|
|
|
|
|
|
|
|
<div class="huanhang"></div>
|
|
|
|
|
<div class="keyIcon">
|
|
|
|
|
<img src="../assets/login/key.png" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="loginbtn">
|
|
|
|
|
<el-button>登录</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
</el-tabs>
|
|
|
|
|
<div class="bottomZS"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { getCheckCode } from "@/utils/login";
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
activeName: 'first',
|
|
|
|
|
ruleForm: {},
|
|
|
|
|
pic: '',
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.getCode()
|
|
|
|
|
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
activeName: "first",
|
|
|
|
|
ruleForm: {},
|
|
|
|
|
pic: "",
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.getCode();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
getCode() {
|
|
|
|
|
let random = Math.random();
|
|
|
|
|
getCheckCode({ type: "math", s: random }).then((res) => {
|
|
|
|
|
// console.log(res.data);
|
|
|
|
|
this.pic = "data:image/gif;base64," + res.img;
|
|
|
|
|
this.ruleForm.uuid = res.uuid;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
getCode() {
|
|
|
|
|
let random = Math.random()
|
|
|
|
|
getCheckCode({ type: "math", s: random }).then((res) => {
|
|
|
|
|
// console.log(res.data);
|
|
|
|
|
this.pic = "data:image/gif;base64," + res.img;
|
|
|
|
|
this.ruleForm.uuid = res.uuid;
|
|
|
|
|
|
|
|
|
|
login() {
|
|
|
|
|
if (!this.ruleForm.username) {
|
|
|
|
|
this.$message.error("请输入用户名");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (!this.ruleForm.password) {
|
|
|
|
|
this.$message.error("请输入密码");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (!this.ruleForm.checkcode) {
|
|
|
|
|
this.$message.error("请输入验证码");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const param = {
|
|
|
|
|
username: this.ruleForm.username,
|
|
|
|
|
password: this.ruleForm.password,
|
|
|
|
|
code: this.ruleForm.checkcode,
|
|
|
|
|
uuid: this.ruleForm.uuid,
|
|
|
|
|
};
|
|
|
|
|
this.$store
|
|
|
|
|
.dispatch("Login", param)
|
|
|
|
|
.then((res) => {
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
sessionStorage.setItem("activeIndex", "1");
|
|
|
|
|
this.$router.push({
|
|
|
|
|
path: "/home/compositeIndex",
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
login() {
|
|
|
|
|
|
|
|
|
|
if (!this.ruleForm.username) {
|
|
|
|
|
this.$message.error('请输入用户名')
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if (!this.ruleForm.password) {
|
|
|
|
|
this.$message.error('请输入密码')
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if (!this.ruleForm.checkcode) {
|
|
|
|
|
this.$message.error('请输入验证码')
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
const param = { username: this.ruleForm.username, password: this.ruleForm.password, code: this.ruleForm.checkcode, uuid: this.ruleForm.uuid }
|
|
|
|
|
this.$store.dispatch("Login", param)
|
|
|
|
|
.then((res) => {
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
sessionStorage.setItem('activeIndex', '1')
|
|
|
|
|
this.$router.push({
|
|
|
|
|
path: '/home/compositeIndex'
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(res.msg)
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
//this.$message.error(err.msg)
|
|
|
|
|
this.getCode();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
handleClick() {
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(res.msg);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {
|
|
|
|
|
//this.$message.error(err.msg)
|
|
|
|
|
this.getCode();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
handleClick() {},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.main {
|
|
|
|
|
width: 100vw;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
background: url("~@/assets/login/登录背景.png") no-repeat;
|
|
|
|
|
width: 100vw;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
background: url("~@/assets/login/loginback.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 20px;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
font-family: YouSheBiaoTiHei;
|
|
|
|
|
font-size: 46px;
|
|
|
|
|
color: #59ffda;
|
|
|
|
|
letter-spacing: 4.6px;
|
|
|
|
|
text-align: justify;
|
|
|
|
|
line-height: 57px;
|
|
|
|
|
text-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.loginContainer {
|
|
|
|
|
width: 95%;
|
|
|
|
|
height: 95%;
|
|
|
|
|
background: url("~@/assets/login/loginback02.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 20px;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
font-family: YouSheBiaoTiHei;
|
|
|
|
|
font-size: 46px;
|
|
|
|
|
color: #59FFDA;
|
|
|
|
|
letter-spacing: 4.6px;
|
|
|
|
|
text-align: justify;
|
|
|
|
|
line-height: 57px;
|
|
|
|
|
text-shadow: 0 8px 8px rgba(0, 0, 0, 0.30);
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
}
|
|
|
|
|
.loginBox {
|
|
|
|
|
width: 790px;
|
|
|
|
|
height: 540px;
|
|
|
|
|
background: url("~@/assets/login/loginback03.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
.topZS {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 30px;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
background: url("~@/assets/login/loginback04.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.buttonBox {
|
|
|
|
|
width: 700px;
|
|
|
|
|
height: 74px;
|
|
|
|
|
background-image: linear-gradient(
|
|
|
|
|
90deg,
|
|
|
|
|
rgba(238, 238, 238, 0) 0%,
|
|
|
|
|
rgba(53, 206, 150, 0.4) 50%,
|
|
|
|
|
rgba(216, 216, 216, 0) 100%
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bottomZS {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 30px;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
background: url("~@/assets/login/loginback04.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
transform: rotateX(180deg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/.el-tabs {
|
|
|
|
|
width: 790px;
|
|
|
|
|
height: 540px;
|
|
|
|
|
padding: 30px 45px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
.el-tabs__header {
|
|
|
|
|
width: 700px;
|
|
|
|
|
height: 72px;
|
|
|
|
|
background-image: linear-gradient(
|
|
|
|
|
90deg,
|
|
|
|
|
rgba(238, 238, 238, 0) 0%,
|
|
|
|
|
rgba(53, 206, 150, 0.4) 50%,
|
|
|
|
|
rgba(216, 216, 216, 0) 100%
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
.el-tabs__nav-wrap {
|
|
|
|
|
height: 72px;
|
|
|
|
|
border: 0;
|
|
|
|
|
|
|
|
|
|
.el-tabs__nav-scroll {
|
|
|
|
|
height: 72px;
|
|
|
|
|
|
|
|
|
|
.el-tabs__nav {
|
|
|
|
|
height: 72px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
|
|
.el-tabs__active-bar {
|
|
|
|
|
background: #32ff9f;
|
|
|
|
|
width: 50% !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.loginContainer {
|
|
|
|
|
width: 95%;
|
|
|
|
|
height: 95%;
|
|
|
|
|
background: url("~@/assets/login/登录装饰.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.el-tabs__item {
|
|
|
|
|
height: 72px;
|
|
|
|
|
width: 50%;
|
|
|
|
|
line-height: 72px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-family: AlimamaShuHeiTi;
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
color: #edfaff;
|
|
|
|
|
letter-spacing: 2.86px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.is-active {
|
|
|
|
|
color: #32ff9a;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.loginBox {
|
|
|
|
|
width: 790px;
|
|
|
|
|
height: 540px;
|
|
|
|
|
background: url("~@/assets/login/登录板块.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
.el-tabs__nav-wrap::after {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topZS {
|
|
|
|
|
position: absolute;
|
|
|
|
|
.el-tabs__content {
|
|
|
|
|
width: 700px;
|
|
|
|
|
height: calc(100% - 87px);
|
|
|
|
|
|
|
|
|
|
.loginForm {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.shuziZS_box {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
|
|
|
|
.keyBox {
|
|
|
|
|
width: 600px;
|
|
|
|
|
height: 182px;
|
|
|
|
|
background: rgba(8, 44, 47, 0.81);
|
|
|
|
|
border: 1px solid rgba(38, 170, 123, 1);
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
margin-top: 40px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
.keyText {
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 33px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 33px;
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
font-family: PingFangSC-Regular;
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.huanhang {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 30px;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
background: url("~@/assets/login/装饰2.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
height: 1px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.keyIcon {
|
|
|
|
|
margin-top: -40px;
|
|
|
|
|
width: 50px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
background: #f14141;
|
|
|
|
|
box-shadow: 0px 0px 8px 1px rgba(188, 37, 37, 0.76);
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
width: 17px;
|
|
|
|
|
height: 31px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.user {
|
|
|
|
|
width: 600px;
|
|
|
|
|
height: 66px;
|
|
|
|
|
background: rgba(8, 44, 47, 0.81);
|
|
|
|
|
border: 1px solid rgba(38, 170, 123, 1);
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
|
|
|
|
|
.el-form-item__content {
|
|
|
|
|
display: flex !important;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.buttonBox {
|
|
|
|
|
width: 700px;
|
|
|
|
|
height: 74px;
|
|
|
|
|
background-image: linear-gradient(90deg, rgba(238, 238, 238, 0.00) 0%, rgba(53, 206, 150, 0.40) 50%, rgba(216, 216, 216, 0.00) 100%)
|
|
|
|
|
img {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
width: 24px;
|
|
|
|
|
height: 26px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bottomZS {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 30px;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
background: url("~@/assets/login/装饰2.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
transform: rotateX(180deg);
|
|
|
|
|
.eInput {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 550px;
|
|
|
|
|
height: 66px;
|
|
|
|
|
|
|
|
|
|
background: rgba(0, 0, 0, 0);
|
|
|
|
|
color: #cfe9ff;
|
|
|
|
|
font-size: 19px;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
border: 0;
|
|
|
|
|
letter-spacing: 1.65px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
|
|
.el-input__inner {
|
|
|
|
|
height: 65px;
|
|
|
|
|
line-height: 65px;
|
|
|
|
|
background: rgba(0, 0, 0, 0);
|
|
|
|
|
border: 0;
|
|
|
|
|
color: #eeeeee;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.keyInput {
|
|
|
|
|
height: 65px;
|
|
|
|
|
width: 321px;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
color: #cfe9ff;
|
|
|
|
|
font-size: 19px;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
border: 0;
|
|
|
|
|
letter-spacing: 1.65px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.user:hover {
|
|
|
|
|
background: rgba(8, 44, 47, 0.81);
|
|
|
|
|
border: 1px solid rgba(79, 255, 141, 1);
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.userKey {
|
|
|
|
|
width: 600px;
|
|
|
|
|
height: 66px;
|
|
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
|
|
|
|
|
.el-form-item__content {
|
|
|
|
|
display: flex !important;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/.el-tabs {
|
|
|
|
|
width: 790px;
|
|
|
|
|
height: 540px;
|
|
|
|
|
padding: 30px 45px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
.el-tabs__header {
|
|
|
|
|
width: 700px;
|
|
|
|
|
height: 72px;
|
|
|
|
|
background-image: linear-gradient(90deg, rgba(238, 238, 238, 0.00) 0%, rgba(53, 206, 150, 0.40) 50%, rgba(216, 216, 216, 0.00) 100%);
|
|
|
|
|
|
|
|
|
|
.el-tabs__nav-wrap {
|
|
|
|
|
height: 72px;
|
|
|
|
|
border: 0;
|
|
|
|
|
|
|
|
|
|
.el-tabs__nav-scroll {
|
|
|
|
|
height: 72px;
|
|
|
|
|
|
|
|
|
|
.el-tabs__nav {
|
|
|
|
|
height: 72px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
|
|
.el-tabs__active-bar {
|
|
|
|
|
background: #32FF9F;
|
|
|
|
|
width: 50% !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-tabs__item {
|
|
|
|
|
height: 72px;
|
|
|
|
|
width: 50%;
|
|
|
|
|
line-height: 72px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-family: AlimamaShuHeiTi;
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
color: #EDFAFF;
|
|
|
|
|
letter-spacing: 2.86px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.is-active {
|
|
|
|
|
color: #32FF9A;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-tabs__nav-wrap::after {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.userKeybox {
|
|
|
|
|
width: 475px;
|
|
|
|
|
height: 65px;
|
|
|
|
|
background: rgba(8, 44, 47, 0.81);
|
|
|
|
|
border: 1px solid rgba(38, 170, 123, 1);
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
width: 24px;
|
|
|
|
|
height: 26px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.keyInput {
|
|
|
|
|
height: 65px;
|
|
|
|
|
width: 321px;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0);
|
|
|
|
|
|
|
|
|
|
color: #cfe9ff;
|
|
|
|
|
font-size: 19px;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
border: 0;
|
|
|
|
|
letter-spacing: 1.65px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
|
|
.el-input__inner {
|
|
|
|
|
height: 65px;
|
|
|
|
|
line-height: 65px;
|
|
|
|
|
background: rgba(0, 0, 0, 0);
|
|
|
|
|
border: 0;
|
|
|
|
|
color: #eeeeee;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-tabs__content {
|
|
|
|
|
width: 700px;
|
|
|
|
|
height: calc(100% - 87px);
|
|
|
|
|
|
|
|
|
|
.loginForm {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.shuziZS_box {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
|
|
|
|
.keyBox {
|
|
|
|
|
width: 600px;
|
|
|
|
|
height: 182px;
|
|
|
|
|
background: rgba(8, 44, 47, 0.81);
|
|
|
|
|
border: 1px solid rgba(38, 170, 123, 1);
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
margin-top: 40px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
.keyText {
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 33px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 33px;
|
|
|
|
|
opacity: 0.8;
|
|
|
|
|
font-family: PingFangSC-Regular;
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.huanhang {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 1px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.keyIcon {
|
|
|
|
|
margin-top: -40px;
|
|
|
|
|
width: 50px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
background: #F14141;
|
|
|
|
|
box-shadow: 0px 0px 8px 1px rgba(188, 37, 37, 0.76);
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
width: 17px;
|
|
|
|
|
height: 31px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.user {
|
|
|
|
|
width: 600px;
|
|
|
|
|
height: 66px;
|
|
|
|
|
background: rgba(8, 44, 47, 0.81);
|
|
|
|
|
border: 1px solid rgba(38, 170, 123, 1);
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
|
|
|
|
|
.el-form-item__content {
|
|
|
|
|
display: flex !important;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
width: 24px;
|
|
|
|
|
height: 26px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.eInput {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 550px;
|
|
|
|
|
height: 66px;
|
|
|
|
|
|
|
|
|
|
background: rgba(0, 0, 0, 0);
|
|
|
|
|
color: #cfe9ff;
|
|
|
|
|
font-size: 19px;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
border: 0;
|
|
|
|
|
letter-spacing: 1.65px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
|
|
.el-input__inner {
|
|
|
|
|
height: 65px;
|
|
|
|
|
line-height: 65px;
|
|
|
|
|
background: rgba(0, 0, 0, 0);
|
|
|
|
|
border: 0;
|
|
|
|
|
color: #EEEEEE;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.keyInput {
|
|
|
|
|
height: 65px;
|
|
|
|
|
width: 321px;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
color: #cfe9ff;
|
|
|
|
|
font-size: 19px;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
border: 0;
|
|
|
|
|
letter-spacing: 1.65px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.user:hover {
|
|
|
|
|
background: rgba(8, 44, 47, 0.81);
|
|
|
|
|
border: 1px solid rgba(79, 255, 141, 1);
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.userKey {
|
|
|
|
|
width: 600px;
|
|
|
|
|
height: 66px;
|
|
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
|
|
|
|
|
.el-form-item__content {
|
|
|
|
|
display: flex !important;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.userKeybox {
|
|
|
|
|
width: 475px;
|
|
|
|
|
height: 65px;
|
|
|
|
|
background: rgba(8, 44, 47, 0.81);
|
|
|
|
|
border: 1px solid rgba(38, 170, 123, 1);
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
width: 24px;
|
|
|
|
|
height: 26px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.keyInput {
|
|
|
|
|
height: 65px;
|
|
|
|
|
width: 321px;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0);
|
|
|
|
|
|
|
|
|
|
color: #cfe9ff;
|
|
|
|
|
font-size: 19px;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
border: 0;
|
|
|
|
|
letter-spacing: 1.65px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.el-input__inner {
|
|
|
|
|
height: 65px;
|
|
|
|
|
line-height: 65px;
|
|
|
|
|
background: rgba(0, 0, 0, 0);
|
|
|
|
|
border: 0;
|
|
|
|
|
color: #EEEEEE;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.keyInput {
|
|
|
|
|
height: 65px;
|
|
|
|
|
width: 321px;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
color: #cfe9ff;
|
|
|
|
|
font-size: 19px;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
border: 0;
|
|
|
|
|
letter-spacing: 1.65px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.userKeybox:hover {
|
|
|
|
|
background: rgba(8, 44, 47, 0.81);
|
|
|
|
|
border: 1px solid rgba(79, 255, 141, 1);
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.codeimgBox {
|
|
|
|
|
width: 123px;
|
|
|
|
|
height: 66px;
|
|
|
|
|
|
|
|
|
|
.yanzheng {
|
|
|
|
|
width: 123px;
|
|
|
|
|
height: 66px;
|
|
|
|
|
|
|
|
|
|
background-image: linear-gradient(90deg,
|
|
|
|
|
#0a2340 0%,
|
|
|
|
|
rgba(18, 64, 105, 0.04) 100%);
|
|
|
|
|
border-image: linear-gradient(to right, #124169, #7bf3fc) 1 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.loginbtn {
|
|
|
|
|
width: 600px;
|
|
|
|
|
height: 66px;
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
background: url("~@/assets/login/登录按钮（常态）.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
|
|
button {
|
|
|
|
|
width: 600px;
|
|
|
|
|
height: 66px;
|
|
|
|
|
border: 0;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
color: #edfaff;
|
|
|
|
|
letter-spacing: 6px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.loginbtn:hover {
|
|
|
|
|
background: url("~@/assets/login/登录按钮（悬浮）.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
.keyInput {
|
|
|
|
|
height: 65px;
|
|
|
|
|
width: 321px;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
color: #cfe9ff;
|
|
|
|
|
font-size: 19px;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
border: 0;
|
|
|
|
|
letter-spacing: 1.65px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.userKeybox:hover {
|
|
|
|
|
background: rgba(8, 44, 47, 0.81);
|
|
|
|
|
border: 1px solid rgba(79, 255, 141, 1);
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.codeimgBox {
|
|
|
|
|
width: 123px;
|
|
|
|
|
height: 66px;
|
|
|
|
|
|
|
|
|
|
.yanzheng {
|
|
|
|
|
width: 123px;
|
|
|
|
|
height: 66px;
|
|
|
|
|
|
|
|
|
|
background-image: linear-gradient(
|
|
|
|
|
90deg,
|
|
|
|
|
#0a2340 0%,
|
|
|
|
|
rgba(18, 64, 105, 0.04) 100%
|
|
|
|
|
);
|
|
|
|
|
border-image: linear-gradient(to right, #124169, #7bf3fc) 1 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.loginbtn {
|
|
|
|
|
width: 600px;
|
|
|
|
|
height: 66px;
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
background: url("~@/assets/login/loginbackbtn.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
|
|
button {
|
|
|
|
|
width: 600px;
|
|
|
|
|
height: 66px;
|
|
|
|
|
border: 0;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
color: #edfaff;
|
|
|
|
|
letter-spacing: 6px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.loginbtn:hover {
|
|
|
|
|
background: url("~@/assets/login/loginbackbtn02.png") no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
lukeyan
1 year ago
