duty-management-web/src/layout/menu/sub-menu.vue

<!--左侧二级菜单树-->
<template>
  <div class="sub-menu-main">
    <div class="sub-menu-main-content">
      <template v-for="(item, index) in $store.state.menu.subMenuRouter">
        <div class="sub-menu-item __hover" :class="{active: item.name === $route.name}" @click="toSubMenu(item)">
          <div class="sub-menu-item-content">
            <div class="icon"/>
            {{item.meta.title}}
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'

export default defineComponent({
  name: '',
  components: {},
  props: {
  },
  setup() {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({})
    const toSubMenu = (menu: any) => {
      const deep = (r: any) => {
        if (r.children?.length > 0) {
          deep(r.children[0])
        } else {
          if (menu.name !== route.name) {
            router.push({
              path: r.path
            })
          }
        }
      }
      deep(menu)
    }
    onMounted(() => {
    })
    return {
      ...toRefs(state),
      toSubMenu
    }
  },
})
</script>

<style scoped lang="scss">
  .sub-menu-main {
    width: 290px;
    height: 918px;
    background-image: url("@/assets/images/layout/sub-menu_bg.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: relative;
    .sub-menu-main-content {
      position: absolute;
      display: flex;
      flex-direction: column;
      top: 172px;
      left: 30px;
      .sub-menu-item {
        width: 185px;
        height: 66px;
        display: flex;
        align-items: center;
        position: relative;
        &:after {
          content: '';
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 2px;
          background: linear-gradient(270deg, rgba(51,146,255,0) 0%, #3392FF 51%, rgba(51,146,255,0) 100%);
        }
        &.active {
          &:before {
            content: '';
            position: absolute;
            width: 167px;
            height: 42px;
            background: linear-gradient(90deg, rgba(0,242,254,0) 0%, #00F2FE 39%, #00F2FE 61%, rgba(0,242,254,0) 95%);
            z-index: 1;
            opacity: 0.4;
          }
          .sub-menu-item-content {
            text-shadow: 0px 2px 4px rgba(0,0,0,0.4);
            color: #FFFFFF;
            .icon {
              background-color: #75fbff;
              box-shadow: 0px 0px 20px 3px #75fbff;
            }
          }
        }
        .sub-menu-item-content {
          height: 42px;
          font-size: 20px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          font-weight: bold;
          color: rgba(255,255,255,0.5);
          display: flex;
          align-items: center;
          padding-left: 30px;
          z-index: 2;
          .icon {
            width: 16px;
            height: 16px;
            background-color: rgba(42, 187, 255, 0.3);
            margin-right: 10px;
            transform: rotate(45deg);
          }
        }
      }
    }
  }
</style>