1403 lines
29 KiB
Plaintext
1403 lines
29 KiB
Plaintext
/* pages/dashou-paihang/dashou-paihang.wxss */
|
||
|
||
/* ========== 基础页面样式 ========== */
|
||
.dashou-paihang-page {
|
||
min-height: 100vh;
|
||
background: #000;
|
||
color: #fff;
|
||
position: relative;
|
||
overflow-x: hidden;
|
||
padding: 40rpx 30rpx;
|
||
box-sizing: border-box;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||
}
|
||
|
||
/* ========== 赛博朋克背景 ========== */
|
||
.cyber-bg {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 1;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.cyber-grid {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-image:
|
||
linear-gradient(rgba(0, 255, 255, 0.05) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px);
|
||
background-size: 50rpx 50rpx;
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.cyber-scanline {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3rpx;
|
||
background: linear-gradient(90deg,
|
||
transparent 0%,
|
||
#00ffff 30%,
|
||
#ff00ff 50%,
|
||
#00ffff 70%,
|
||
transparent 100%);
|
||
animation: scanline 3s linear infinite;
|
||
filter: blur(1rpx);
|
||
box-shadow: 0 0 20rpx #00ffff;
|
||
z-index: 2;
|
||
}
|
||
|
||
@keyframes scanline {
|
||
0% { top: 0; }
|
||
100% { top: 100%; }
|
||
}
|
||
|
||
.data-streams {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.stream {
|
||
position: absolute;
|
||
width: 1rpx;
|
||
height: 100rpx;
|
||
background: linear-gradient(to bottom, transparent, #00ffff, transparent);
|
||
filter: blur(0.5rpx);
|
||
animation: streamFlow 8s linear infinite;
|
||
}
|
||
|
||
.stream-1 {
|
||
left: 20%;
|
||
animation-delay: 0s;
|
||
}
|
||
|
||
.stream-2 {
|
||
left: 50%;
|
||
animation-delay: 2s;
|
||
}
|
||
|
||
.stream-3 {
|
||
left: 80%;
|
||
animation-delay: 4s;
|
||
}
|
||
|
||
@keyframes streamFlow {
|
||
0% {
|
||
top: -100rpx;
|
||
opacity: 0;
|
||
}
|
||
10% {
|
||
opacity: 1;
|
||
}
|
||
90% {
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
top: 100%;
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.floating-particles {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
}
|
||
|
||
.particle {
|
||
position: absolute;
|
||
width: 6rpx;
|
||
height: 6rpx;
|
||
background: #00ffff;
|
||
border-radius: 50%;
|
||
filter: blur(1rpx);
|
||
box-shadow: 0 0 10rpx #00ffff;
|
||
animation: particleFloat 20s infinite linear;
|
||
}
|
||
|
||
.particle:nth-child(odd) {
|
||
background: #ff00ff;
|
||
box-shadow: 0 0 10rpx #ff00ff;
|
||
}
|
||
|
||
@keyframes particleFloat {
|
||
0%, 100% {
|
||
transform: translate(0, 0);
|
||
}
|
||
25% {
|
||
transform: translate(100rpx, -100rpx);
|
||
}
|
||
50% {
|
||
transform: translate(-50rpx, 150rpx);
|
||
}
|
||
75% {
|
||
transform: translate(150rpx, 50rpx);
|
||
}
|
||
}
|
||
|
||
/* ========== 页面头部 ========== */
|
||
.page-header {
|
||
position: relative;
|
||
z-index: 10;
|
||
margin-bottom: 60rpx;
|
||
}
|
||
|
||
.title-container {
|
||
text-align: center;
|
||
margin-bottom: 50rpx;
|
||
}
|
||
|
||
.main-title {
|
||
display: block;
|
||
font-size: 60rpx;
|
||
font-weight: 900;
|
||
background: linear-gradient(90deg, #00ffff, #ff00ff, #ffff00);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
text-shadow: 0 0 30rpx rgba(0, 255, 255, 0.5);
|
||
letter-spacing: 4rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.title-line {
|
||
width: 200rpx;
|
||
height: 3rpx;
|
||
background: linear-gradient(90deg, transparent, #00ffff, #ff00ff, transparent);
|
||
margin: 15rpx auto;
|
||
position: relative;
|
||
}
|
||
|
||
.title-line::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -2rpx;
|
||
left: 0;
|
||
right: 0;
|
||
height: 7rpx;
|
||
background: linear-gradient(90deg,
|
||
transparent 0%,
|
||
rgba(0, 255, 255, 0.3) 20%,
|
||
rgba(255, 0, 255, 0.3) 80%,
|
||
transparent 100%);
|
||
filter: blur(4rpx);
|
||
}
|
||
|
||
.sub-title {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
letter-spacing: 8rpx;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.toggle-container {
|
||
display: flex;
|
||
background: rgba(10, 10, 30, 0.8);
|
||
border-radius: 60rpx;
|
||
padding: 6rpx;
|
||
position: relative;
|
||
border: 1rpx solid rgba(0, 255, 255, 0.2);
|
||
backdrop-filter: blur(20rpx);
|
||
max-width: 400rpx;
|
||
margin: 0 auto;
|
||
box-shadow:
|
||
0 10rpx 40rpx rgba(0, 0, 0, 0.8),
|
||
inset 0 0 20rpx rgba(0, 255, 255, 0.05);
|
||
}
|
||
|
||
.toggle-bg {
|
||
position: absolute;
|
||
top: 6rpx;
|
||
bottom: 6rpx;
|
||
width: 50%;
|
||
background: linear-gradient(90deg,
|
||
rgba(0, 255, 255, 0.15),
|
||
rgba(255, 0, 255, 0.15));
|
||
border-radius: 54rpx;
|
||
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||
z-index: 1;
|
||
}
|
||
|
||
.toggle-btn {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 28rpx 0;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
position: relative;
|
||
z-index: 2;
|
||
transition: all 0.3s ease;
|
||
border-radius: 54rpx;
|
||
}
|
||
|
||
.toggle-btn.active {
|
||
color: #ffffff;
|
||
text-shadow: 0 0 15rpx rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
.toggle-btn.disabled {
|
||
opacity: 0.5;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.toggle-text {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.toggle-line {
|
||
position: absolute;
|
||
bottom: 15rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 40rpx;
|
||
height: 3rpx;
|
||
background: linear-gradient(90deg, #00ffff, #ff00ff);
|
||
border-radius: 2rpx;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.toggle-line.active {
|
||
opacity: 1;
|
||
box-shadow: 0 0 15rpx rgba(0, 255, 255, 0.5);
|
||
}
|
||
|
||
/* ========== 加载状态 ========== */
|
||
.loading-state {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 60vh;
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.loading-content {
|
||
text-align: center;
|
||
}
|
||
|
||
.loading-spinner {
|
||
position: relative;
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
margin: 0 auto 30rpx;
|
||
}
|
||
|
||
.spinner-outer {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
border: 8rpx solid transparent;
|
||
border-top-color: #00ffff;
|
||
border-right-color: #ff00ff;
|
||
border-radius: 50%;
|
||
animation: spinOuter 2s linear infinite;
|
||
}
|
||
|
||
.spinner-inner {
|
||
position: absolute;
|
||
top: 15rpx;
|
||
left: 15rpx;
|
||
right: 15rpx;
|
||
bottom: 15rpx;
|
||
border: 6rpx solid transparent;
|
||
border-bottom-color: #ffff00;
|
||
border-left-color: #00ffff;
|
||
border-radius: 50%;
|
||
animation: spinInner 1.5s linear infinite reverse;
|
||
}
|
||
|
||
.spinner-core {
|
||
position: absolute;
|
||
top: 30rpx;
|
||
left: 30rpx;
|
||
right: 30rpx;
|
||
bottom: 30rpx;
|
||
background: radial-gradient(circle,
|
||
rgba(0, 255, 255, 0.2) 0%,
|
||
rgba(255, 0, 255, 0.1) 50%,
|
||
transparent 100%);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
@keyframes spinOuter {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
@keyframes spinInner {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(-360deg); }
|
||
}
|
||
|
||
.loading-text {
|
||
display: block;
|
||
font-size: 32rpx;
|
||
color: #00ffff;
|
||
margin-bottom: 10rpx;
|
||
text-shadow: 0 0 10rpx rgba(0, 255, 255, 0.5);
|
||
}
|
||
|
||
.loading-sub {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
|
||
/* ========== 虚拟数据提示 ========== */
|
||
.demo-notice {
|
||
background: rgba(15, 15, 35, 0.9);
|
||
border-radius: 25rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 40rpx;
|
||
position: relative;
|
||
z-index: 10;
|
||
border: 1rpx solid rgba(255, 0, 255, 0.3);
|
||
backdrop-filter: blur(20rpx);
|
||
display: flex;
|
||
align-items: center;
|
||
overflow: hidden;
|
||
box-shadow:
|
||
0 10rpx 40rpx rgba(0, 0, 0, 0.8),
|
||
0 0 30rpx rgba(255, 0, 255, 0.2);
|
||
}
|
||
|
||
.notice-icon {
|
||
font-size: 60rpx;
|
||
margin-right: 30rpx;
|
||
background: linear-gradient(45deg, #ff00ff, #00ffff);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.notice-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.notice-title {
|
||
display: block;
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #ff00ff;
|
||
margin-bottom: 10rpx;
|
||
text-shadow: 0 0 15rpx rgba(255, 0, 255, 0.5);
|
||
}
|
||
|
||
.notice-desc {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.notice-glow {
|
||
position: absolute;
|
||
top: -100%;
|
||
left: -100%;
|
||
right: -100%;
|
||
bottom: -100%;
|
||
background: radial-gradient(circle at center,
|
||
rgba(255, 0, 255, 0.1) 0%,
|
||
transparent 70%);
|
||
z-index: -1;
|
||
}
|
||
|
||
/* ========== 前三名区域 ========== */
|
||
.top-three-section {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-end;
|
||
position: relative;
|
||
z-index: 10;
|
||
margin-bottom: 50rpx;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.rank-card {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.rank-1 {
|
||
width: 280rpx;
|
||
z-index: 30;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.rank-2 {
|
||
width: 220rpx;
|
||
z-index: 20;
|
||
margin-bottom: 0rpx;
|
||
margin-right: -20rpx;
|
||
}
|
||
|
||
.rank-3 {
|
||
width: 220rpx;
|
||
z-index: 20;
|
||
margin-bottom: 0rpx;
|
||
margin-left: -20rpx;
|
||
}
|
||
|
||
.rank-card.flash {
|
||
animation: cardFlash 0.4s ease-out;
|
||
}
|
||
|
||
@keyframes cardFlash {
|
||
0% {
|
||
filter: brightness(1) drop-shadow(0 0 0 rgba(255, 255, 255, 0));
|
||
}
|
||
50% {
|
||
filter: brightness(1.4) drop-shadow(0 0 40rpx rgba(255, 255, 255, 0.8));
|
||
}
|
||
100% {
|
||
filter: brightness(1) drop-shadow(0 0 0 rgba(255, 255, 255, 0));
|
||
}
|
||
}
|
||
|
||
/* 奖台底座 */
|
||
.podium-base {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 60rpx;
|
||
border-radius: 30rpx 30rpx 0 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1;
|
||
}
|
||
|
||
.rank-1 .podium-base {
|
||
height: 80rpx;
|
||
}
|
||
|
||
.podium-gold {
|
||
background: linear-gradient(180deg,
|
||
rgba(255, 215, 0, 0.3) 0%,
|
||
rgba(255, 215, 0, 0.1) 100%);
|
||
border: 1rpx solid rgba(255, 215, 0, 0.4);
|
||
}
|
||
|
||
.podium-silver {
|
||
background: linear-gradient(180deg,
|
||
rgba(192, 192, 192, 0.3) 0%,
|
||
rgba(192, 192, 192, 0.1) 100%);
|
||
border: 1rpx solid rgba(192, 192, 192, 0.4);
|
||
}
|
||
|
||
.podium-bronze {
|
||
background: linear-gradient(180deg,
|
||
rgba(205, 127, 50, 0.3) 0%,
|
||
rgba(205, 127, 50, 0.1) 100%);
|
||
border: 1rpx solid rgba(205, 127, 50, 0.4);
|
||
}
|
||
|
||
.podium-glow {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
border-radius: 30rpx 30rpx 0 0;
|
||
background: radial-gradient(ellipse at center,
|
||
rgba(255, 255, 255, 0.2) 0%,
|
||
transparent 70%);
|
||
z-index: -1;
|
||
}
|
||
|
||
.podium-number {
|
||
font-size: 32rpx;
|
||
font-weight: 900;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
text-shadow: 0 0 10rpx currentColor;
|
||
}
|
||
|
||
/* 皇冠 */
|
||
.crown-container {
|
||
position: absolute;
|
||
top: -100rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
z-index: 40;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.crown {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.crown-icon {
|
||
font-size: 90rpx;
|
||
position: relative;
|
||
z-index: 2;
|
||
filter: drop-shadow(0 0 10rpx rgba(255, 215, 0, 0.8));
|
||
animation: crownFloat 3s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes crownFloat {
|
||
0%, 100% {
|
||
transform: translateY(0) rotate(0deg);
|
||
filter: drop-shadow(0 0 10rpx rgba(255, 215, 0, 0.8));
|
||
}
|
||
50% {
|
||
transform: translateY(-20rpx) rotate(5deg);
|
||
filter: drop-shadow(0 0 30rpx rgba(255, 215, 0, 1));
|
||
}
|
||
}
|
||
|
||
.crown-rays {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
z-index: 1;
|
||
}
|
||
|
||
.ray {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 2rpx;
|
||
height: 80rpx;
|
||
background: linear-gradient(to top,
|
||
transparent,
|
||
rgba(255, 215, 0, 0.8),
|
||
rgba(255, 215, 0, 1),
|
||
rgba(255, 215, 0, 0.8),
|
||
transparent);
|
||
transform-origin: bottom center;
|
||
filter: blur(1rpx);
|
||
}
|
||
|
||
.ray-1 { transform: translate(-50%, -100%) rotate(0deg); }
|
||
.ray-2 { transform: translate(-50%, -100%) rotate(60deg); }
|
||
.ray-3 { transform: translate(-50%, -100%) rotate(120deg); }
|
||
.ray-4 { transform: translate(-50%, -100%) rotate(180deg); }
|
||
.ray-5 { transform: translate(-50%, -100%) rotate(240deg); }
|
||
.ray-6 { transform: translate(-50%, -100%) rotate(300deg); }
|
||
|
||
.crown-glow {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
background: radial-gradient(circle,
|
||
rgba(255, 215, 0, 0.3) 0%,
|
||
rgba(255, 215, 0, 0.1) 40%,
|
||
transparent 70%);
|
||
z-index: 0;
|
||
animation: glowPulse 2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes glowPulse {
|
||
0%, 100% { opacity: 0.5; }
|
||
50% { opacity: 0.8; }
|
||
}
|
||
|
||
/* 排名内容 */
|
||
.rank-content {
|
||
position: relative;
|
||
width: 100%;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* 头像框架 */
|
||
.avatar-frame {
|
||
position: relative;
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
margin: 0 auto 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.rank-1 .avatar-frame {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
}
|
||
|
||
.frame-gold {
|
||
filter: drop-shadow(0 0 30rpx rgba(255, 215, 0, 0.5));
|
||
}
|
||
|
||
.frame-silver {
|
||
filter: drop-shadow(0 0 25rpx rgba(192, 192, 192, 0.5));
|
||
}
|
||
|
||
.frame-bronze {
|
||
filter: drop-shadow(0 0 25rpx rgba(205, 127, 50, 0.5));
|
||
}
|
||
|
||
.avatar-container {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
background: rgba(20, 20, 40, 0.8);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 4rpx solid transparent;
|
||
}
|
||
|
||
.rank-1 .avatar-container {
|
||
border-width: 6rpx;
|
||
}
|
||
|
||
.frame-gold .avatar-container {
|
||
border-color: rgba(255, 215, 0, 0.3);
|
||
}
|
||
|
||
.frame-silver .avatar-container {
|
||
border-color: rgba(192, 192, 192, 0.3);
|
||
}
|
||
|
||
.frame-bronze .avatar-container {
|
||
border-color: rgba(205, 127, 50, 0.3);
|
||
}
|
||
|
||
.avatar-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* 头像光晕 */
|
||
.avatar-halo {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
border-radius: 50%;
|
||
z-index: 1;
|
||
pointer-events: none;
|
||
animation: haloRotate 10s linear infinite;
|
||
}
|
||
|
||
.halo-gold {
|
||
width: 220rpx;
|
||
height: 220rpx;
|
||
background: radial-gradient(circle,
|
||
rgba(255, 215, 0, 0.4) 0%,
|
||
rgba(255, 215, 0, 0.2) 30%,
|
||
transparent 70%);
|
||
}
|
||
|
||
.rank-1 .halo-gold {
|
||
width: 260rpx;
|
||
height: 260rpx;
|
||
}
|
||
|
||
.halo-silver {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
background: radial-gradient(circle,
|
||
rgba(192, 192, 192, 0.4) 0%,
|
||
rgba(192, 192, 192, 0.2) 30%,
|
||
transparent 70%);
|
||
}
|
||
|
||
.halo-bronze {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
background: radial-gradient(circle,
|
||
rgba(205, 127, 50, 0.4) 0%,
|
||
rgba(205, 127, 50, 0.2) 30%,
|
||
transparent 70%);
|
||
}
|
||
|
||
@keyframes haloRotate {
|
||
0% { transform: translate(-50%, -50%) rotate(0deg); }
|
||
100% { transform: translate(-50%, -50%) rotate(360deg); }
|
||
}
|
||
|
||
/* 头像闪烁粒子 */
|
||
.avatar-sparkles {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
border-radius: 50%;
|
||
z-index: 3;
|
||
}
|
||
|
||
.sparkle {
|
||
position: absolute;
|
||
width: 8rpx;
|
||
height: 8rpx;
|
||
background: #fff;
|
||
border-radius: 50%;
|
||
filter: blur(1rpx);
|
||
opacity: 0;
|
||
animation: sparkleTwinkle 3s ease-in-out infinite;
|
||
}
|
||
|
||
.rank-1 .sparkle {
|
||
width: 10rpx;
|
||
height: 10rpx;
|
||
}
|
||
|
||
.s1 { top: 15%; left: 15%; animation-delay: 0s; }
|
||
.s2 { top: 25%; right: 25%; animation-delay: 0.5s; }
|
||
.s3 { bottom: 35%; left: 35%; animation-delay: 1s; }
|
||
.s4 { bottom: 15%; right: 15%; animation-delay: 1.5s; }
|
||
|
||
@keyframes sparkleTwinkle {
|
||
0%, 100% {
|
||
opacity: 0;
|
||
transform: scale(0.5);
|
||
}
|
||
50% {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
/* 排名徽章 */
|
||
.rank-badge {
|
||
position: absolute;
|
||
bottom: -10rpx;
|
||
right: -10rpx;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
font-weight: 900;
|
||
color: #fff;
|
||
z-index: 10;
|
||
border: 3rpx solid rgba(255, 255, 255, 0.3);
|
||
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.rank-1 .rank-badge {
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
font-size: 32rpx;
|
||
bottom: -15rpx;
|
||
right: -15rpx;
|
||
}
|
||
|
||
.badge-gold {
|
||
background: linear-gradient(135deg, #ffd700, #ff9800);
|
||
}
|
||
|
||
.badge-silver {
|
||
background: linear-gradient(135deg, #c0c0c0, #808080);
|
||
}
|
||
|
||
.badge-bronze {
|
||
background: linear-gradient(135deg, #cd7f32, #a0522d);
|
||
}
|
||
|
||
/* 用户信息卡片 */
|
||
.user-info-card {
|
||
background: rgba(15, 15, 35, 0.95);
|
||
border-radius: 25rpx;
|
||
padding: 30rpx 25rpx;
|
||
backdrop-filter: blur(20rpx);
|
||
border: 1rpx solid rgba(255, 255, 255, 0.1);
|
||
box-shadow:
|
||
0 20rpx 60rpx rgba(0, 0, 0, 0.8),
|
||
inset 0 0 30rpx rgba(255, 255, 255, 0.05);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.rank-1 .user-info-card {
|
||
border-color: rgba(255, 215, 0, 0.3);
|
||
background: rgba(20, 15, 5, 0.95);
|
||
}
|
||
|
||
.rank-2 .user-info-card {
|
||
border-color: rgba(192, 192, 192, 0.3);
|
||
background: rgba(25, 25, 35, 0.95);
|
||
}
|
||
|
||
.rank-3 .user-info-card {
|
||
border-color: rgba(205, 127, 50, 0.3);
|
||
background: rgba(30, 20, 10, 0.95);
|
||
}
|
||
|
||
.info-header {
|
||
margin-bottom: 20rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.user-name {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
display: block;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.rank-1 .user-name {
|
||
color: #ffd700;
|
||
text-shadow: 0 0 15rpx rgba(255, 215, 0, 0.7);
|
||
font-size: 34rpx;
|
||
}
|
||
|
||
.rank-2 .user-name {
|
||
color: #c0c0c0;
|
||
text-shadow: 0 0 10rpx rgba(192, 192, 192, 0.7);
|
||
}
|
||
|
||
.rank-3 .user-name {
|
||
color: #cd7f32;
|
||
text-shadow: 0 0 10rpx rgba(205, 127, 50, 0.7);
|
||
}
|
||
|
||
.info-body {
|
||
border-top: 1rpx solid rgba(255, 255, 255, 0.1);
|
||
padding-top: 15rpx;
|
||
}
|
||
|
||
.uid-row, .income-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.uid-row:last-child, .income-row:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.uid-label, .income-label {
|
||
font-size: 24rpx;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
|
||
.uid-value {
|
||
font-size: 24rpx;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
|
||
.income-value {
|
||
display: flex;
|
||
align-items: baseline;
|
||
}
|
||
|
||
.currency {
|
||
font-size: 26rpx;
|
||
color: #4ade80;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.rank-1 .currency {
|
||
color: #ffd700;
|
||
}
|
||
|
||
.rank-2 .currency {
|
||
color: #c0c0c0;
|
||
}
|
||
|
||
.rank-3 .currency {
|
||
color: #cd7f32;
|
||
}
|
||
|
||
.amount {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #4ade80;
|
||
text-shadow: 0 0 10rpx rgba(74, 222, 128, 0.5);
|
||
}
|
||
|
||
.rank-1 .amount {
|
||
color: #ffd700;
|
||
text-shadow: 0 0 15rpx rgba(255, 215, 0, 0.7);
|
||
}
|
||
|
||
.rank-2 .amount {
|
||
color: #c0c0c0;
|
||
text-shadow: 0 0 10rpx rgba(192, 192, 192, 0.7);
|
||
}
|
||
|
||
.rank-3 .amount {
|
||
color: #cd7f32;
|
||
text-shadow: 0 0 10rpx rgba(205, 127, 50, 0.7);
|
||
}
|
||
|
||
.amount.medium {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.amount.small {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.amount.very-small {
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
/* ========== 其他排名区域 ========== */
|
||
.other-ranks-section {
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.title-line {
|
||
flex: 1;
|
||
height: 2rpx;
|
||
background: linear-gradient(90deg,
|
||
transparent,
|
||
#00ffff,
|
||
#ff00ff,
|
||
#00ffff,
|
||
transparent);
|
||
}
|
||
|
||
.title-text {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #00ffff;
|
||
margin: 0 30rpx;
|
||
text-shadow: 0 0 15rpx rgba(0, 255, 255, 0.5);
|
||
}
|
||
|
||
.rank-list {
|
||
position: relative;
|
||
}
|
||
|
||
.rank-item {
|
||
display: flex;
|
||
align-items: center;
|
||
background: rgba(20, 20, 40, 0.8);
|
||
border-radius: 25rpx;
|
||
padding: 25rpx 30rpx;
|
||
margin-bottom: 20rpx;
|
||
border: 1rpx solid rgba(0, 255, 255, 0.1);
|
||
backdrop-filter: blur(20rpx);
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
box-shadow:
|
||
0 10rpx 40rpx rgba(0, 0, 0, 0.6),
|
||
inset 0 0 20rpx rgba(0, 255, 255, 0.05);
|
||
}
|
||
|
||
.rank-item.flash {
|
||
animation: cardFlash 0.4s ease-out;
|
||
}
|
||
|
||
.rank-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg,
|
||
transparent,
|
||
rgba(0, 255, 255, 0.1),
|
||
transparent);
|
||
transition: left 0.6s ease;
|
||
}
|
||
|
||
.rank-item:hover::before {
|
||
left: 100%;
|
||
}
|
||
|
||
.rank-number {
|
||
width: 80rpx;
|
||
text-align: center;
|
||
position: relative;
|
||
margin-right: 30rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.number-text {
|
||
font-size: 42rpx;
|
||
font-weight: 900;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.number-glow {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background: radial-gradient(circle,
|
||
rgba(0, 255, 255, 0.2) 0%,
|
||
transparent 70%);
|
||
z-index: 0;
|
||
}
|
||
|
||
.rank-avatar {
|
||
position: relative;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
margin-right: 25rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.rank-avatar-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
position: relative;
|
||
z-index: 2;
|
||
border: 3rpx solid rgba(0, 255, 255, 0.2);
|
||
}
|
||
|
||
.rank-avatar-halo {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
background: radial-gradient(circle,
|
||
rgba(0, 255, 255, 0.2) 0%,
|
||
rgba(0, 255, 255, 0.1) 30%,
|
||
transparent 70%);
|
||
z-index: 1;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.rank-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.rank-name {
|
||
display: block;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #ffffff;
|
||
margin-bottom: 8rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.rank-uid {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
font-family: 'Courier New', monospace;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.rank-income {
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: baseline;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.income-currency {
|
||
font-size: 28rpx;
|
||
color: #00ffff;
|
||
margin-right: 4rpx;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.income-amount {
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
color: #4ade80;
|
||
text-shadow: 0 0 10rpx rgba(74, 222, 128, 0.5);
|
||
white-space: nowrap;
|
||
line-height: 1;
|
||
}
|
||
|
||
.income-amount.medium {
|
||
font-size: 34rpx;
|
||
}
|
||
|
||
.income-amount.small {
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.income-amount.very-small {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.income-glow {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 140rpx;
|
||
height: 70rpx;
|
||
background: radial-gradient(ellipse,
|
||
rgba(74, 222, 128, 0.2) 0%,
|
||
transparent 70%);
|
||
z-index: 0;
|
||
}
|
||
|
||
.rank-hover {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
border-radius: 25rpx;
|
||
border: 1rpx solid transparent;
|
||
background: linear-gradient(45deg,
|
||
rgba(0, 255, 255, 0.1),
|
||
rgba(255, 0, 255, 0.1)) border-box;
|
||
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
|
||
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
|
||
-webkit-mask-composite: xor;
|
||
mask-composite: exclude;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.rank-item:hover .rank-hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* ========== 空状态 ========== */
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 120rpx 0;
|
||
text-align: center;
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.empty-icon {
|
||
font-size: 120rpx;
|
||
margin-bottom: 30rpx;
|
||
opacity: 0.5;
|
||
animation: iconFloat 3s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes iconFloat {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-30rpx); }
|
||
}
|
||
|
||
.empty-title {
|
||
font-size: 36rpx;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
.empty-desc {
|
||
font-size: 28rpx;
|
||
color: rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* ========== 修改1：皇冠位置调整 ========== */
|
||
/* 方案：让皇冠稍微歪一点，看起来像斜戴着 */
|
||
.crown-container {
|
||
position: absolute;
|
||
top: -55rpx; /* 稍微上移一点 */
|
||
left: 55%; /* 不再是50%，向右偏移一点 */
|
||
transform: translateX(20%) rotate(35deg)!important; /* 旋转8度，让它歪一点 */
|
||
width: 110rpx;
|
||
height: 110rpx;
|
||
z-index: 40;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.crown-icon {
|
||
font-size: 85rpx;
|
||
position: relative;
|
||
z-index: 2;
|
||
filter: drop-shadow(0 0 10rpx rgba(255, 215, 0, 0.8));
|
||
animation: crownFloat 3s ease-in-out infinite;
|
||
transform: rotate(5deg); /* 图标本身也稍微旋转 */
|
||
}
|
||
|
||
/* 调整皇冠浮动动画，让它有轻微的歪斜感 */
|
||
@keyframes crownFloat {
|
||
0%, 100% {
|
||
transform: translateY(0) rotate(5deg) scale(1);
|
||
filter: drop-shadow(0 0 10rpx rgba(255, 215, 0, 0.8));
|
||
}
|
||
50% {
|
||
transform: translateY(-15rpx) rotate(10deg) scale(1.1); /* 浮起时旋转更多 */
|
||
filter: drop-shadow(0 0 25rpx rgba(255, 215, 0, 1));
|
||
}
|
||
}
|
||
|
||
/* ========== 修改2：切换按钮调整 ========== */
|
||
/* 调整整个页面头部位置，向上移动 */
|
||
.page-header {
|
||
position: relative;
|
||
z-index: 10;
|
||
margin-bottom: 55rpx; /* 减少底部间距，让整体上移 */
|
||
margin-top: -40rpx; /* 向上移动10rpx */
|
||
}
|
||
|
||
/* 调整标题容器位置 */
|
||
.title-container {
|
||
text-align: center;
|
||
margin-bottom: 40rpx; /* 减少间距 */
|
||
}
|
||
|
||
/* 调整切换按钮容器宽度和位置 */
|
||
.toggle-container {
|
||
display: flex;
|
||
background: rgba(10, 10, 30, 0.8);
|
||
border-radius: 60rpx;
|
||
padding: 6rpx;
|
||
position: relative;
|
||
border: 1rpx solid rgba(0, 255, 255, 0.2);
|
||
backdrop-filter: blur(20rpx);
|
||
max-width: 700rpx; /* 增加最大宽度 */
|
||
width: 90%; /* 使用百分比宽度，更灵活 */
|
||
margin: 0 auto;
|
||
box-shadow:
|
||
0 10rpx 40rpx rgba(0, 0, 0, 0.8),
|
||
inset 0 0 20rpx rgba(0, 255, 255, 0.05);
|
||
}
|
||
|
||
/* 调整切换按钮内部文字大小和间距 */
|
||
.toggle-btn {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 30rpx 0; /* 增加垂直内边距 */
|
||
font-size: 32rpx; /* 增加字体大小 */
|
||
font-weight: 600;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
position: relative;
|
||
z-index: 2;
|
||
transition: all 0.3s ease;
|
||
border-radius: 54rpx;
|
||
min-width: 200rpx; /* 设置最小宽度 */
|
||
}
|
||
|
||
/* 调整切换背景宽度 */
|
||
.toggle-bg {
|
||
position: absolute;
|
||
top: 6rpx;
|
||
bottom: 6rpx;
|
||
width: 50%;
|
||
background: linear-gradient(90deg,
|
||
rgba(0, 255, 255, 0.2), /* 提高透明度 */
|
||
rgba(255, 0, 255, 0.2));
|
||
border-radius: 54rpx;
|
||
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 调整主标题位置，也向上移动一点 */
|
||
.main-title {
|
||
display: block;
|
||
font-size: 58rpx; /* 稍微减小字体，让整体更紧凑 */
|
||
font-weight: 900;
|
||
background: linear-gradient(90deg, #00ffff, #ff00ff, #ffff00);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
text-shadow: 0 0 30rpx rgba(0, 255, 255, 0.5);
|
||
letter-spacing: 4rpx;
|
||
margin-bottom: 8rpx; /* 减少底部间距 */
|
||
}
|
||
|
||
/* 调整标题下划线位置 */
|
||
.title-line {
|
||
width: 220rpx; /* 增加宽度 */
|
||
height: 3rpx;
|
||
background: linear-gradient(90deg, transparent, #00ffff, #ff00ff, transparent);
|
||
margin: 12rpx auto; /* 减少上下间距 */
|
||
position: relative;
|
||
}
|
||
|
||
/* 调整副标题位置 */
|
||
.sub-title {
|
||
display: block;
|
||
font-size: 22rpx; /* 稍微减小字体 */
|
||
color: rgba(255, 255, 255, 0.6);
|
||
letter-spacing: 6rpx; /* 减少字母间距 */
|
||
text-transform: uppercase;
|
||
margin-top: 5rpx; /* 减少上边距 */
|
||
}
|
||
|
||
/* 调整整个内容区域的上边距 */
|
||
.ranking-content {
|
||
position: relative;
|
||
z-index: 5;
|
||
margin-top: 10rpx; /* 减少上边距 */
|
||
}
|
||
|
||
/* 调整前三名区域的上边距 */
|
||
.top-three-section {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-end;
|
||
position: relative;
|
||
z-index: 10;
|
||
margin-bottom: 40rpx; /* 减少底部间距 */
|
||
gap: 20rpx;
|
||
margin-top: 10rpx; /* 减少上边距 */
|
||
} |