/* 启动页 — 暖棕沉浸主题,与播放器保持一致 */ .splash-page { width: 100%; height: 100vh; background: #1A1208; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; position: relative; } /* 环境光晕 */ .splash-glow { position: absolute; top: -10vh; left: 50%; transform: translateX(-50%); width: 120vw; height: 60vh; background: radial-gradient(ellipse at center, rgba(255,157,66,0.22) 0%, transparent 70%); pointer-events: none; } /* 主内容容器 */ .splash-content { display: flex; flex-direction: column; align-items: center; transition: opacity 1.0s ease, transform 1.0s ease, filter 1.0s ease; } .splash-content.fade-out { opacity: 0; transform: scale(1.06) translateY(-12rpx); filter: blur(6px); } /* ── 图标 ── */ .logo-wrap { width: 200rpx; height: 200rpx; display: flex; align-items: center; justify-content: center; margin-bottom: 64rpx; position: relative; } .logo-icon { font-size: 120rpx; filter: drop-shadow(0 16rpx 40rpx rgba(255,120,0,0.4)); position: relative; z-index: 2; } /* 双层脉冲环 */ .pulse-ring { position: absolute; inset: -20rpx; border-radius: 50%; border: 3rpx solid rgba(255, 157, 66, 0.45); animation: pulse-expand 2s ease-out infinite; } .pulse-ring-2 { animation-delay: 1s; } @keyframes pulse-expand { 0% { transform: scale(0.7); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } } /* ── 文字 ── */ .app-title { font-size: 64rpx; font-weight: 800; color: rgba(255, 240, 210, 0.95); letter-spacing: -2rpx; margin-bottom: 8rpx; } .app-sub { font-size: 22rpx; font-weight: 400; color: rgba(255, 200, 120, 0.45); letter-spacing: 6rpx; margin-bottom: 28rpx; text-transform: uppercase; } .app-slogan { font-size: 26rpx; font-weight: 400; color: rgba(255, 200, 120, 0.55); letter-spacing: 3rpx; } /* ── 状态区 ── */ .status-area { margin-top: 100rpx; height: 48rpx; display: flex; align-items: center; justify-content: center; } .status-row { display: flex; align-items: center; gap: 12rpx; } /* 三点加载动画 */ .loading-dots { display: flex; gap: 12rpx; align-items: center; } .dot { width: 12rpx; height: 12rpx; border-radius: 50%; background: rgba(255, 157, 66, 0.7); animation: dot-bounce 1.2s ease-in-out infinite alternate; } @keyframes dot-bounce { 0% { transform: translateY(0); opacity: 0.3; } 100% { transform: translateY(-12rpx); opacity: 1; } } /* 成功状态 */ .status-check { font-size: 32rpx; color: #FF9D42; font-weight: 700; } .status-ok { font-size: 26rpx; color: rgba(255, 200, 120, 0.7); font-weight: 500; } /* ── 底部版权 ── */ .splash-footer { position: absolute; bottom: 80rpx; left: 0; right: 0; text-align: center; } .footer-text { font-size: 20rpx; color: rgba(255, 200, 120, 0.2); letter-spacing: 2rpx; }