wt_project_web_bak/src/layout/left.vue

<template>
  <div class="box-shadow-blue full-height" style="background-color: #f4f3ee">
    <div class="padding mt-20">
      <div class="flex flex-center mt-10" style="margin-bottom: 60px">
        <img src="@/assets/svg/logo.svg" />
      </div>
    </div>
    <div>
      <div
        class="flex flex-center flex-col bold font-18 item-bg padding-bottom full-width"
      >
        <div
          v-for="(item, index) in data"
          :key="item.id"
          class="full-width flex flex-col flex-center pointer"
        >
          <div
            class="full-width flex flex-center padding"
            style="z-index: 2"
            :class="active === index ? 'item-s' : 'item'"
            @click="navClick(item, index)"
          >
            <img :src="item.source" />
            <span class="flex-child-average">{{ item.name }}</span>
          </div>
          <div
            v-if="item.children && item.children.length > 0 && active === index"
            class="flex flex-col flex-center item-sub padding"
          >
            <div
              v-for="(sub, subIndex) in item.children"
              :key="sub.id"
              class="padding full-width flex flex-center"
              :class="subIndex === subActive ? 'item-sub-active' : ''"
              @click="subClick(sub, subIndex)"
            >
              <div class="mr-10 main-color">·</div>
              <span>{{ sub.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      subActive: 0,
      data: [],
      currentPage: ''
    }
  },
  watch: {
    $route: {
      immediate: false,
      handler() {
        this.currentPage = window.location.href
        this.init()
      }
    }
  },
  created() {
    this.currentPage = window.location.href
    this.menus()
  },
  methods: {
    init() {
      const item = localStorage.getItem('index')
      if (item) {
        const menu = JSON.parse(item)
        this.active = menu.active
        this.subActive = menu.subActive
      }
    },
    menus() {
      this.$api.common.getMenus().then(res => {
        if (res.code === 200) {
          this.data = res.data
          this.init()
        }
      })
    },
    navClick(item, index) {
      this.active = index
      if (item.children && item.children.length > 0) {
        this.subActive = 0
        this.$router.push(item.children[0].path)
        localStorage.setItem(
          'data-type',
          item.children[0].remark ? item.children[0].remark : 'project'
        )
        this.$bus.emit(
          'navChange',
          item.remark ? item.children[0].remark : 'project'
        )
      } else {
        this.$router.push(item.path)
        localStorage.setItem('data-type', item.remark ? item.remark : 'project')
        this.$bus.emit('navChange', item.remark ? item.remark : 'project')
      }
      const menu = { active: this.active, subActive: this.subActive }
      localStorage.setItem('index', JSON.stringify(menu))
    },
    subClick(item, index) {
      this.subActive = index
      localStorage.setItem('data-type', item.remark ? item.remark : 'project')
      this.$router.push(item.path)
      const menu = { active: this.active, subActive: this.subActive }
      localStorage.setItem('index', JSON.stringify(menu))
      this.$bus.emit('navChange', item.remark ? item.remark : 'project')
    }
  }
}
</script>

<style scoped>
.box-shadow-blue {
  position: fixed;
  width: 200px;
  left: 0;
  z-index: 2;
  background-color: white;
  box-shadow: 5px 0 10px -5px rgba(0, 0, 0, 0.1);
}

.item-bg {
  border-top: 1px solid #d1d1d1;
  border-bottom: 1px solid #d1d1d1;
}

.item-s {
  width: 160px;
  border-radius: 14px;
  margin-top: 30px;
  color: white;
  background-color: #ab7630;
  box-shadow: 2px 2px 10px 2px rgba(242, 162, 58, 0.49);
}

.item {
  width: 150px;
  border-radius: 14px;
  margin-top: 30px;
  color: #707070;
}

.item-sub {
  width: 160px;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  margin-top: -10px;
  padding-top: 20px;
  color: #939393;
  background-color: #e4e4e4;
}

.item-sub-active {
  background-color: #d3d3d3;
}
</style>