Browse Source

更新打包

lex-xin 3 years ago
parent
commit
877d42fe01
2 changed files with 99 additions and 53 deletions
  1. 2 2
      src/views/contentManager/contentOperation.vue
  2. 97 51
      src/views/login/index.vue

+ 2 - 2
src/views/contentManager/contentOperation.vue

@@ -524,8 +524,8 @@ export default {
         case 1: case 7:
           corp = {
             enlarge: 2,
-            autoCropWidth: 200,
-            autoCropHeight: 80
+            autoCropWidth: 316,
+            autoCropHeight: 156
           }
           break;
         case 2:

+ 97 - 51
src/views/login/index.vue

@@ -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,17 @@
           <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
         </span>
       </el-form-item>
-      <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="dotWrap" :class="[isSaveUserInfo ? '' : '']">
           <div :class="isSaveUserInfo?'active':''"></div>
-        </div> -->
+        </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>
   </div>
 </template>
@@ -179,13 +192,13 @@ 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;
 }
@@ -209,11 +222,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,8 +229,9 @@ export default {
 .remberBox {
   display: flex;
   flex-direction: row;
-  justify-content: flex-end;
-  margin-bottom: 50px;
+  justify-content: flex-start;
+  margin-bottom: 30px;
+  margin-top: 10px;
   align-items: center;
   cursor: pointer;
   .dotWrap {
@@ -288,9 +297,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 +310,27 @@ $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-size: cover;
+  background-repeat: no-repeat;
 
   .login-form {
-    position: relative;
+    position: absolute;
+    left: 130px;
+    top: 240px;
     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);
     border-radius: 20px;
   }
 
@@ -342,7 +348,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 +358,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 +380,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: 95px;
+    left: 58%;
+    font-size: 26px;
+    color: #000;
+    font-weight: 100;
+    span {
+      font-size: 34px;
+      color: #09074D;
+      font-weight: 600;
+      padding-right: 10px;
+    }
+  }
 }
 </style>