login ui

src/views/Login/index.vue

 <template>
-    <div class="loginContainer">
-        <div id="loginForamWrapper">
-            <h2>欢迎使用新一代国际结算系统</h2>
-            <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" >
-                        <el-input prefix-icon="el-icon-user" :placeholder="$t('login.namePlaceholder')" v-model="loginForm.username"></el-input>
-                    </el-form-item>
+  <div class="loginContainer">
+    <div id="loginForamWrapper">
+      <div class="company-desc">
+        <div>
+          <img src="../../assets/logo.png" style="height: 60px;" alt="" />
+        </div>
+        <h2>国际结算系统</h2>
+      </div>
+      <div id="loginForm">
+        <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-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 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-form>
-            </div>
-        </div>
+          <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 {
-    data() {
-      return {
-        loginForm: {
-          password: '1',
-          username: 'ZL',
-        },
-        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.$router.push("/home");
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
+export default {
+  data() {
+    return {
+      loginForm: {
+        password: "1",
+        username: "ZL",
       },
-      resetForm(formName) {
-        this.$refs[formName].resetFields();
+      rules: {
+        username: [{ type: "string", required: true, message: "请填写用户名" }],
+        password: [{ type: "string", required: true, message: "请填写密码" }],
       },
-      setLoginInfo
-    }
-  }
+    };
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.setLoginInfo({
+            userId: this.loginForm.username,
+            token: Utils.generateUUID(),
+          });
+          this.$router.push("/home");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    setLoginInfo,
+  },
+};
 </script>
-<style>
-    .loginContainer{
-        flex: 1;
-        background-image: url("../../assets/login_bg.png");
-        background-size: cover;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-    #loginForamWrapper{
-        width: 340px;
-        /* height:280px; */
-        
-    }
-    #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: 宋体;
-       
-    }
+
+<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;
+  margin-bottom: 15%;
+}
+.company-desc h2 {
+
+}
+#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>