登录

src/views/login/index.vue

@@ -2,7 +2,7 @@
     <div class="page_login">
         <div class="top_title">
             <div class="top_logo">
-                <img src="" alt="">
+                <img src="/src/assets/img/loginIcon.png" alt="">
             </div>
             <div class="gap_line"></div>
             <div class="top_title_text">
@@ -28,7 +28,7 @@
                             </el-input>
                         </el-form-item>
                     </el-form>
-                    <el-button type="primary" size="small" style="display: block;width: 100%;">
+                    <el-button type="primary"  class="loginBtn" >
                         立即登陆
                     </el-button>
 
@@ -55,19 +55,45 @@ $loginColor: "#002F7B";
     width: 792px;
     height: 545px;
     background-color: #fff;
+    padding: 0 113px;
+    box-sizing: border-box;
+    box-shadow: -1px 4px 17px 2px rgba(216,218,224,0.5);
+border-radius: 12px;
 }
 
 .page_login {
     width: 100vw;
     height: 100vh;
     background-color: #fff;
-    background-image: url('../../assets/img/loginbg.png');
+    background-image: url('../../assets/img/loginBg1.png');
     background-repeat: no-repeat;
     display: flex;
     justify-content: center;
     align-items: center;
+    flex-direction: column;
+    position: relative;
+    background-size: cover;
 
 }
+.top_title{
+    position: absolute;
+    left:54px;
+    top:32px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    .top_logo{
+        width: 201px;
+height: 128px;
+    }
+    .top_title_text{
+        color: #01357A;
+        font-size: 34px;
+        font-weight: bold;
+        border-left: 1px solid #01357A;
+        padding-left: 20px;
+    }
+}
 
 :deep(.el-input-group__prepend) {
     background-color: #fff;
@@ -81,6 +107,7 @@ $loginColor: "#002F7B";
 
     .el-input__inner {
         height: 85px;
+        font-size: 28px;
     }
 }
 
@@ -96,9 +123,12 @@ $loginColor: "#002F7B";
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 100%;
+        width: 556px;
         .el-tabs__item {
             width: 50%;
+            font-size: 32px;
+            font-weight: bold;
+            color: #002F7B !important;
         }
         .is-active {
         color: #002F7B !important;
@@ -108,12 +138,32 @@ $loginColor: "#002F7B";
         
 
     .el-tabs__active-bar {
-        background-color: rgba(255,255,255,0) !important;
+        background-color:#fff !important;
+        position: absolute;
         &::after{
-            content:"",
-            
+
+            content:"";
+            display: inline-block;
+            width: 47px;
+            height: 6px;
+            border-radius: 3px;
+            background-color:#002F7B;
+            position: absolute;
+            left: 50%;
+            top:-44px;
+            transform: translateX(-50%);
         }
 
     }
+    .el-tabs__content{
+        margin-top: -18px;
+        z-index: 99;
+    }
+}
+
+.loginBtn{
+    display: block;width: 100%;height: 73px;background-color: #002F7B;
+    font-size: 28px;
+    border-radius: 4px;
 }
 </style>