/* 启动页 — 深空蓝沉浸主题 */ .splash-page { width: 100%; height: 100vh; background: #FAFAF8; 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,158,109,0.2) 0%, transparent 60%); 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,158,109,0.35)); position: relative; z-index: 2; } /* 双层脉冲环 */ .pulse-ring { position: absolute; inset: -20rpx; border-radius: 50%; border: 3rpx solid rgba(255, 158, 109, 0.35); 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: #333333; letter-spacing: -2rpx; margin-bottom: 8rpx; } .app-sub { font-size: 22rpx; font-weight: 400; color: #999999; letter-spacing: 6rpx; margin-bottom: 28rpx; text-transform: uppercase; } .app-slogan { font-size: 26rpx; font-weight: 400; color: #666666; 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, 158, 109, 0.8); 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: #FF9E6D; font-weight: 700; } .status-ok { font-size: 26rpx; color: #999999; font-weight: 500; } /* ── 底部版权 ── */ .splash-footer { position: absolute; bottom: 80rpx; left: 0; right: 0; text-align: center; } .footer-text { font-size: 20rpx; color: #CCCCCC; letter-spacing: 2rpx; }