diff --git a/src/components/dialog/SubscribeShareStatisticsDialog.vue b/src/components/dialog/SubscribeShareStatisticsDialog.vue index 592e8df8..bb8e17c8 100644 --- a/src/components/dialog/SubscribeShareStatisticsDialog.vue +++ b/src/components/dialog/SubscribeShareStatisticsDialog.vue @@ -84,6 +84,25 @@ function getPodiumStatStyle() { } } +// 获取前三名区域背景样式 +function getPodiumAreaBackgroundStyle() { + const isDark = theme.global.current.value.dark + return { + background: isDark + ? 'linear-gradient(135deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 69, 0, 0.2) 25%, rgba(255, 20, 147, 0.15) 50%, rgba(138, 43, 226, 0.1) 75%, rgba(0, 191, 255, 0.08) 100%), linear-gradient(to bottom, transparent 0%, transparent 70%, rgba(255, 215, 0, 0.1) 85%, transparent 100%)' + : 'linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 69, 0, 0.15) 25%, rgba(255, 20, 147, 0.12) 50%, rgba(138, 43, 226, 0.08) 75%, rgba(0, 191, 255, 0.05) 100%), linear-gradient(to bottom, transparent 0%, transparent 70%, rgba(255, 215, 0, 0.08) 85%, transparent 100%)', + border: 'none', + borderRadius: '0', + padding: '32px 24px 48px 24px', + margin: '0 -24px 0 -', + boxShadow: isDark + ? '0 16px 48px rgba(255, 215, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1)' + : '0 16px 48px rgba(255, 215, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3)', + position: 'relative' as const, + overflow: 'hidden', + } +} + // 获取排名图标 function getRankIcon(rank: number) { if (rank === 1) return 'mdi-trophy' @@ -109,18 +128,25 @@ onMounted(() => { - +
{{ t('subscribe.noStatisticsData') }}
-
+
-
-
{{ t('subscribe.ranking') }}
-
+
+ +
+
+
+
+
+
{{ t('subscribe.ranking') }}
+ +
@@ -193,24 +219,86 @@ onMounted(() => {
+ + +
+ +
+
+ +
+
+ {{ rankedStatistics[0].share_user || '未知' }} +
+
+
+ + {{ rankedStatistics[0].share_count || 0 }} +
+
+ + {{ + rankedStatistics[0].total_reuse_count || 0 + }} +
+
+
+ + +
+
+ +
+
+ {{ rankedStatistics[1].share_user || '未知' }} +
+
+
+ + {{ rankedStatistics[1].share_count || 0 }} +
+
+ + {{ + rankedStatistics[1].total_reuse_count || 0 + }} +
+
+
+ + +
+
+ +
+
+ {{ rankedStatistics[2].share_user || '未知' }} +
+
+
+ + + {{ rankedStatistics[2].share_count || 0 }} + +
+
+ + + {{ rankedStatistics[2].total_reuse_count || 0 }} + +
+
+
+
- -
{{ t('subscribe.ranking') }}
- + - - {{ item.share_user || '未知' }} @@ -303,4 +391,87 @@ onMounted(() => { .podium-stat:hover { transform: scale(1.05); } + +/* 前三名区域样式 */ +.podium-area { + position: relative; + z-index: 1; +} + +.podium-title { + position: relative; + z-index: 2; + color: #fff !important; + font-weight: bold; + text-shadow: 0 2px 4px rgba(0, 0, 0, 30%); +} + +/* 装饰性元素 */ +.podium-decoration { + position: absolute; + z-index: 0; + inset: 0; + pointer-events: none; +} + +.decoration-circle { + position: absolute; + border-radius: 50%; + animation: float 6s ease-in-out infinite; + background: radial-gradient(circle, rgba(255, 255, 255, 10%) 0%, transparent 70%); +} + +.decoration-1 { + animation-delay: 0s; + block-size: 80px; + inline-size: 80px; + inset-block-start: 10%; + inset-inline-start: 10%; +} + +.decoration-2 { + animation-delay: 2s; + block-size: 60px; + inline-size: 60px; + inset-block-start: 20%; + inset-inline-end: 15%; +} + +.decoration-3 { + animation-delay: 4s; + block-size: 40px; + inline-size: 40px; + inset-block-end: 20%; + inset-inline-start: 20%; +} + +@keyframes float { + 0%, + 100% { + opacity: 0.6; + transform: translateY(0) rotate(0deg); + } + + 50% { + opacity: 1; + transform: translateY(-10px) rotate(180deg); + } +} + +/* 增强前三名文字效果 */ +.podium-area .text-h6, +.podium-area .text-h5 { + font-weight: bold; + text-shadow: 0 2px 4px rgba(0, 0, 0, 30%); +} + +.podium-area .rank-circle { + border: 2px solid rgba(255, 255, 255, 20%); + box-shadow: 0 8px 24px rgba(0, 0, 0, 30%); +} + +.podium-area .first-place { + border: 3px solid rgba(255, 215, 0, 50%); + box-shadow: 0 12px 32px rgba(255, 215, 0, 40%); +}