Skip to content

E
ElectricitySheep
Commit ebd4bbc5 authored by zhengke's avatar zhengke
Browse files
Options

修改

parent 2d0e5c9b
Show whitespace changes
Inline Side-by-side
Showing with 212 additions and 34 deletions
src/components/Login.vue
View file @ ebd4bbc5
<style> <style>
*{ * {
margin:0; margin: 0;
padding:0; padding: 0;
} }
.loginDiv{ .loginDiv {
width:100%; width: 100%;
height:100%; height: 100%;
background-image:url('../assets/img/loginBack.jpg'); background-image: url("../assets/img/loginBack.jpg");
position: relative; position: relative;
background-size: cover; background-size: cover;
background-size:100% 100%; background-size: 100% 100%;
background-position: center; background-position: center;
} }
.loginOpacity{ .loginOpacity {
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, 0.15);
height: 100%; height: 100%;
width: 100%; width: 100%;
...@@ -20,23 +20,201 @@ ...@@ -20,23 +20,201 @@
left: 0; left: 0;
top: 0; top: 0;
z-index: 1; z-index: 1;
} }
.loginDiv .box-card {
position: relative;
border-radius: 15px;
z-index: 99;
border: 0;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .5);
width: 825px;
height: 480px;
margin: 0 auto;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 100% 100%;
background-image: url("../assets/img/loginBack.jpg");
}
[flex]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}
[flex~="main:center"]{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}
[flex~="cross:center"]{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.loginDiv .logo {
position: absolute;
left: 40px;
top: 40px;
height: 50px;
}
.loginDiv .login-form {
padding: 50px 45px 30px;
height: 480px;
width: 245px;
float: right;
background-color: #fff;
}
.loginDiv .form-title {
font-size: 26px;
color: #1F4881;
margin-bottom: 40px;
}
.loginDiv .el-form-item--mini.el-form-item, .loginDiv .el-form-item--small.el-form-item {
margin-bottom: 18px;
}
.loginDiv .el-input .el-input__inner {
height: 36px;
border-radius: 18px;
background-color: #f7f5fb;
border-color: #f7f5fb;
}
.loginDiv .el-input__inner {
-webkit-appearance: none;
background-color: #FFF;
background-image: none;
border-radius: 4px;
border: 1px solid #DCDFE6;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
height: 40px;
line-height: 40px;
outline: 0;
padding: 0 15px;
-webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
width: 100%;
}
.register_box {
position: absolute;
right: 15%;
bottom: 35px;
width: 150px;
font-size:14px;
}
.register {
display: inline-block;
width: 48%;
height: 15px;
line-height: 15px;
text-align: center;
cursor: pointer;
color: #4291ff;
}
.login-btn {
width: 100%;
border-radius: 20px;
height: 38px;
font-size: 16px;
background: linear-gradient(to right, #2E9FFF, #3E79FF);
box-shadow: 0 4px 10px rgba(0, 123, 255, .5);
}
.loginDiv .el-card__body {
padding: 0;
}
</style> </style>
<template> <template>
<div class="loginDiv"> <div class="loginDiv">
<!-- <div class="loginOpacity"> <div class="loginOpacity" flex="cross:center main:center">
<div class="el-card box-card is-always-shadow">
</div> --> <div class="el-card__body">
<img alt class="logo" src="../assets/img/logo.png"/>
<form class="el-form login-form">
<div class="form-title">管理员登录</div>
<div class="el-form-item is-required el-form-item--small">
<div class="el-form-item__content" style="margin-left: 0px;">
<div class="el-input el-input--small">
<input
type="text"
autocomplete="off"
v-model="msg.UserName"
placeholder="请输入用户名"
class="el-input__inner"
/>
</div>
</div>
</div>
<div class="el-form-item is-required el-form-item--small">
<div class="el-form-item__content" style="margin-left: 0px;">
<div class="el-input el-input--small">
<input
type="password"
autocomplete="off"
placeholder="请输入密码"
v-model="msg.Password"
class="el-input__inner"
/>
</div>
</div>
</div>
<div class="el-form-item is-required el-form-item--small">
<div class="el-form-item__content" style="margin-left: 0px;">
<div class="el-input el-input--small" style="width: 140px;">
<input type="text" autocomplete="off" placeholder="验证码" v-model="msg.validataCode" class="el-input__inner" />
</div>
<img
class="pic-captcha"
src="/web/index.php?r=site%2Fpic-captcha&amp;v=5e9e7ef6a93ac6.36592545"
/>
</div>
</div>
<div class="el-form-item el-form-item--small">
<div class="el-form-item__content" style="margin-left: 0px;">
<label class="el-checkbox">
<span class="el-checkbox__input">
<span class="el-checkbox__inner"></span>
<input type="checkbox" aria-hidden="false" class="el-checkbox__original" value />
</span>
<span class="el-checkbox__label">
记住我，以后自动登录
</span>
</label>
</div>
</div>
<div class="el-form-item el-form-item--small">
<div class="el-form-item__content" style="margin-left: 0px;">
<button
type="button"
@click="login()"
class="el-button login-btn el-button--primary el-button--small is-round"
>
<span>登录</span>
</button>
</div>
</div>
</form>
<img alt class="logo" />
<div class="register_box">
<span class="register">忘记密码?</span>
<span class="register" style="border-left: 1px solid rgb(169, 169, 169);">注册账号</span>
</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'Login', data() {
data () {
return { return {
msg: '' msg:{
UserName:'',
Password:'',
validataCode:''
}
};
},
created() {
},
methods: {
//登录
login(){
} }
},
mounted() {
} }
} };
</script> </script>
\ No newline at end of file
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