diff --git a/src/search_package/search.vue b/src/search_package/search.vue
index fa55d605c7a11d59ebae95e4dfc21c8c8fd32793..09fa57552274d3067841fc6b10dc928cef9c6b5a 100644
--- a/src/search_package/search.vue
+++ b/src/search_package/search.vue
@@ -1,15 +1,65 @@
 <script lang="ts" setup>
+import { ref } from 'vue'
 import { useLayoutInfo } from '@/composables/useLayoutInfo'
+import { ActivityStatusEnum } from '@/enum/Activity'
+import { PageTitleEnum } from '@/enum/Page'
 
 const text = ['历史记录', '历史记录', '历史记录', '历史记录', '历史记录', '历史记录', '历史记录', '历史记录', '历史记录', '历史记录', '历史记录', '历史记录', '历史记录', '历史记录', '历史记录', '历史记录', '历史记录']
 
 const { contentAreaHeight } = useLayoutInfo()
+
+// tab切换
+const active = ref(0)
+const handleTabClick = (index: number) => {
+  active.value = index
+  console.log(index)
+}
+// 初始化
+handleTabClick(0)
+
+// 公益活动
+const Projects = {
+  /** 项目id */
+  id: 1,
+  /** 项目图片url */
+  imageUrl: '/static/image.png',
+  /** 项目名称 */
+  projectName: '现在很多APP在用户截图时会自动提示用户是否要进行分享。这个时机确实抓的很棒，一般来说，用户截图大多数时候都是为了分享给他人，少部分是为了留底备份。作为用户和产品之间的桥...',
+  /** 项目简介 */
+  brief: '现在很多APP在用户截图时会自动提示用户是否要进行分享。这个时机确实抓的很棒，一般来说，用户截图大多数时候都是为了分享给他人，少部分是为了留底备份。作为用户和产品之间的桥...',
+  /** 项目实施计划 */
+  implementationPlan: '现在很多APP在用户截图时会自动提示用户是否要进行分享。这个时机确实抓的很棒，一般来说，用户截图大多数时候都是为了分享给他人，少部分是为了留底备份。作为用户和产品之间的桥...',
+  /** 项目简介 markdown格式 */
+  projectDescMd: '现在很多APP在用户截图时会自动提示用户是否要进行分享。这个时机确实抓的很棒，一般来说，用户截图大多数时候都是为了分享给他人，少部分是为了留底备份。作为用户和产品之间的桥...',
+  /** 项目状态 0：未开始，1：进行中，2：已完成 */
+  status: 0,
+  /** 项目创建时间 */
+  createTime: '2024-10-10',
+  /** 目标金额 */
+  targetAmout: 10000,
+  /** 已筹集金额 */
+  raiseAmout: 0,
+
+}
+// 志愿者活动
+const Activity = ref({
+  /** 活动id */
+  id: 1,
+  /** 活动简介 */
+  activityName: '巧克力中的“爱马仕”，让自己站在今年情人节票圈的顶端',
+  /** 活动简介 */
+  brief: '巧克力中的“爱马仕”，让自己站在今年情人节票圈的顶端',
+  /** 所需志愿者人数 */
+  requireVolunteers: 999,
+  /** 活动状态 */
+  status: ActivityStatusEnum.INPROGRESS,
+})
 </script>
 
 <template>
-  <hope-nav-bar />
+  <hope-nav-bar is-home-icon :title="PageTitleEnum.SEARCH" />
   <view
-    class="search-container" :style="{
+    v-if="false" class="search-container" :style="{
       height: `${contentAreaHeight}px`,
     }"
   >
@@ -23,6 +73,46 @@ const { contentAreaHeight } = useLayoutInfo()
       </text>
     </view>
   </view>
+  <view v-else class="search-tab">
+    <hope-search-bar type="search" />
+    <view class="search-tab-list">
+      <text :class="[{ active: active === 0 }]" @click="handleTabClick(0)">
+        公益活动
+      </text>
+      <text class="search-tab-list-line">
+        |
+      </text>
+      <text :class="[{ active: active === 1 }]" @click="handleTabClick(1)">
+        志愿者活动
+      </text>
+      <text class="search-tab-list-line">
+        |
+      </text>
+      <text :class="[{ active: active === 2 }]" @click="handleTabClick(2)">
+        用户
+      </text>
+    </view>
+    <!-- 公益活动 -->
+    <view v-if="active === 0">
+      <hope-projects :project="Projects" />
+      <hope-projects :project="Projects" />
+    </view>
+    <!-- 志愿者活动 -->
+    <view v-else-if="active === 1">
+      <view class="activity">
+        <hope-activity :activity="Activity" />
+      </view>
+      <view class="activity">
+        <hope-activity :activity="Activity" />
+      </view>
+    </view>
+    <!-- 用户 -->
+    <view v-else class="search-tab-user-list">
+      <hope-user-card />
+      <hope-user-card />
+      <hope-user-card />
+    </view>
+  </view>
 </template>
 
 <style lang="scss" scoped>
@@ -64,5 +154,42 @@ const { contentAreaHeight } = useLayoutInfo()
 
     }
   }
+
+  &-tab {
+    height: 100vh;
+    background-color: #fff;
+    padding: 30rpx;
+
+    &-list {
+      text-align: center;
+      padding: 20rpx;
+
+      text {
+        color: #bababa;
+        font-size: 26rpx;
+      }
+
+      &-line {
+        margin: 0 20rpx;
+        color: #f3f3f3;
+      }
+
+      .active {
+        color: red;
+      }
+    }
+    &-user-list {
+      padding-top: 10%;
+      display: flex;
+      width: 100%;
+      flex-direction: column;
+      flex-wrap: wrap;
+      gap: 50rpx;
+    }
+  }
+}
+.activity{
+  height: 300rpx;
+  margin-bottom: 30rpx;
 }
 </style>