update 行业资讯

src/router.js

@@ -42,9 +42,28 @@ const router = new Router({
                                   {
                                       name:      'admin',
                                       path:      '/admin',
+                                      meta: {
+                                          icon: "el-icon-platform-eleme",
+                                          title: "页面管理"
+                                      },
+                                      isAdminMenu: true,
                                       component: () => {
                                           return import(/* webpackChunkName: "Home" */ './views/management/Home/index.vue');
                                       },
+                                      children:  [
+                                          {
+                                              path: '/hangyezixun',
+                                              name: 'hangyezixun',
+                                              meta: {
+                                                  icon: "",
+                                                  title: "行业资讯"
+                                              },
+                                              isAdminMenu: true,
+                                              component: () => {
+                                                  return import(/* webpackChunkName: "Home" */ './views/management/HangYeZiXun/index.vue');
+                                              },
+                                          },
+                                      ],
                                   },
                               ],
                           });

src/views/management/HangYeZiXun/index.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        行业资讯
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'index',
+    };
+</script>
+
+<style scoped>
+
+</style>

src/views/management/Home/components/Asider.vue

@@ -0,0 +1,115 @@
+<template>
+    <div class="admin-home__asider">
+        <div class="top"></div>
+        <el-scrollbar  class="my-menu_wrap">
+            <el-menu
+                    :default-active="defaultActive"
+                    active-text-color="#409EFF"
+                    :router="true"
+                    class="my-menu"
+                    :collapse="isCollapse"
+            >
+                <my-submenu
+                        v-for="item in menuData"
+                        :data="item"
+                        :key="item.path"
+                ></my-submenu>
+            </el-menu>
+        </el-scrollbar>
+
+        <div class="bottom"></div>
+    </div>
+</template>
+
+<script>
+    import mySubmenu from './menu-submenu';
+    export default {
+        name:       'Asider',
+        props:      {
+            isCollapse: {
+                type:    Boolean,
+                default: false,
+            },
+        },
+        components: {
+            mySubmenu,
+        },
+        data() {
+            return {
+                menuData:      [],
+                defaultActive: '',
+            };
+        },
+        methods:    {
+            initMenu() {
+                const {
+                    options: { routes },
+                } = this.$router;
+
+                const arr = this.menusToRoutes(routes);
+                this.menuData = arr;
+                this.defaultActive = this.$route.path;
+            },
+            menusToRoutes(routes) {
+                const arr = [];
+                routes.forEach(item => {
+                    if (item.children && item.children.length) {
+                        item.children = this.menusToRoutes(item.children);
+                        arr.push(item);
+                    } else if (item.isAdminMenu) {
+                        arr.push(item);
+                    }
+                });
+                return arr;
+            },
+        },
+        created() {
+            this.initMenu();
+        },
+    };
+</script>
+
+<style lang="scss" scoped>
+    $menu_background_color: #D3DCE6;
+    .admin-home {
+        &__asider {
+            .top {
+                height: 60px;
+            }
+
+            .bottom {
+                height: 60px;
+            }
+
+            .my-menu_wrap {
+                height: calc(100vh - 120px);
+                ::v-deep .el-scrollbar__wrap {
+                    overflow-x: hidden;
+                }
+            }
+
+            .my-menu:not(.el-menu--collapse) {
+                width: 200px;
+                min-height: 400px;
+                background: $menu_background_color;
+            }
+
+            .my-menu.el-menu--collapse ::v-deep div
+            > .el-submenu
+            > .el-submenu__title
+            span {
+                height: 0;
+                width: 0;
+                overflow: hidden;
+                visibility: hidden;
+                display: inline-block;
+            }
+            .my-menu.el-menu--collapse ::v-deep div
+            > .el-submenu
+            > .el-submenu__title
+            .el-submenu__icon-arrow {
+                display: none;
+            }
+        }
+    }
+</style>

src/views/management/Home/components/Footer.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        Copyright © 2020 llisoft.com All rights reserved 大连栋科软件工程有限公司 版权所有 辽ICP备09022904号-19
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'Footer',
+    };
+</script>
+
+<style scoped>
+
+</style>

src/views/management/Home/components/Header.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="admin-home__header">
+        <div class="admin-home__btns-icon" @click="btnClick">
+            <i v-if="asideStatus" class="el-icon-s-fold"></i>
+            <i v-else class="el-icon-s-unfold"></i>
+        </div>
+        <div>
+
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'Header',
+        props: {
+            asideStatus: {
+                type: Boolean,
+                default: true
+            }
+        },
+        methods: {
+            btnClick() {
+                this.$emit('asider-status')
+            }
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+.admin-home {
+    &__header {
+        display: flex;
+        justify-content: flex-start;
+    }
+
+    &__btns-icon {
+        font-size: 28px;
+        > i {
+          cursor: pointer;
+        }
+    }
+}
+</style>

src/views/management/Home/components/menu-submenu.vue

@@ -0,0 +1,39 @@
+<template>
+    <div>
+        <el-submenu
+                v-if="data.children && data.children.length"
+                :index="data.path"
+        >
+            <template slot="title" v-if="data.meta && data.meta.title">
+                <i :class="data.meta.icon" v-if="data.meta && data.meta.icon"></i>
+                <span slot="title">{{ data.meta.title }}</span>
+            </template>
+            <menu-submenu
+                    :data="item"
+                    v-for="item in data.children"
+                    :key="item.id"
+            ></menu-submenu>
+        </el-submenu>
+        <el-menu-item v-else :index="data.path" :route="data">
+            <i :class="data.meta.icon" v-if="data.meta && data.meta.icon"></i>
+            <span slot="title" v-if="data.meta && data.meta.title">{{
+        data.meta.title
+      }}</span>
+        </el-menu-item>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "menu-submenu",
+        props: {
+            data: {
+                type: Object,
+                default: () => {}
+            }
+        },
+        components: {}
+    };
+</script>
+
+<style></style>

src/views/management/Home/index.vue

@@ -1,13 +1,80 @@
 <template>
-    
+    <el-container class="admin-home">
+        <el-aside width="auto">
+            <Asider :isCollapse="asideStatus"></Asider>
+        </el-aside>
+        <el-container>
+            <el-header>
+                <Header
+                        :asideStatus="asideStatus"
+                        @asider-status="asiderStatusChange"
+                ></Header>
+            </el-header>
+            <el-main>
+                <el-scrollbar style="height: 100%">
+                    <router-view></router-view>
+                </el-scrollbar>
+            </el-main>
+            <el-footer>
+                <Footer></Footer>
+            </el-footer>
+        </el-container>
+    </el-container>
 </template>
 
 <script>
+    import Asider from './components/Asider';
+    import Footer from './components/Footer';
+    import Header from './components/Header';
+
     export default {
-        name: 'index.vue',
+        name:       'Home',
+        components: {
+            Footer,
+            Asider,
+            Header,
+        },
+        data() {
+            return {
+                asideStatus: false,
+            };
+        },
+        methods:    {
+            asiderStatusChange() {
+                this.asideStatus = !this.asideStatus;
+            },
+        },
     };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+    .admin-home {
+        flex: 1;
+        height: 100vh;
+
+        .el-header, .el-footer {
+            background-color: #B3C0D1;
+            color: #333;
+            text-align: center;
+            line-height: 60px;
+            height: 60px;
+            overflow: hidden;
+        }
+
+        .el-aside {
+            background-color: #D3DCE6;
+            color: #333;
+            text-align: center;
+
+        }
 
+        .el-main {
+            background-color: #E9EEF3;
+            color: #333;
+            padding: 30px 0 30px 30px;
+            ::v-deep .el-scrollbar__wrap {
+                overflow-x: hidden;
+            }
+        }
+    }
 </style>

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

@@ -18,7 +18,7 @@
 
 <script>
     export default {
-        name: 'Login',
+        name:    'Login',
         data() {
             return {
                 loginForm:  {
@@ -33,51 +33,56 @@
                         { required: true, message: '请输入密码', trigger: 'blur' },
                     ],
                 },
-            }
+            };
         },
         methods: {
             handleLogin(formName) {
                 this.$refs[formName].validate((valid) => {
                     if (valid) {
-                        console.log('submit')
-                        this.doLogin()
+                        console.log('submit');
+                        this.doLogin();
                     } else {
-                        console.log('err')
-                        return false
+                        console.log('err');
+                        return false;
                     }
-                })
+                });
             },
             doLogin() {
                 const opt = this.getOption();
-                console.log('Options: ', opt)
+                this.goHomePage();
             },
             getOption() {
                 const opt = {
-                    username: '',
-                    password: ''
-                }
-
+                    username: this.loginForm.username,
+                    password: this.loginForm.password,
+                };
                 return opt;
-            }
-        }
+            },
+            saveCaceh() {
+
+            },
+            goHomePage() {
+                this.$router.push({ name: 'hangyezixun' });
+            },
+        },
     };
 </script>
 
 <style lang="scss" scoped>
-$text_color: #ccc;
-.admin-login {
-    &__loginForm {
-        ::v-deep .el-form-item__label {
-            color: $text_color;
+    $text_color: #CCC;
+    .admin-login {
+        &__loginForm {
+            ::v-deep .el-form-item__label {
+                color: $text_color;
+            }
         }
-    }
 
-    &-btns {
-        .login-btn {
-            &__login {
-                width: 100%;
+        &-btns {
+            .login-btn {
+                &__login {
+                    width: 100%;
+                }
             }
         }
     }
-}
 </style>