Merge branch 'master' of http://192.168.31.244:3000/byx/oilSystem

fuintAdmin/src/assets/styles/sidebar.scss

@@ -1,9 +1,11 @@
+
 #app {
 
   .main-container {
     min-height: 100%;
     transition: margin-left .28s;
-    margin-left: $base-sidebar-width;
+    //margin-left: $base-sidebar-width;
+    margin-left: var(--sidebar-width);
     position: relative;
   }
 
@@ -82,6 +84,8 @@
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
+      //height: if($isCollapse,60px,48px) !important;
+      height: var(--sidebar-height);
       &:hover {
         background-color: rgba(0, 0, 0, 0.06) !important;
       }
@@ -90,8 +94,9 @@
     & .theme-dark .is-active > .el-submenu__title {
       color: white !important;
       background: linear-gradient( 229deg, #FF8646 0%, #FFA360 100%) !important;
-      border-top-left-radius: 8px !important; /* 左上圆角 */
-      border-top-right-radius: 8px !important; /* 右上圆角 */
+      //border-top-left-radius: 8px !important; /* 左上圆角 */
+      //border-top-right-radius: 8px !important; /* 右上圆角 */
+      border-radius: 8px;
       i {
         color: #fff !important;
       }
@@ -115,7 +120,7 @@
       }
     }
 
-    .el-menu-item.is-active {
+    .el-menu-item .is-active {
       color: #FF9655 !important;
       //菜单点击上的背景颜色
       background: linear-gradient( 229deg, #FFEFE5 0%, #FFEFE5 100%) !important;
@@ -212,11 +217,18 @@
     }
   }
 
+  .el-menu-item.is-active {
+    color: white !important;
+    //菜单点击上的背景颜色
+    background: linear-gradient( 229deg, #FF9655 0%, #FF9655 100%) !important;
+  }
   .nest-menu .el-submenu>.el-submenu__title,
   .el-menu-item {
+    background-color: #FFFAF6 !important;
     &:hover {
       // you can use $subMenuHover
-      background-color: rgba(0, 0, 0, 0.06) !important;
+      color: #FFA46B !important;
+      background-color: #FFEBDD !important;
     }
   }
 

fuintAdmin/src/assets/styles/variables.scss

@@ -7,6 +7,7 @@ $green: #30B08F;
 $tiffany: #4AB7BD;
 $yellow:#FEC171;
 $panGreen: #30B08F;
+$isCollapse: true;
 
 // 默认菜单主题风格
 $base-menu-color:#727171;// 菜单全部字体颜色
@@ -35,5 +36,6 @@ $base-sidebar-width: 200px;
   subMenuHover: $base-sub-menu-hover;
   sideBarWidth: $base-sidebar-width;
   logoTitleColor: $base-logo-title-color;
-  logoLightTitleColor: $base-logo-light-title-color
+  logoLightTitleColor: $base-logo-light-title-color;
+  isCollapse: $isCollapse;
 }

fuintAdmin/src/components/Hamburger/index.vue

@@ -1,14 +1,21 @@
 <template>
   <div style="padding: 0 15px;" @click="toggleClick">
-    <svg
-      :class="{'is-active':isActive}"
-      class="hamburger"
-      viewBox="0 0 1024 1024"
-      xmlns="http://www.w3.org/2000/svg"
-      width="64"
-      height="64"
-    >
-      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+<!--    <svg-->
+<!--      :class="{'is-active':isActive}"-->
+<!--      class="hamburger"-->
+<!--      viewBox="0 0 1024 1024"-->
+<!--      xmlns="http://www.w3.org/2000/svg"-->
+<!--      width="64"-->
+<!--      height="64"-->
+<!--    >-->
+<!--      <path-->
+<!--        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"/>-->
+<!--    </svg>-->
+    <svg t="1720083378159" :class="{'is-active':isActive}" class="hamburger" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+         p-id="4378" width="64" height="64">
+      <path
+        d="M408 442h480a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8H408a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8z m-8 204a8 8 0 0 0 8 8h480a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8H408a8 8 0 0 0-8 8v56z m504-486H120a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8h784a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8z m0 632H120a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8h784a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8zM142.4 642.1L298.7 519a8.8 8.8 0 0 0 0-13.9L142.4 381.9a8.9 8.9 0 0 0-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
+        p-id="4379" fill="#FF8747"></path>
     </svg>
   </div>
 </template>
@@ -34,6 +41,7 @@ export default {
 .hamburger {
   display: inline-block;
   vertical-align: middle;
+  color: #00aaff;
   width: 20px;
   height: 20px;
 }

fuintAdmin/src/components/TopNav/index.vue

@@ -6,9 +6,12 @@
     @select="handleSelect"
   >
     <template v-for="(item, index) in topMenus">
-      <el-menu-item :menu-trigger="trigger" :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
-        ><svg-icon :icon-class="item.meta.icon" />
-        {{ item.meta.title }}</el-menu-item
+      <el-menu-item :menu-trigger="trigger" :style="{'--theme': theme}" :index="item.path" :key="index"
+                    v-if="index < visibleNumber"
+      >
+        <svg-icon :icon-class="item.meta.icon"/>
+        {{ item.meta.title }}
+      </el-menu-item
       >
     </template>
     <!-- 顶部菜单超出数量折叠 -->
@@ -19,8 +22,10 @@
           :index="item.path"
           :key="index"
           v-if="index >= visibleNumber"
-          ><svg-icon :icon-class="item.meta.icon" />
-          {{ item.meta.title }}</el-menu-item
+        >
+          <svg-icon :icon-class="item.meta.icon"/>
+          {{ item.meta.title }}
+        </el-menu-item
         >
       </template>
     </el-submenu>
@@ -28,7 +33,7 @@
 </template>
 
 <script>
-import { constantRoutes } from "@/router";
+import {constantRoutes} from "@/router";
 
 // 隐藏侧边栏路由
 const hideList = ['/index', '/index'];
@@ -36,7 +41,7 @@ const hideList = ['/index', '/index'];
 export default {
   data() {
     return {
-      trigger:'click',
+      trigger: 'click',
       // 顶部栏初始数
       visibleNumber: 5,
       // 当前激活菜单的 index
@@ -54,9 +59,9 @@ export default {
         if (menu.hidden !== true) {
           // 兼容顶部栏一级菜单内部跳转
           if (menu.path === "/") {
-              topMenus.push(menu.children[0]);
+            topMenus.push(menu.children[0]);
           } else {
-              topMenus.push(menu);
+            topMenus.push(menu);
           }
         }
       });
@@ -72,10 +77,10 @@ export default {
       this.routers.map((router) => {
         for (var item in router.children) {
           if (router.children[item].parentPath === undefined) {
-            if(router.path === "/") {
+            if (router.path === "/") {
               router.children[item].path = "/" + router.children[item].path;
             } else {
-              if(!this.ishttp(router.children[item].path)) {
+              if (!this.ishttp(router.children[item].path)) {
                 router.children[item].path = router.path + "/" + router.children[item].path;
               }
             }
@@ -94,7 +99,7 @@ export default {
         const tmpPath = path.substring(1, path.length);
         activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
         this.$store.dispatch('app/toggleSideBarHide', false);
-      } else if(!this.$route.children) {
+      } else if (!this.$route.children) {
         activePath = path;
         this.$store.dispatch('app/toggleSideBarHide', true);
       }
@@ -126,7 +131,7 @@ export default {
         window.open(key, "_blank");
       } else if (!route || !route.children) {
         // 没有子路由路径内部打开
-        this.$router.push({ path: key });
+        this.$router.push({path: key});
         this.$store.dispatch('app/toggleSideBarHide', true);
       } else {
         // 显示左侧联动菜单
@@ -144,7 +149,7 @@ export default {
           }
         });
       }
-      if(routes.length > 0) {
+      if (routes.length > 0) {
         this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
       }
     },

fuintAdmin/src/layout/components/Navbar.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="navbar">
-<!--    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />-->
+    <div class="title-logo">
+
+    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
 <!--    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>-->
 
     <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
-    <div class="title-logo">
 
       <div>
         {{storeName || "百业兴智慧油站"}}欢迎您
@@ -89,7 +90,6 @@
 <!--        </el-dropdown-menu>-->
 <!--      </el-dropdown>-->
 <!--    </div>-->
-
   </div>
 </template>
 
@@ -155,6 +155,8 @@ export default {
   methods: {
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
+      console.log(this.sidebar.opened)
+
     },
     async logout() {
       this.$confirm('确定注销并退出系统吗？', '提示', {
@@ -262,7 +264,7 @@ export default {
     //top: 50%; /* 将元素垂直向上移动容器高度的50% */
     //left: 50%; /* 将元素水平向左移动容器宽度的50% */
     //transform: translate(-50%, -50%); /* 通过移动元素的左上角使其居中 */
-    margin-left: 150px;
+    //margin-left: 150px;
     color: #333;
     font-size: 24px;
     font-weight: bold;

fuintAdmin/src/layout/components/Sidebar/Logo.vue

@@ -3,7 +3,10 @@
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
 <!--        <img :src="logo" class="sidebar-logo" />-->
-        <h1  class="sidebar-title"  :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+        <h1  class="sidebar-title"  :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">
+<!--          {{ title }} -->
+          百
+        </h1>
 <!--        <h1 v-else class="sidebar-title" style="color: #00ff80"  >{{ title }} </h1>-->
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">

fuintAdmin/src/layout/components/Sidebar/SidebarItem.vue

@@ -2,7 +2,7 @@
   <div v-if="!item.hidden">
     <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" style="padding-left: 20px;" :class="{'submenu-title-noDropdown':!isNest}">
+        <el-menu-item v-if="!isCollapse" :index="resolvePath(onlyOneChild.path)" style="padding-left: 20px;height: 48px" :class="{'submenu-title-noDropdown':!isNest}">
 <!--          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />-->
           <span style="margin-left: 30px" v-if="onlyOneChild.meta.title!='系统首页'">{{onlyOneChild.meta.title}}</span>
           <div v-else style="background-color: white;width: 200px;height: 100%;position: fixed;left: 0px">
@@ -11,50 +11,102 @@
             <span>{{onlyOneChild.meta.title}}</span>
           </div>
         </el-menu-item>
+        <el-menu-item v-if="isCollapse" :index="resolvePath(onlyOneChild.path)" style="padding-left: 20px;height: 60px" :class="{'submenu-title-noDropdown':!isNest}">
+<!--          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />-->
+          <span style="margin-left: 30px" v-if="onlyOneChild.meta.title!='系统首页'">{{onlyOneChild.meta.title}}</span>
+          <div v-else style="background-color: white;width: 70px;height: 100%;position: fixed;left: 0px;text-align: center">
+            <img src="@/assets/menu_icon/home.png" v-if="activeMenu!='/index'" style="width: 25px;height: 25px;"/>
+            <img src="@/assets/menu_icon/home_c.png" v-else style="width: 25px;height: 25px;"/>
+            <div style="padding: 0px;line-height: 5px">{{onlyOneChild.meta.title}}</div>
+          </div>
+        </el-menu-item>
       </app-link>
     </template>
 
-    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
+    <el-submenu v-else ref="subMenu" :style="{'height':isCollapse ? '60px':''}"  :index="resolvePath(item.path)" popper-append-to-body >
       <template slot="title">
-<!--        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title"  />-->
-        <span style="margin-right: 10px;" v-if="item.meta.title=='交接班'">
-          <img src="@/assets/menu_icon/ren.png" v-if="!activeMenu.includes('/handover')" style="width: 21px;height: 21px;"/>
-          <img src="@/assets/menu_icon/ren_b.png" v-else style="width: 21px;height: 21px;"/>
-        </span>
-        <span style="margin-right: 10px;" v-if="item.meta.title=='门店管理'">
-          <img src="@/assets/menu_icon/shouye.png" v-if="!activeMenu.includes(item.path) && !activeMenu.includes('/staff') && !activeMenu.includes('/feedBack') && !activeMenu.includes('/duty')" style="width: 21px;height: 21px;"/>
-          <img src="@/assets/menu_icon/shouye_b.png" v-else style="width: 21px;height: 21px;"/>
-        </span>
-        <span style="margin-right: 10px;" v-if="item.meta.title=='会员管理'">
-          <img src="@/assets/menu_icon/user.png" v-if="!activeMenu.includes(item.path) && !activeMenu.includes('/userGrade')" style="width: 21px;height: 21px;"/>
-          <img src="@/assets/menu_icon/user_b.png" v-else style="width: 21px;height: 21px;"/>
-        </span>
-        <span style="margin-right: 10px;" v-if="item.meta.title=='油站管理'">
-          <img src="@/assets/menu_icon/youqiang.png" v-if="!activeMenu.includes(item.path)" style="width: 21px;height: 21px;"/>
-          <img src="@/assets/menu_icon/youqiang_b.png" v-else style="width: 21px;height: 21px;"/>
-        </span>
-        <span style="margin-right: 10px;" v-if="item.meta.title=='便利店'">
-          <img src="@/assets/menu_icon/car.png" v-if="!activeMenu.includes('/convenience')" style="width: 21px;height: 21px;"/>
-          <img src="@/assets/menu_icon/car_b.png" v-else style="width: 21px;height: 21px;"/>
-        </span>
-        <span style="margin-right: 10px;" v-if="item.meta.title=='积分商城'">
-          <img src="@/assets/menu_icon/lihe.png" v-if="!activeMenu.includes('/integral')" style="width: 21px;height: 21px;"/>
-          <img src="@/assets/menu_icon/lihe_b.png" v-else style="width: 21px;height: 21px;"/>
-        </span>
-        <span style="margin-right: 10px;" v-if="item.meta.title=='订单管理'">
-          <img src="@/assets/menu_icon/wendang.png" v-if="!activeMenu.includes(item.path)" style="width: 21px;height: 21px;"/>
-          <img src="@/assets/menu_icon/wendang_b.png" v-else style="width: 21px;height: 21px;"/>
-        </span>
-        <span style="margin-right: 10px;" v-if="item.meta.title=='活动营销'">
-          <img src="@/assets/menu_icon/laba.png" v-if="!activeMenu.includes('/EventMarketing')" style="width: 21px;height: 21px;"/>
-          <img src="@/assets/menu_icon/laba_b.png" v-else style="width: 21px;height: 21px;"/>
-        </span>
-        <span style="margin-right: 10px;" v-if="item.meta.title=='配置管理'">
-          <img src="@/assets/menu_icon/setting.png" v-if="!activeMenu.includes('/setting') && !activeMenu.includes('/power')" style="width: 21px;height: 21px;"/>
-          <img src="@/assets/menu_icon/setting_b.png" v-else style="width: 21px;height: 21px;"/>
-        </span>
+        <div v-if="!isCollapse" >
+  <!--        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title"  />-->
+          <span style="margin-right: 10px;" v-if="item.meta.title=='交接班'">
+            <img src="@/assets/menu_icon/ren.png" v-if="!activeMenu.includes('/handover')" style="width: 21px;height: 21px;"/>
+            <img src="@/assets/menu_icon/ren_b.png" v-else style="width: 21px;height: 21px;"/>
+          </span>
+          <span style="margin-right: 10px;" v-if="item.meta.title=='门店管理'">
+            <img src="@/assets/menu_icon/shouye.png" v-if="!activeMenu.includes(item.path) && !activeMenu.includes('/staff') && !activeMenu.includes('/feedBack') && !activeMenu.includes('/duty')" style="width: 21px;height: 21px;"/>
+            <img src="@/assets/menu_icon/shouye_b.png" v-else style="width: 21px;height: 21px;"/>
+          </span>
+          <span style="margin-right: 10px;" v-if="item.meta.title=='会员管理'">
+            <img src="@/assets/menu_icon/user.png" v-if="!activeMenu.includes(item.path) && !activeMenu.includes('/userGrade')" style="width: 21px;height: 21px;"/>
+            <img src="@/assets/menu_icon/user_b.png" v-else style="width: 21px;height: 21px;"/>
+          </span>
+          <span style="margin-right: 10px;" v-if="item.meta.title=='油站管理'">
+            <img src="@/assets/menu_icon/youqiang.png" v-if="!activeMenu.includes(item.path)" style="width: 21px;height: 21px;"/>
+            <img src="@/assets/menu_icon/youqiang_b.png" v-else style="width: 21px;height: 21px;"/>
+          </span>
+          <span style="margin-right: 10px;" v-if="item.meta.title=='便利店'">
+            <img src="@/assets/menu_icon/car.png" v-if="!activeMenu.includes('/convenience')" style="width: 21px;height: 21px;"/>
+            <img src="@/assets/menu_icon/car_b.png" v-else style="width: 21px;height: 21px;"/>
+          </span>
+          <span style="margin-right: 10px;" v-if="item.meta.title=='积分商城'">
+            <img src="@/assets/menu_icon/lihe.png" v-if="!activeMenu.includes('/integral')" style="width: 21px;height: 21px;"/>
+            <img src="@/assets/menu_icon/lihe_b.png" v-else style="width: 21px;height: 21px;"/>
+          </span>
+          <span style="margin-right: 10px;" v-if="item.meta.title=='订单管理'">
+            <img src="@/assets/menu_icon/wendang.png" v-if="!activeMenu.includes(item.path)" style="width: 21px;height: 21px;"/>
+            <img src="@/assets/menu_icon/wendang_b.png" v-else style="width: 21px;height: 21px;"/>
+          </span>
+          <span style="margin-right: 10px;" v-if="item.meta.title=='活动营销'">
+            <img src="@/assets/menu_icon/laba.png" v-if="!activeMenu.includes('/EventMarketing')" style="width: 21px;height: 21px;"/>
+            <img src="@/assets/menu_icon/laba_b.png" v-else style="width: 21px;height: 21px;"/>
+          </span>
+          <span style="margin-right: 10px;" v-if="item.meta.title=='配置管理'">
+            <img src="@/assets/menu_icon/setting.png" v-if="!activeMenu.includes('/setting') && !activeMenu.includes('/power')" style="width: 21px;height: 21px;"/>
+            <img src="@/assets/menu_icon/setting_b.png" v-else style="width: 21px;height: 21px;"/>
+          </span>
 
-        <span>{{item.meta.title}}</span>
+          <span>{{item.meta.title}}</span>
+        </div>
+        <div v-if="isCollapse" style="position: fixed;left: 0;text-align: center;width: 70px">
+  <!--        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title"  />-->
+          <span style="margin-right: 10px;" v-if="item.meta.title=='交接班'">
+            <img src="@/assets/menu_icon/ren.png" v-if="!activeMenu.includes('/handover')" style="width: 25px;height: 25px;"/>
+            <img src="@/assets/menu_icon/ren_b.png" v-else style="width: 25px;height: 25px;"/>
+          </span>
+          <span style="margin-right: 10px;" v-if="item.meta.title=='门店管理'">
+            <img src="@/assets/menu_icon/shouye.png" v-if="!activeMenu.includes(item.path) && !activeMenu.includes('/staff') && !activeMenu.includes('/feedBack') && !activeMenu.includes('/duty')" style="width: 25px;height: 25px;"/>
+            <img src="@/assets/menu_icon/shouye_b.png" v-else style="width: 25px;height: 25px;"/>
+          </span>
+          <span style="margin-right: 10px;" v-if="item.meta.title=='会员管理'">
+            <img src="@/assets/menu_icon/user.png" v-if="!activeMenu.includes(item.path) && !activeMenu.includes('/userGrade')" style="width: 25px;height: 25px;"/>
+            <img src="@/assets/menu_icon/user_b.png" v-else style="width: 25px;height: 25px;"/>
+          </span>
+          <span style="margin-right: 10px;" v-if="item.meta.title=='油站管理'">
+            <img src="@/assets/menu_icon/youqiang.png" v-if="!activeMenu.includes(item.path)" style="width: 25px;height: 25px;"/>
+            <img src="@/assets/menu_icon/youqiang_b.png" v-else style="width: 25px;height: 25px;"/>
+          </span>
+          <span style="margin-right: 10px;" v-if="item.meta.title=='便利店'">
+            <img src="@/assets/menu_icon/car.png" v-if="!activeMenu.includes('/convenience')" style="width: 25px;height: 25px;"/>
+            <img src="@/assets/menu_icon/car_b.png" v-else style="width: 25px;height: 25px;"/>
+          </span>
+          <span style="margin-right: 10px;" v-if="item.meta.title=='积分商城'">
+            <img src="@/assets/menu_icon/lihe.png" v-if="!activeMenu.includes('/integral')" style="width: 25px;height: 25px;"/>
+            <img src="@/assets/menu_icon/lihe_b.png" v-else style="width: 25px;height: 25px;"/>
+          </span>
+          <span style="margin-right: 10px;" v-if="item.meta.title=='订单管理'">
+            <img src="@/assets/menu_icon/wendang.png" v-if="!activeMenu.includes(item.path)" style="width: 25px;height: 25px;"/>
+            <img src="@/assets/menu_icon/wendang_b.png" v-else style="width: 25px;height: 25px;"/>
+          </span>
+          <span style="margin-right: 10px;" v-if="item.meta.title=='活动营销'">
+            <img src="@/assets/menu_icon/laba.png" v-if="!activeMenu.includes('/EventMarketing')" style="width: 25px;height: 25px;"/>
+            <img src="@/assets/menu_icon/laba_b.png" v-else style="width: 25px;height: 25px;"/>
+          </span>
+          <span style="margin-right: 10px;" v-if="item.meta.title=='配置管理'">
+            <img src="@/assets/menu_icon/setting.png" v-if="!activeMenu.includes('/setting') && !activeMenu.includes('/power')" style="width: 25px;height: 25px;"/>
+            <img src="@/assets/menu_icon/setting_b.png" v-else style="width: 25px;height: 25px;"/>
+          </span>
+
+          <div style="padding: 0px;line-height: 5px">{{item.meta.title}}</div>
+        </div>
       </template>
       <sidebar-item
         v-for="child in item.children"
@@ -90,6 +142,10 @@ export default {
       type: Boolean,
       default: false
     },
+    isCollapse: {
+      type: Boolean,
+      default: false
+    },
     basePath: {
       type: String,
       default: ''
@@ -149,3 +205,6 @@ export default {
   }
 }
 </script>
+<style  lang="scss" scoped>
+
+</style>

fuintAdmin/src/layout/components/Sidebar/index.vue

@@ -1,29 +1,56 @@
 <template>
-  <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+  <div :class="{'has-logo':showLogo}"
+       :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground},
+              {width: isCollapse ? '70px !important' : '200px !important' }">
     <logo v-if="showLogo" :collapse="isCollapse" />
 <!--    <div class="store-info" v-if="storeName">-->
 <!--      <div class="name">{{ storeName }}</div>-->
 <!--      <div class="role" v-if="role">（{{ role }}）</div>-->
 <!--    </div>-->
     <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
-      <el-menu
-        :default-active="activeMenu"
-        :collapse="isCollapse"
-        :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
-        :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
-        :unique-opened="true"
-        :active-text-color="settings.theme"
-        :collapse-transition="false"
-        style="margin-bottom: 80px;"
-      >
-        <sidebar-item
-          v-for="(route, index) in sidebarRouters"
-          :key="route.path  + index"
-          :item="route"
-          :base-path="route.path"
-          :activeMenu="activeMenu"
-        />
-      </el-menu>
+      <div v-if="isCollapse" style="width: 70px;">
+        <el-menu
+          :default-active="activeMenu"
+          :collapse="isCollapse"
+          :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
+          :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
+          :unique-opened="true"
+          :active-text-color="settings.theme"
+          :collapse-transition="false"
+          style="margin-bottom: 80px;height: 60px"
+          mode="vertical"
+        >
+          <sidebar-item
+            v-for="(route, index) in sidebarRouters"
+            :key="route.path  + index"
+            :item="route"
+            :base-path="route.path"
+            :activeMenu="activeMenu"
+            :isCollapse="isCollapse"
+          />
+        </el-menu>
+      </div>
+      <div v-else>
+        <el-menu
+          :default-active="activeMenu"
+          :collapse="isCollapse"
+          :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
+          :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
+          :unique-opened="true"
+          :active-text-color="settings.theme"
+          :collapse-transition="false"
+          style="margin-bottom: 80px;height: 48px"
+          mode="vertical"
+        >
+          <sidebar-item
+            v-for="(route, index) in sidebarRouters"
+            :key="route.path  + index"
+            :item="route"
+            :base-path="route.path"
+            :activeMenu="activeMenu"
+          />
+        </el-menu>
+      </div>
     </el-scrollbar>
   </div>
 </template>
@@ -55,6 +82,14 @@ export default {
       return variables;
     },
     isCollapse() {
+      if (!this.sidebar.opened){
+        document.documentElement.style.setProperty('--sidebar-width', '70px');
+        document.documentElement.style.setProperty('--sidebar-height', '60px');
+      }else {
+        document.documentElement.style.setProperty('--sidebar-width', '200px');
+        document.documentElement.style.setProperty('--sidebar-height', '48px');
+      }
+
       return !this.sidebar.opened;
     },
     storeName() {

fuintAdmin/src/main.js

@@ -57,6 +57,8 @@ Vue.prototype.handleTree = handleTree
 Vue.prototype.imgurl = 'http://192.168.0.138:8008'
 // Vue.prototype.pcUrl = 'http://192.168.0.178:83/'
 Vue.prototype.pcUrl = 'https://cashier.youkerr.com/'
+const Collapse= false
+Vue.prototype.isCollapse = Collapse
 
 // 全局组件挂载
 Vue.component('DictTag', DictTag)