修改

config/dev.env.js

 module.exports = {
   NODE_ENV: '"development"',
   ENV_CONFIG: '"dev"',
-  BASE_API: '"http://api.mall.test.sgjyun.com"',//'"http://localhost:9529"', // //http://api.mall.test.sgjyun.com http://112.74.16.180:9527
+  BASE_API: '"http://localhost:9529"',//'"http://localhost:9529"', // //http://api.mall.test.sgjyun.com http://112.74.16.180:9527
 
   
   SSO_HOST: '"http://testsso.sgjyun.com"',

config/index.js

 
     // host: 'xt.test.sgjyun.com',
     // host: 'xt.kuyicloud.com',
-    host: 'mall.test.sgjyun.com',
+    // host: 'mall.test.sgjyun.com',
+    host: 'localhost',
     port:9530, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,

package-lock.json

         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },

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: 100%;
+      // min-height: 100%;
       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>
     </div>
    </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/AppMain.vue

   min-height: calc(100vh - 120px);
   position: relative;
   overflow: hidden;
-  margin-top: 50px;
+  margin-top: 40px;
    background: #f3f3f3;
   
 }

src/views/layout/components/Navbar.vue

         </span>
         <!-- </el-dropdown> -->
       </div>
-      <div class="system-nav" v-if="this.$store.getters.xt_user.xt_role_exist">
+      <!-- <div class="system-nav" v-if="this.$store.getters.xt_user.xt_role_exist">
         <div class="system-nav-menu ">
           <a :href="XTWebsit()">
             <span><i class="icon iconfont icon-jiankangshuidi"></i> 血透管理</span>
         </div>
         <div class="system-nav-menu" v-if="this.$store.getters.xt_user.cdm_role_exist">
           <a :href="CDMWebsit()">
-          <!-- <a href=" http://cdm.test.sgjyun.com/"> -->
             <span><i class="icon iconfont icon-manbing-xuanzhong"></i> 慢病管理</span>
           </a>
         </div>
             <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;

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>
             </el-menu-item>
           </router-link>
         </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: {
       type: String,
       default: ''
     }
+  },
+   computed: {
+    ...mapGetters(["permission_routers"])
   },
   data() {
     return {
     resolvePath(...paths) {
       return path.resolve(this.basePath, ...paths)
     },
-    generateTitle
+    generateTitle,
+    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
       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"
+      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="XTWebsit()">
+          <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.scrm_role_exist" index="102">
+        <a :href="SCRMWebsit()">
+          <i class="icon iconfont icon-service_fill" style="margin-right:4px"></i>
+          <span
+            slot="title"
+          >SCRM</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(){
+    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>