From 4b8b04e1fcf32b6f7d764ac276a0790a90a6327b Mon Sep 17 00:00:00 2001
From: hujiale <13306077+hujiale9527@user.noreply.gitee.com>
Date: Wed, 23 Oct 2024 19:55:22 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=89=E4=B8=AD=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/components/Output2/index.vue         | 40 +++++++++++++------
 1 file changed, 28 insertions(+), 12 deletions(-)

diff --git a/apps/web-test/src/views/dashboard/home/components/Output2/index.vue b/apps/web-test/src/views/dashboard/home/components/Output2/index.vue
index 41e52090..0b82451d 100644
--- a/apps/web-test/src/views/dashboard/home/components/Output2/index.vue
+++ b/apps/web-test/src/views/dashboard/home/components/Output2/index.vue
@@ -3,23 +3,22 @@
     <div class="head-top-box flex justify-between mb-3 titlt-top">
       <div class="flex items-center gap-10">
         <Badge :count="9" :offset="[6, -3]">
-          <div class="flex items-center gap-1 cursor-pointer">
+          <div class="flex items-center gap-1 cursor-pointer" :class="{'active': selectTodo == 'db'}" @click="selectTodoClick('db')">
             <CalendarOutlined />待办
           </div>
         </Badge>
-
-        <div class="flex items-center gap-1 cursor-pointer">
+        <div class="flex items-center gap-1 cursor-pointer" :class="{'active': selectTodo == 'yb'}" @click="selectTodoClick('yb')">
           <CarryOutOutlined />已办
         </div>
         <Badge :count="9" :offset="[6, -3]">
-          <div class="flex items-center gap-1 cursor-pointer">
+          <div class="flex items-center gap-1 cursor-pointer" :class="{'active': selectTodo == 'dy'}" @click="selectTodoClick('dy')">
             <ExceptionOutlined />待阅
           </div>
         </Badge>
-        <div class="flex items-center gap-1 cursor-pointer">
+        <div class="flex items-center gap-1 cursor-pointer" :class="{'active': selectTodo == 'yy'}" @click="selectTodoClick('yy')">
           <FileDoneOutlined />已阅
         </div>
-        <div class="flex items-center gap-1 cursor-pointer">
+        <div class="flex items-center gap-1 cursor-pointer" :class="{'active': selectTodo == 'gz'}" @click="selectTodoClick('gz')">
           <StarOutlined />关注
         </div>
       </div>
@@ -31,10 +30,10 @@
     </div>
     <ul class="f-btn-box">
       <li>
-        <Button type="primary">全部</Button>
+        <Button :type="selectClass == '全部' ? 'primary' : 'default'" @click="selectedClick('全部')">全部</Button>
       </li>
-      <li v-for="(item) in plainOptions" :key="item">
-        <Button >{{ item }}</Button>
+      <li v-for="(item) in plainOptions" :key="item" @click="selectedClick(item)">
+        <Button :type="selectClass == item ? 'primary' : 'default'">{{ item }}</Button>
       </li>
     </ul>
     <div class="flex-1 overflow-hidden">
@@ -79,9 +78,9 @@ import { preferences } from '@vben/preferences';
 
 watch(() => preferences.theme.mode, (n: any) => {
   VxeUI.setTheme(n)
-},{
-    deep: true,
-    immediate: true
+}, {
+  deep: true,
+  immediate: true
 })
 
 interface RowVO {
@@ -165,6 +164,17 @@ watch(
     state.checkAll = val.length === plainOptions.length;
   },
 );
+
+let selectClass = ref('全部')
+
+let selectedClick = (item: string) => {
+  selectClass.value = item
+}
+
+let selectTodo = ref('');
+let selectTodoClick = (item: string) => {
+  selectTodo.value = item
+}
 </script>
 <style lang="scss">
 @import 'vxe-table/lib/style.css';
@@ -176,6 +186,7 @@ watch(
   overflow-x: auto; //出现水平滚动条
   padding-bottom: 3px;
   margin-bottom: 10px;
+
   li {
     display: inline-block;
     margin-right: 10px;
@@ -185,4 +196,9 @@ watch(
 .f-btn-box::-webkit-scrollbar {
   height: 5px !important;
 }
+</style>
+<style lang="scss" scoped>
+.active {
+  color: hsl(var(--primary));
+}
 </style>
\ No newline at end of file