feat: 新增高级示例

yangyin

2024-06-26 cde5a1722df2797ac33ce4fac27280a05ddb2fc0

 src/views/project/ch/home/component/waterLeftAside/asideTitle.vue

@@ -1,7 +1,13 @@
<template>
   <div class="w100 h100">
      <div class="aisde-title">
         <div class="flex items-center set-li" v-for="(item, index) in state.asideTitleList" :key="index">
         <div
            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 }"
         >
            <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>
         </div>
@@ -23,30 +29,38 @@

<script setup lang="ts">
import { reactive } from 'vue';
import { gotoRoute } from '/@/utils/route';
let state = reactive({
   asideTitleList: [
      {
         id: '1',
         id: 1,
         icon: '/static/images/wave/AsideIcon.png',
         title: '应用场景',
      },
      {
         id: '2',
         id: 2,
         icon: '/static/images/wave/AsideIcon.png',
         title: '帮助中心',
      },
      {
         id: '3',
         id: 3,
         icon: '/static/images/wave/AsideIcon.png',
         title: '个人设置',
      },
      {
         id: '4',
         id: 4,
         icon: '/static/images/wave/AsideIcon.png',
         title: '关于水务AI',
      },
   ],
   currentActive: 0,
});
const handleClick = (id) => {
   state.currentActive = id;
   if (id == 1) {
      gotoRoute({ name: 'Scenario' });
   }
};
</script>
<style scoped lang="scss">
.aisde-title {
@@ -64,11 +78,18 @@
   -ms-flex-align: center;
   align-items: center;
   cursor: pointer;
   &:hover {
      width: 214px;
      height: 30px;
      background-color: #3b3d40;
      border-radius: 6px;
}
.set-li-active {
   width: 214px;
   height: 30px;
   background-color: #3b3d40;

   border-radius: 6px;
   span {
      background: linear-gradient(90deg, #84fdd4 0, #2a82e4);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
   }
}
.user_login {