feat: integrate ContributionList in support-activity page

frontend/pages/support-activity/index.vue

@@ -11,7 +11,7 @@
     <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
     
     <!-- 主题横幅 -->
-    <ThemeBanner 
+    <ThemeBanner
       v-if="config"
       :title="config.title"
       :banner-image="config.bannerImage"
@@ -19,7 +19,14 @@
       :target="progressData.target"
       :is-stale-data="isStaleData"
     />
-    
+
+    <!-- 实时贡献列表 -->
+    <ContributionList
+      v-if="activityId && !isLoading"
+      :activity-id="activityId"
+      class="contribution-list-wrapper"
+    />
+
     <!-- 舞台区域 -->
     <StageArea
       v-if="config"
@@ -38,21 +45,36 @@
       :target="progressData.target"
     /> -->
     
-    <!-- 底部操作栏 -->
-    <ActionBar
-      v-if="activityId && config"
-      :activity-id="activityId"
-      :action-items="config.actionItems"
-      @contribute="handleContribute"
-    />
-    
+    <!-- 底部操作栏触发按钮 -->
+    <view class="action-bar-trigger" @click="toggleActionBar">
+      <view class="trigger-btn">
+        <image src="/static/rank/activity-support-icon/lihe.png" class="trigger-icon" mode="aspectFit" />
+      </view>
+      <text class="trigger-text">我要贡献</text>
+    </view>
+
+    <!-- 底部操作栏弹出框 -->
+    <view v-if="actionBarVisible" class="action-bar-popup">
+      <!-- 遮罩层 -->
+      <view class="action-bar-mask" @click="toggleActionBar"></view>
+      <!-- 弹出内容 -->
+      <view class="action-bar-content">
+        <ActionBar
+          v-if="activityId && config"
+          :activity-id="activityId"
+          :action-items="config.actionItems"
+          @contribute="handleContribute"
+        />
+      </view>
+    </view>
+
     <!-- 底部导航 -->
-    <BottomNav 
+    <!-- <BottomNav 
       :activeTab="activeTab"
       :isExpanded="navExpanded"
       @update:activeTab="handleTabChange"
       @update:isExpanded="navExpanded = $event"
-    />
+    /> -->
     
     <!-- 蒙层 - 导航栏展开时显示 -->
     <view v-if="navExpanded" class="nav-mask" @click="navExpanded = false"></view>
@@ -93,6 +115,7 @@ import performanceMonitor from '@/utils/performance-monitor'
 import Header from '../components/Header.vue';
 import BottomNav from '../components/BottomNav.vue';
 import ThemeBanner from './components/ThemeBanner.vue'
+import ContributionList from './components/ContributionList.vue'
 import StageArea from './components/StageArea.vue'
 import FloatingBubbles from './components/FloatingBubbles.vue'
 import ActionBar from './components/ActionBar.vue'
@@ -113,6 +136,13 @@ const isStaleData = ref(false) // 数据是否过时
 const activeTab = ref(0)
 const navExpanded = ref(false)
 
+// ActionBar 弹出框状态
+const actionBarVisible = ref(false)
+
+function toggleActionBar() {
+  actionBarVisible.value = !actionBarVisible.value
+}
+
 let progressManager = null
 
 const isCompleted = computed(() => progressData.value.current >= progressData.value.target)
@@ -620,8 +650,87 @@ onUnload(() => {
 }
 
 @keyframes spin {
-  to { 
-    transform: rotate(360deg); 
+  to {
+    transform: rotate(360deg);
   }
 }
+
+/* ActionBar 弹出框样式 */
+.action-bar-trigger {
+  width: 180rpx;
+  height: 180rpx;
+  position: fixed;
+  bottom: 180rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8rpx;
+  background-image: url('@/static/rank/activity-support-icon/beijingkuang1.png');
+  background-size: cover;
+  background-position: center;
+}
+
+.trigger-btn {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 24rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.trigger-icon {
+  width: 80rpx;
+  height: 80rpx;
+}
+
+.trigger-text {
+  font-size: 24rpx;
+  color: #fff;
+  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
+}
+
+.action-bar-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 998;
+}
+
+.action-bar-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.action-bar-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+/* 实时贡献列表样式 */
+.contribution-list-wrapper {
+  width: 100%;
+  padding: 0 24rpx;
+}
 </style>