|  | @@ -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>
 |