From 495d23317d614f92623f595c9094188d11f1f66d Mon Sep 17 00:00:00 2001
From: woody <woody@163>
Date: Thu, 25 Sep 2025 14:31:39 +0800
Subject: [PATCH] =?UTF-8?q?feat(ranking):=20=E5=BC=B9=E7=AA=97=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/RankingPopup.vue | 475 +++++++++++++++++++++++++++++-------
 1 file changed, 384 insertions(+), 91 deletions(-)

diff --git a/components/RankingPopup.vue b/components/RankingPopup.vue
index aa1dac8..d521c55 100644
--- a/components/RankingPopup.vue
+++ b/components/RankingPopup.vue
@@ -78,9 +78,9 @@
 
         <!-- 4-30名滚动列表 -->
         <view class="ranking-list">
-          <view class="list-header">
+          <!-- <view class="list-header">
             <text class="list-title">完整排行榜</text>
-          </view>
+          </view> -->
           <scroll-view
             class="scroll-container"
             scroll-y="true"
@@ -204,9 +204,9 @@
 
         <!-- 4-30名滚动列表 -->
         <view class="ranking-list">
-          <view class="list-header">
+          <!-- <view class="list-header">
             <text class="list-title">完整排行榜</text>
-          </view>
+          </view> -->
           <scroll-view
             class="scroll-container"
             scroll-y="true"
@@ -398,77 +398,128 @@ export default {
 .popup-container {
   width: 100%;
   height: 100%;
-  background: linear-gradient(135deg, #005bac 0%, #0077cc 50%, #003d7a 100%);
+  background: linear-gradient(
+    135deg,
+    #003d7a 0%,
+    #005bac 30%,
+    #0077cc 70%,
+    #4a90e2 100%
+  );
   border-radius: 20rpx;
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  position: relative;
+
+  // 添加微妙的光效
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(
+      ellipse at 30% 20%,
+      rgba(255, 255, 255, 0.1) 0%,
+      transparent 50%
+    );
+    pointer-events: none;
+    z-index: 1;
+  }
+}
+
+@keyframes sparkle {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-100rpx);
+  }
 }
 
 .popup-header {
   padding: 30rpx 40rpx 20rpx;
   flex-shrink: 0;
+  position: relative;
+  z-index: 2;
 
   .header-title {
-    font-size: 36rpx;
+    font-size: 38rpx;
     font-weight: bold;
-    color: #fff;
-    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
+    color: #ffffff;
+    text-shadow:
+      0 2rpx 8rpx rgba(0, 0, 0, 0.6),
+      0 0 15rpx rgba(74, 144, 226, 0.8),
+      0 0 25rpx rgba(255, 255, 255, 0.4);
     text-align: center;
+    position: relative;
+    animation: title-bling 2s ease-in-out infinite alternate;
   }
 }
 
 .top-three-section {
-  padding: 40rpx 20rpx;
+  padding: 20rpx 20rpx 40rpx;
   flex-shrink: 0;
-  background: linear-gradient(
-    180deg,
-    rgba(255, 255, 255, 0.05) 0%,
-    transparent 100%
-  );
+  position: relative;
+  z-index: 2;
 }
 
 .podium-container {
   display: flex;
   justify-content: center;
-  align-items: center;
-  // height: 320rpx;
+  align-items: flex-end;
   position: relative;
-  // padding: 30rpx 20rpx;
-  // background: rgba(255, 255, 255, 0.05);
-  border-radius: 25rpx;
   margin: 0 10rpx;
-  .second-place {
-  }
+  height: 290rpx;
+
+  // 添加领奖台基座
+  // &::after {
+  //   content: '';
+  //   position: absolute;
+  //   bottom: 0;
+  //   left: 50%;
+  //   transform: translateX(-50%);
+  //   width: 85%;
+  //   height: 30rpx;
+  //   background: linear-gradient(135deg, #424242 0%, #616161 50%, #424242 100%);
+  //   border-radius: 15rpx 15rpx 0 0;
+  //   box-shadow: 0 -6rpx 20rpx rgba(0, 0, 0, 0.3);
+  // }
 }
 
 .podium-item {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin: 0 15rpx;
   position: relative;
+  margin: 0 8rpx;
 
   .player-area {
     border-radius: 20rpx;
-    // padding: 25rpx 18rpx;
     min-width: 140rpx;
     text-align: center;
     transition: all 0.3s ease;
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-end;
+    position: relative;
+    z-index: 3;
   }
 
-  .crown {
-    position: absolute;
-    top: -25rpx;
-    font-size: 50rpx;
-    z-index: 10;
-    filter: drop-shadow(0 4rpx 12rpx rgba(255, 215, 0, 0.4));
-    animation: crown-bounce 2s ease-in-out infinite;
-  }
+  // 创建领奖台台阶
+  // &::after {
+  //   content: '';
+  //   position: absolute;
+  //   bottom: 0;
+  //   left: 50%;
+  //   transform: translateX(-50%);
+  //   border-radius: 12rpx 12rpx 0 0;
+  //   box-shadow:
+  //     0 -6rpx 15rpx rgba(0, 0, 0, 0.25),
+  //     inset 0 3rpx 6rpx rgba(255, 255, 255, 0.15);
+  // }
 
   .rank-number {
     border-radius: 50%;
@@ -479,99 +530,259 @@ export default {
     font-weight: bold;
     color: #fff;
     margin-bottom: 15rpx;
+    position: relative;
 
     img {
-      height: 60rpx;
-      width: 60rpx;
+      filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.3));
+      transition: all 0.3s ease;
     }
   }
 
   .member-name {
-    font-size: 26rpx;
+    font-size: 24rpx;
     color: #fff;
     text-align: center;
-    margin-bottom: 8rpx;
+
     font-weight: bold;
-    text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.4);
-    max-width: 120rpx;
+    max-width: 110rpx;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 
-    &.highlight {
-      color: #ffd700;
-      text-shadow: 0 2rpx 8rpx rgba(255, 215, 0, 0.6);
-    }
+    padding: 6rpx 10rpx;
+    border-radius: 15rpx;
   }
 
   .member-code {
-    color: rgba(255, 255, 255, 0.8);
+    color: #fff;
     text-align: center;
-    margin-bottom: 10rpx;
+    margin-bottom: 8rpx;
     font-size: 24rpx;
+    font-weight: 600;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+
+    padding: 4rpx 8rpx;
+    border-radius: 12rpx;
+
+    backdrop-filter: blur(5rpx);
   }
 
   .score {
     font-size: 22rpx;
     color: #fff;
-    background: linear-gradient(
-      135deg,
-      rgba(255, 255, 255, 0.25) 0%,
-      rgba(255, 255, 255, 0.15) 100%
-    );
-    padding: 8rpx 16rpx;
-    border-radius: 20rpx;
     font-weight: bold;
-    border: 1rpx solid rgba(255, 255, 255, 0.3);
-    text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
+    min-width: 60rpx;
+    text-align: center;
   }
 }
 
+// 第二名台阶
+.second-place {
+  .player-area {
+    transform: translateY(10rpx);
+  }
+  &::after {
+    width: 130rpx;
+    height: 100rpx;
+    background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 50%, #c0c0c0 100%);
+  }
+
+  .rank-number img {
+    height: 70rpx;
+    width: 70rpx;
+    animation: silver-glow 2s ease-in-out infinite alternate;
+  }
+}
+
+// 第一名台阶 - 最高
 .first-place {
-  .score {
-    background: linear-gradient(
-      135deg,
-      rgba(255, 215, 0, 0.3) 0%,
-      rgba(255, 215, 0, 0.15) 100%
-    );
-    border-color: rgba(255, 215, 0, 0.4);
+  .player-area {
+    transform: translateY(-40rpx);
+  }
+
+  &::after {
+    width: 150rpx;
+    height: 140rpx;
+    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
+    box-shadow:
+      0 -8rpx 20rpx rgba(0, 0, 0, 0.3),
+      inset 0 3rpx 6rpx rgba(255, 255, 255, 0.3),
+      0 0 25rpx rgba(255, 215, 0, 0.4);
+  }
+
+  .rank-number img {
+    height: 80rpx;
+    width: 80rpx;
+    animation: champion-glow 2s ease-in-out infinite alternate;
+  }
+
+  .member-name {
+    font-size: 28rpx;
     color: #ffd700;
+    animation: champion-text-glow 2s ease-in-out infinite alternate;
+  }
+
+  .member-code {
+    font-size: 22rpx;
+    color: #ffd700;
+    font-weight: 600;
+  }
+
+  .score {
+    color: #ffd700;
+    font-size: 24rpx;
+    font-weight: 900;
+    min-width: 70rpx;
   }
 }
 
-@keyframes crown-bounce {
-  0%,
-  100% {
-    transform: translateY(0);
+// 第三名台阶
+.third-place {
+  .player-area {
+    transform: translateY(10rpx);
   }
-  50% {
-    transform: translateY(-8rpx);
+  &::after {
+    width: 110rpx;
+    height: 80rpx;
+    background: linear-gradient(135deg, #cd7f32 0%, #deb887 50%, #cd7f32 100%);
+  }
+
+  .rank-number img {
+    height: 65rpx;
+    width: 65rpx;
+    animation: bronze-glow 2s ease-in-out infinite alternate;
+  }
+}
+
+@keyframes title-bling {
+  0% {
+    text-shadow:
+      0 2rpx 8rpx rgba(0, 0, 0, 0.6),
+      0 0 15rpx rgba(74, 144, 226, 0.8),
+      0 0 25rpx rgba(255, 255, 255, 0.4);
+  }
+  100% {
+    text-shadow:
+      0 2rpx 8rpx rgba(0, 0, 0, 0.6),
+      0 0 25rpx rgba(74, 144, 226, 1),
+      0 0 35rpx rgba(255, 255, 255, 0.7),
+      0 0 45rpx rgba(0, 119, 204, 0.5);
+  }
+}
+
+@keyframes golden-pulse {
+  0% {
+    background: radial-gradient(
+      ellipse at center,
+      rgba(255, 215, 0, 0.2) 0%,
+      transparent 70%
+    );
+  }
+  100% {
+    background: radial-gradient(
+      ellipse at center,
+      rgba(255, 215, 0, 0.4) 0%,
+      transparent 70%
+    );
+  }
+}
+
+@keyframes champion-glow {
+  0% {
+    filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.3))
+      drop-shadow(0 0 10rpx rgba(255, 215, 0, 0.3));
+    transform: scale(1);
+  }
+  100% {
+    filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.3))
+      drop-shadow(0 0 20rpx rgba(255, 215, 0, 0.6));
+    transform: scale(1.05);
+  }
+}
+
+@keyframes champion-text-glow {
+  0% {
+    text-shadow: 0 2rpx 8rpx rgba(255, 215, 0, 0.8);
+  }
+  100% {
+    text-shadow:
+      0 2rpx 8rpx rgba(255, 215, 0, 0.8),
+      0 0 15rpx rgba(255, 215, 0, 0.5);
+  }
+}
+
+@keyframes silver-glow {
+  0% {
+    filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.3))
+      drop-shadow(0 0 8rpx rgba(192, 192, 192, 0.3));
+  }
+  100% {
+    filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.3))
+      drop-shadow(0 0 15rpx rgba(192, 192, 192, 0.5));
+  }
+}
+
+@keyframes bronze-glow {
+  0% {
+    filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.3))
+      drop-shadow(0 0 8rpx rgba(205, 127, 50, 0.3));
+  }
+  100% {
+    filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.3))
+      drop-shadow(0 0 15rpx rgba(205, 127, 50, 0.5));
   }
 }
 
 .ranking-list {
   flex: 1;
-  background: rgba(255, 255, 255, 0.95);
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.98) 0%,
+    rgba(248, 250, 252, 0.95) 100%
+  );
   margin: 20rpx 20rpx 0 20rpx;
-  border-radius: 20rpx 20rpx 0 0;
+  border-radius: 25rpx 25rpx 0 0;
   overflow: hidden;
-  backdrop-filter: blur(10rpx);
+  backdrop-filter: blur(15rpx);
   display: flex;
   flex-direction: column;
+  position: relative;
+  z-index: 2;
+  box-shadow:
+    0 -8rpx 25rpx rgba(0, 0, 0, 0.1),
+    inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
 }
 
 .list-header {
   padding: 30rpx 40rpx 20rpx;
-  border-bottom: 2rpx solid #f0f0f0;
+  border-bottom: 2rpx solid rgba(139, 69, 19, 0.1);
   flex-shrink: 0;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.9) 0%,
+    rgba(248, 250, 252, 0.8) 100%
+  );
 
   .list-title {
     font-size: 28rpx;
     font-weight: bold;
-    color: #333;
+    color: #2d3748;
+    position: relative;
+    text-align: center;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -8rpx;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 60rpx;
+      height: 3rpx;
+      background: linear-gradient(90deg, transparent, #9c27b0, transparent);
+      border-radius: 2rpx;
+    }
   }
 }
 
@@ -583,45 +794,82 @@ export default {
 .list-item {
   display: flex;
   align-items: center;
-  padding: 20rpx 40rpx;
-  border-bottom: 1rpx solid #f5f5f5;
+  padding: 24rpx 40rpx;
+  border-bottom: 1rpx solid rgba(226, 232, 240, 0.8);
+  position: relative;
+  transition: all 0.3s ease;
 
   &:last-child {
     border-bottom: none;
   }
 
+  &:hover {
+    background: linear-gradient(
+      135deg,
+      rgba(159, 122, 234, 0.05) 0%,
+      rgba(139, 92, 246, 0.03) 100%
+    );
+    transform: translateX(5rpx);
+  }
+
   .item-rank {
-    width: 80rpx;
     font-size: 24rpx;
     font-weight: bold;
-    color: #666;
+    color: #64748b;
     text-align: center;
     margin-right: 20rpx;
+    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+    border-radius: 50%;
+    width: 60rpx;
+    height: 60rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
   }
 
   .item-info {
     flex: 1;
     display: flex;
     flex-direction: column;
+    margin-left: 15rpx;
   }
 
   .item-name {
-    font-size: 26rpx;
-    color: #333;
+    font-size: 28rpx;
+    color: #1e293b;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    margin-bottom: 4rpx;
+    margin-bottom: 6rpx;
+    font-weight: 600;
 
     &.highlight {
-      color: #005bac;
+      color: #7c3aed;
       font-weight: bold;
+      background: linear-gradient(135deg, #7c3aed, #a855f7);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: -8rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 4rpx;
+        height: 20rpx;
+        background: linear-gradient(135deg, #7c3aed, #a855f7);
+        border-radius: 2rpx;
+      }
     }
   }
 
   .item-code {
-    font-size: 20rpx;
-    color: #999;
+    font-size: 22rpx;
+    color: #64748b;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -629,10 +877,12 @@ export default {
 
   .item-score {
     font-size: 24rpx;
-    color: #666;
+    color: #374151;
     font-weight: bold;
     min-width: 100rpx;
-    text-align: right;
+    text-align: center;
+    padding: 8rpx 16rpx;
+    border-radius: 20rpx;
   }
 }
 
@@ -641,29 +891,72 @@ export default {
   text-align: center;
 
   .empty-text {
-    font-size: 24rpx;
-    color: #999;
+    font-size: 26rpx;
+    color: #64748b;
+    font-style: italic;
   }
 }
 
 .popup-footer {
-  padding: 20rpx 40rpx 30rpx;
+  padding: 25rpx 40rpx 35rpx;
   flex-shrink: 0;
+  position: relative;
+  z-index: 2;
 
   .close-text-btn {
-    background: rgba(255, 255, 255, 0.9);
+    background: linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0.95) 0%,
+      rgba(248, 250, 252, 0.9) 100%
+    );
     color: #005bac;
     text-align: center;
-    padding: 24rpx 40rpx;
+    padding: 28rpx 50rpx;
     border-radius: 50rpx;
-    font-size: 28rpx;
+    font-size: 30rpx;
     font-weight: bold;
-    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+    box-shadow:
+      0 8rpx 25rpx rgba(0, 0, 0, 0.15),
+      inset 0 1rpx 0 rgba(255, 255, 255, 0.8),
+      0 0 0 1rpx rgba(0, 91, 172, 0.3);
     transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(255, 255, 255, 0.4),
+        transparent
+      );
+      transition: left 0.5s ease;
+    }
 
     &:active {
       transform: scale(0.98);
-      background: rgba(255, 255, 255, 0.8);
+      background: linear-gradient(
+        135deg,
+        rgba(248, 250, 252, 0.9) 0%,
+        rgba(241, 245, 249, 0.85) 100%
+      );
+      box-shadow:
+        0 4rpx 15rpx rgba(0, 0, 0, 0.1),
+        inset 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+
+      &::before {
+        left: 100%;
+      }
+    }
+
+    &:hover::before {
+      left: 100%;
     }
   }
 }