From cde5a1722df2797ac33ce4fac27280a05ddb2fc0 Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期三, 26 六月 2024 18:15:36 +0800
Subject: [PATCH] feat: 新增高级示例
---
src/views/project/ch/home/component/waterLeftAside/asideTitle.vue | 41 +++++++++++++++++++++++++++++++----------
1 files changed, 31 insertions(+), 10 deletions(-)
diff --git a/src/views/project/ch/home/component/waterLeftAside/asideTitle.vue b/src/views/project/ch/home/component/waterLeftAside/asideTitle.vue
index 10345c6..f20468b 100644
--- a/src/views/project/ch/home/component/waterLeftAside/asideTitle.vue
+++ b/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 {
--
Gitblit v1.9.3