还原login

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="请输入登录名" v-model="loginForm.username"></el-input>
+                    </el-form-item>
+
+                    <el-form-item  prop="password" >
+                        <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" type="password" v-model="loginForm.password" autocomplete="off"></el-input>
+                    </el-form-item>
+
+                    <el-form-item>
+                        <el-button style="width:100%;margin-top:1em;" type="primary" @click="submitForm('loginForm')">登录</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex'
+
+const { mapState, mapMutations, mapActions } = createNamespacedHelpers('UserContext')
+const { setLoginInfo } = mapMutations(["setLoginInfo"])
+
+  export default {
+    data() {
+      return {
+        loginForm: {
+          password: '',
+          username: ''
+        },
+        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})
+            this.$router.push("/business/office");
+          } 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>