更新

src/router/index.js

@@ -17,19 +17,19 @@ export default new Router({
       children: [
         {
           path: '/homeIndex',
-          component: () => import('../components/page/homeIndex.vue'),
+          component: () => import('../views/homeIndex.vue'),
           meta: { title: '系统首页' },
         },
         {
           path: '/test',
-          component: () => import('../components/page/test/index.vue'),
+          component: () => import('../views/test/index.vue'),
           meta: { title: '测试页面' },
         },
       ],
     },
     {
       path: '/login',
-      component: () => import('../components/page/Login.vue'),
+      component: () => import('../views/Login.vue'),
       meta: { title: '登录' },
     },
     {

src/components/page/Login.vue

@@ -66,7 +66,7 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
-  background-image: url(../../assets/img/login-bg.jpg);
+  background-image: url(../assets/img/login-bg.jpg);
   background-size: 100%;
 }
 .ms-title {

src/views/Login.vue

@@ -0,0 +1,126 @@
+<template>
+  <div id="login">
+    <el-row>
+      <el-col :span="24">
+        <el-row>
+          <el-col :span="24" class="main">
+            <div class="w_1200">
+              <el-col :span="24" class="login">
+                <div class="ms-title">后台管理系统</div>
+                <el-form :model="form" :rules="rules" ref="login" label-width="0px" class="ms-content">
+                  <el-form-item prop="username">
+                    <el-input v-model="form.tel" placeholder="请输入手机号">
+                      <el-button slot="prepend" icon="el-icon-user"></el-button>
+                    </el-input>
+                  </el-form-item>
+                  <el-form-item prop="password">
+                    <el-input type="password" placeholder="请输入密码" v-model="form.pwd">
+                      <el-button slot="prepend" icon="el-icon-lock"></el-button>
+                    </el-input>
+                  </el-form-item>
+                  <div class="login-btn">
+                    <el-button type="primary" @click="submitForm()">登录</el-button>
+                  </div>
+                </el-form>
+              </el-col>
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: login } = createNamespacedHelpers('login');
+export default {
+  metaInfo: { title: '登录' },
+  name: 'login',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      form: {},
+      rules: {
+        tel: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+        pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+      },
+    };
+  },
+  created() {},
+  methods: {
+    ...login(['login']),
+    submitForm() {
+      this.$refs.login.validate(async valid => {
+        if (valid) {
+          // let res = await this.login({ user: this.form });
+          // if (this.$checkRes(res)) {
+          localStorage.setItem('user', JSON.stringify(this.form));
+          this.$message.success('登录成功');
+          this.$router.push('/homeIndex');
+          // }
+        } else {
+          this.$message.error('请输入账号和密码');
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+  },
+  computed: {},
+};
+</script>
+
+<style lang="less" scoped>
+.w_1200 {
+  width: 1200px;
+  margin: 0 auto;
+}
+.main {
+  background-image: url(../assets/img/login-bg.jpg);
+  height: 100vh;
+  background-repeat: no-repeat;
+  background-size: cover;
+  .login {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 350px;
+    margin: -190px 0 0 -175px;
+    border-radius: 5px;
+    background: hsla(0, 0%, 100%, 0.3);
+    overflow: hidden;
+    .ms-title {
+      width: 100%;
+      line-height: 50px;
+      text-align: center;
+      font-size: 20px;
+      color: #fff;
+      border-bottom: 1px solid #ddd;
+    }
+    .ms-content {
+      padding: 30px 30px;
+    }
+    .login-btn {
+      text-align: center;
+    }
+    .login-btn button {
+      width: 100%;
+      height: 36px;
+      margin-bottom: 10px;
+    }
+    .login-tips {
+      font-size: 12px;
+      line-height: 30px;
+      color: #fff;
+    }
+    /deep/.js .el-form-item__content {
+      padding: 0 25px;
+      .el-radio {
+        color: #fff;
+      }
+    }
+  }
+}
+</style>

src/components/page/homeIndex.vue

@@ -18,7 +18,7 @@
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
 
-import bus from '../common/bus';
+import bus from '@/components/common/bus';
 export default {
   metaInfo: { title: '系统首页' },
   name: 'Dashboard',