init

src/views/login/login.vue

@@ -0,0 +1,83 @@
+<style lang="less" scoped>
+@import './login.less';
+</style>
+
+<template>
+  <div class="login">
+    <div class="title-box">
+      <h1>{{title}}</h1>
+    </div>
+
+    <div class="login-con">
+      <Card icon="log-in" title="欢迎登录" style="width:350px;height:300px;" :bordered="false">
+        <div class="form-con">
+          <login-form @on-success-valid="handleSubmit"></login-form>
+        </div>
+      </Card>
+    </div>
+
+    <div class="bottom-box">
+      <span>Copyright ©2019 </span>|
+
+      <span>推荐浏览器（360极速浏览器、谷歌浏览器、Edge for win10） </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import config from '@/config'
+import LoginForm from '@component/login-form'
+import { mapActions } from 'vuex'
+
+export default {
+  data() {
+    return {
+      title: config.title,
+    }
+  },
+  components: {
+    LoginForm,
+  },
+  methods: {
+    ...mapActions(['handleLogin']),
+    async handleSubmit({ userName, password }) {
+      let user = { name: userName, password: password }
+      await this.handleLogin(user)
+      window.location.reload()
+    },
+  },
+}
+</script>
+
+<style  scoped>
+.title-box {
+  position: absolute;
+
+  top: 0px;
+  left: 15px;
+  width: 440px;
+  text-align: center;
+  height: 55px;
+  line-height: 55px;
+  display: inline-block;
+}
+
+.title-box h1 {
+  font-size: 28px;
+  font-weight: bold;
+  color: #fff;
+  font-family: '黑体';
+}
+
+.bottom-box {
+  position: absolute;
+  bottom: 20px;
+  color: #fff;
+  text-align: center;
+  width: 100%;
+}
+
+.bottom-box span {
+  margin: 0 10px;
+}
+</style>