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.name" 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.img>
            <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='item' 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: [
        {
          name: '项 目 库',
          img: new URL('../assets/svg/icon1.svg', import.meta.url).href,
          path: '/'
        },
        {
          name: '任务列表',
          img: new URL('../assets/svg/icon1.svg', import.meta.url).href,
          path: '/task'
        },
        {
          name: '资 料 库',
          img: new URL('../assets/svg/icon2.svg', import.meta.url).href,
          children: [
            {
              name: '项目资料',
              img: new URL('../assets/svg/icon1.svg', import.meta.url).href,
              path: '/database'
            },
            {
              name: '公司资料',
              img: new URL('../assets/svg/icon1.svg', import.meta.url).href,
              path: '/company'
            }
          ]
        },
        {
          name: '回 收 站',
          img: new URL('../assets/svg/icon3.svg', import.meta.url).href,
          path: '/recycle'
        }
      ],
      currentPage: ''
    }
  },
  created () {
    this.currentPage = window.location.href
    this.init()
  },
  methods: {
    init () {
      if (this.currentPage.indexOf('/task') > -1) {
        this.active = 1
      } else if (this.currentPage.indexOf('/database') > -1) {
        this.active = 2
      } else if (this.currentPage.indexOf('/recycle') > -1) {
        this.active = 3
      } else {
        this.active = 0
      }
    },
    navClick (item, index) {
      this.active = index
      if (item.children && item.children.length > 0) {
        this.subActive = 0
        this.$router.push(item.children[0].path)
      } else {
        this.$router.push(item.path)
      }
    },
    subClick (item, index) {
      this.subActive = index
      this.$router.push(item.path)
    }
  }
}
</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: 150px;
  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: 150px;
  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>