首页样式修复

src/views/login/index.vue

@@ -42,8 +42,8 @@
         </span>
       </el-form-item>
 
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
-      <!-- <div class="footer"><p>copyrigh © 2019星范商城后台V1.0.0</p></div> -->
+      <el-button :loading="loading" type="primary" style="width:100%;margin:20px 0;" @click.native.prevent="handleLogin">登录</el-button>
+      <div class="footer"><p>copyrigh © 2019星范商城后台V1.0.0</p></div>
     </el-form>
   </div>
 </template>
@@ -145,23 +145,27 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 /* 修复input 背景不协调 和光标变色 */
 /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+
 $bg:#283443;
-$light_gray: #fff;
+$light_gray:#fff;
 $cursor: #fff;
+
 @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
   .login-container .el-input input {
     color: $cursor;
   }
 }
+
 /* reset element-ui css */
 .login-container {
   .el-input {
     display: inline-block;
     height: 47px;
     width: 85%;
+
     input {
       background: transparent;
       border: 0px;
@@ -171,29 +175,34 @@ $cursor: #fff;
       color: $light_gray;
       height: 47px;
       caret-color: $cursor;
+
       &:-webkit-autofill {
         box-shadow: 0 0 0px 1000px $bg inset !important;
         -webkit-text-fill-color: $cursor !important;
       }
     }
   }
+
   .el-form-item {
     border: 1px solid rgba(255, 255, 255, 0.1);
     background: rgba(0, 0, 0, 0.1);
     border-radius: 5px;
-    color: #999999;
+    color: #454545;
   }
 }
 </style>
+
 <style lang="scss" scoped>
 $bg:#2d3a4b;
 $dark_gray:#889aa4;
-$light_gray:#ffffff;
+$light_gray:#eee;
+
 .login-container {
   min-height: 100%;
   width: 100%;
   background-color: $bg;
   overflow: hidden;
+
   .login-form {
     position: relative;
     width: 450px;
@@ -204,6 +213,7 @@ $light_gray:#ffffff;
     background: $bg;
     border-radius: 8px;
   }
+
   .tips {
     font-size: 14px;
     color: #fff;
@@ -215,6 +225,7 @@ $light_gray:#ffffff;
       }
     }
   }
+
   .svg-container {
     padding: 6px 5px 6px 15px;
     color: $dark_gray;
@@ -222,6 +233,7 @@ $light_gray:#ffffff;
     width: 30px;
     display: inline-block;
   }
+
   .title-container {
     position: relative;
     .logo{
@@ -263,5 +275,16 @@ $light_gray:#ffffff;
       margin: 0;
     }
   }
+  .thirdparty-button {
+    position: absolute;
+    right: 0;
+    bottom: 6px;
+  }
+
+  @media only screen and (max-width: 470px) {
+    .thirdparty-button {
+      display: none;
+    }
+  }
 }
 </style>