侧边栏初步设置

 

 1 <template>
 2   <!--  菜单栏  -->
 3   <!--  default-openeds参数为默认展开：default-openeds="['1', '2']"  -->
 4   <el-menu :default-openeds="['']"
 5            style="min-height: 100%; overflow-x: hidden; white-space: nowrap;"
 6            background-color="#545c64"
 7            text-color="#fff"
 8            active-text-color="#ffd04b"
 9            :collapse-transition="false"
10            :collapse="isCollapse"
11            default-active="/home"
12            router
13   >
14     <!--           background-color="rgb(48, 65, 86)"-->
15 
16     <!--  标题部分  -->
17     <div style="height: 60px; line-height: 60px; text-align: center">
18       <!--  左上角Logo和标题  -->
19       <img src="../resources/MyBatis-Plus.jpg" alt="" style="width: 20px; position: relative; top: 5px; margin-right: 5px">
20       <b style="color: white" v-show="logoTextShow">进销存管理系统</b>
21     </div>
22 
23     <!--  首页  -->
24     <el-menu-item index="/home">
25       <i class="el-icon-s-home"></i>
26       <span slot="title">首页</span>
27     </el-menu-item>
28 
29     <!--    用户管理   -->
30     <el-menu-item index="/user">
31       <i class="el-icon-user-solid"></i>
32       用户管理
33     </el-menu-item>
34 
35     <!--  第二大模块（示例）  -->
36     <el-menu-item index="/customer">
37       <i class="el-icon-s-custom"></i>
38       客户管理
39     </el-menu-item>
40 
41     <el-submenu index="2">
42       <template slot="title">
43         <i class="el-icon-s-finance"></i>
44         <span slot="title">销售管理</span>
45       </template>
46       <el-menu-item index="/order"><i class="el-icon-s-marketing"></i>订单管理</el-menu-item>
47     </el-submenu>
48 
49     <el-menu-item index="/supplier">
50       <i class="el-icon-s-shop"></i>
51       供应商管理
52     </el-menu-item>
53 
54     <el-menu-item index="/commodity">
55       <i class="el-icon-s-goods"></i>
56       商品管理
57     </el-menu-item>
58 
59     <el-submenu index="3">
60       <template slot="title">
61         <i class="el-icon-office-building"></i>
62         <span slot="title">仓库管理</span>
63       </template>
64         <el-menu-item index="/inventory"><i class="el-icon-s-release"></i>库存管理</el-menu-item>
65         <el-menu-item index="/inventory"><i class="el-icon-sell"></i>入库管理</el-menu-item>
66         <el-menu-item index="/inventory"><i class="el-icon-sold-out"></i>出库管理</el-menu-item>
67     </el-submenu>
68 
69     <el-submenu index="4">
70       <template slot="title">
71         <i class="el-icon-coin"></i>
72         <span slot="title">财务管理</span>
73       </template>
74       <el-menu-item index="/operating_state"><i class="el-icon-pie-chart"></i>图表分析</el-menu-item>
75     </el-submenu>
76 
77   </el-menu>
78 
79 </template>
80 
81 <script>
82 
83 export default {
84   name: "Aside",
85   props: {
86     isCollapse: Boolean,
87     logoTextShow: Boolean
88   },
89   methods: {
90     handleSelect(index) {
91     },
92   }
93 }
94 </script>
95 
96 <style scoped>
97 
98 </style>

 

posted @ 2023-09-20 20:25  旺旺大菠萝  阅读(71)  评论(0)    收藏  举报