kuailelunwen_new_houtai/src/components/SetLeftMenu.vue

<template>
  <aside class="sidebar">
    <ul>
      <li v-for="item in menuList" :key="item.path" >
        <div :class="[$route.path == item.path ? 'active ceshi' : '', 'flex']" @click="gotoPath(item.path)">
          <img v-if="$route.path == item.path" :src="item.imgActive" alt="">
          <img v-else :src="item.img" alt="">
          {{ item.name }}
        </div>
        <p :class="[$route.path != item.path ? 'not-point':'','flex']" v-for="item1 in item.list" :key="item1.name">{{ item1.name }}</p>

      </li>
    </ul>
  </aside>
</template>

<script>
export default {
  name: 'Sidebar',
  props: {
    menuItems: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      menuList: [
        {
          name: '基本设置',
          path: '/siteSetting/siteBaseSetting',
          img: require('@/assets/site/sitebase.svg'),
          imgActive: require('@/assets/site/sitebase_active.svg'),
          list: [
            {
              name: '站点信息',
              desc: ''
            },
            {
              name: '域名设置',
              desc: ''
            },
            {
              name: '收款方式',
              desc: ''
            },
          ]
        },
        {
          name: '个性化设置',
          path: '/siteSetting/sitePersonalization',
          img: require('@/assets/site/gexinghua.svg'),
          imgActive: require('@/assets/site/sitebase_active.svg'),
          list: [
            {
              name: '网页模板',
              desc: ''
            },
            {
              name: '客服设置',
              desc: ''
            },
            {
              name: '功能显隐',
              desc: ''
            },
            {
              name: '安全提交',
              desc: ''
            },
            {
              name: '初始订单数',
              desc: ''
            },
          ]
        },
        {
          name: '移动端设置',
          path: '/siteSetting/siteH5',
          img: require('@/assets/site/siteh5.svg'),
          imgActive: require('@/assets/site/sitebase_active.svg'),
          list: [
            {
              name: '微信H5',
              desc: ''
            },
            {
              name: '小程序',
              desc: ''
            },
          ]
        },
        {
          name: '营销推广',
          path: '/siteSetting/siteSem',
          img: require('@/assets/site/sitesem.svg'),
          imgActive: require('@/assets/site/sitebase_active.svg'),
          list: [
            {
              name: 'SEO设置',
              desc: ''
            },
            {
              name: 'SEM设置',
              desc: ''
            },
            {
              name: '访问统计',
              desc: ''
            },
          ]
        }
      ]
    }
  },
  mounted() {
    console.log(this.$route.path, '---');
  },
  methods: {
    gotoPath(path) {
      this.$router.push(path)
    },
    activeArea(type){
      console.log(type);
    }
  }
}
</script>

<style scoped lang="scss">
.sidebar {
  width: 158px;
  padding: 21px;
  box-sizing: border-box;
  background: #FFFFFF;
  box-shadow: 0px 0px 11px 2px rgba(147, 147, 147, 0.11);
}
.ceshi{
  animation: fadeInOut 2s infinite;
}
ul {
  list-style: none;
  padding: 0;
}
.not-point{
    pointer-events: none; /* 阻止鼠标事件 */
    opacity: 0.5; /* 可选，降低透明度以视觉上表示不可用 */
    cursor: not-allowed; /* 改变鼠标光标样式，表示不可用 */
}

li {
  margin-bottom: 10px;

  div {
    letter-spacing: 0.08em;
    color: #1E2226;
    margin: 11px 0;
    cursor: pointer;
    img{
      margin-right: 6px;
    }
  }

  p {
    margin: 9px 0;
    letter-spacing: 0.08em;
    line-height: 18px;
    color: #8A9099;
    cursor: pointer;
    &:hover{
      color: #006AFF;
    }
  }
}

/* {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
  border-radius: 4px;
} */
/* 
:hover {
  background: #e0e0e0;
} */

.active {
  font-weight: bold;
  letter-spacing: 0.08em;
  color: #006AFF;
}
.item-active{
  color: #006AFF;
}

/* 
.exact-active {
  background: #1976d2;
  color: white;
} */
</style>