update

src/App.vue

@@ -17,7 +17,8 @@
 								@mouseleave="handleShowMenu(index, false)"
 							>
 								<div class="text" :class="{ textActive: homeActiveTitleIndex === index }">
-									{{ item.name }}</div>
+									{{ item.name }}
+								</div>
 								<div class="bottom-line" v-if="homeActiveTitleIndex === index"></div>
 							</div>
 						</div>
@@ -95,12 +96,27 @@
 				</div>
 			</div>
 
-			<div class="ai-btn" @click="openAiBox">
+			<div class="tool-box" aria-disabled="true">
+				<div class="tool-item">
+					<img src="@/assets/icons/tool-item-icon1.png" alt="" />
+				</div>
+				<div class="tool-item">
+					<img src="@/assets/icons/tool-item-icon2.png" alt="" />
+				</div>
+				<div class="tool-item">
+					<img src="@/assets/icons/tool-item-icon3.png" alt="" />
+				</div>
+				<div class="tool-item">
+					<img src="@/assets/icons/tool-item-icon4.png" alt="" />
+				</div>
+			</div>
+
+			<!-- <div class="ai-btn" @click="openAiBox">
 				<div class="icon">
 					<img src="@/assets/icons/ai-icon.png" alt="" />
 				</div>
 				<div class="text">智能问答</div>
-			</div>
+			</div> -->
 
 			<div class="ai-dialog" v-if="isShowAiBox">
 				<AiBox @close="closeAiBox" />
@@ -681,6 +697,33 @@ body {
 		}
 	}
 
+	.tool-box {
+		position: absolute;
+		top: 400px;
+		right: 28px;
+		top: 681px;
+		width: 62px;
+		height: 217px;
+		box-sizing: border-box;
+		border: 1px solid rgba(255, 255, 255, 1);
+		border-radius: 10px;
+		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+		background: rgba(255, 255, 255, 0.65);
+		box-sizing: border-box;
+		padding: 24px 18px;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		.tool-item {
+			width: 24px;
+			height: 24px;
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+
 	.ai-btn {
 		position: absolute;
 		bottom: 240px;
@@ -749,4 +792,9 @@ body {
 	pointer-events: none;
 }
 
+.tool-box[aria-disabled="true"] {
+	opacity: 0.3;
+	cursor: not-allowed;
+	pointer-events: none;
+}
 </style>