|
|
@@ -1,74 +1,82 @@
|
|
|
<template>
|
|
|
<div class="login-container">
|
|
|
|
|
|
- <div class="login-header">
|
|
|
- <div class="logo">
|
|
|
- <img src="@/assets/images/base/login-logo.png" alt="">
|
|
|
+ <div class="login-left">
|
|
|
+ <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="footer">
|
|
|
+ <!-- @copyright@Daya Webucation co.、Ltd2019 -->
|
|
|
+ Copyright © 2022 管乐迷, Inc.ALL Rights Reserved
|
|
|
</div>
|
|
|
- <i class="line"></i>
|
|
|
- <div class="logo-name">管理后台登录</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="login-project-name">
|
|
|
- <span>欢迎登录</span>管乐迷乐团运管系统
|
|
|
- </div>
|
|
|
+ <div class="login-section">
|
|
|
+ <!-- <div class="left-header">
|
|
|
+ <div class="login-project-name">
|
|
|
+ <span>欢迎登录</span>管乐迷乐团运管系统
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
|
|
|
- <el-form ref="loginForm"
|
|
|
+ <el-form ref="loginForm"
|
|
|
:model="loginForm"
|
|
|
:rules="loginRules"
|
|
|
class="login-form"
|
|
|
auto-complete="on"
|
|
|
label-position="left">
|
|
|
- <div class="title-container">
|
|
|
- 登录
|
|
|
- </div>
|
|
|
+ <div class="title-container">登录</div>
|
|
|
|
|
|
- <el-form-item prop="username"
|
|
|
- class='logitem'>
|
|
|
- <span class="svg-container">
|
|
|
- <svg-icon icon-class="user" />
|
|
|
- </span>
|
|
|
- <el-input ref="username"
|
|
|
- @keyup.enter.native="handleLogin"
|
|
|
- v-model.trim="loginForm.username"
|
|
|
- placeholder="请输入用户名"
|
|
|
- class='login-input'
|
|
|
- name="username"
|
|
|
- type="text"
|
|
|
- tabindex="1"
|
|
|
- auto-complete="off" />
|
|
|
- </el-form-item>
|
|
|
+ <el-form-item prop="username"
|
|
|
+ class='logitem'>
|
|
|
+ <span class="svg-container">
|
|
|
+ <svg-icon icon-class="user" />
|
|
|
+ </span>
|
|
|
+ <el-input ref="username"
|
|
|
+ @keyup.enter.native="handleLogin"
|
|
|
+ v-model.trim="loginForm.username"
|
|
|
+ placeholder="请输入用户名"
|
|
|
+ class='login-input'
|
|
|
+ name="username"
|
|
|
+ type="text"
|
|
|
+ tabindex="1"
|
|
|
+ auto-complete="off" />
|
|
|
+ </el-form-item>
|
|
|
|
|
|
- <el-form-item prop="password"
|
|
|
- class='logitem'>
|
|
|
- <span class="svg-container">
|
|
|
- <svg-icon icon-class="password" />
|
|
|
- </span>
|
|
|
- <el-input :key="passwordType"
|
|
|
- ref="password"
|
|
|
- class='login-input'
|
|
|
- v-model.trim="loginForm.password"
|
|
|
- :type="passwordType"
|
|
|
- placeholder="请输入密码"
|
|
|
- name="password"
|
|
|
- tabindex="2"
|
|
|
- auto-complete="off"
|
|
|
- @keyup.enter.native="handleLogin" />
|
|
|
- <span class="show-pwd"
|
|
|
- @click="showPwd">
|
|
|
- <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>
|
|
|
- </el-form>
|
|
|
+ <el-form-item prop="password"
|
|
|
+ class='logitem'>
|
|
|
+ <span class="svg-container">
|
|
|
+ <svg-icon icon-class="password" />
|
|
|
+ </span>
|
|
|
+ <el-input :key="passwordType"
|
|
|
+ ref="password"
|
|
|
+ class='login-input'
|
|
|
+ v-model.trim="loginForm.password"
|
|
|
+ :type="passwordType"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ name="password"
|
|
|
+ tabindex="2"
|
|
|
+ auto-complete="off"
|
|
|
+ @keyup.enter.native="handleLogin" />
|
|
|
+ <span class="show-pwd"
|
|
|
+ @click="showPwd">
|
|
|
+ <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':''"
|
|
|
+ @click="handleLogin">登录</div>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -195,13 +203,13 @@ body {
|
|
|
.loginBtn {
|
|
|
background-color: #22B4A9;
|
|
|
text-align: center;
|
|
|
- width: 100%;
|
|
|
- height: 60px;
|
|
|
- line-height: 60px;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 85%;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
color: #fff;
|
|
|
border-radius: 5px;
|
|
|
cursor: pointer;
|
|
|
- margin-bottom: 10px !important;
|
|
|
}
|
|
|
.loginBtn.disabled {
|
|
|
background-color: rgba(34, 180, 169, .5);
|
|
|
@@ -294,7 +302,7 @@ $cursor: #000;
|
|
|
}
|
|
|
|
|
|
.el-form-item {
|
|
|
- box-shadow: 0px 0px 16px 1px #F2F5F9;
|
|
|
+ border: 1px solid #E5E6E8;
|
|
|
border-radius: 8px;
|
|
|
color: #454545;
|
|
|
}
|
|
|
@@ -316,16 +324,19 @@ $light_gray: #eee;
|
|
|
// 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;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: url("../../assets/images/base/login-bg.png") no-repeat center left #fff;
|
|
|
background-size: cover;
|
|
|
|
|
|
.login-form {
|
|
|
- position: absolute;
|
|
|
- left: 180px;
|
|
|
- top: 240px;
|
|
|
- width: 400px;
|
|
|
- border-radius: 20px;
|
|
|
+ // position: absolute;
|
|
|
+ // left: 180px;
|
|
|
+ // top: 240px;
|
|
|
+ width: 500px;
|
|
|
+ border-radius: 15px;
|
|
|
+ padding: 50px 60px 70px;
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 0px 0px 16px 1px #ebf6f5;
|
|
|
}
|
|
|
|
|
|
.tips {
|
|
|
@@ -342,7 +353,7 @@ $light_gray: #eee;
|
|
|
|
|
|
.svg-container {
|
|
|
padding: 6px 5px 6px 15px;
|
|
|
- color: #6D7278;
|
|
|
+ color: #999999;
|
|
|
vertical-align: middle;
|
|
|
width: 30px;
|
|
|
display: inline-block;
|
|
|
@@ -354,9 +365,8 @@ $light_gray: #eee;
|
|
|
flex-direction: column;
|
|
|
align-items: flex-start;
|
|
|
font-size: 26px;
|
|
|
- color: #000;
|
|
|
+ color: #333;
|
|
|
font-weight: 600;
|
|
|
- padding-bottom: 30px;
|
|
|
margin-bottom: 30px;
|
|
|
border-bottom: 1px solid #E5E6E8;
|
|
|
&::after {
|
|
|
@@ -366,6 +376,8 @@ $light_gray: #eee;
|
|
|
width: 25px;
|
|
|
height: 4px;
|
|
|
background: #22B4A9;
|
|
|
+ margin-bottom: -2px;
|
|
|
+ margin-left: 13px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -380,16 +392,16 @@ $light_gray: #eee;
|
|
|
}
|
|
|
|
|
|
.login-header {
|
|
|
- position: absolute;
|
|
|
- top: 70px;
|
|
|
- left: 130px;
|
|
|
+ margin-top: 80px;
|
|
|
font-size: 18px;
|
|
|
- color: #6D7278;
|
|
|
+ color: #333333;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin-bottom: 30px;
|
|
|
.logo {
|
|
|
img {
|
|
|
- height: 52px;
|
|
|
+ height: 40px;
|
|
|
}
|
|
|
}
|
|
|
.line {
|
|
|
@@ -397,23 +409,87 @@ $light_gray: #eee;
|
|
|
width: 1px;
|
|
|
height: 20px;
|
|
|
background: #979797;
|
|
|
- margin: 0 30px;
|
|
|
+ margin: 0 20px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .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;
|
|
|
+ .login-left {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 100%;
|
|
|
+ margin-left: 170px;
|
|
|
+ .footer {
|
|
|
+ margin-left: 180px;
|
|
|
+ margin-bottom: 90px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #B2B2B2;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ // .login-project-name {
|
|
|
+ // margin-top: 100px;
|
|
|
+ // font-size: 24px;
|
|
|
+ // color: #333333;
|
|
|
+ // font-weight: 100;
|
|
|
+ // span {
|
|
|
+ // font-size: 34px;
|
|
|
+ // color: #000;
|
|
|
+ // font-weight: 600;
|
|
|
+ // padding-right: 15px;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+}
|
|
|
+.login-section {
|
|
|
+ margin-right: 300px;
|
|
|
+}
|
|
|
+/* 大屏幕（大桌面显示器，大于等于 1200px） */
|
|
|
+@media screen and (max-width: 1600px) {
|
|
|
+ .login-section {
|
|
|
+ margin-right: 200px;
|
|
|
+ }
|
|
|
+ .login-container .login-left {
|
|
|
+ margin-left: 100px;
|
|
|
+ }
|
|
|
+ .login-container .login-left .footer {
|
|
|
+ margin-left: 120px;
|
|
|
+ }
|
|
|
+}
|
|
|
+/* 大屏幕（大桌面显示器，大于等于 1200px） */
|
|
|
+@media screen and (max-width: 1200px) {
|
|
|
+ .login-section {
|
|
|
+ margin-right: 100px;
|
|
|
+ }
|
|
|
+ .login-container .login-left {
|
|
|
+ margin-left: 50px;
|
|
|
+ }
|
|
|
+ .login-container .login-left .footer {
|
|
|
+ margin-left: 100px;
|
|
|
+ }
|
|
|
+}
|
|
|
+/* 中等屏幕（桌面显示器，大于等于 992px） */
|
|
|
+@media screen and (max-width: 992px) {
|
|
|
+ .login-section {
|
|
|
+ margin-right: 100px;
|
|
|
+ }
|
|
|
+ .login-container .login-left {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ .login-container .login-left .footer {
|
|
|
+ margin-left: 50px;
|
|
|
+ }
|
|
|
+}
|
|
|
+/* 小屏幕（平板，大于等于 768px） */
|
|
|
+@media screen and (max-width: 768px) {
|
|
|
+ .login-section {
|
|
|
+ margin-right: 50px;
|
|
|
+ }
|
|
|
+ .login-container .login-left {
|
|
|
+ margin-left: 10px;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .login-container .login-left .footer {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
