显示图标

kuangshp · kuangshp · commit c719831ba5e6 · 2020-06-01T14:44:00.000+08:00
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
@@ -2,4 +2,9 @@
 *{
   margin: 0;
   padding: 0;
+}
+
+[class*=" el-icon-lx"],
+[class^="el-icon-lx"] {
+  font-family: lx-iconfont !important;
 }
diff --git a/src/components/menus/MenuItem.vue b/src/components/menus/MenuItem.vue
@@ -1,7 +1,7 @@
 <template>
   <el-submenu
     v-if="item.children && item.children.length"
-    :index="item.url"
+    :index="item.index"
   >
     <template slot="title">{{ item.title }}</template>
     <!-- 递归使用该组件 -->
@@ -16,7 +16,8 @@
     v-else
     :index="item.index"
   >
-    <li>{{ item.title }}</li>
+    <i :class="item.icon"></i>
+    <span slot="title">{{ item.title }}</span>
   </el-menu-item>
 </template>
 
diff --git a/src/components/menus/Menus.vue b/src/components/menus/Menus.vue
@@ -3,73 +3,30 @@
     <el-menu
       class="sidebar-el-menu"
       :default-active="onRoutes"
-      :collapse="isCollapse"
-      background-color="#324157"
-      text-color="#bfcbd9"
-      active-text-color="#20a0ff"
+      :collapse="!isCollapse"
+      background-color="#fff"
+      text-color="#333"
+      active-text-color="#3273dc"
       unique-opened
       router
     >
-      <!-- <template v-for="(item, index) in menuList">
+      <template v-for="(item, index) in menuList">
         <MenuItem
           :key="index"
           :item="item"
         />
-      </template> -->
-      <template v-for="item in menuList">
-        <template v-if="item.subs">
-          <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.subs">
-              <el-submenu
-                v-if="subItem.subs"
-                :index="subItem.index"
-                :key="subItem.index"
-              >
-                <template slot="title">{{ subItem.title }}</template>
-                <el-menu-item
-                  v-for="(threeItem,i) in subItem.subs"
-                  :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 MenuItem from './MenuItem.vue';
+import MenuItem from './MenuItem.vue';
 import { mapState } from 'vuex';
 
 export default {
-  props: {},
   data () {
     return {
-      // isCollapse: false,
     }
   },
   computed: {
@@ -81,11 +38,8 @@ export default {
       return this.$route.path.replace('/', '');
     }
   },
-  mounted () {
-    console.log(this.menuList, '==aa=')
-  },
   components: {
-    // MenuItem,
+    MenuItem,
   },
 }
 </script>
@@ -98,6 +52,7 @@ export default {
   top: 70px;
   bottom: 0;
   overflow-y: scroll;
+  box-shadow: 0 0 1.2em rgba(0, 0, 0, 0.12);
 }
 .sidebar::-webkit-scrollbar {
   width: 0;
@@ -106,14 +61,9 @@ export default {
   height: calc(100vh - 50px);
 }
 .sidebar-el-menu:not(.el-menu--collapse) {
-  width: 250px;
+  width: 230px;
 }
 .sidebar > ul {
   height: 100%;
 }
-
-[class*=" el-icon-lx"],
-[class^="el-icon-lx"] {
-  font-family: lx-iconfont !important;
-}
 </style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
@@ -44,7 +44,7 @@ export default {
     transition: all 1s;
   }
   .sidebar {
-    width: 240px;
+    width: 230px;
     height: inherit;
     background: #fff;
     box-shadow: 0 0 1.2em rgba(0, 0, 0, 0.12);
diff --git a/src/layout/header/Index.vue b/src/layout/header/Index.vue
@@ -77,7 +77,7 @@ export default {
 <style lang="scss" scoped>
 .app-header {
   height: 50px;
-  background: #242f42;
+  background: #3273dc;
   display: flex;
   flex-direction: row;
   line-height: 50px;
diff --git a/src/store/modules/view.js b/src/store/modules/view.js
@@ -4,17 +4,17 @@ const state = {
   title: '主页',
   menuList: [
     {
-      icon: 'el-icon-lx-home',
+      icon: 'el-icon-s-home',
       index: 'dashboard',
       title: '系统首页'
     },
     {
-      icon: 'el-icon-lx-cascades',
+      icon: 'el-icon-s-order',
       index: 'table',
       title: '基础表格'
     },
     {
-      icon: 'el-icon-lx-copy',
+      icon: 'el-icon-s-marketing',
       index: 'tabs',
       title: 'tab选项卡'
     },

Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@ export default {`
`44`	`44`	`transition: all 1s;`
`45`	`45`	`}`
`46`	`46`	`.sidebar {`
`47`		`- width: 240px;`
	`47`	`+ width: 230px;`
`48`	`48`	`height: inherit;`
`49`	`49`	`background: #fff;`
`50`	`50`	`box-shadow: 0 0 1.2em rgba(0, 0, 0, 0.12);`