Prechádzať zdrojové kódy

完成登录页的样式

yellowtaotao 4 rokov pred
rodič
commit
0aba72b170
1 zmenil súbory, kde vykonal 33 pridanie a 9 odobranie
  1. 33 9
      src/views/login/index.vue

+ 33 - 9
src/views/login/index.vue

@@ -8,7 +8,7 @@
       <div class="login-description-none"></div>
       <div class="login-description-txt">后端管理平台</div>
     </div>
-    <a-form :form="loginForm" @submit="handleLoginFun" style="width: 300px;">
+    <a-form :form="loginForm" @submit="handleLoginFun" style="width: 350px;">
       <a-form-item>
         <a-input
           placeholder="账户"
@@ -46,12 +46,17 @@
         </a-input-password>
       </a-form-item>
       <a-form-item>
-        <a-button type="primary" html-type="submit" style="width: 100%;"
+        <a-button
+          type="primary"
+          html-type="submit"
+          style="width: 100%;margin-top: 40px;"
           >登录</a-button
         >
       </a-form-item>
     </a-form>
-    <div></div>
+    <div class="login-enterprise">
+      <span>copyright © 浮游科技有限公司出品</span>
+    </div>
   </div>
 </template>
 
@@ -112,7 +117,14 @@ export default {
 };
 </script>
 
-<style lang="less"></style>
+<style lang="less">
+.login-box {
+  .ant-input,
+  .ant-btn {
+    height: 40px;
+  }
+}
+</style>
 
 <style lang="less" scoped>
 @import '~@/styles/common/variable.less';
@@ -125,27 +137,29 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
-  // justify-content: space-between;
+  position: relative;
   .login-title-row {
+    margin-top: 10%;
+    padding-right: 50px;
     display: flex;
     align-items: center;
-    margin-top: 10%;
     .login-title-logo {
       width: 45px;
       height: 45px;
     }
     .login-title-txt {
-      margin-left: 45px;
+      margin-left: 30px;
       font-size: 33px;
       font-weight: bold;
       color: @mainColorBlack;
     }
   }
   .login-description-row {
-    color: rgba(0, 0, 0, 0.45);
-    display: flex;
     margin-top: 10px;
     margin-bottom: 5%;
+    padding-right: 50px;
+    display: flex;
+    color: rgba(0, 0, 0, 0.45);
     .login-description-none {
       width: 45px;
     }
@@ -156,5 +170,15 @@ export default {
       text-align: center;
     }
   }
+  .login-enterprise {
+    position: absolute;
+    bottom: 5%;
+    span {
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.45);
+      white-space: nowrap;
+      flex-wrap: nowrap;
+    }
+  }
 }
 </style>