ywicon

wujingjing

2024-06-28 b89ed80f20f2e07729a68f2c6ed2ca5134332a17

 src/layout/component/sidebar/waterLeftAside/asideTitle.vue

@@ -5,8 +5,8 @@
            class="flex items-center set-li"
            v-for="(item, index) in state.asideTitleList"
            :key="index"
            @click="handleClick(item.id)"
            :class="{ 'set-li-active': state.currentActive === item.id }"
            @click="handleClick(item)"
            :class="{ 'set-li-active': item.routerName === currentRoute.name }"
         >
            <img :src="item.icon" alt="" class="pl-2.5 pr-2.5 w-4 h-4" style="box-sizing: content-box" />
            <span class="font-medium text-sm text-white tracking-wide">{{ item.title }}</span>
@@ -30,17 +30,21 @@
<script setup lang="ts">
import { reactive } from 'vue';
import { gotoRoute } from '/@/utils/route';
import router from '/@/router';
let state = reactive({
   asideTitleList: [
      {
         id: 1,
         icon: '/static/images/wave/AsideIcon.png',
         title: '应用场景',
         routerName:'Scenario',
      },
      {
         id: 2,
         icon: '/static/images/wave/AsideIcon.png',
         title: '帮助中心',
         // routerName:'Scenario',

      },
      {
         id: 3,
@@ -51,19 +55,18 @@
         id: 4,
         icon: '/static/images/wave/AsideIcon.png',
         title: '关于水务AI',
         routerName:'AboutUs',
			
      },
   ],
   currentActive: 0,
});
const handleClick = (id) => {
   state.currentActive = id;
   if (id == 1) {
      gotoRoute({ name: 'Scenario' });
   }
   if (id == 4) {
      gotoRoute({ name: 'AboutUs' });
   }
const handleClick = (item) => {
   gotoRoute({name:item.routerName});

};


const currentRoute = router.currentRoute;
</script>
<style scoped lang="scss">
.aisde-title {