Browse Source

登录样式修改

yuhan 2 months ago
parent
commit
9d5aee4de6
2 changed files with 28 additions and 10 deletions
  1. 16 6
      src/components/layouts/UserLayout.vue
  2. 12 4
      src/views/user/Login.vue

+ 16 - 6
src/components/layouts/UserLayout.vue

@@ -71,8 +71,16 @@
 <style lang="less">
 
 .iot-login{
+  background-color: #F2EFEB;
+  padding: 8vh 7% 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  // overflow: hidden;
   .login-header{
-    height: 90px !important;
+    height: 10vh;
+    min-height: 40px !important;
+    // height: 90px !important;
     // .top-line{
     //   width: 100%;
     //   height: @iotHLineHeight;
@@ -114,14 +122,16 @@
   }
   .login-content{
     width: 100%;
-    height: calc(100vh - 90px - 122px);
+    // height: calc(100vh - 75px - 90px - 147px);
+    flex: 1;
     // background: url('../../assets/login.png');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center 100%;
     position: relative;
     .login-box{
-      width: 440px;
+      // width: 440px;
+      width: 25%;
       // min-height: 580px;
       // background-color: #fff;
       // padding: 40px;
@@ -135,9 +145,9 @@
   }
   .login-footer{
     // height: 120px;
-    padding: 25px 100px;
-    background-color: #FBFAF9;
-    // background-color: #F2EFEB;
+    // padding: 50px 100px 25px;
+    padding: 5.5vh 100px 25px;
+    background-color: #F2EFEB;
     flex-direction: column;
     .login-footer-text{
       color: #a1a1a1;

+ 12 - 4
src/views/user/Login.vue

@@ -213,25 +213,33 @@ export default {
   .sign-text{
     width: 100%;
     // height: 32px;
-    font-size: 30px;
+    // font-size: 28px;
+    font-size: 1.5vw;
     font-weight: 700;
     color: #fff;
     // color: #646464;
     margin-bottom: 20px;
+    // margin-bottom: 2vh;
     text-align: center;
   }
   .login-button-container{
-    width: 220px !important;
+    width: 53% !important;
+    // width: 220px !important;
+    min-width: 100px !important;
     // height: 80px !important;
-    margin: 50px auto;
+    // margin: 50px auto 0;
+    margin: 7vh auto 0;
     .login-button {
       width: 100%;
-      height: 60px;
+      // height: 60px;
+      height: 6.5vh;
+      min-height: 40px;
       padding: 0 15px;
       font-size: 16px;
       background: #094483;
       font-weight: 700;
       border-color: transparent;
+      box-shadow: 0 2px 4px 1px rgba(12,83,144,.46) !important;
     }
   }