add

src/layout/components/AppMain.vue

@@ -34,7 +34,7 @@ export default {
   width: 100%;
   position: relative;
   overflow: hidden;
-  padding-left: 50px;
+  padding-left: 150px;
   padding-top: 80px;
   /* margin-top: 112px; */
 }

src/layout/components/Navbar.vue

@@ -41,7 +41,7 @@
         </div> -->
       </div>
     </div>
-    <div class="navbar_lower">
+    <div class="navbar_lower" id="navbar_lowers">
       <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item
           v-for="(item, index) in breadList"
@@ -377,7 +377,7 @@ export default {
     background: #ffffff;
     justify-content: space-between;
     align-items: center;
-    padding-left: 47px;
+    padding-left: 48px;
     padding-right: 54px;
     ::v-deep .el-breadcrumb {
       font-size: 18px;

src/layout/components/Sidebar/SidebarItem.vue

@@ -5,31 +5,47 @@
     >
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item
-          style="background: #041741"
           :index="resolvePath(onlyOneChild.path)"
           :class="{ 'submenu-title-noDropdown': !isNest }"
         >
           <!-- <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" /> -->
           <!-- <item :icon="onlyOneChild.meta.title||(item.meta&&item.meta.title)"/> -->
-          <el-tooltip
+          <!-- <el-tooltip
             class="item"
             effect="dark"
             :content="onlyOneChild.meta.title"
             placement="right"
-          >
-            <!-- <img class="nav_item" :src="onlyOneChild.meta.imger" /> -->
-            <span class="pathName" :class="getClass(item.path)"></span>
-          </el-tooltip>
-          <!-- <span class="pathNameer">{{ onlyOneChild.meta.title }}</span> -->
+          > -->
+          <!-- <img class="nav_item" :src="onlyOneChild.meta.imger" /> -->
+          <!-- <span class="pathName" :class="getClass(item.path)"></span>
+          </el-tooltip> -->
+          <span
+            class="pathName"
+            v-if="!leup"
+            :class="getClass(item.path)"
+          ></span>
+          <span
+            class="pathNamecosy"
+            v-if="leup"
+            :class="getClass(item.path)"
+          ></span>
+          <span class="pathNameer" v-if="leup">{{
+            onlyOneChild.meta.title
+          }}</span>
         </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"
+      :index="resolvePath(item.path)"
+      popper-append-to-body
+    >
       <template slot="title">
-        <img class="nav_item" :src="onlyOneChild.meta.imger"/>
+        <img class="nav_item" :src="onlyOneChild.meta.imger" />
       </template>
-    </el-submenu> -->
+    </el-submenu>
   </div>
 </template>
 
@@ -61,6 +77,10 @@ export default {
       type: String,
       default: "",
     },
+    leup: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
@@ -136,6 +156,33 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+::v-deep .el-menu-item.is-active {
+  //设置背景颜色
+  background-color: #2d67e3 !important;
+  //设置字体颜色
+  color: #ffffff !important;
+}
+
+// ::v-deep .el-menu-item.is-active:hover {
+//   //设置背景颜色
+//   background-color: #2d67e3 !important;
+//   //设置字体颜色
+//   color: #ffffff !important;
+// }
+
+// // ::v-deep .el-submenu__title:hover {
+// //   background: red !important;
+// // }
+::v-deep .el-menu-item:hover {
+  background: #2d67e3 !important;
+  color: #fff !important;
+}
+::v-deep .el-menu-item {
+  transition: border-color 0.3s, background-color 0s, color 0s;
+}
+// ::v-deep .el-submenu__title.is-active {
+//   background-color: #6db6ff !important;
+// }
 .nav_item {
   width: 36px;
   height: 36px;
@@ -157,7 +204,6 @@ export default {
   bottom: 0;
   top: 0;
   margin: auto;
-  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
   background-size: 100% 100%;
   transition: all 0.3s;
 }
@@ -165,17 +211,17 @@ export default {
   width: 40px;
   height: 40px;
   position: absolute;
-  left: -60%;
+  left: -74%;
   right: 0;
   bottom: 0;
   top: 0;
   margin: auto;
-  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
+  // box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
   background-size: 100% 100%;
   transition: all 0.3s;
 }
 .pathNameer {
-  margin-left: 40%;
+  margin-left: 20%;
 }
 .pathNameercosy {
   display: none;

src/layout/components/Sidebar/index.vue

@@ -22,6 +22,9 @@
         />
       </el-menu>
     </el-scrollbar>
+    <div class="rloop" @click="updata" style="cursor: w-resize">
+      <!-- <img src="../../../assets/logo/ic111.png" alt="" /> -->
+    </div>
   </div>
 </template>
 
@@ -32,12 +35,10 @@ import SidebarItem from "./SidebarItem";
 import variables from "@/styles/variables.scss";
 
 export default {
-  props: {
-    // route object
-    leup: {
-      type: Boolean,
-      default: false,
-    },
+  data() {
+    return {
+      leup: false,
+    };
   },
   components: { SidebarItem, Logo },
   computed: {
@@ -88,15 +89,35 @@ export default {
       return !this.sidebar.opened;
     },
   },
-  watch: {
-    leup() {
-      console.log(this.leup);
+  methods: {
+    updata() {
+      this.leup = !this.leup;
+      this.$emit("leup", this.leup);
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
+.rloop {
+  width: 8px;
+  height: 100%;
+  position: absolute;
+  // background: #2d67e3;
+  z-index: 999;
+  right: 0;
+  top: 0;
+  > img {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    top: 45%;
+    right: -10px;
+  }
+}
+.rloop:hover {
+  background: #2d67e3;
+}
 ::v-deep .navMenu {
   .router-link-active {
     .account {

src/layout/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="app-wrapper" @change="eveclk">
-    <sidebar class="sidebar-container" id="sidebar-container" />
+  <div class="app-wrapper">
+    <sidebar class="sidebar-container" id="sidebar-containers" @leup="leuper" />
     <div class="main-container">
       <navbar />
       <app-main id="main-containers" />
@@ -110,19 +110,31 @@ export default {
     ...mapGetters(["pwdflag", "outflag", "name"]),
   },
   mounted() {
-    // document.getElementById("sidebar-container").style.width = "150px";
+    document.getElementById("sidebar-containers").style.width = "56px";
+    document.getElementById("main-containers").style.paddingLeft = "56px";
   },
   methods: {
-    eveclk() {
-      document.getElementById("sidebar-container").style.width = "150px";
-      this.leup = true;
-      // document.getElementById("main-containers").style.paddingLeft = "50px";
-    },
-    upLeft() {
-      document.getElementById("sidebar-container").style.width = "48px";
-      this.leup = false;
-      // document.getElementById("main-containers").style.paddingLeft = "30px";
+    leuper(data) {
+      if (data) {
+        document.getElementById("sidebar-containers").style.width = "208px";
+        document.getElementById("main-containers").style.paddingLeft = "208px";
+        document.getElementById("navbar_lowers").style.paddingLeft = "208px";
+      } else {
+        document.getElementById("sidebar-containers").style.width = "56px";
+        document.getElementById("main-containers").style.paddingLeft = "56px";
+        document.getElementById("navbar_lowers").style.paddingLeft = "56px";
+      }
     },
+    // eveclk() {
+    //   document.getElementById("sidebar-container").style.width = "150px";
+    //   this.leup = true;
+    //   // document.getElementById("main-containers").style.paddingLeft = "50px";
+    // },
+    // upLeft() {
+    //   document.getElementById("sidebar-container").style.width = "48px";
+    //   this.leup = false;
+    //   // document.getElementById("main-containers").style.paddingLeft = "30px";
+    // },
     //存储数据项-提交
     addSubmit(formName) {
       this.$refs[formName].validate((valid) => {

src/router/routes/routes-file-five.js

@@ -32,7 +32,7 @@ const departureRoutes = {
             keepAlive: true,
             deepth: 1
           },
-          redirect: '/departure/terminalView',
+          redirect: '/departure',
           // redirect: "/departure/baggageView",
           children: [
             // {
@@ -45,7 +45,7 @@ const departureRoutes = {
             //   meta: { keepAlive: true, deepth: 2 },
             // },
             {
-              path: '/departure/terminalView',
+              path: '/departure',
               name: 'DepartureTerminalView',
               component: () => import('@/views/baggageManagement/components/departure'),
               meta: { keepAlive: true, deepth: 2 }
@@ -96,10 +96,10 @@ const arrivalRoutes = {
           name: 'ArrivalOne',
           component: () => import('@/views/baggageManagement'),
           meta: { title: '进港视图', roles: ['departure_page'], keepAlive: true, deepth: 1 },
-          redirect: '/arrival/teminalView',
+          redirect: '/arrival',
           children: [
             {
-              path: '/arrival/teminalView',
+              path: '/arrival',
               name: 'ArrivalTerminalView',
               component: () => import('@/views/baggageManagement/components/arrival'),
               meta: { keepAlive: true, deepth: 2 }
@@ -137,7 +137,7 @@ const transferRoutes = {
   meta: { roles: ['transit'] },
   children: [
     {
-      path: '/transfer',
+      path: '/transfer/arrival',
       component: () => import('@/views/baggageManagement'),
       meta: {
         title: '中转管理',

src/router/routes/routes-file-two.js

@@ -15,25 +15,25 @@ const systemSettingsRoutes = {
           path: '/systemSettings',
           name: 'serviceManagement',
           component: { render(c) { return c('router-view') } },
-          redirect: '/systemSettings/serviceManagement',
+          redirect: '/systemSettings',
           meta: { title: '服务管理' },
           hidden: true,
           src: require('@/assets/nav/ic_setting_top_default.png'),
           srcer: require('@/assets/nav/ic_setting_top_check.png'),
           children: [
-          {
-            path: '/systemSettings/serviceManagement',
-            component: () => import('@/views/systemSettings/views/serviceManagement/serviceHome'),
-          },
-          {
-            path: '/systemSettings/serviceEdit',
-            name: 'serviceEdit',
-            component: () => import('@/views/systemSettings/views/serviceManagement/serviceEdit'),
-            meta: { title: '服务编辑' },
-            hidden: false,
-            isAlone: true,
-            src: require('@/assets/nav/ic_setting_top@2x.png')
-          },
+            {
+              path: '/systemSettings',
+              component: () => import('@/views/systemSettings/views/serviceManagement/serviceHome'),
+            },
+            {
+              path: '/systemSettings/serviceEdit',
+              name: 'serviceEdit',
+              component: () => import('@/views/systemSettings/views/serviceManagement/serviceEdit'),
+              meta: { title: '服务编辑' },
+              hidden: false,
+              isAlone: true,
+              src: require('@/assets/nav/ic_setting_top@2x.png')
+            },
           ]
         },
         {
@@ -46,19 +46,19 @@ const systemSettingsRoutes = {
           src: require('@/assets/nav/ic_setting_top_default.png'),
           srcer: require('@/assets/nav/ic_setting_top_check.png'),
           children: [
-          {
-            path: '/systemSettings/sourceDataItemManagement',
-            component: () => import('@/views/systemSettings/views/sourceDataItemManagement/sourceDataItemHome'),
-          },
-          {
-            path: '/systemSettings/sourceDataItemEdit',
-            name: 'sourceDataItemEdit',
-            component: () => import('@/views/systemSettings/views/sourceDataItemManagement/sourceDataItemEdit'),
-            meta: { title: '源数据编辑' },
-            hidden: false,
-            isAlone: true,
-            src: require('@/assets/nav/ic_setting_top@2x.png')
-          },
+            {
+              path: '/systemSettings/sourceDataItemManagement',
+              component: () => import('@/views/systemSettings/views/sourceDataItemManagement/sourceDataItemHome'),
+            },
+            {
+              path: '/systemSettings/sourceDataItemEdit',
+              name: 'sourceDataItemEdit',
+              component: () => import('@/views/systemSettings/views/sourceDataItemManagement/sourceDataItemEdit'),
+              meta: { title: '源数据编辑' },
+              hidden: false,
+              isAlone: true,
+              src: require('@/assets/nav/ic_setting_top@2x.png')
+            },
           ]
         },
         {

src/styles/sidebar.scss

@@ -8,7 +8,7 @@
   }
 
   .sidebar-container {
-    width: 48px;
+    width: 150px;
     // transition: width 0.28s;
     // width: $sideBarWidth !important;
     background-color: #041741;
@@ -22,7 +22,7 @@
     left: 0%;
     bottom: 0%;
     z-index: 1001;
-    overflow: hidden;
+    // overflow: hidden;
     box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
 
     // reset element-ui css
@@ -101,14 +101,14 @@
       min-width: $sideBarWidth !important;
       background-color: $subMenuBg !important;
       &:hover {
-        background-color: $subMenuHover !important;
+        // background-color: $subMenuHover !important;
       }
     }
   }
 
   .hideSidebar {
     .sidebar-container {
-      width: 48px;
+      width: 150px;
     }
 
     .main-container {
@@ -216,7 +216,7 @@
   .el-menu-item {
     &:hover {
       // you can use $subMenuHover
-      background-color: $menuHover !important;
+      // background-color: $menuHover !important;
     }
   }