|
@@ -1,5 +1,18 @@
|
|
|
<template>
|
|
|
<div class="login-container">
|
|
|
+
|
|
|
+ <div class="login-header">
|
|
|
+ <div class="logo">
|
|
|
+ <img src="@/assets/images/base/login-logo.png" alt="">
|
|
|
+ </div>
|
|
|
+ <i class="line"></i>
|
|
|
+ <div class="logo-name">管理后台登录</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="login-project-name">
|
|
|
+ <span>欢迎登录</span>管乐迷乐团运营系统
|
|
|
+ </div>
|
|
|
+
|
|
|
<el-form ref="loginForm"
|
|
|
:model="loginForm"
|
|
|
:rules="loginRules"
|
|
@@ -7,8 +20,7 @@
|
|
|
auto-complete="on"
|
|
|
label-position="left">
|
|
|
<div class="title-container">
|
|
|
- <img src="@/assets/images/base/login-logo.png"
|
|
|
- alt="">
|
|
|
+ 登录
|
|
|
</div>
|
|
|
|
|
|
<el-form-item prop="username"
|
|
@@ -47,16 +59,15 @@
|
|
|
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
|
|
</span>
|
|
|
</el-form-item>
|
|
|
+ <div class='remberBox' @click="isSaveUserInfo = !isSaveUserInfo">
|
|
|
+ <div class="dotWrap" :class="[isSaveUserInfo ? 'checked' : '']"></div>
|
|
|
+ 记住密码
|
|
|
+ <!-- <el-checkbox v-model="isSaveUserInfo">记住密码</el-checkbox> -->
|
|
|
+ </div>
|
|
|
<div class="loginBtn"
|
|
|
:class="!loginForm.username || !loginForm.password?'disabled':''"
|
|
|
style="width:100%;margin-bottom:30px;"
|
|
|
@click="handleLogin">登录</div>
|
|
|
- <div class='remberBox'>
|
|
|
- <!-- <div class="dotWrap">
|
|
|
- <div :class="isSaveUserInfo?'active':''"></div>
|
|
|
- </div> -->
|
|
|
- <el-checkbox v-model="isSaveUserInfo">记住密码</el-checkbox>
|
|
|
- </div>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -166,6 +177,9 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" rel="stylesheet/scss" scoped>
|
|
|
+body {
|
|
|
+ background: #fff !important;
|
|
|
+}
|
|
|
/deep/.el-input__inner{
|
|
|
background-color:transparent!important;
|
|
|
border:1px solid transparent!important
|
|
@@ -179,18 +193,18 @@ export default {
|
|
|
/* 修复input 背景不协调 和光标变色 */
|
|
|
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
|
|
|
.loginBtn {
|
|
|
- background-color: #00A79D;
|
|
|
+ background-color: #22B4A9;
|
|
|
text-align: center;
|
|
|
width: 100%;
|
|
|
- height: 51px;
|
|
|
- line-height: 51px;
|
|
|
+ height: 60px;
|
|
|
+ line-height: 60px;
|
|
|
color: #fff;
|
|
|
- border-radius: 25px;
|
|
|
+ border-radius: 5px;
|
|
|
cursor: pointer;
|
|
|
margin-bottom: 10px !important;
|
|
|
}
|
|
|
.loginBtn.disabled {
|
|
|
- background-color: #777;
|
|
|
+ background-color: rgba(34, 180, 169, .5);
|
|
|
}
|
|
|
::-webkit-input-placeholder {
|
|
|
/* WebKit browsers */
|
|
@@ -209,11 +223,6 @@ export default {
|
|
|
color: #444;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
-.logitem {
|
|
|
- border-radius: 25px !important;
|
|
|
- border: 1px solid #444 !important;
|
|
|
- background-color: transparent !important;
|
|
|
-}
|
|
|
.login-container .el-input input {
|
|
|
color: #444 !important;
|
|
|
caret-color: #444 !important;
|
|
@@ -221,27 +230,24 @@ export default {
|
|
|
.remberBox {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
- justify-content: flex-end;
|
|
|
- margin-bottom: 50px;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ padding-top: 10px;
|
|
|
align-items: center;
|
|
|
cursor: pointer;
|
|
|
+ color: #6D7278;
|
|
|
+ font-size: 16px;
|
|
|
.dotWrap {
|
|
|
- width: 18px;
|
|
|
- height: 18px;
|
|
|
- border: 1px solid #444;
|
|
|
- border-radius: 50%;
|
|
|
+ width: 21px;
|
|
|
+ height: 21px;
|
|
|
+ background: url('../../assets/images/icon_checkbox_default.png') no-repeat center;
|
|
|
+ background-size: contain;
|
|
|
margin-right: 8px;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
- .active {
|
|
|
- width: 10px;
|
|
|
- height: 10px;
|
|
|
- background-color: #444;
|
|
|
- border-radius: 50%;
|
|
|
- overflow: hidden;
|
|
|
- position: absolute;
|
|
|
- top: 3px;
|
|
|
- left: 3px;
|
|
|
+ &.checked {
|
|
|
+ background: url('../../assets/images/icon_checkbox.png') no-repeat center;
|
|
|
+ background-size: contain;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -288,9 +294,8 @@ $cursor: #000;
|
|
|
}
|
|
|
|
|
|
.el-form-item {
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
- background: rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 5px;
|
|
|
+ box-shadow: 0px 0px 16px 1px #F2F5F9;
|
|
|
+ border-radius: 8px;
|
|
|
color: #454545;
|
|
|
}
|
|
|
}
|
|
@@ -302,29 +307,24 @@ $dark_gray: #000;
|
|
|
$light_gray: #eee;
|
|
|
|
|
|
.login-container {
|
|
|
- min-height: 100%;
|
|
|
- width: 100%;
|
|
|
- background: url("../../assets/images/base/login-bg-1.png") no-repeat 100% 100%;
|
|
|
- background-size: cover;
|
|
|
- overflow: hidden;
|
|
|
- // height: 100vh;
|
|
|
- // background-image: url("../../assets/images/base/login-bg.png");
|
|
|
- // display: flex;
|
|
|
- // align-items: center;
|
|
|
- // justify-content: center;
|
|
|
+ // min-height: 100%;
|
|
|
+ // width: 100%;
|
|
|
+ // background: url("../../assets/images/base/login-bg-1.png") no-repeat 100% 100%;
|
|
|
// background-size: cover;
|
|
|
- // background-repeat: no-repeat;
|
|
|
+ // overflow: hidden;
|
|
|
+ height: 100vh;
|
|
|
+ // background-image: url("../../assets/images/base/login-bg.png");
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: url("../../assets/images/base/login-bg.png") no-repeat center right #fff;
|
|
|
+ background-size: cover;
|
|
|
|
|
|
.login-form {
|
|
|
- position: relative;
|
|
|
- width: 500px;
|
|
|
- max-width: 90%;
|
|
|
- padding: 0px 35px;
|
|
|
- margin: 12% auto 0;
|
|
|
- overflow: hidden;
|
|
|
- background-color: rgba(255, 255, 255, 0.85);
|
|
|
- // opacity: 0.85;
|
|
|
- box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.66);
|
|
|
+ position: absolute;
|
|
|
+ left: 180px;
|
|
|
+ top: 240px;
|
|
|
+ width: 400px;
|
|
|
border-radius: 20px;
|
|
|
}
|
|
|
|
|
@@ -342,7 +342,7 @@ $light_gray: #eee;
|
|
|
|
|
|
.svg-container {
|
|
|
padding: 6px 5px 6px 15px;
|
|
|
- color: $dark_gray;
|
|
|
+ color: #6D7278;
|
|
|
vertical-align: middle;
|
|
|
width: 30px;
|
|
|
display: inline-block;
|
|
@@ -352,17 +352,20 @@ $light_gray: #eee;
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- padding: 20% 0;
|
|
|
- img {
|
|
|
- width: 48%;
|
|
|
- }
|
|
|
- .title {
|
|
|
- font-size: 26px;
|
|
|
- color: $light_gray;
|
|
|
- margin: 0px auto 40px auto;
|
|
|
- text-align: center;
|
|
|
- font-weight: bold;
|
|
|
+ align-items: flex-start;
|
|
|
+ font-size: 26px;
|
|
|
+ color: #000;
|
|
|
+ font-weight: 600;
|
|
|
+ padding-bottom: 30px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ border-bottom: 1px solid #E5E6E8;
|
|
|
+ &::after {
|
|
|
+ margin-top: 12px;
|
|
|
+ display: inline-block;
|
|
|
+ content: ' ';
|
|
|
+ width: 25px;
|
|
|
+ height: 4px;
|
|
|
+ background: #22B4A9;
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -371,9 +374,46 @@ $light_gray: #eee;
|
|
|
right: 10px;
|
|
|
top: 7px;
|
|
|
font-size: 14px;
|
|
|
- color: $dark_gray;
|
|
|
+ color: #6D7278;
|
|
|
cursor: pointer;
|
|
|
user-select: none;
|
|
|
}
|
|
|
+
|
|
|
+ .login-header {
|
|
|
+ position: absolute;
|
|
|
+ top: 70px;
|
|
|
+ left: 130px;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #6D7278;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .logo {
|
|
|
+ img {
|
|
|
+ height: 52px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ display: inline-block;
|
|
|
+ width: 1px;
|
|
|
+ height: 20px;
|
|
|
+ background: #979797;
|
|
|
+ margin: 0 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-project-name {
|
|
|
+ position: absolute;
|
|
|
+ top: 80px;
|
|
|
+ left: 58%;
|
|
|
+ font-size: 26px;
|
|
|
+ color: #000;
|
|
|
+ font-weight: 100;
|
|
|
+ span {
|
|
|
+ font-size: 34px;
|
|
|
+ color: #09074D;
|
|
|
+ font-weight: 600;
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|