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

<template>
  <el-scrollbar wrapClass="scrollbar-wrapper">
    <!-- <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"
      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" @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.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>

<script>
import { mapGetters } from "vuex";
import SidebarItem from "./SidebarItem";
import Hamburger from "@/components/Hamburger";


export default {
  components: { SidebarItem,Hamburger },
  computed: {
    ...mapGetters(["permission_routers", "sidebar"]),
    isCollapse() {
      return !this.sidebar.opened;
    }
  },
  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>

<style  rel="stylesheet/scss" lang="scss" scoped>
.sideColumn{
  background-color: rgb(48, 65, 86);
.head {
  text-align: center;
  padding: 20px 0 0 0;
  .tx {
    .img {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    }
  } 
  .title {
    font-size: 14px;
    color: #bfcbd9;
    padding: 10px 10px 15px 10px;
    line-height: 22px;

  }
}
.headShrink{
  .tx{
    .img{
      width: 30px;
      height: 30px;
    }

  }
  .title{
    display: none;
  }
}
}
.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>