更新样式

src/views/login/index.vue

@@ -59,12 +59,10 @@
           <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
         </span>
       </el-form-item>
-      <div class='remberBox'>
-        <!-- <div class="dotWrap" :class="[isSaveUserInfo ? '' : '']">
-          <div :class="isSaveUserInfo?'active':''"></div>
-        </div>
-        记住密码 -->
-        <el-checkbox v-model="isSaveUserInfo">记住密码</el-checkbox>
+      <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':''"
@@ -179,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
@@ -203,7 +204,7 @@ export default {
   margin-bottom: 10px !important;
 }
 .loginBtn.disabled {
-  background-color: #777;
+  background-color: rgba(34, 180, 169, .5);
 }
 ::-webkit-input-placeholder {
   /* WebKit browsers */
@@ -231,26 +232,22 @@ export default {
   flex-direction: row;
   justify-content: flex-start;
   margin-bottom: 30px;
-  margin-top: 10px;
+  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;
     }
   }
 }
@@ -316,21 +313,18 @@ $light_gray: #eee;
   // background-size: cover;
   // overflow: hidden;
   height: 100vh;
-  background-image: url("../../assets/images/base/login-bg.png");
+  // 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;
-  background-repeat: no-repeat;
 
   .login-form {
     position: absolute;
-    left: 130px;
+    left: 180px;
     top: 240px;
-    width: 500px;
-    max-width: 90%;
-    padding: 0px 35px;
-    overflow: hidden;
+    width: 400px;
     border-radius: 20px;
   }
 
@@ -409,7 +403,7 @@ $light_gray: #eee;
 
   .login-project-name {
     position: absolute;
-    top: 95px;
+    top: 80px;
     left: 58%;
     font-size: 26px;
     color: #000;