修改样式

src/components/admin-frame/home.vue

@@ -1,15 +1,21 @@
 <template>
   <el-container class="main">
-    <el-header :style="{ padding: 0 }"> <component :is="cHeader"></component></el-header>
+    <el-header :style="{ padding: 0 }">
+      <component :is="cHeader"></component>
+    </el-header>
     <el-container>
-      <el-aside width="200px" :style="{ 'background-color': '#242f42' }"><component :is="cAside"></component></el-aside>
+      <el-aside width="200px" :style="{ 'background-color': '#242f42' }">
+        <el-scrollbar>
+          <component :is="cAside"></component>
+        </el-scrollbar>
+      </el-aside>
       <el-main>
         <div class="content-box" :class="{ 'content-collapse': collapse }">
           <el-col :span="24" class="content">
             <transition name="move" mode="out-in">
               <el-row>
                 <component :is="cBreadcrumb" :breadcrumbTitle="route.meta.title"></component>
-                <el-col :span="24" class="container" :style="{ padding: '10px 0' }"><router-view :style="testInfo"></router-view></el-col>
+                <el-col :span="24" class="container" :style="{ padding: '10px 0 0 0' }"><router-view :style="testInfo"></router-view></el-col>
               </el-row>
             </transition>
             <el-backtop target=".content"></el-backtop>
@@ -46,16 +52,18 @@ const testInfo: Ref<any> = ref({
 .main {
   height: 100vh;
   background-color: #f0f0f0;
+
   .el-header {
     border-bottom: 1px solid;
   }
+
   .el-aside {
     height: 93.3vh;
     overflow-x: auto;
     overflow-y: auto;
   }
+
   .el-main {
     padding: 10px;
   }
-}
-</style>
+}</style>

src/components/admin-frame/parts/Sidebar.vue

@@ -9,10 +9,8 @@
             :default-active="onRoutes"
             unique-opened
             router
-            :background-color="styleInfo.backColor"
-            :text-color="styleInfo.textColor"
-            :active-text-color="styleInfo.activeColor"
-          >
+            :background-color="styleInfo.backColor" :text-color="styleInfo.textColor"
+            :active-text-color="styleInfo.activeColor">
             <template v-for="item in items">
               <template v-if="item.type === '0'">
                 <el-sub-menu :index="item._id" :key="item._id">
@@ -97,12 +95,15 @@ watch(
 .sidebar::-webkit-scrollbar {
   width: 0;
 }
+
 .sidebar-el-menu:not(.el-menu--collapse) {
-  width: 201px;
+  width: 200px;
 }
-.sidebar > ul {
+
+.sidebar>ul {
   height: 100%;
 }
+
 .main {
   .one {
     .iconfont {
@@ -111,4 +112,8 @@ watch(
     }
   }
 }
+
+.el-menu {
+  border-right: 0;
+}
 </style>

src/layout/site.ts

@@ -44,11 +44,93 @@ export const menuInfo = {
       type: '0',
       children: [
         { icon: 'icon-gengduoneirong', _id: 'admin_4_1', path: '/content/news', name: '新闻管理' },
-        { icon: 'icon-gengduoneirong', _id: 'admin_4_2', path: '/content/activity', name: '活动管理' },
-        { icon: 'icon-gengduoneirong', _id: 'admin_4_3', path: '/content/article', name: '游玩攻略管理' },
+        {
+          icon: 'icon-gengduoneirong',
+          _id: 'admin_4_2',
+          path: '/content/activity',
+          name: '活动管理'
+        },
+        {
+          icon: 'icon-gengduoneirong',
+          _id: 'admin_4_3',
+          path: '/content/article',
+          name: '游玩攻略管理'
+        },
         { icon: 'icon-gengduoneirong', _id: 'admin_4_4', path: '/content/notice', name: '公告管理' }
       ]
     },
+    {
+      icon: 'icon-jichuxinxi',
+      _id: 'admin_5',
+      name: '基础信息管理',
+      index: '5',
+      type: '0',
+      children: [
+        { icon: 'icon-jichuxinxi', _id: 'admin_5_1', path: '/basic/guide', name: '导游导览管理' },
+        {
+          icon: 'icon-jichuxinxi',
+          _id: 'admin_5_2',
+          path: '/basic/place',
+          name: '景区景点管理'
+        },
+        {
+          icon: 'icon-jichuxinxi',
+          _id: 'admin_5_3',
+          path: '/basic/hotel',
+          name: '酒店民宿管理'
+        },
+        {
+          icon: 'icon-jichuxinxi',
+          _id: 'admin_5_4',
+          path: '/basic/food',
+          name: '餐饮场所管理'
+        },
+        { icon: 'icon-jichuxinxi', _id: 'admin_5_5', path: '/basic/shop', name: '购物场所管理' },
+        {
+          icon: 'icon-jichuxinxi',
+          _id: 'admin_5_6',
+          path: '/basic/tourism',
+          name: '特色旅游管理'
+        },
+        {
+          icon: 'icon-jichuxinxi',
+          _id: 'admin_5_7',
+          path: '/basic/delicacy',
+          name: '特色美食管理'
+        },
+        { icon: 'icon-jichuxinxi', _id: 'admin_5_8', path: '/basic/souvenir', name: '纪念品管理' },
+        { icon: 'icon-jichuxinxi', _id: 'admin_5_9', path: '/basic/toilet', name: '厕所管理' },
+        { icon: 'icon-jichuxinxi', _id: 'admin_5_10', path: '/basic/parking', name: '停车场管理' },
+        { icon: 'icon-jichuxinxi', _id: 'admin_5_11', path: '/basic/medical', name: '医疗点管理' },
+        {
+          icon: 'icon-jichuxinxi',
+          _id: 'admin_5_12',
+          name: '多媒体管理',
+          type: '2',
+          children: [
+            {
+              _id: 'admin_5_12_1',
+              icon: 'icon-jichuxinxi',
+              name: '音频管理',
+              path: '/basic/media/audio'
+            },
+            {
+              _id: 'admin_5_12_2',
+              icon: 'icon-jichuxinxi',
+              name: '视频管理',
+              path: '/basic/media/video'
+            },
+            {
+              _id: 'admin_5_12_3',
+              icon: 'icon-jichuxinxi',
+              name: '图片管理',
+              path: '/basic/media/url'
+            }
+          ]
+        },
+        { icon: 'icon-jichuxinxi', _id: 'admin_5_13', path: '/basic/comment', name: '评论管理' }
+      ]
+    },
     {
       icon: 'icon-zhanghaoguanli',
       _id: 'admin_8',
@@ -56,8 +138,18 @@ export const menuInfo = {
       index: '8',
       type: '0',
       children: [
-        { icon: 'icon-zhanghaoguanli', _id: 'admin_8_1', path: '/acccount/information', name: '账号信息' },
-        { icon: 'icon-zhanghaoguanli', _id: 'admin_8_2', path: '/acccount/updatepd', name: '修改密码' }
+        {
+          icon: 'icon-zhanghaoguanli',
+          _id: 'admin_8_1',
+          path: '/acccount/information',
+          name: '账号信息'
+        },
+        {
+          icon: 'icon-zhanghaoguanli',
+          _id: 'admin_8_2',
+          path: '/acccount/updatepd',
+          name: '修改密码'
+        }
       ]
     }
   ]