修改样式

config/dev.env.js

 module.exports = {
   NODE_ENV: '"development"',
   ENV_CONFIG: '"dev"',
-  BASE_API:'"http://api.test1.sgjyun.com"',//'"http://localhost:9534"'
+  BASE_API:'"http://localhost:9534"',//'"http://localhost:9534"'
   //BASE_API: '"http://localhost:9534"'
   // BASE_API:'"http://api.scrm.kuyicloud.com"',//'"http://localhost:9534"'
   // BASE_API:'"http://localhost:9536"',

config/index.js

     // can be overwritten by process.env.HOST
     // if you want dev by ip, please set host: '0.0.0.0'
 
-    host: "test1.sgjyun.com",
+    // host: "test1.sgjyun.com",
     //  host: 'microweb.kuyicloud.com',
-    //host: "localhost",
+    host: "localhost",
     // host: 'jk.kuyicloud.com',
     port: 8090, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     // host: 'test1.sgjyun.com',

src/styles/sidebar.scss

     height: 100%;
     position: fixed;
     font-size: 0px;
-    top: 60px;
+    // top: 60px;
     bottom: 0;
     left: 0;
     z-index: 1001;
     }
     .el-menu {
       border: none;
-      min-height: 130%;
+      height: 90%;
+      // min-height: 130%;
+      overflow-y: auto;
       width: 100% !important;
     }
   }
-  .hideSidebar {
-    .sidebar-container {
-      width: 36px !important;
-    }
-    .main-container {
-      margin-left: 36px;
-    }
-    .submenu-title-noDropdown {
-      padding-left: 10px !important;
-      position: relative;
-      .el-tooltip {
-        padding: 0 10px !important;
-      }
-    }
-    .el-submenu {
-      overflow: hidden;
-      &>.el-submenu__title {
-        padding-left: 10px !important;
+  // .hideSidebar {
+  //   .sidebar-container {
+  //     width: 36px !important;
+  //   }
+  //   .main-container {
+  //     margin-left: 36px;
+  //   }
+  //   .submenu-title-noDropdown {
+  //     padding-left: 10px !important;
+  //     position: relative;
+  //     .el-tooltip {
+  //       padding: 0 10px !important;
+  //     }
+  //   }
+  //   .el-submenu {
+  //     overflow: hidden;
+  //     &>.el-submenu__title {
+  //       padding-left: 10px !important;
         
-        .el-submenu__icon-arrow {
-          display: none;
-        }
-      }
-    }
-    .el-menu--collapse {
-      .el-submenu {
-        &>.el-submenu__title {
-          &>span {
-            height: 0;
-            width: 0;
-            overflow: hidden;
-            visibility: hidden;
-            display: inline-block;
-          }
-        }
-      }
-    }
-  }
+  //       .el-submenu__icon-arrow {
+  //         display: none;
+  //       }
+  //     }
+  //   }
+  //   .el-menu--collapse {
+  //     .el-submenu {
+  //       &>.el-submenu__title {
+  //         &>span {
+  //           height: 0;
+  //           width: 0;
+  //           overflow: hidden;
+  //           visibility: hidden;
+  //           display: inline-block;
+  //         }
+  //       }
+  //     }
+  //   }
+  // }
   .sidebar-container .nest-menu .el-submenu>.el-submenu__title,
   .sidebar-container .el-submenu .el-menu-item {
     // min-width: 180px !important;

src/views/layout/Layout.vue

       <navbar></navbar>
     
     <div class="Header-container">
-    <sidebar class="sidebar-container"></sidebar>
+    <sidebar class="sidebar-container" @callBackIndex="handleIndex"></sidebar>
     <div class="main-container">
-      <tags-view></tags-view>
+      <tags-view :index="index"></tags-view>
       <app-main></app-main>
       <contact-box></contact-box>
     </div>
       }
     }
   },
+  data(){
+    return{
+      index: 0,
+    }
+  },
   methods: {
     handleClickOutside() {
       this.$store.dispatch('closeSideBar', { withoutAnimation: false })
+    },
+    handleIndex(data) {
+      // console.log({ prop: data });
+      this.index = data;
     }
   }
 }

src/views/layout/components/Navbar.vue

     </div>
     <el-menu class="navbar" mode="horizontal">
       <div>
-        <span> {{this.$store.getters.xt_user.org.org_name}}
+        <span> 
+          {{this.$store.getters.xt_user.org.org_name}}
         </span>
       </div>
-      <div class="system-nav">
+      <!-- <div class="system-nav">
         <div class="system-nav-menu" v-if="this.$store.getters.xt_user.xt_role_exist">
           <a :href="XTWebsit()">
             <span><i class="icon iconfont icon-jiankangshuidi"></i> 血透管理</span>
             <span><i class="icon iconfont icon-suoyou"></i> 应用</span>
           </a>
         </div>
-      </div>
+      </div> -->
 
       <div class="right-menu">
         <el-dropdown class="avatar-container right-menu-item" trigger="click"  @command="handleCommand">
     width: 162px;
     display: flex;
     align-items: center;
-    height: 60px;
+    height: 50px;
     text-align: center;
     justify-content: center;
     padding: 10px 0;
     display: flex;
     justify-content: space-between;
     width: calc(100% - 180px);
+    // width: 100%;
     align-items: center;
     color: #fff;
     border: none;

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

 <template>
   <div v-if="!item.hidden&&item.children" class="menu-wrapper">
 
-      <router-link v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow" :to="resolvePath(onlyOneChild.path)">
+      <!-- <router-link v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
           <svg-icon v-if="onlyOneChild.meta&&onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"></svg-icon>
           <span v-if="onlyOneChild.meta&&onlyOneChild.meta.title" slot="title">{{generateTitle(onlyOneChild.meta.title)}}</span>
           <sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :item="child" :key="child.path" :base-path="resolvePath(child.path)"></sidebar-item>
 
           <template v-else>
-            <!-- <router-link :key="child.name" :to="resolvePath(child.path)"> -->
               <el-menu-item v-if="child.unfinished == true" :key="child.name" @click.native="unfinishAction()"  :index="resolvePath(child.path)">
                 <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
                 <span v-if="child.meta&&child.meta.title" slot="title">{{generateTitle(child.meta.title)}}</span>
               </el-menu-item>
-            <!-- </router-link> -->
             <router-link v-else :to="resolvePath(child.path)" :key="child.name">
               <el-menu-item :index="resolvePath(child.path)">
                 <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
           </template>
           
         </template>
-      </el-submenu>
+      </el-submenu> -->
 
+      <div v-if="hasOneShowingChild(item.children) && !onlyOneChild.children && !item.alwaysShow" @click="onClick(item)">
+        <router-link :to="resolvePath(onlyOneChild.path)">
+          <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
+            <svg-icon v-if="onlyOneChild.meta && onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"></svg-icon>
+            <span v-if="onlyOneChild.meta && onlyOneChild.meta.title" slot="title">{{ generateTitle(onlyOneChild.meta.title) }}</span>
+          </el-menu-item>
+        </router-link>
+        
+      </div>
+
+        <div v-else @click="onClick(item)">
+          <router-link :to="resolvePath(item.children[0].path)">
+            <el-menu-item :index="item.path">
+              <template slot="title">
+                <svg-icon v-if="item.meta && item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
+                <span v-if="item.meta && item.meta.title" slot="title">
+                  {{ generateTitle(item.meta.title) }}
+                </span>
+              </template>
+            </el-menu-item>
+          </router-link>
+        </div>
   </div>
 </template>
 
 import path from 'path'
 import { generateTitle } from '@/utils/i18n'
 
+import { mapGetters } from "vuex";
+
 export default {
   name: 'SidebarItem',
   props: {
       default: ''
     }
   },
+  computed: {
+    ...mapGetters(["permission_routers"])
+  },
   data() {
     return {
       onlyOneChild: null
     unfinishAction: function() {
       this.$message.error("功能开发中")
     },
+    onClick(index) {
+      this.permission_routers.map((item, i) => {
+        if (this.isObjectValueEqual(item, index)) {
+          this.$emit("a", i);
+        }
+      });
+    },
+    isObjectValueEqual(a, b) {
+      var aProps = Object.getOwnPropertyNames(a);
+      var bProps = Object.getOwnPropertyNames(b);
+
+      if (aProps.length != bProps.length) {
+        return false;
+      }
+
+      for (var i = 0; i < aProps.length; i++) {
+        var propName = aProps[i];
+
+        if (a[propName] !== b[propName]) {
+          return false;
+        }
+      }
+
+      return true;
+    }
   }
 }
 </script>
 
+<style lang="scss">
+.menu-wrapper{
+  .el-menu-item{
+   background-color:#1F2D3D !important;
+   color: #fff !important;
+  }
+  .el-menu{
+    background-color:#1F2D3D !important;
+  }
+  .el-submenu__title{
+    background-color:#1F2D3D !important;
+    color: #fff !important;
+    height: 32px !important;
+    line-height: 32px !important;
+  }
+  .router-link-exact-active{
+    color: rgb(64, 158, 255) !important;
+    .el-menu-item{
+      color: rgb(64, 158, 255) !important;
+    }
+  }
+}
+
+</style>
+

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

 <template>
   <el-scrollbar wrapClass="scrollbar-wrapper">
-    <div class="sideColumn">
+    <!-- <div class="sideColumn">
        <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>      
+    </div> -->
+    <!-- <el-menu
+      mode="vertical"
+      :unique-opened="uniqueOpened"
+      :show-timeout="200"
+      :default-active="$route.path"
+      :collapse="isCollapse"
+      background-color="#304156"
+      text-color="#bfcbd9"
+      active-text-color="#409EFF"
+    > -->
+    <div class="logo">
+      <img src="../../../../assets/logo/logo1.png" alt />
     </div>
     <el-menu
       mode="vertical"
       :unique-opened="uniqueOpened"
       :show-timeout="200"
       :default-active="$route.path"
-      :collapse="isCollapse"
       background-color="#304156"
       text-color="#bfcbd9"
       active-text-color="#409EFF"
     >
-      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"></sidebar-item>
+      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path" @a="b"></sidebar-item>
+      <el-menu-item v-if="this.$store.getters.xt_user.xt_role_exist" index="100">
+        <a :href="CDMWebsit()">
+          <i class="icon iconfont icon-manbing-xuanzhong" style="margin-right:4px"></i>
+          <span
+            slot="title"
+          >血透管理</span>
+        </a>
+      </el-menu-item>
+      <el-menu-item v-if="this.$store.getters.xt_user.cdm_role_exist" index="100">
+        <a :href="CDMWebsit()">
+          <i class="icon iconfont icon-manbing-xuanzhong" style="margin-right:4px"></i>
+          <span
+            slot="title"
+          >慢病管理</span>
+        </a>
+      </el-menu-item>
+      <el-menu-item v-if="this.$store.getters.xt_user.mall_role_exist" index="102">
+        <a :href="MircoMallWebsit()">
+          <i class="icon iconfont icon-service_fill" style="margin-right:4px"></i>
+          <span
+            slot="title"
+          >分销商城</span>
+        </a>
+      </el-menu-item>
     </el-menu>
   </el-scrollbar>
 </template>
   data(){
     return{
       uniqueOpened:true,
+      activeClass: 0,
+      index: 0
     }
   },
   methods:{
     toggleSideBar() {
       this.$store.dispatch("toggleSideBar");
     },
+    b(index) {
+      // this.index = index;
+      // this.activeClass = index;
+      // console.log('b',index)
+      this.$emit("callBackIndex", index);
+    },
+    XTWebsit() {
+      return process.env.XT_HOST
+    },
+    CDMWebsit() {
+      return process.env.CDM_HOST;
+    },
+    SCRMWebsit() {
+      return process.env.SRCM_HOST;
+    },
+    MircoMallWebsit() {
+      return process.env.MIRCO_MALL_HOST;
+    },
   }
 };
 </script>
   }
 }
 }
+.logo {
+  width: 100px;
+  height: 32px;
+  margin: 20px auto;
+  img {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+}
 
 </style>
+<style lang="scss">
+.scrollbar-wrapper {
+  background-color: #1F2D3D;
+  .el-menu{
+    background-color: #1F2D3D !important;
+  }
+  .el-menu-item{
+    height: 32px !important;
+    line-height: 32px !important;
+    background-color: #1F2D3D !important;
+    color: #fff !important;
+    i{
+      color: #fff;
+    }
+  }
+}
+</style>
 

src/views/layout/components/TagsView.vue

 <template>
   <div class="tags-view-container">
-    <scroll-pane class='tags-view-wrapper' ref='scrollPane'>
+    <!-- <scroll-pane class='tags-view-wrapper' ref='scrollPane'>
       <router-link 
         ref='tag' 
         class="tags-view-item" 
       <li @click="closeSelectedTag(selectedTag)">{{$t('tagsView.close')}}</li>
       <li @click="closeOthersTags">{{$t('tagsView.closeOthers')}}</li>
       <li @click="closeAllTags">{{$t('tagsView.closeAll')}}</li>
-    </ul>
+    </ul> -->
+    <div class="tags-view-wrapper">
+        <div class="tagsBox">
+          <div class="tagsOne"
+            v-if="permission_routers[newIndex].meta"
+            v-for="(item, i) in permission_routers[newIndex].children"
+            :key="i"
+          >
+            <router-link :to="item.path" v-if="!item.hidden && !item.is_menu">
+              <p
+                class="newTags"
+                :class="activeClass == i ? 'active' : ''"
+                @click="onClick(i)"
+              >{{ generateTitle(item.meta.title) }}</p>
+            </router-link>
+          </div>
+          <div v-else class="tagsOne">
+            <p class="newTags" :class="activeClass == i ? 'active' : ''" @click="onClick(i)">
+              {{
+              generateTitle(permission_routers[newIndex].children[0].meta.title)
+              }}
+            </p>
+          </div>
+        </div>
+      </div>
   </div>
 </template>
 
 <script>
 import ScrollPane from '@/components/ScrollPane'
 import { generateTitle } from '@/utils/i18n'
+
+import { mapGetters } from "vuex";
   
 export default {
   components: { ScrollPane },
+  props: {
+    index: Number,
+  },
   data() {
     return {
       visible: false,
       top: 0,
       left: 0,
-      selectedTag: {}
+      selectedTag: {},
+      newIndex: 0,
+      activeClass: 0,
     }
   },
   computed: {
-    visitedViews() {
-      return this.$store.state.tagsView.visitedViews
-    }
+    // visitedViews() {
+    //   return this.$store.state.tagsView.visitedViews
+    // },
+    ...mapGetters(["permission_routers"])
   },
   watch: {
-    $route() {
-      this.addViewTags()
-      this.moveToCurrentTag()
+    // $route() {
+    //   this.addViewTags()
+    //   this.moveToCurrentTag()
+    // },
+    // visible(value) {
+    //   if (value) {
+    //     document.body.addEventListener('click', this.closeMenu)
+    //   } else {
+    //     document.body.removeEventListener('click', this.closeMenu)
+    //   }
+    // }
+    index(newVal) {
+      console.log(newVal)
+      // if (this.newIndex != newVal) {
+      //   this.activeClass = 0;
+      // }
+      this.newIndex = newVal;
     },
-    visible(value) {
-      if (value) {
-        document.body.addEventListener('click', this.closeMenu)
-      } else {
-        document.body.removeEventListener('click', this.closeMenu)
-      }
-    }
+  },
+  created(){
+    console.log(this.permission_routers)
+    this.newIndex = 3
   },
   mounted() {
     this.addViewTags()
     },
     closeMenu() {
       this.visible = false
-    }
+    },
+    onClick(index) {
+      // console.log(index);
+      this.activeClass = index;
+    },
   }
 }
 </script>
 .tags-view-container {
   height: 60px;
   .tags-view-wrapper {
+    width: 100%;
     background: #fff;
     height: 50px;
     border-bottom: 1px solid #d8dce5;
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
     position: fixed;
     z-index: 1000;
-    top: 60px;
+    top: 50px;
     overflow-x: scroll;
     /* 针对缺省样式 (必须的) */
       &::-webkit-scrollbar {
       }
     }
   }
+  .tagsBox {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    .tagsOne {
+      .newTags {
+        border: 1px solid rgba(235, 238, 240, 1);
+        border-radius: 2px;
+        padding: 8px 12px;
+        margin-left: 10px;
+        font-size: 14px;
+      }
+    }
+    .active {
+      border: 1px solid rgba(64, 158, 255, 1);
+      background: rgba(64, 158, 255, 1);
+      border-radius: 2px;
+      color: #fff;
+    }
+  }
 }
 </style>
 

src/xt_permission.js

 
 router.beforeEach((to, from, next) => {
   // 线上注释
-  // if (store.getters.permission_routers === undefined) {
-  //   store.dispatch('xt_GenerateRoutes', []).then(() => {
-  //     next()
-  //   })
-  // } else {
-  //   next()
-  // }
-  // return
+  if (store.getters.permission_routers === undefined) {
+    store.dispatch('xt_GenerateRoutes', []).then(() => {
+      next()
+    })
+  } else {
+    next()
+  }
+  return
   // 线上注释
 
   NProgress.start()