页面结构

src/main/zhi-rong-web/src/components/MenuPage.vue

@@ -0,0 +1,71 @@
+<template>
+    <el-container direction="horizontal">
+        <el-aside width="200px">
+            <slot name="menuList"></slot>
+        </el-aside>
+        <el-container direction="vertical" class="main">
+            <el-main style="padding: 0">
+                <slot></slot>
+            </el-main>
+        </el-container>
+    </el-container>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+.main {
+    margin-left: 20px;
+    .el-main {
+        padding: 0;
+        .flex-col();
+    }
+}
+
+.menu-content {
+    min-height: 800px;
+    background-color: #fff;
+}
+
+/deep/ .el-menu > .el-menu-item {
+    padding-left: 50px !important;
+    height: 66px !important;
+    line-height: 66px !important;
+    &.is-active {
+        background-color: @prim;
+        color: #fff;
+    }
+}
+
+/deep/ .el-menu {
+    .el-submenu {
+        .el-submenu__title {
+            padding-left: 50px !important;
+            height: 66px !important;
+            line-height: 66px !important;
+        }
+
+        &.is-active {
+            .el-submenu__title {
+                color: @prim;
+            }
+        }
+
+        .el-menu--inline {
+            background-color: #e4e4e4;
+
+            .el-menu-item {
+                height: 56px !important;
+                line-height: 56px !important;
+                padding: 0 60px !important;
+                &.is-active {
+                    background-color: @prim;
+                    color: #fff;
+                }
+            }
+        }
+    }
+}
+</style>

src/main/zhi-rong-web/src/router/index.js

@@ -58,6 +58,14 @@ const routes = [
                     title: '新闻动态'
                 }
             },
+            {
+                path: '/newsList',
+                name: 'newsList',
+                component: () => import('../views/news/List.vue'),
+                meta: {
+                    title: '新闻动态'
+                }
+            },
             {
                 path: '/newsDetail',
                 name: 'newsDetail',
@@ -65,6 +73,20 @@ const routes = [
                 meta: {
                     title: '新闻详情'
                 }
+            },
+            {
+                path: '/',
+                component: () => import('../views/user/UserMain.vue'),
+                children: [
+                    {
+                        path: '/userInfo',
+                        name: 'userInfo',
+                        component: () => import('../views/user/UserInfo.vue'),
+                        meta: {
+                            title: '编辑资料'
+                        }
+                    }
+                ]
             }
         ]
     }

src/main/zhi-rong-web/src/views/Home.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="home">
-        <div class="center-content">
+        <banner></banner>
+        <div class="center-content" style="padding-top: 80px">
             <div class="news">
                 <div class="carousel news-item" @mouseover="autoplay = false" @mouseout="autoplay = true">
                     <el-carousel
@@ -117,12 +118,13 @@
 </template>
 
 <script>
+import Banner from '../components/Banner.vue';
 import DividerTitle from '../components/DividerTitle.vue';
 import HotProduct from '../components/home/HotProduct.vue';
 import Resources from '../components/home/Resources.vue';
 import ServiceBox from '../components/home/ServiceBox.vue';
 export default {
-    components: { DividerTitle, HotProduct, ServiceBox, Resources },
+    components: { DividerTitle, HotProduct, ServiceBox, Resources, Banner },
     name: 'Home',
     data() {
         return {
@@ -145,7 +147,7 @@ export default {
 <style lang="less" scoped>
 .home {
     background-color: #fff;
-    padding: 80px 0;
+    padding: 0 0 80px;
 }
 
 .news {

src/main/zhi-rong-web/src/views/Index.vue

@@ -5,7 +5,6 @@
         <el-container direction="vertical">
             <el-main class="main">
                 <nav-menu></nav-menu>
-                <banner></banner>
                 <keep-alive :include="keeps">
                     <router-view class="appContainer" />
                 </keep-alive>
@@ -48,7 +47,7 @@ export default {
 
 .appContainer {
     background-color: @bg;
-    padding: 60px 0;
+    padding: 0 0 60px;
     flex-grow: 1;
 }
 

src/main/zhi-rong-web/src/views/MenuMain.vue

@@ -1,43 +1,51 @@
 <template>
     <div class="container">
-        <el-container direction="horizontal" class="center-content">
-            <el-aside width="200px">
-                <el-menu default-active="1-1" class="menu-content">
-                    <el-submenu index="1">
-                        <template slot="title">
-                            <span>政策</span>
-                        </template>
-                        <el-menu-item index="1-1">部委</el-menu-item>
-                        <el-menu-item index="1-2">省级</el-menu-item>
-                        <el-menu-item index="1-3">市级</el-menu-item>
-                    </el-submenu>
-                    <el-submenu index="2">
-                        <template slot="title">
-                            <span>政策</span>
-                        </template>
-                        <el-menu-item index="2-1">部委</el-menu-item>
-                        <el-menu-item index="2-2">省级</el-menu-item>
-                        <el-menu-item index="2-3">市级</el-menu-item>
-                    </el-submenu>
-                    <el-submenu index="3">
-                        <template slot="title">
-                            <span>政策</span>
-                        </template>
-                        <el-menu-item index="3-1">部委</el-menu-item>
-                        <el-menu-item index="3-2">省级</el-menu-item>
-                        <el-menu-item index="3-3">市级</el-menu-item>
-                    </el-submenu>
-                </el-menu>
-            </el-aside>
-            <el-container direction="vertical" class="main">
-                <router-view class="el-main" />
-            </el-container>
-        </el-container>
+        <banner></banner>
+        <div class="center-content" style="padding-top: 60px">
+            <menu-page>
+                <div class="menu-content" slot="menuList">
+                    <el-menu default-active="1-1" class="menu-content">
+                        <el-submenu index="1">
+                            <template slot="title">
+                                <span>政策</span>
+                            </template>
+                            <el-menu-item index="1-1">部委</el-menu-item>
+                            <el-menu-item index="1-2">省级</el-menu-item>
+                            <el-menu-item index="1-3">市级</el-menu-item>
+                        </el-submenu>
+                        <el-submenu index="2">
+                            <template slot="title">
+                                <span>政策</span>
+                            </template>
+                            <el-menu-item index="2-1">部委</el-menu-item>
+                            <el-menu-item index="2-2">省级</el-menu-item>
+                            <el-menu-item index="2-3">市级</el-menu-item>
+                        </el-submenu>
+                        <el-submenu index="3">
+                            <template slot="title">
+                                <span>政策</span>
+                            </template>
+                            <el-menu-item index="3-1">部委</el-menu-item>
+                            <el-menu-item index="3-2">省级</el-menu-item>
+                            <el-menu-item index="3-3">市级</el-menu-item>
+                        </el-submenu>
+                    </el-menu>
+                </div>
+
+                <div class="main">
+                    <router-view />
+                </div>
+            </menu-page>
+        </div>
     </div>
 </template>
 
 <script>
-export default {};
+import Banner from '../components/Banner.vue';
+import MenuPage from '../components/MenuPage.vue';
+export default {
+    components: { MenuPage, Banner }
+};
 </script>
 
 <style lang="less" scoped>
@@ -46,45 +54,13 @@ export default {};
 }
 
 .main {
-    margin-left: 20px;
     min-height: 1080px;
-    .el-main {
-        padding: 0;
-    }
+    flex-grow: 1;
+    .flex-col();
 }
 
 .menu-content {
     min-height: 800px;
     background-color: #fff;
 }
-
-/deep/ .el-menu {
-    .el-submenu {
-        .el-submenu__title {
-            padding-left: 50px !important;
-            height: 66px !important;
-            line-height: 66px !important;
-        }
-
-        &.is-active {
-            .el-submenu__title {
-                color: @prim;
-            }
-        }
-
-        .el-menu--inline {
-            background-color: #e4e4e4;
-
-            .el-menu-item {
-                height: 56px !important;
-                line-height: 56px !important;
-                padding: 0 60px !important;
-                &.is-active {
-                    background-color: @prim;
-                    color: #fff;
-                }
-            }
-        }
-    }
-}
 </style>

src/main/zhi-rong-web/src/views/news/Index.vue

@@ -1,9 +1,29 @@
 <template>
-    <div></div>
+    <bread-page>
+        <el-container direction="horizontal">
+            <el-aside width="200px">
+                <el-menu>
+                    <el-menu-item index="1">处理中心</el-menu-item>
+                    <el-menu-item index="1">处理中心</el-menu-item>
+                    <el-menu-item index="1">处理中心</el-menu-item>
+                </el-menu>
+            </el-aside>
+            <el-container class="main" direction="vertical">
+                <el-main> </el-main>
+            </el-container>
+        </el-container>
+    </bread-page>
 </template>
 
 <script>
-export default {};
+import BreadPage from '../../components/BreadPage.vue';
+export default {
+    components: { BreadPage }
+};
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.main {
+    margin-left: 20px;
+}
+</style>

src/main/zhi-rong-web/src/views/news/List.vue

@@ -0,0 +1,38 @@
+<template>
+    <bread-page>
+        <menu-page>
+            <div class="menu-left" slot="menuList">
+                <el-menu default-active="1">
+                    <el-menu-item index="1">处理中心</el-menu-item>
+                    <el-menu-item index="2">新闻资讯</el-menu-item>
+                    <el-menu-item index="3">通知公告</el-menu-item>
+                </el-menu>
+            </div>
+
+            <div class="main">
+                <sort-list> </sort-list>
+            </div>
+        </menu-page>
+    </bread-page>
+</template>
+
+<script>
+import BreadPage from '../../components/BreadPage.vue';
+import MenuPage from '../../components/MenuPage.vue';
+import SortList from '../../components/SortList.vue';
+export default {
+    components: { BreadPage, MenuPage, SortList }
+};
+</script>
+
+<style lang="less" scoped>
+.menu-left {
+    min-height: 600px;
+    background-color: #fff;
+}
+.main {
+    min-height: 900px;
+    flex-grow: 1;
+    .flex-col();
+}
+</style>

src/main/zhi-rong-web/src/views/user/UserInfo.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="main"></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+.main {
+    background-color: #fff;
+}
+</style>

src/main/zhi-rong-web/src/views/user/UserMain.vue

@@ -0,0 +1,45 @@
+<template>
+    <bread-page>
+        <menu-page>
+            <div class="menu-left" slot="menuList">
+                <el-menu default-active="1-3">
+                    <el-submenu index="1">
+                        <template slot="title">
+                            <span>个人中心</span>
+                        </template>
+                        <el-menu-item index="1-1">消息中心</el-menu-item>
+                        <el-menu-item index="1-2">我发布的</el-menu-item>
+                        <el-menu-item index="1-3">编辑资料</el-menu-item>
+                        <el-menu-item index="1-4">账号安全</el-menu-item>
+                    </el-submenu>
+                </el-menu>
+            </div>
+
+            <div class="main">
+                <router-view />
+            </div>
+        </menu-page>
+    </bread-page>
+</template>
+
+<script>
+import BreadPage from '../../components/BreadPage.vue';
+import MenuPage from '../../components/MenuPage.vue';
+export default {
+    components: { BreadPage, MenuPage }
+};
+</script>
+
+<style lang="less" scoped>
+.menu-left {
+    min-height: 600px;
+    background-color: #fff;
+}
+
+.main {
+    .flex-col();
+    background-color: #fff;
+    flex-grow: 1;
+    min-height: 1100px;
+}
+</style>