Commit b123d42d authored by 李苏's avatar 李苏 💬

1

parent 341dca9a
......@@ -22,7 +22,13 @@
clickMode="push"
>
</vue-particles>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" style="position: relative;background-color:rgba(0, 0, 0, 0.4) ;">
<ul class="bg-bubbles" >
<li v-for="i in 10" :key="i"></li>
</ul>
<!-- -->
<!-- -->
<h3 class="title">陕钢安全管理系统</h3>
<el-form-item prop="username">
<el-input
......@@ -31,7 +37,7 @@
auto-complete="off"
placeholder="账号"
>
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
<!-- <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> -->
</el-input>
</el-form-item>
<el-form-item prop="password">
......@@ -42,7 +48,7 @@
placeholder="密码"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
<!-- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> -->
</el-input>
</el-form-item>
<!-- <el-form-item prop="code" v-if="captchaEnabled">
......@@ -62,6 +68,7 @@
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-button
class="buttonClass"
:loading="loading"
size="medium"
type="primary"
......@@ -179,7 +186,33 @@ export default {
};
</script>
<style rel="stylesheet/scss" lang="scss">
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input__inner{
border: #0389ff 1px solid;
color: #fff;
background-color:rgba(0, 0, 0, 0.039) ;
}
.buttonClass {
font-size:15px;
font-family:Arial;
// width:100px;
height:34px;
border-width:1px;
color:#ffffff;
border-color:#0389ff;
border-top-left-radius:3px;
border-top-right-radius:3px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
box-shadow:inset 0px 1px 0px 0px #54a3f7;
text-shadow:inset 0px 1px 0px #154682;
background:linear-gradient(#0389ff, #00aaff);
}
.buttonClass:hover {
background: linear-gradient(#00aaff, #007dc1);
}
.newTitle{
position: absolute;
top: 0px;
......@@ -203,12 +236,22 @@ export default {
.title {
margin: 0px auto 30px auto;
text-align: center;
color: #707070;
color: #ffffff;
}
.login-form {
box-shadow:
5.5px 1.4px 2.2px rgba(0, 0, 0, 0.039),
12.4px 3.2px 5.3px rgba(0, 0, 0, 0.057),
21.7px 5.6px 10px rgba(0, 0, 0, 0.07),
36.2px 9.4px 17.9px rgba(0, 0, 0, 0.083),
63.8px 16.6px 33.4px rgba(0, 0, 0, 0.101),
146px 38px 80px rgba(0, 0, 0, 0.14)
;
/* */
margin-top: 50px;
margin-right: 250px;
margin-right: 200px;
border-radius: 6px;
background: #ffffff;
width: 400px;
......@@ -255,3 +298,105 @@ export default {
height: 38px;
}
</style>
<style lang='scss'>
.bg-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
li {
position: absolute;
bottom: -160px;
width:10px;
height: 10px;
background-color: rgba(62, 146, 255, 0.5);
list-style: none;
animation: square 15s infinite;
transition-timing-function: linear;
&:nth-child(1) {
left: 10%;
}
&:nth-child(2) {
left: 20%;
width: 13px;
height: 13px;
animation-delay: 2s;
animation-duration: 7s;
background-color: rgba(97, 158, 255, 0.2);
}
&:nth-child(3) {
left: 25%;
animation-delay: 4s;
}
&:nth-child(4) {
left: 40%;
width: 7px;
height: 7px;
animation-duration: 8s;
background-color: rgba(84, 115, 255, 0.8);
}
&:nth-child(5) {
left: 70%;
}
&:nth-child(6) {
left: 80%;
width: 35px;
height: 35px;
animation-delay: 3s;
background-color: rgba(255, 88, 119, 0.2);
}
&:nth-child(7) {
left: 32%;
width: 42px;
height: 42px;
animation-delay: 2s;
background-color: rgba(170, 170, 127, 0.2);
}
&:nth-child(8) {
left: 55%;
width: 12px;
height: 12px;
animation-delay: 4s;
animation-duration: 15s;
background-color: rgba(126, 255, 28, 0.2);
}
&:nth-child(9) {
left: 25%;
width: 10px;
height: 10px;
animation-delay: 2s;
animation-duration: 12s;
background-color: rgba(53, 134, 255, 0.5);
}
&:nth-child(10) {
left: 85%;
width: 16px;
height: 16px;
animation-delay: 5s;
background-color: rgba(85, 85, 127, 0.2);
}
}
@keyframes square {
0% {
opacity: 0.5;
transform: translateY(0px) rotate(45deg);
}
25% {
opacity: 0.75;
transform: translateY(-400px) rotate(90deg)
}
50% {
opacity: 1;
transform: translateY(-600px) rotate(135deg);
}
100% {
opacity: 0;
transform: translateY(-1000px) rotate(180deg);
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment