feat: develop login page

ittpc/src/App.vue

@@ -1,6 +1,5 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
     <router-view/>
   </div>
 </template>
@@ -12,12 +11,18 @@ export default {
 </script>
 
 <style>
+html, body {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+  width: 100%;
+  height: 100%;
 }
 </style>

ittpc/src/main.js

@@ -5,7 +5,7 @@ import App from './App'
 import router from './router'
 
 import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
+import './elementui/index.css'
 
 Vue.use(ElementUI);
 

ittpc/src/views/login/login.vue

@@ -14,13 +14,16 @@
         </div>
         <div class="app-title">ITT运营后台</div>
         <div class="elform">
-          <el-form label-position="right" label-width="80px" :model="loginForm" :rules='rules'>
-            <el-form-item label="账号">
+          <el-form label-position="right" label-width="80px" :model="loginForm" :rules='rules' ref="loginForm">
+            <el-form-item label="账号" prop="account">
               <el-input v-model="loginForm.account" placeholder="请输入登录账号"></el-input>
             </el-form-item>
-            <el-form-item label="密码">
+            <el-form-item label="密码" prop="password">
               <el-input v-model="loginForm.password" type="password" placeholder="请输入登录密码"></el-input>
             </el-form-item>
+            <el-form-item label="">
+              <el-button style="width: 100%;" :loading="loginLoading" type="primary" round @click="submitForm('loginForm')">登录</el-button>
+            </el-form-item>
           </el-form>
         </div>
       </div>
@@ -33,12 +36,13 @@ export default {
   name: 'Login',
   data() {
     return {
+      loginLoading: false,
       rules: {
         password: [
-          { required: true, message: '请输入登录密码', trigger: 'blur' }
+          { required: true, message: '请输入登录密码', trigger: 'change' }
         ],
         account: [
-          { required: true, message: '请输入登录账号', trigger: 'blur' }
+          { required: true, message: '请输入登录账号', trigger: 'change' }
         ]
       },
       loginForm: {
@@ -48,7 +52,18 @@ export default {
     };
   },
   mounted() {},
-  methods: {}
+  methods: {
+    submitForm (formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!');
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    }
+  }
 };
 </script>