/* ===== 蓄力蒙层加载状态：隐藏页面内容 ===== */ /* boost-pending 类由 内联脚本同步设置，确保页面内容在确定蓄力状态前不可见 */ html.boost-pending body { visibility: hidden; /* 安全兜底：6秒后自动恢复可见（防止 JS 加载失败导致永久白屏） */ animation: boostFallbackShow 0s 6s forwards; } @keyframes boostFallbackShow { to { visibility: visible; } } /* ===== 倒计时蒙层 ===== */ .countdown-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; /* background: linear-gradient(135deg, #0a193c 0%, #1a1a2e 50%, #0a193c 100%); */ background-image: url('../images/countdown-bg.jpg'); background-size: 100% 100%; background-position: center; display: flex; align-items: center; justify-content: center; overflow: hidden; /* animation: overlayFadeIn 0.5s ease-out; */ } .countdown-overlay.fading-out { animation: overlayFadeOut 0.5s ease-out forwards; } @keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes overlayFadeOut { from { opacity: 1; } to { opacity: 0; } } /* 背景光效 */ .countdown-overlay::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(0, 91, 187, 0.08) 0%, transparent 60%); animation: bgPulse 6s ease-in-out infinite; pointer-events: none; } @keyframes bgPulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.15); opacity: 1; } } .countdown-content { position: relative; z-index: 1; text-align: center; /* padding: 20px; */ width: 90%; height: 90%; align-content: center; } /* Logo */ .countdown-logo { display: flex; align-items: center; justify-content: right; gap: 10px; position: absolute; top: 0; right: 0; } .countdown-logo .logo-en { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 2rem; font-weight: 700; color: #005BBB; letter-spacing: 2px; } .countdown-logo .logo-sub { font-size: 1.2rem; color: rgba(255, 255, 255, 0.7); letter-spacing: 1px; } /* 标题 */ .countdown-title { font-size: 2.5rem; font-weight: 700; color: #fff; margin-bottom: 40px; letter-spacing: 3px; text-shadow: 0 2px 10px rgba(0, 91, 187, 0.3); } .countdown-subtitle { font-size: 1.1rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 40px; letter-spacing: 1px; } /* ===== 助力区域 ===== */ .boost-bubble-area { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0; } .boost-bubble { position: absolute; bottom: -40px; font-size: 1.5rem; font-weight: 700; padding: 6px 18px; border: 2px solid #79a9dd; border-radius: 30px; color: #79a9dd; background: rgba(0, 91, 187, 0.1); backdrop-filter: blur(4px); white-space: nowrap; animation: bubbleFloat 3s ease-out forwards; } .boost-bubble-mine { border-color: #79a9dd; color: #79a9dd; background: rgba(0, 91, 187, 0.2); font-size: 1.5rem; box-shadow: 0 0 25px rgba(0, 91, 187, 0.5), 0 4px 15px rgba(0, 91, 187, 0.3); z-index: 10; } /* 右上角"我"徽标 */ .boost-bubble-mine::after { /* content: '我'; position: absolute; top: 0; right: 0; width: 28px; height: 28px; color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 28px; text-align: center; border-radius: 50%; border: 0.5px solid #fff; box-shadow: 0 2px 6px rgba(0, 91, 187, 0.2); */ } @keyframes bubbleFloat { 0% { bottom: -40px; opacity: 0; transform: translateX(0) scale(0.5); } 10% { opacity: 1; transform: translateX(0) scale(1); } 80% { opacity: 0.8; } 100% { bottom: 100%; opacity: 0; transform: translateX(var(--drift, 0px)) scale(0.8); } } /* ===== 电池进度条 ===== */ .boost-battery-wrap { margin-top: 50px; margin-bottom: 36px; display: flex; justify-content: center; align-items: center; } .boost-battery-wrap::before{ content: "共累计"; color: #fff; margin-right: 10px; font-size: 30px; font-weight: 700; } .boost-battery-wrap::after{ content: "蓄力值"; color: #fff; margin-left: 10px; font-size: 30px; font-weight: 700; } .boost-battery { display: flex; align-items: center; width: 320px; max-width: 80vw; height: 64px; } /* 电池主体 */ .boost-battery-body { position: relative; flex: 1; height: 100%; background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(48, 138, 235, 0.9); border-radius: 12px; overflow: hidden; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 91, 187, 0.2); transition: border-color 0.4s ease, box-shadow 0.4s ease; } /* 蓄力已满：边框/阴影切换为绿色 */ .boost-battery-body.full { border-color: rgba(0, 91, 187, 0.9); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 25px rgba(0, 91, 187, 0.5); } /* 竖条容器 */ .boost-battery-bars { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: stretch; gap: 3px; padding: 4px 6px; z-index: 1; } /* 单个竖条 */ .boost-bar { flex: 1; background: rgba(255, 255, 255, 0.06); border-radius: 3px; transition: 0.4s ease, box-shadow 0.4s ease; } /* 已激活竖条：显示颜色（由浅入深，颜色通过 --bar-color 设置） */ .boost-bar.active { background: var(--bar-color, #005abb); box-shadow: 0 0 8px var(--bar-color, rgba(0, 91, 187, 0.6)); } /* 当前正在充的竖条：闪烁 */ .boost-bar.current { background: var(--bar-color, #005BBB); box-shadow: 0 0 12px var(--bar-color, rgba(0, 91, 187, 0.8)); animation: barBlink 0.9s ease-in-out infinite; } /* 蓄力已满：主题色切换为绿色 */ .boost-battery-bars.full .boost-bar.active { background: var(--bar-color, #005BBB); box-shadow: 0 0 10px var(--bar-color, rgba(0, 91, 187, 0.8)); } @keyframes barBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } /* 电池内的蓄力值文字 */ .boost-battery-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; font-size: 1.4rem; font-weight: 700; color: #fff; text-shadow: 0 0 6px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 91, 187, 0.8); letter-spacing: 1px; pointer-events: none; transition: transform 0.3s ease; } .boost-battery-text.bump { transform: translate(-50%, -50%) scale(1.25); } /* 蓄力值下方描述文字 */ .boost-count-label { font-size: 1.3rem; color: #005BBB; margin-bottom: 24px; letter-spacing: 2px; animation: boostFullPulse 2s ease-in-out infinite; display: none; } .boost-btn { /* background: linear-gradient(135deg, #005BBB, #004A99); */ /* color: #fff */ background: linear-gradient(135deg, #fff, #fff); color: #005BBB; border: none; padding: 14px 48px; border-radius: 50px; font-size: 1.1rem; font-weight: 600; letter-spacing: 3px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(0, 91, 187, 0.4); } .boost-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 30px rgba(0, 91, 187, 0.6); } .boost-btn:active:not(:disabled) { transform: translateY(0); } .boost-btn:disabled { opacity: 0.6; cursor: not-allowed; } .boost-toast { margin-top: 20px; font-size: 1rem; color: #005BBB; opacity: 0; /* transform: translateY(-10px); */ transition: opacity 0.3s ease, transform 0.3s ease; min-height: 1.5rem; letter-spacing: 1px; display: none; } .boost-full-section { text-align: center; } .boost-full-msg { font-size: 1.3rem; color: #005BBB; margin-bottom: 24px; letter-spacing: 2px; animation: boostFullPulse 2s ease-in-out infinite; } @keyframes boostFullPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .enter-btn { /* background: linear-gradient(135deg, #005BBB, #005BBB); color: #fff; */ background: linear-gradient(135deg, #fff, #fff); color: #005BBB; border: none; padding: 14px 48px; border-radius: 50px; font-size: 1.2rem; font-weight: 600; letter-spacing: 3px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(0, 91, 187, 0.4); } .enter-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 30px rgba(0, 91, 187, 0.6); } /* ===== 翻盖倒计时容器 ===== */ .countdown-timer { display: flex; align-items: flex-start; justify-content: center; gap: 16px; } .countdown-group { display: flex; flex-direction: column; align-items: center; gap: 12px; } .countdown-digits { display: flex; gap: 6px; } .countdown-separator { font-size: 3rem; color: rgba(0, 91, 187, 0.8); font-weight: 700; line-height: 90px; height: 70px; display: flex; align-items: center; } svg { /* height: 60px; */ width: 6rem; display: inline-block; } svg .cls-1{ fill: #fff; } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0.3; } } .countdown-label { font-size: 0.9rem; color: rgba(255, 255, 255, 0.5); letter-spacing: 2px; } /* ===== 翻盖卡片 ===== */ .flip-card { --card-w: 60px; --card-h: 90px; --font-size: 80px; position: relative; width: var(--card-w); height: var(--card-h); perspective: 400px; font-family: 'Helvetica Neue', Arial, sans-serif; } .card-half { position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; display: flex; justify-content: center; font-size: var(--font-size); font-weight: 700; line-height: var(--card-h); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } /* 静态上半：显示数字的顶部 */ .card-top { top: 0; align-items: flex-start; border-radius: 8px 8px 0 0; border-bottom: 1px solid rgba(0, 0, 0, 0.4); background: linear-gradient(180deg, #2a2a4e 0%, #1a1a3e 100%); } /* 静态下半：显示数字的底部 */ .card-bottom { bottom: 0; align-items: flex-end; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #1a1a3e 0%, #15152e 100%); } /* 中间折线 */ .flip-card::after { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: rgba(0, 0, 0, 0.5); z-index: 10; transform: translateY(-1px); pointer-events: none; } /* 翻盖动画 - 上半（旧数字下落） */ .card-flip-top { top: 0; align-items: flex-start; border-radius: 8px 8px 0 0; border-bottom: 1px solid rgba(0, 0, 0, 0.4); background: linear-gradient(180deg, #2a2a4e 0%, #1a1a3e 100%); transform-origin: bottom; z-index: 3; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform; animation: flipDown 0.3s ease-in forwards; } /* 翻盖动画 - 下半（新数字上翻） */ .card-flip-bottom { bottom: 0; align-items: flex-end; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #1a1a3e 0%, #15152e 100%); transform-origin: top; z-index: 2; transform: rotateX(90deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform; animation: flipUp 0.3s ease-out 0.3s forwards; } @keyframes flipDown { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(-90deg); } } @keyframes flipUp { 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0deg); } } /* ===== 响应式 ===== */ @media (max-width: 1300px) { .countdown-title { font-size: 2.5rem; } .countdown-subtitle { font-size: 1.1rem; margin-bottom: 40px; } .boost-battery-wrap { margin-top: 40px; } .countdown-timer { gap: 10px; } .flip-card { --card-w: 44px; --card-h: 66px; --font-size: 60px; } .countdown-separator { font-size: 2rem; height: 54px; line-height: 66px; } .countdown-logo .logo-en { font-size: 1.5rem; } .countdown-logo .logo-sub { font-size: 0.95rem; } .countdown-digits { gap: 4px; } .boost-battery { width: 280px; height: 56px; } .boost-btn { padding: 12px 36px; font-size: 1.2rem; } .enter-btn { padding: 12px 36px; font-size: 1.2rem; } } @media (max-width: 1024px) { .countdown-title { font-size: 3rem; } .countdown-subtitle { font-size: 1.3rem; margin-bottom: 40px; } .boost-battery-wrap { margin-top: 40px; } .countdown-timer { gap: 10px; } .flip-card { --card-w: 44px; --card-h: 66px; --font-size: 60px; } .countdown-separator { font-size: 2rem; height: 54px; line-height: 66px; } .countdown-logo .logo-en { font-size: 1.5rem; } .countdown-logo .logo-sub { font-size: 0.95rem; } .countdown-digits { gap: 4px; } .boost-battery { width: 280px; height: 56px; } .boost-btn { padding: 12px 36px; font-size: 1.4rem; } .enter-btn { padding: 12px 36px; font-size: 1.4rem; } .boost-battery-wrap::after , .boost-battery-wrap::before { font-size: 20px; } } @media (max-width: 590px) { .countdown-title { font-size: 4rem; letter-spacing: 2px; } .countdown-subtitle { font-size: 1.4rem; margin-bottom: 40px; } .boost-battery-wrap { margin-top: 40px; } .countdown-timer { gap: 6px; } .flip-card { --card-w: 24px; --card-h: 42px; --font-size: 36px; } .countdown-digits { gap: 3px; } .countdown-separator { font-size: 1.5rem; height: 40px; line-height: 42px; } .countdown-label { font-size: 0.75rem; letter-spacing: 1px; } .countdown-logo .logo-en { font-size: 1.3rem; } .countdown-logo .logo-sub { font-size: 0.85rem; } .boost-battery { width: 220px; height: 48px; } .boost-btn { padding: 10px 28px; font-size: 1.6rem; letter-spacing: 2px; } .enter-btn { padding: 10px 28px; font-size: 1.6rem; letter-spacing: 2px; } .boost-full-msg { font-size: 1.05rem; } .boost-count-label{ font-size: 1.05rem; } .boost-toast { font-size: 0.85rem; } .boost-bubble { border-radius: 16px; } .boost-battery-wrap::after , .boost-battery-wrap::before { font-size: 20px; } }