管理页面（搭建）

src/pages/index/list/index.vue

@@ -137,6 +137,9 @@ export default {
             dataVisible: false,
             checkList: []
         }
+    },
+    components: {
+        
     },
     watch: {
         

src/pages/manage/index/index.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="wrap">
+        <div class="nav">
+            <h6>商业银行系统</h6>
+            <navbar></navbar>
+        </div>
+        <div class="manage-layout">
+            <div class="manage-content">
+                <router-view class="manage-view"></router-view>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import navbar from '../navbar'
+import { mapState } from 'vuex'
+export default {
+    name: 'index',
+    data() {
+        return {
+            
+        }
+    },
+    components: {
+        navbar,
+    },
+    mounted() {
+        
+    },
+    methods: {
+        
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+    .wrap{
+        display: flex;
+        min-width: 1300px;
+        min-height: 100%;
+        // overflow: hidden;
+        .nav{
+            width: 270px;
+        }
+        .manage-layout{
+            width: calc(100% - 270px);
+            .manage-content{
+                height: calc(100vh - 80px);
+                padding: 24px 24px 0;
+                overflow: auto;
+                .view{
+                    min-height: calc(100% - 60px);
+                }
+            }
+        }
+    }
+</style>

src/pages/manage/list/index.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="wrap">
+        
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+    name: 'index',
+    data() {
+        return {
+            
+        }
+    },
+    mounted() {
+        
+    },
+    methods: {
+        
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+    
+</style>

src/pages/manage/navbar/index.vue

@@ -0,0 +1,144 @@
+<template>
+    <div>
+        <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#141414" text-color="#fff" active-text-color="#fff" unique-opened>
+            <template v-for="item in menus">
+                <template v-if="item.children">
+                    <el-submenu :index="item.index" :key="item.index">
+                        <template slot="title">
+                            <i :class="item.icon"></i>
+                            <span slot="title">{{ item.title }}</span>
+                        </template>
+                        <template v-for="subItem in item.children">
+                            <el-submenu
+                                v-if="subItem.children"
+                                :index="subItem.index"
+                                :key="subItem.index"
+                            >
+                                <template slot="title">{{ subItem.title }}</template>
+                                <el-menu-item
+                                    v-for="(threeItem,i) in subItem.children"
+                                    :key="i"
+                                    :index="threeItem.index"
+                                >{{ threeItem.title }}</el-menu-item>
+                            </el-submenu>
+                            <el-menu-item
+                                v-else
+                                :index="subItem.index"
+                                :key="subItem.index"
+                            >{{ subItem.title }}</el-menu-item>
+                        </template>
+                    </el-submenu>
+                </template>
+                <template v-else>
+                    <el-menu-item :index="item.index" :key="item.index">
+                        <i :class="item.icon"></i>
+                        <span slot="title">{{ item.title }}</span>
+                    </el-menu-item>
+                </template>
+            </template>
+        </el-menu>
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import bus from '@/libs/bus';
+import Setting from '@/setting';
+export default {
+    data() {
+        return {
+            menus: [
+                {
+                    icon: 'menu-icon icon-index',
+                    index: '/index/list',
+                    title: '客户信息',
+                    children: [
+                        {
+                            index: '/index/list1',
+                            title: '个人客户信息建立',
+                        },{
+                            index: '/index/list2',
+                            title: '公司客户信息建立',
+                        },
+                    ]
+                },{
+                    icon: 'menu-icon icon-index',
+                    index: '/index/list3',
+                    title: '个人业务',
+                },
+            ],
+        }
+    },
+    created() {
+        
+    },
+    methods: {
+        
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+    .nav{
+        height: 100%;
+        background-color: #141414;
+        overflow: auto;
+        .logo{
+            padding: 20px 0;
+            text-align: center;
+        }
+        /deep/.el-menu{
+            border-right: 0 !important;
+            .el-menu-item{
+                display: flex;
+                align-items: center;
+                &.is-active{
+                    background-color: #CC221C !important;
+                }
+            //     .menu-icon{
+            //         width: 24px;
+            //         height: 24px;
+            //         margin-right: 12px;
+            //         background: url(../../assets/img/home.png) no-repeat;
+            //         &.icon-ques{
+            //             background-image: url(../../assets/img/ques.png);
+            //         }
+            //         &.icon-testpaper{
+            //             background-image: url(../../assets/img/paper.png);
+            //         }
+            //         &.icon-practise{
+            //             background-image: url(../../assets/img/practise.png);
+            //         }
+            //         &.icon-exam{
+            //             background-image: url(../../assets/img/exam.png);
+            //         }
+            //         &.icon-ache{
+            //             background-image: url(../../assets/img/ache.png);
+            //         }
+            //         &.icon-msg{
+            //             background-image: url(../../assets/img/msg.png);
+            //         }
+            //         &.icon-student{
+            //             background-image: url(../../assets/img/student.png);
+            //         }
+            //         &.icon-system{
+            //             background-image: url(../../assets/img/system.png);
+            //         }
+            //     }
+            //     span{
+            //         font-size: 15px;
+            //     }
+            // }
+        }
+    }
+    
+    .sidebar::-webkit-scrollbar {
+        width: 0;
+    }
+    .sidebar-el-menu:not(.el-menu--collapse) {
+        width: 100%;
+    }
+    .sidebar > ul {
+        height: 100%;
+    }
+</style>