update 登录

src/router.js

@@ -46,20 +46,19 @@ const router = new Router({
                                       },
                                   },
                                   {
-                                      name:      '首页',
-                                      path:      '/Index',
+                                      name:      'Login',
+                                      path:      '/login',
                                       component: () => {
-                                          return import(/* webpackChunkName: "index" */ './views/client/Index.vue');
+                                          return import(/* webpackChunkName: "Login" */ './views/management/Login/index.vue');
                                       },
                                   },
                                   {
-                                      name:      '首页',
-                                      path:      '/Index',
+                                      name:      'admin',
+                                      path:      '/admin',
                                       component: () => {
-                                          return import(/* webpackChunkName: "index" */ './views/client/Index.vue');
+                                          return import(/* webpackChunkName: "Home" */ './views/management/Home/index.vue');
                                       },
                                   },
-
                               ],
                           });
 

src/views/management/Home/index.vue

@@ -0,0 +1,13 @@
+<template>
+    
+</template>
+
+<script>
+    export default {
+        name: 'index.vue',
+    };
+</script>
+
+<style scoped>
+
+</style>

src/views/management/Login/components/Login.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="admin-login__loginForm">
+        <el-form :model="loginForm" status-icon :rules="loginRules" ref="LoginForm" label-width="100px">
+            <el-form-item label="用户名:" prop="username">
+                <el-input type="text" v-model="loginForm.username"></el-input>
+            </el-form-item>
+            <el-form-item label="密码:" prop="password">
+                <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item>
+                <div class="admin-login-btns">
+                    <el-button class="login-btn__login" type="primary" @click="handleLogin('LoginForm')">登录</el-button>
+                </div>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'Login',
+        data() {
+            return {
+                loginForm:  {
+                    username: '',
+                    password: '',
+                },
+                loginRules: {
+                    username: [
+                        { required: true, message: '请输入用户名', trigger: 'blur' },
+                    ],
+                    password: [
+                        { required: true, message: '请输入密码', trigger: 'blur' },
+                    ],
+                },
+            }
+        },
+        methods: {
+            handleLogin(formName) {
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        console.log('submit')
+                        this.doLogin()
+                    } else {
+                        console.log('err')
+                        return false
+                    }
+                })
+            },
+            doLogin() {
+                const opt = this.getOption();
+                console.log('Options: ', opt)
+            },
+            getOption() {
+                const opt = {
+                    username: '',
+                    password: ''
+                }
+
+                return opt;
+            }
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+$text_color: #ccc;
+.admin-login {
+    &__loginForm {
+        ::v-deep .el-form-item__label {
+            color: $text_color;
+        }
+    }
+
+    &-btns {
+        .login-btn {
+            &__login {
+                width: 100%;
+            }
+        }
+    }
+}
+</style>

src/views/management/Login/index.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="admin-Login">
+        <Login />
+    </div>
+</template>
+
+<script>
+    import Login from "./components/Login.vue"
+    export default {
+        name: 'index.vue',
+        components: {
+            Login
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+.admin-Login {
+    flex: 1;
+    display: flex;
+    min-height: 100vh;
+    width: 100vw;
+    background: #1f2533;
+    justify-content: center;
+    align-items: center;
+}
+</style>