login ui

src/views/Login/index.vue

 <template>
   <div class="loginContainer">
     <div id="loginForamWrapper">
-            <h2>欢迎使用新一代国际结算系统</h2>
+      <div class="company-desc">
+        <div>
+          <img src="../../assets/logo.png" style="height: 60px;" alt="" />
+        </div>
+        <h2>国际结算系统</h2>
+      </div>
       <div id="loginForm">
-                <p style="text-align:left;font-size:1.2em;color:#888">用户登录 / LOGIN IN</p>
-                <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm"  size="small" >
-                    <el-form-item  prop="username" >
+        <h2>International Settlement System</h2>
+        <el-form
+          :model="loginForm"
+          status-icon
+          :rules="rules"
+          ref="loginForm"
+          size="small"
+          :hide-required-asterisk="true"
+        >
+          <el-form-item prop="username" label="用户名">
             <el-input prefix-icon="el-icon-user" :placeholder="$t('login.namePlaceholder')" v-model="loginForm.username"></el-input>
           </el-form-item>
 
-                    <el-form-item  prop="password" >
+          <el-form-item prop="password" label="密码">
             <el-input prefix-icon="el-icon-lock" :placeholder="$t('login.pwdPlaceholder')" type="password" v-model="loginForm.password" autocomplete="off"></el-input>
           </el-form-item>
 
-                    <el-form-item>
-                        <el-button style="width:100%;margin-top:1em;margin:0 0" type="primary" @click="submitForm('loginForm')">{{$t('login.loginBtn')}}</el-button>
-                    </el-form-item>
+          <el-button style="width: 100%;height: 40px; margin: 20px 0 0" type="primary" @click="submitForm('loginForm')" >
+            {{ $t("login.loginBtn") }}
+          </el-button>
         </el-form>
       </div>
+
+      <div class="copy-right">
+        <p>新晨科技 版权所有</p>
+        <p>COPYRIGHT BRILLIANCE</p>
+        <p style="margin-bottom: 15%;">2022</p>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import Utils from "~/utils";
-import { createNamespacedHelpers } from 'vuex'
+import { createNamespacedHelpers } from "vuex";
 
-const { mapState, mapMutations, mapActions } = createNamespacedHelpers('UserContext')
-const { setLoginInfo } = mapMutations(["setLoginInfo"])
+const { mapState, mapMutations, mapActions } =
+  createNamespacedHelpers("UserContext");
+const { setLoginInfo } = mapMutations(["setLoginInfo"]);
 
-  export default {
+export default {
   data() {
     return {
       loginForm: {
-          password: '1',
-          username: 'ZL',
+        password: "1",
+        username: "ZL",
+      },
+      rules: {
+        username: [{ type: "string", required: true, message: "请填写用户名" }],
+        password: [{ type: "string", required: true, message: "请填写密码" }],
       },
-        rules:{
-            username:[
-                {type: "string", required: true, message: "请填写用户名"}
-            ],
-            password:[
-                {type: "string", required: true, message: "请填写密码"}
-            ]
-        }
     };
   },
   methods: {
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-            this.setLoginInfo({userId:this.loginForm.username, token: Utils.generateUUID()})
+          this.setLoginInfo({
+            userId: this.loginForm.username,
+            token: Utils.generateUUID(),
+          });
           this.$router.push("/home");
         } else {
-            console.log('error submit!!');
+          console.log("error submit!!");
           return false;
         }
       });
@@ -61,34 +79,71 @@ const { setLoginInfo } = mapMutations(["setLoginInfo"])
     resetForm(formName) {
       this.$refs[formName].resetFields();
     },
-      setLoginInfo
-    }
-  }
+    setLoginInfo,
+  },
+};
 </script>
-<style>
-    .loginContainer{
+
+<style scoped>
+.loginContainer {
   flex: 1;
   background-image: url("../../assets/login_bg.png");
   background-size: cover;
+}
+#loginForamWrapper {
+  width: 20%;
+  margin-left: 15%;
+  height: 100%;
+  background-color: white;
+}
+#loginForamWrapper h2 {
+  font-size: 20px;
+  text-align: center;
+  font-family: 宋体;
+}
+.company-desc {
+  height: 32%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+.company-desc div{
   display: flex;
   justify-content: center;
   align-items: center;
-    }
-    #loginForamWrapper{
-        width: 340px;
-        /* height:280px; */
+  margin-bottom: 15%;
+}
+.company-desc h2 {
 
-    }
-    #loginForm{
-        background-color: white;
-        padding:1em 2em;
-        border: 1px solid #d9d9d9;
-        box-shadow: 5px 5px 5px 0px #d9d9d9;
-        border-radius: 3px;
-    }
-    #loginForamWrapper h2{
-       color:#d9d9d9;
-       font-family: 宋体;
+}
+#loginForm {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 34%;
+  border-top: solid 1px blue;
+}
+#loginForm h2 {
+  color: #707070;
+}
+#loginForm >>> .el-form-item__label {
+  font-size: 14px;
+  color: #707070;
+}
+#loginForm >>> .el-input--small .el-input__inner {
+  height: 40px;
+}
+.copy-right {
+  height: 32%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  text-align: center;
+  font-size: 14px;
+  color: #858585;
+}
 
-    }
+.copy-right p{
+  margin: 3px 0;
+}
 </style>