diff --git a/frontend/pages/support-activity/index.vue b/frontend/pages/support-activity/index.vue index a6d6d6a..b914798 100644 --- a/frontend/pages/support-activity/index.vue +++ b/frontend/pages/support-activity/index.vue @@ -11,7 +11,7 @@ - - + + + + --> - - - + + + + + + 我要贡献 + + + + + + + + + + + + - + /> --> @@ -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; +} \ No newline at end of file