controlPc/src/components/menu/SideMenu.vue

<template>
  <a-layout-sider
    :theme="sideTheme"
    :class="['side-menu', isMobile ? null : 'shadow']"
    width="256px"
    :collapsible="collapsible"
    v-model="collapsed"
    :trigger="null"
  >
    <div :class="['logo', theme]">
      <a-dropdown>
        <div class="header-avatar" style="cursor: pointer">
          <!-- <router-link to="/agreement/agreement"> -->
          <div class="logo-title">
            <img
              src="@/assets/img/title.png"
              style="width: 30px; height: 30px"
            />
            <h1 style="font-size: 18px; margin-right: 5px">晋掌柜控制台</h1>
            <a-icon type="caret-down" />
          </div>
          <!-- </router-link> -->
        </div>
        <a-menu :class="['avatar-menu']" slot="overlay">
          切换到
          <a-menu-item>
            <div
              style="display: flex; align-items: center"
              @click="toShopkeeper"
            >
              <img
                src="@/assets/img/new_logo.png"
                style="width: 20px; height: 20px"
              />
              <h1 style="font-size: 18px; margin-left: 5px">掌柜科技</h1>
            </div>
          </a-menu-item>
          <a-menu-item>
            <div style="display: flex; align-items: center" @click="toIndex">
              <img
                src="@/assets/img/title.png"
                style="width: 20px; height: 20px"
              />
              <h1 style="font-size: 18px; margin-left: 5px">晋掌柜控制台</h1>
            </div>
          </a-menu-item>
          <!-- <a-menu-item @click="Back">
        <a-icon style="margin-right: 8px" type="poweroff" />
        <span>返回掌柜</span>
      </a-menu-item> -->
        </a-menu>
      </a-dropdown>
    </div>
    <a-menu
      style="width: 256px"
      :default-selected-keys="['1']"
      mode="inline"
      @click="handleClick"
    >
      <a-sub-menu v-for="item in menuData" :key="item.id">
        <span slot="title"
          ><a-icon :type="item.icon" /><span>{{ item.name }}</span></span
        >

        <a-menu-item
          v-for="val in item.children"
          :key="val.id"
          v-show="val.type == 1"
        >
          <div @click="routerChange(val, item)">{{ val.name }}</div>
        </a-menu-item>
        <a-sub-menu
          v-for="(val, index) in item.children"
          :key="index"
          v-show="val.type == 0"
        >
          <span slot="title"
            ><span>{{ val.name }}</span></span
          >
          <a-menu-item
            v-for="three in val.children"
            :key="three.id"
            v-show="three.name != '团队管理'"
          >
            <div @click="routerChange(three, val)">
              {{ three.name }}
            </div>
          </a-menu-item>
        </a-sub-menu>
      </a-sub-menu>
    </a-menu>
  </a-layout-sider>
</template>

<script>
// import IMenu from "./menu";
import { mapState, mapGetters } from "vuex";
import Cookies from "js-cookie";
import CryptoJS from "crypto-js";
export default {
  name: "SideMenu",
  // components: { IMenu },
  props: {
    collapsible: {
      type: Boolean,
      required: false,
      default: false,
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false,
    },
    menuData: {
      type: Array,
      required: true,
    },
    theme: {
      type: String,
      required: false,
      default: "dark",
    },
  },
  data() {
    return {
      process: process.env.VUE_APP_BASE_URL,
    };
  },
  computed: {
    sideTheme() {
      return this.theme == "light" ? this.theme : "dark";
    },
    ...mapState("setting", ["isMobile", "systemName"]),
    ...mapGetters("setting", ["firstMenu", "subMenu", "menuData"]),
  },
  created() {
    // console.log(this.menuData);
  },
  methods: {
    handleClick(e) {
      console.log("click", e);
    },

    onSelect(obj) {
      this.$emit("menuSelect", obj);
    },
    routerChange(val, parent) {
      // console.log(val, parent);
      // console.log(this.$router);
      this.$router.replace({
        path: "/" + parent.url + "/" + val.url,
      });
    },
    toIndex() {
      this.$router.replace({
        path: "/index",
      });
    },
    toShopkeeper() {
      let token = CryptoJS.AES.encrypt(
        Cookies.get("Authorization").split(" ")[1],
        "token"
      ).toString();
      window.location.href = this.process + "/#/login?token=" + token;
    },
  },
};
</script>

<style lang="less" scoped>
@import "index";
.ant-layout .ant-layout-sider {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: #000 !important;
  scrollbar-width: thin;
  -ms-overflow-style: none;
  position: relative;

  /* 滚动条轨道样式 */
  // &::-webkit-scrollbar {
  //   width: 8px; /* 设置滚动条宽度 */
  // }

  /* 滚动条滑块样式 */
  &::-webkit-scrollbar-thumb {
    background-color: blue !important; /* 设置滑块背景颜色 */
    border-radius: 4px; /* 设置滑块圆角 */
  }

  /* 滚动条轨道hover状态样式 */
  &::-webkit-scrollbar-track:hover {
    background-color: #f1f1f1; /* 设置轨道hover状态时的背景颜色 */
  }

  /* 滚动条滑块hover状态样式 */
  &::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* 设置滑块hover状态时的背景颜色 */
  }
}
.ant-layout .ant-layout-sider::-webkit-scrollbar-button {
  display: none;
}

.ant-layout .ant-layout-sider::-webkit-scrollbar-thumb {
  border-radius: 8px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #666666;
}
.avatar-menu {
  width: 200px;
  padding-left: 5px;
}
.logo-title {
  padding: 10px;
}
.logo-title:hover {
  background: #f8f9fd;
  box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
/deep/.el-drawer__body{
  padding: 0 20px;
  box-sizing: border-box;
}
</style>