处理合并问题

src/components/base/moduleHeader/index.vue

@@ -14,10 +14,9 @@
 						v-for="(item, index) in homeTitleList"
 						:key="index"
 						@mouseenter="handleShowMenu(index, true)"
-						@mouseleave="handleShowMenu(index, false)"
-						@click="handleClickTitle(item)"
+						@click="handleClickTitle(item, index)"
 					>
-						<div class="text" :class="{ textActive: homeActiveTitleIndex === index }">
+						<div class="text text-title-1-show" :class="{ textActive: homeActiveTitleIndex === index }">
 							{{ item.name }}
 						</div>
 						<div class="bottom-line" v-if="homeActiveTitleIndex === index"></div>
@@ -33,12 +32,22 @@
 					<div class="user">
 						<img src="@/assets/icons/overview/user.png" alt="" />
 					</div>
-					<div class="name">{{ "管理员" }}</div>
+					<div class="name text-regular">{{ "管理员" }}</div>
 				</div>
 			</div>
 			<div class="menu-box" v-show="isShowMenu" @mouseenter="handleHoverMenu(true)" @mouseleave="handleHoverMenu(false)">
 				<div class="menu-content">
-					<div class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleToModule(item)">
+					<div class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleToModule(item, 1)">
+						<div class="icon">
+							<img :src="item.icon" alt="" />
+						</div>
+						<div class="title">{{ item.title }}</div>
+					</div>
+				</div>
+			</div>
+			<div class="tool-box" v-show="isShowTool" @mouseenter="handleHoverTool(true)" @mouseleave="handleHoverTool(false)">
+				<div class="menu-content">
+					<div class="menu-item" v-for="(item, index) in toolList" :key="index" @click="handleToModule(item, 2)">
 						<div class="icon">
 							<img :src="item.icon" alt="" />
 						</div>
@@ -51,7 +60,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watchEffect } from "vue";
+import { ref, computed, onMounted, watchEffect, onUnmounted } from "vue";
 import { useRouter } from "vue-router";
 import { useRoute } from "vue-router";
 import { getPersonType } from "@/api/common/index";
@@ -69,6 +78,8 @@ import Menu9 from "@/assets/icons/overview/menu9.png";
 import Menu10 from "@/assets/icons/overview/menu10.png";
 import Menu11 from "@/assets/icons/overview/menu11.png";
 import Menu12 from "@/assets/icons/overview/menu12.png";
+import Tool1 from "./tool1.svg";
+import Tool2 from "./tool2.svg";
 import { ElMessage } from "element-plus";
 import { useWrittingAsstaintStore } from "@/stores/writtingAsstaintStore";
 const store = useWrittingAsstaintStore();
@@ -97,28 +108,41 @@ const handleGetPersonType = async () => {
 // 概览页标题列表
 const homeTitleList = ref([
 	{
-		name: "中美科技博弈",
+		name: "首页",
 		path: "/ZMOverView",
 		disabled: false
+	},
+
+	{
+		name: "中美科技博弈",
+		path: "/billHome",
+		disabled: false
+	},
+	{
+		name: "智能工具",
+		path: "/chat",
+		disabled: false
+	},
+	{
+		name: "数据资源库",
+		path: "/dataLibrary",
+		disabled: false
 	}
-	// {
-	// 	name: "主要国家科技动向感知",
-	// 	path: "",
-	// 	disabled: true
-	// },
-	// {
-	// 	name: "主要国家竞争科技安全",
-	// 	path: "",
-	// 	disabled: true
-	// }
 ]);
 
 const homeActiveTitleIndex = ref(0);
 
 const isShowMenu = ref(false);
 const handleShowMenu = (index, isShow) => {
-	if (index === 0) {
+	if (index === 1) {
 		isShowMenu.value = isShow;
+		isShowTool.value = false;
+	} else if (index === 2) {
+		isShowMenu.value = false;
+		isShowTool.value = isShow;
+	} else {
+		isShowMenu.value = false;
+		isShowTool.value = false;
 	}
 };
 
@@ -127,11 +151,11 @@ const handleHoverMenu = isShow => {
 };
 
 const menuList = ref([
-	{
-		title: "中美科技博弈概览",
-		icon: Menu1,
-		path: "/ZMOverView"
-	},
+	// {
+	// 	title: "中美科技博弈概览",
+	// 	icon: Menu1,
+	// 	path: "/ZMOverView"
+	// },
 	{
 		title: "科技法案",
 		icon: Menu2,
@@ -189,14 +213,11 @@ const menuList = ref([
 	}
 ]);
 
-// const handleToModule = item => {
-// 	const curRoute = router.resolve({
-// 		path: item.path
-// 	});
-// 	window.open(curRoute.href, "_blank");
-// };
+const isShowTool = ref(false);
 
-const searchText = ref("");
+const handleHoverTool = isShow => {
+	isShowTool.value = isShow;
+};
 
 const toolList = ref([
 	{
@@ -325,12 +346,7 @@ onUnmounted(() => {
 					}
 
 					.text {
-						color: rgba(59, 65, 75, 1);
-						font-family: YouSheBiaoTiHei;
-						font-style: Regular;
-						font-size: 30px;
-						font-weight: 400;
-						letter-spacing: 0px;
+						color: var(--text-primary-80-color);
 					}
 
 					.textActive {
@@ -400,13 +416,7 @@ onUnmounted(() => {
 				.name {
 					width: 48px;
 					height: 30px;
-					color: rgba(59, 65, 75, 1);
-					font-family: Microsoft YaHei;
-					font-style: Regular;
-					font-size: 16px;
-					font-weight: 400;
-					line-height: 30px;
-					letter-spacing: 0px;
+					color: var(--text-primary-80-color);
 				}
 			}
 		}
@@ -446,7 +456,6 @@ onUnmounted(() => {
 				width: 562px;
 				height: 348px;
 				margin-top: 8px;
-
 				margin-left: 72px;
 				display: flex;
 				flex-wrap: wrap;