feat: init "心诚药业 " code
This commit is contained in:
ruofei.yu
parent
0318d1b7e7
commit
d2758222c5
44
index.html
44
index.html
|
|
@ -1,22 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" href="./static/favicon.ico" >
|
||||
<!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_1667858_t9f5rgduf1k.css">-->
|
||||
<!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_1667858_y74nn2v8aig.css"> -->
|
||||
<!-- <link rel="stylesheet" href="//at.alicdn.com/t/c/font_2149865_p2fptoyda2.css"> -->
|
||||
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_2149865_4m66szwzwl8.css">
|
||||
<meta name="renderer" content="webkit">
|
||||
<!-- <script src="https://cdn.jsdelivr.net/gh/WangYuLue/image-conversion/build/conversion.js"></script> -->
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>麦得豪新材料有限公司</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" href="./static/favicon.ico" >
|
||||
<!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_1667858_t9f5rgduf1k.css">-->
|
||||
<!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_1667858_y74nn2v8aig.css"> -->
|
||||
<!-- <link rel="stylesheet" href="//at.alicdn.com/t/c/font_2149865_p2fptoyda2.css"> -->
|
||||
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_2149865_4m66szwzwl8.css">
|
||||
<meta name="renderer" content="webkit">
|
||||
<!-- <script src="https://cdn.jsdelivr.net/gh/WangYuLue/image-conversion/build/conversion.js"></script> -->
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>江西心诚药业有限公司</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
|
|
@ -1,257 +1,257 @@
|
|||
<template>
|
||||
<div class="sys-login" style="overflow: hidden;">
|
||||
<div class="login-logo" style="display:flex;">
|
||||
<img style="width:50px;height:50px;" src="../../assets/logo_yxk.png" alt />
|
||||
<h2 style="margin-left:10px;color:#fff">江西液压件股份有限公司</h2>
|
||||
<!-- <img src="../../assets/logo1.png" alt /> -->
|
||||
</div>
|
||||
<!-- <div class="login-slogan">
|
||||
赋能万物 连接未来
|
||||
</div> -->
|
||||
<div class="login-area">
|
||||
<el-divider class="login-divider">
|
||||
<div class="login-title">登录</div>
|
||||
</el-divider>
|
||||
<div class="form-group1">
|
||||
<el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-position="top" label-width="">
|
||||
<el-form-item prop="name">
|
||||
<el-input v-model="loginForm.name" type="text" placeholder="请输入用户名"
|
||||
prefix-icon="iconfont icon-iLinkapp-"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" class="login-psw">
|
||||
<el-input v-model="loginForm.password" type="password" placeholder="请输入密码"
|
||||
@keyup.enter.native="submitForm()" show-password></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item>-->
|
||||
<!-- <el-checkbox v-model="loginForm.auto">自动登录</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item>
|
||||
<el-button type="primary" ref="loginBtn" class="login-btn" @click="submitForm()">登录</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapActions, mapGetters } from "vuex";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loginForm: {
|
||||
name: "",
|
||||
password: "",
|
||||
auto: false
|
||||
},
|
||||
loginRules: {
|
||||
name: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
|
||||
password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
|
||||
},
|
||||
sysMsg: ""
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
...mapActions({
|
||||
login: "auth/loginByUser",
|
||||
getNavList: "auth/getNavList"
|
||||
}),
|
||||
submitForm() {
|
||||
var self = this;
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.login({
|
||||
name: this.loginForm.name,
|
||||
password: this.loginForm.password
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code === 0) {
|
||||
localStorage.removeItem("permissionList");
|
||||
self.getNavList().then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$router.push("home");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$alert(res.msg, "提示", { type: "warning" });
|
||||
}
|
||||
})
|
||||
.catch(reason => {
|
||||
this.$alert("用户名或密码错误", "提示", { type: "warning" });
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.sys-login {
|
||||
height: 100%;
|
||||
/* background: #fff; */
|
||||
background-image: url(../../assets/bg_login.png);
|
||||
background-position: center center;
|
||||
/* 图片居中 */
|
||||
background-repeat: no-repeat;
|
||||
/* 不重复 */
|
||||
background-size: cover;
|
||||
/* 覆盖整个屏幕 */
|
||||
/* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg clip-path='url(%26quot%3b%23SvgjsClipPath1041%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%2332325d'%3e%3c/rect%3e%3ccircle r='35.605' cx='185.1' cy='286.35' fill='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)'%3e%3c/circle%3e%3ccircle r='17.8' cx='57.44' cy='151.68' fill='%2343468b'%3e%3c/circle%3e%3ccircle r='27.595' cx='843.22' cy='195.61' fill='url(%26quot%3b%23SvgjsLinearGradient1043%26quot%3b)'%3e%3c/circle%3e%3ccircle r='55.4' cx='79.95' cy='304.45' fill='url(%26quot%3b%23SvgjsLinearGradient1044%26quot%3b)'%3e%3c/circle%3e%3ccircle r='17.2' cx='419.65' cy='331.62' fill='url(%26quot%3b%23SvgjsLinearGradient1045%26quot%3b)'%3e%3c/circle%3e%3ccircle r='33.66' cx='1110.51' cy='176.8' fill='url(%26quot%3b%23SvgjsLinearGradient1046%26quot%3b)'%3e%3c/circle%3e%3ccircle r='24.325' cx='51.8' cy='349.83' fill='url(%26quot%3b%23SvgjsLinearGradient1047%26quot%3b)'%3e%3c/circle%3e%3ccircle r='43.22' cx='693.82' cy='50.84' fill='%2343468b'%3e%3c/circle%3e%3c/g%3e%3cdefs%3e%3cclipPath id='SvgjsClipPath1041'%3e%3crect width='1440' height='560' x='0' y='0'%3e%3c/rect%3e%3c/clipPath%3e%3clinearGradient x1='113.89' y1='286.35' x2='256.31' y2='286.35' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1042'%3e%3cstop stop-color='%23ab3c51' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%234f4484' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='788.03' y1='195.61' x2='898.41' y2='195.61' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1043'%3e%3cstop stop-color='%2384b6e0' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%23464a8f' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='-30.849999999999994' y1='304.45' x2='190.75' y2='304.45' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1044'%3e%3cstop stop-color='%23f29b7c' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%237e6286' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='385.25' y1='331.62' x2='454.05' y2='331.62' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1045'%3e%3cstop stop-color='%23e298de' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%23484687' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='1043.19' y1='176.8' x2='1177.83' y2='176.8' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1046'%3e%3cstop stop-color='%23ab3c51' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%234f4484' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='3.1499999999999986' y1='349.83' x2='100.44999999999999' y2='349.83' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1047'%3e%3cstop stop-color='%23f29b7c' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%237e6286' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e"); */
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.login-logo {
|
||||
padding: 2%;
|
||||
}
|
||||
|
||||
.login-logo img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.login-logo img:first-child {
|
||||
width: 10%;
|
||||
max-width: 97px;
|
||||
}
|
||||
|
||||
.login-logo img:last-child {
|
||||
width: 18%;
|
||||
max-width: 294px;
|
||||
}
|
||||
|
||||
/* .login-logo span {
|
||||
margin: 0px 1%;
|
||||
display: inline-block;
|
||||
height: 37px;
|
||||
width: 1px;
|
||||
background: #fff;
|
||||
vertical-align: middle;
|
||||
} */
|
||||
.login-slogan {
|
||||
position: fixed;
|
||||
left: 25%;
|
||||
top: 40%;
|
||||
transform: translate(0px, -50%);
|
||||
/* color: white; */
|
||||
color: #333;
|
||||
font-size: 2em;
|
||||
width: 8em;
|
||||
height: 1.5em;
|
||||
border-right: 1px solid transparent;
|
||||
animation: login-slogan 2s steps(42, end), blink-caret 0.75s step-end infinite;
|
||||
font-family: Consolas, Monaco;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 打印效果 */
|
||||
@keyframes login-slogan {
|
||||
from {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
width: 8em;
|
||||
}
|
||||
}
|
||||
|
||||
/* 光标 */
|
||||
@keyframes blink-caret {
|
||||
|
||||
from,
|
||||
to {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
50% {
|
||||
border-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.login-area {
|
||||
position: fixed;
|
||||
right: 6%;
|
||||
top: 55%;
|
||||
transform: translate(0px, -50%);
|
||||
width: 240px;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: 0 0 5px 0 #f2f2f2;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
/* background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); */
|
||||
/* background-image: linear-gradient(
|
||||
-225deg,
|
||||
#5d9fff 0%,
|
||||
#b8dcff 48%,
|
||||
#6bbbff 100%
|
||||
); */
|
||||
/* background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%); */
|
||||
padding: 90px 60px;
|
||||
}
|
||||
|
||||
.login-divider {
|
||||
position: absolute !important;
|
||||
top: 10px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
/* position: absolute;
|
||||
top: 10px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
text-align: center; */
|
||||
font-size: 18px;
|
||||
color: #3d69e1;
|
||||
}
|
||||
|
||||
.login-area input.el-input__inner {
|
||||
margin-bottom: 5px;
|
||||
padding-left: 45px;
|
||||
/* height: 40px;
|
||||
line-height: 40px; */
|
||||
border-radius: 5px;
|
||||
color: #2591ed;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.login-area input.el-input__inner::placeholder {
|
||||
color: #2591ed;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.login-area .el-input__icon {
|
||||
padding-left: 10px;
|
||||
color: #2591ed;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.login-area .el-checkbox {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.login-psw {
|
||||
margin: 20px 0 !important;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
font-size: 16px !important;
|
||||
border-radius: 5px;
|
||||
letter-spacing: 8px;
|
||||
background: #3d69e1;
|
||||
margin-top: 50px !important;
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
background: #3457b2 !important;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="sys-login" style="overflow: hidden;">
|
||||
<div class="login-logo" style="display:flex;">
|
||||
<img style="width:50px;height:50px;" src="../../assets/logo_xc.jpg" alt />
|
||||
<h2 style="margin-left:10px;color:#fff">江西心诚药业有限公司</h2>
|
||||
<!-- <img src="../../assets/logo1.png" alt /> -->
|
||||
</div>
|
||||
<!-- <div class="login-slogan">
|
||||
赋能万物 连接未来
|
||||
</div> -->
|
||||
<div class="login-area">
|
||||
<el-divider class="login-divider">
|
||||
<div class="login-title">登录</div>
|
||||
</el-divider>
|
||||
<div class="form-group1">
|
||||
<el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-position="top" label-width="">
|
||||
<el-form-item prop="name">
|
||||
<el-input v-model="loginForm.name" type="text" placeholder="请输入用户名"
|
||||
prefix-icon="iconfont icon-iLinkapp-"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" class="login-psw">
|
||||
<el-input v-model="loginForm.password" type="password" placeholder="请输入密码"
|
||||
@keyup.enter.native="submitForm()" show-password></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item>-->
|
||||
<!-- <el-checkbox v-model="loginForm.auto">自动登录</el-checkbox>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item>
|
||||
<el-button type="primary" ref="loginBtn" class="login-btn" @click="submitForm()">登录</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapActions, mapGetters } from "vuex";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loginForm: {
|
||||
name: "",
|
||||
password: "",
|
||||
auto: false
|
||||
},
|
||||
loginRules: {
|
||||
name: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
|
||||
password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
|
||||
},
|
||||
sysMsg: ""
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
...mapActions({
|
||||
login: "auth/loginByUser",
|
||||
getNavList: "auth/getNavList"
|
||||
}),
|
||||
submitForm() {
|
||||
var self = this;
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.login({
|
||||
name: this.loginForm.name,
|
||||
password: this.loginForm.password
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code === 0) {
|
||||
localStorage.removeItem("permissionList");
|
||||
self.getNavList().then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$router.push("home");
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$alert(res.msg, "提示", { type: "warning" });
|
||||
}
|
||||
})
|
||||
.catch(reason => {
|
||||
this.$alert("用户名或密码错误", "提示", { type: "warning" });
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.sys-login {
|
||||
height: 100%;
|
||||
/* background: #fff; */
|
||||
background-image: url(../../assets/bg_login.png);
|
||||
background-position: center center;
|
||||
/* 图片居中 */
|
||||
background-repeat: no-repeat;
|
||||
/* 不重复 */
|
||||
background-size: cover;
|
||||
/* 覆盖整个屏幕 */
|
||||
/* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg clip-path='url(%26quot%3b%23SvgjsClipPath1041%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%2332325d'%3e%3c/rect%3e%3ccircle r='35.605' cx='185.1' cy='286.35' fill='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)'%3e%3c/circle%3e%3ccircle r='17.8' cx='57.44' cy='151.68' fill='%2343468b'%3e%3c/circle%3e%3ccircle r='27.595' cx='843.22' cy='195.61' fill='url(%26quot%3b%23SvgjsLinearGradient1043%26quot%3b)'%3e%3c/circle%3e%3ccircle r='55.4' cx='79.95' cy='304.45' fill='url(%26quot%3b%23SvgjsLinearGradient1044%26quot%3b)'%3e%3c/circle%3e%3ccircle r='17.2' cx='419.65' cy='331.62' fill='url(%26quot%3b%23SvgjsLinearGradient1045%26quot%3b)'%3e%3c/circle%3e%3ccircle r='33.66' cx='1110.51' cy='176.8' fill='url(%26quot%3b%23SvgjsLinearGradient1046%26quot%3b)'%3e%3c/circle%3e%3ccircle r='24.325' cx='51.8' cy='349.83' fill='url(%26quot%3b%23SvgjsLinearGradient1047%26quot%3b)'%3e%3c/circle%3e%3ccircle r='43.22' cx='693.82' cy='50.84' fill='%2343468b'%3e%3c/circle%3e%3c/g%3e%3cdefs%3e%3cclipPath id='SvgjsClipPath1041'%3e%3crect width='1440' height='560' x='0' y='0'%3e%3c/rect%3e%3c/clipPath%3e%3clinearGradient x1='113.89' y1='286.35' x2='256.31' y2='286.35' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1042'%3e%3cstop stop-color='%23ab3c51' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%234f4484' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='788.03' y1='195.61' x2='898.41' y2='195.61' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1043'%3e%3cstop stop-color='%2384b6e0' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%23464a8f' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='-30.849999999999994' y1='304.45' x2='190.75' y2='304.45' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1044'%3e%3cstop stop-color='%23f29b7c' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%237e6286' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='385.25' y1='331.62' x2='454.05' y2='331.62' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1045'%3e%3cstop stop-color='%23e298de' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%23484687' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='1043.19' y1='176.8' x2='1177.83' y2='176.8' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1046'%3e%3cstop stop-color='%23ab3c51' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%234f4484' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='3.1499999999999986' y1='349.83' x2='100.44999999999999' y2='349.83' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1047'%3e%3cstop stop-color='%23f29b7c' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%237e6286' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e"); */
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.login-logo {
|
||||
padding: 2%;
|
||||
}
|
||||
|
||||
.login-logo img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.login-logo img:first-child {
|
||||
width: 10%;
|
||||
max-width: 97px;
|
||||
}
|
||||
|
||||
.login-logo img:last-child {
|
||||
width: 18%;
|
||||
max-width: 294px;
|
||||
}
|
||||
|
||||
/* .login-logo span {
|
||||
margin: 0px 1%;
|
||||
display: inline-block;
|
||||
height: 37px;
|
||||
width: 1px;
|
||||
background: #fff;
|
||||
vertical-align: middle;
|
||||
} */
|
||||
.login-slogan {
|
||||
position: fixed;
|
||||
left: 25%;
|
||||
top: 40%;
|
||||
transform: translate(0px, -50%);
|
||||
/* color: white; */
|
||||
color: #333;
|
||||
font-size: 2em;
|
||||
width: 8em;
|
||||
height: 1.5em;
|
||||
border-right: 1px solid transparent;
|
||||
animation: login-slogan 2s steps(42, end), blink-caret 0.75s step-end infinite;
|
||||
font-family: Consolas, Monaco;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 打印效果 */
|
||||
@keyframes login-slogan {
|
||||
from {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
width: 8em;
|
||||
}
|
||||
}
|
||||
|
||||
/* 光标 */
|
||||
@keyframes blink-caret {
|
||||
|
||||
from,
|
||||
to {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
50% {
|
||||
border-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.login-area {
|
||||
position: fixed;
|
||||
right: 6%;
|
||||
top: 55%;
|
||||
transform: translate(0px, -50%);
|
||||
width: 240px;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: 0 0 5px 0 #f2f2f2;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
/* background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); */
|
||||
/* background-image: linear-gradient(
|
||||
-225deg,
|
||||
#5d9fff 0%,
|
||||
#b8dcff 48%,
|
||||
#6bbbff 100%
|
||||
); */
|
||||
/* background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%); */
|
||||
padding: 90px 60px;
|
||||
}
|
||||
|
||||
.login-divider {
|
||||
position: absolute !important;
|
||||
top: 10px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
/* position: absolute;
|
||||
top: 10px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
text-align: center; */
|
||||
font-size: 18px;
|
||||
color: #3d69e1;
|
||||
}
|
||||
|
||||
.login-area input.el-input__inner {
|
||||
margin-bottom: 5px;
|
||||
padding-left: 45px;
|
||||
/* height: 40px;
|
||||
line-height: 40px; */
|
||||
border-radius: 5px;
|
||||
color: #2591ed;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.login-area input.el-input__inner::placeholder {
|
||||
color: #2591ed;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.login-area .el-input__icon {
|
||||
padding-left: 10px;
|
||||
color: #2591ed;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.login-area .el-checkbox {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.login-psw {
|
||||
margin: 20px 0 !important;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
font-size: 16px !important;
|
||||
border-radius: 5px;
|
||||
letter-spacing: 8px;
|
||||
background: #3d69e1;
|
||||
margin-top: 50px !important;
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
background: #3457b2 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue