Initial Commit
This commit is contained in:
commit
1d71a02738
237 changed files with 64293 additions and 0 deletions
283
pages/splash/splash.js
Normal file
283
pages/splash/splash.js
Normal file
|
|
@ -0,0 +1,283 @@
|
|||
// 启动页逻辑 - 性能优化版本
|
||||
const app = getApp();
|
||||
const config = require('../../config/config.js');
|
||||
const systemInfoUtil = require('../../utils/system-info.js');
|
||||
const wsManager = require('../../utils/websocket-manager-v2.js');
|
||||
|
||||
Page({
|
||||
data: {
|
||||
// 应用信息
|
||||
appName: config.appName || 'FindMe',
|
||||
appVersion: config.appVersion || '1.0.0',
|
||||
|
||||
// 状态控制
|
||||
isLoading: true,
|
||||
showProgress: false,
|
||||
showError: false,
|
||||
|
||||
// 显示文本
|
||||
loadingText: '正在启动...',
|
||||
errorMessage: '',
|
||||
progress: 0,
|
||||
|
||||
// 系统适配信息 - 先设置默认值
|
||||
statusBarHeight: 44,
|
||||
menuButtonHeight: 32,
|
||||
menuButtonTop: 6,
|
||||
navBarHeight: 88,
|
||||
windowHeight: 667,
|
||||
safeAreaBottom: 0
|
||||
},
|
||||
|
||||
// 页面加载 - 性能优化
|
||||
onLoad: function (options) {
|
||||
console.log('启动页加载开始');
|
||||
const startTime = Date.now();
|
||||
|
||||
// 立即开始启动流程，系统信息异步初始化
|
||||
this.startLaunchSequence().then(() => {
|
||||
const endTime = Date.now();
|
||||
console.log(`启动页加载完成，耗时: ${endTime - startTime}ms`);
|
||||
});
|
||||
|
||||
// 异步初始化系统信息，不阻塞启动流程
|
||||
this.initSystemInfoAsync();
|
||||
},
|
||||
|
||||
// 页面显示
|
||||
onShow: function () {
|
||||
console.log('启动页显示');
|
||||
},
|
||||
|
||||
// 页面隐藏
|
||||
onHide: function () {
|
||||
console.log('启动页隐藏');
|
||||
},
|
||||
|
||||
// 异步初始化系统信息
|
||||
async initSystemInfoAsync() {
|
||||
try {
|
||||
await systemInfoUtil.init();
|
||||
const adaptInfo = systemInfoUtil.getSystemAdaptInfo();
|
||||
|
||||
this.setData({
|
||||
statusBarHeight: adaptInfo.statusBarHeight,
|
||||
menuButtonHeight: adaptInfo.menuButtonHeight,
|
||||
menuButtonTop: adaptInfo.menuButtonTop,
|
||||
navBarHeight: adaptInfo.navBarHeight,
|
||||
windowHeight: adaptInfo.windowHeight,
|
||||
safeAreaBottom: adaptInfo.safeAreaBottom
|
||||
});
|
||||
|
||||
console.log('系统信息异步初始化完成');
|
||||
} catch (error) {
|
||||
console.error('系统信息初始化失败，使用默认值:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 开始启动流程 - 优化版本
|
||||
async startLaunchSequence() {
|
||||
try {
|
||||
console.log('开始应用启动流程');
|
||||
|
||||
// 第1步：显示启动动画 (0-20%)
|
||||
this.updateProgress(20, '初始化应用...');
|
||||
await this.delay(200); // 减少延迟时间
|
||||
|
||||
// 第2步：检查基础服务 (20-50%)
|
||||
await this.updateProgress(50, '检查服务状态...');
|
||||
await this.checkBasicServices();
|
||||
|
||||
// 第3步：初始化用户数据 (50-80%)
|
||||
await this.updateProgress(80, '加载用户数据...');
|
||||
await this.initUserData();
|
||||
|
||||
// 第4步：准备界面 (80-100%)
|
||||
await this.updateProgress(100, '启动完成');
|
||||
await this.delay(300); // 减少完成状态显示时间
|
||||
|
||||
// 跳转到主页面
|
||||
this.navigateToMainPage();
|
||||
|
||||
} catch (error) {
|
||||
console.error('启动失败:', error);
|
||||
this.showError(error.message || '启动失败，请重试');
|
||||
}
|
||||
},
|
||||
|
||||
// 检查基础服务 - 优化版本
|
||||
async checkBasicServices() {
|
||||
try {
|
||||
// 并行检查多个服务，提高效率
|
||||
const checks = [
|
||||
this.checkAppPermissions(),
|
||||
this.checkNetworkStatus(),
|
||||
this.delay(100) // 最小延迟，确保用户能看到进度
|
||||
];
|
||||
|
||||
await Promise.all(checks);
|
||||
console.log('基础服务检查完成');
|
||||
} catch (error) {
|
||||
console.error('基础服务检查失败:', error);
|
||||
throw new Error('服务检查失败');
|
||||
}
|
||||
},
|
||||
|
||||
// 检查应用权限 - 快速版本
|
||||
async checkAppPermissions() {
|
||||
return new Promise((resolve) => {
|
||||
// 简化权限检查，避免耗时操作
|
||||
wx.getSetting({
|
||||
success: () => {
|
||||
console.log('权限检查完成');
|
||||
resolve();
|
||||
},
|
||||
fail: () => {
|
||||
console.log('权限检查失败，继续启动');
|
||||
resolve(); // 不阻塞启动流程
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 检查网络状态 - 快速版本
|
||||
async checkNetworkStatus() {
|
||||
return new Promise((resolve) => {
|
||||
wx.getNetworkType({
|
||||
success: (res) => {
|
||||
console.log('网络状态:', res.networkType);
|
||||
resolve();
|
||||
},
|
||||
fail: () => {
|
||||
console.log('网络检查失败，继续启动');
|
||||
resolve(); // 不阻塞启动流程
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 初始化用户数据 - 优化版本
|
||||
async initUserData() {
|
||||
try {
|
||||
// 检查本地存储的用户信息
|
||||
const userInfo = wx.getStorageSync('userInfo');
|
||||
if (userInfo) {
|
||||
console.log('发现本地用户信息');
|
||||
app.globalData.userInfo = userInfo;
|
||||
app.globalData.isLoggedIn = true;
|
||||
|
||||
// 如果用户已登录，测试WebSocket连接
|
||||
this.testWebSocketConnection();
|
||||
}
|
||||
|
||||
// 异步更新用户数据，不阻塞启动
|
||||
this.updateUserDataAsync();
|
||||
|
||||
} catch (error) {
|
||||
console.error('用户数据初始化失败:', error);
|
||||
// 不抛出错误，允许继续启动
|
||||
}
|
||||
},
|
||||
|
||||
// 测试WebSocket连接 - 异步执行，不阻塞启动
|
||||
async testWebSocketConnection() {
|
||||
try {
|
||||
console.log('🔌 启动页面：开始测试WebSocket连接...');
|
||||
|
||||
// 设置token到WebSocket管理器
|
||||
const userInfo = app.globalData.userInfo;
|
||||
if (userInfo && userInfo.token) {
|
||||
wsManager.setToken(userInfo.token);
|
||||
|
||||
// 异步尝试连接，不等待结果
|
||||
wsManager.connect().then(() => {
|
||||
console.log('✅ 启动页面：WebSocket连接成功');
|
||||
}).catch((error) => {
|
||||
console.log('⚠️ 启动页面：WebSocket连接失败，稍后重试:', error.message);
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('⚠️ 启动页面：WebSocket连接测试失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 异步更新用户数据
|
||||
async updateUserDataAsync() {
|
||||
try {
|
||||
// 这里可以添加后台数据同步逻辑
|
||||
console.log('异步更新用户数据...');
|
||||
} catch (error) {
|
||||
console.error('异步更新用户数据失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 更新进度 - 优化版本
|
||||
async updateProgress(progress, text) {
|
||||
this.setData({
|
||||
progress: progress,
|
||||
loadingText: text,
|
||||
showProgress: true
|
||||
});
|
||||
|
||||
// 使用requestAnimationFrame优化动画性能
|
||||
if (wx.nextTick) {
|
||||
await new Promise(resolve => wx.nextTick(resolve));
|
||||
}
|
||||
},
|
||||
|
||||
// 延迟函数 - 性能优化
|
||||
delay(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
},
|
||||
|
||||
// 跳转到主页面 - 优化版本
|
||||
navigateToMainPage() {
|
||||
// 检查用户登录状态
|
||||
const userInfo = app.globalData.userInfo;
|
||||
const targetPage = userInfo && userInfo.token ? '/pages/map/map' : '/pages/login/login';
|
||||
|
||||
console.log('跳转到:', targetPage);
|
||||
|
||||
wx.reLaunch({
|
||||
url: targetPage,
|
||||
success: () => {
|
||||
console.log('页面跳转成功');
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error('页面跳转失败:', error);
|
||||
// 兜底跳转到地图页面
|
||||
wx.reLaunch({
|
||||
url: '/pages/map/map'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 显示错误
|
||||
showError(message) {
|
||||
this.setData({
|
||||
showError: true,
|
||||
errorMessage: message,
|
||||
isLoading: false
|
||||
});
|
||||
},
|
||||
|
||||
// 重试启动
|
||||
onRetry() {
|
||||
this.setData({
|
||||
showError: false,
|
||||
isLoading: true,
|
||||
progress: 0
|
||||
});
|
||||
|
||||
// 延迟重试，避免立即重试
|
||||
setTimeout(() => {
|
||||
this.startLaunchSequence();
|
||||
}, 300);
|
||||
},
|
||||
|
||||
// 页面卸载
|
||||
onUnload() {
|
||||
console.log('启动页卸载');
|
||||
}
|
||||
});
|
||||
7
pages/splash/splash.json
Normal file
7
pages/splash/splash.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"navigationBarTitleText": "FindMe",
|
||||
"navigationBarBackgroundColor": "#667eea",
|
||||
"navigationBarTextStyle": "white",
|
||||
"backgroundColor": "#667eea",
|
||||
"disableScroll": true
|
||||
}
|
||||
92
pages/splash/splash.wxml
Normal file
92
pages/splash/splash.wxml
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
<!--启动页面 - 现代化设计 + 系统适配-->
|
||||
<view class="splash-container" style="height: {{windowHeight}}px;">
|
||||
|
||||
<!-- 背景装饰 -->
|
||||
<view class="background-decorations">
|
||||
<view class="decoration decoration-1">🫐</view>
|
||||
<view class="decoration decoration-2">✨</view>
|
||||
<view class="decoration decoration-3">🌟</view>
|
||||
<view class="decoration decoration-4">💫</view>
|
||||
<view class="decoration decoration-5">⭐</view>
|
||||
<view class="decoration decoration-6">🫐</view>
|
||||
<view class="decoration decoration-7">✨</view>
|
||||
<view class="decoration decoration-8">🌟</view>
|
||||
</view>
|
||||
|
||||
<!-- Logo区域 -->
|
||||
<view class="logo-container">
|
||||
<view class="logo-animation">
|
||||
<view class="logo-main">
|
||||
<view class="logo-icon">🫐</view>
|
||||
<view class="logo-rings">
|
||||
<view class="ring ring-1"></view>
|
||||
<view class="ring ring-2"></view>
|
||||
<view class="ring ring-3"></view>
|
||||
<view class="ring ring-4"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="logo-glow"></view>
|
||||
</view>
|
||||
|
||||
<view class="app-info">
|
||||
<text class="app-name">{{appName}}</text>
|
||||
<text class="app-slogan">发现身边，连接世界</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载动画 -->
|
||||
<view class="loading-container">
|
||||
<view class="loading-animation {{isLoading ? 'active' : ''}}">
|
||||
<view class="spinner-container">
|
||||
<view class="spinner-dot dot-1"></view>
|
||||
<view class="spinner-dot dot-2"></view>
|
||||
<view class="spinner-dot dot-3"></view>
|
||||
<view class="spinner-dot dot-4"></view>
|
||||
<view class="spinner-dot dot-5"></view>
|
||||
</view>
|
||||
<view class="pulse-ring"></view>
|
||||
</view>
|
||||
<text class="loading-text">{{loadingText}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 进度条 -->
|
||||
<view class="progress-container" wx:if="{{showProgress}}">
|
||||
<view class="progress-track">
|
||||
<view class="progress-fill" style="width: {{progress}}%;"></view>
|
||||
<view class="progress-glow" style="left: {{progress}}%;"></view>
|
||||
</view>
|
||||
<view class="progress-info">
|
||||
<text class="progress-percentage">{{progress}}%</text>
|
||||
<text class="progress-description">正在加载资源...</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 版本信息 -->
|
||||
<view class="version-info" style="bottom: {{safeAreaBottom + 40}}px;">
|
||||
<view class="version-badge">
|
||||
<view class="version-icon">🏷️</view>
|
||||
<text class="version-text">v{{appVersion}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 错误提示 -->
|
||||
<view class="error-overlay" wx:if="{{showError}}">
|
||||
<view class="error-content">
|
||||
<view class="error-icon">⚠️</view>
|
||||
<text class="error-title">启动失败</text>
|
||||
<text class="error-message">{{errorMessage}}</text>
|
||||
<view class="error-actions">
|
||||
<view class="retry-button" bindtap="onRetry">
|
||||
<view class="button-icon">🔄</view>
|
||||
<text class="button-text">重试</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 启动完成动画 -->
|
||||
<view class="success-animation" wx:if="{{progress === 100 && !showError}}">
|
||||
<view class="success-icon">✅</view>
|
||||
<text class="success-text">启动成功</text>
|
||||
</view>
|
||||
</view>
|
||||
629
pages/splash/splash.wxss
Normal file
629
pages/splash/splash.wxss
Normal file
|
|
@ -0,0 +1,629 @@
|
|||
/* 启动页面 - 现代化设计 + 系统适配 */
|
||||
page {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
/* 主容器 */
|
||||
.splash-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
/* 背景装饰 */
|
||||
.background-decorations {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.decoration {
|
||||
position: absolute;
|
||||
font-size: 40rpx;
|
||||
opacity: 0.1;
|
||||
animation: float-decoration 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.decoration-1 { top: 10%; left: 15%; animation-delay: 0s; }
|
||||
.decoration-2 { top: 20%; right: 20%; animation-delay: -1s; }
|
||||
.decoration-3 { top: 40%; left: 10%; animation-delay: -2s; }
|
||||
.decoration-4 { top: 60%; right: 15%; animation-delay: -3s; }
|
||||
.decoration-5 { top: 75%; left: 25%; animation-delay: -4s; }
|
||||
.decoration-6 { top: 30%; right: 10%; animation-delay: -5s; }
|
||||
.decoration-7 { top: 80%; right: 30%; animation-delay: -6s; }
|
||||
.decoration-8 { top: 50%; left: 5%; animation-delay: -7s; }
|
||||
|
||||
@keyframes float-decoration {
|
||||
0%, 100% {
|
||||
transform: translateY(0) rotate(0deg) scale(1);
|
||||
opacity: 0.1;
|
||||
}
|
||||
25% {
|
||||
transform: translateY(-20rpx) rotate(90deg) scale(1.1);
|
||||
opacity: 0.2;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-40rpx) rotate(180deg) scale(0.9);
|
||||
opacity: 0.3;
|
||||
}
|
||||
75% {
|
||||
transform: translateY(-20rpx) rotate(270deg) scale(1.1);
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
/* Logo区域 */
|
||||
.logo-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 120rpx;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.logo-animation {
|
||||
position: relative;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.logo-main {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 100rpx;
|
||||
text-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
|
||||
animation: logo-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.logo-rings {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.ring {
|
||||
position: absolute;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
animation: ring-spin 6s linear infinite;
|
||||
}
|
||||
|
||||
.ring-1 {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
top: 40rpx;
|
||||
left: 40rpx;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.ring-2 {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
top: 30rpx;
|
||||
left: 30rpx;
|
||||
animation-delay: -1s;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
.ring-3 {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
top: 20rpx;
|
||||
left: 20rpx;
|
||||
animation-delay: -2s;
|
||||
}
|
||||
|
||||
.ring-4 {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
top: 10rpx;
|
||||
left: 10rpx;
|
||||
animation-delay: -3s;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
.logo-glow {
|
||||
position: absolute;
|
||||
top: -20rpx;
|
||||
left: -20rpx;
|
||||
right: -20rpx;
|
||||
bottom: -20rpx;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
animation: glow-pulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes logo-pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
|
||||
@keyframes ring-spin {
|
||||
0% { transform: rotate(0deg); opacity: 0.3; }
|
||||
50% { opacity: 0.6; }
|
||||
100% { transform: rotate(360deg); opacity: 0.3; }
|
||||
}
|
||||
|
||||
@keyframes glow-pulse {
|
||||
0%, 100% { opacity: 0.5; transform: scale(1); }
|
||||
50% { opacity: 0.8; transform: scale(1.1); }
|
||||
}
|
||||
|
||||
/* 应用信息 */
|
||||
.app-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 56rpx;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
text-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
|
||||
letter-spacing: 3rpx;
|
||||
animation: fade-in-up 1s ease-out 0.5s both;
|
||||
}
|
||||
|
||||
.app-slogan {
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
|
||||
font-style: italic;
|
||||
animation: fade-in-up 1s ease-out 0.8s both;
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 40rpx;
|
||||
margin-bottom: 80rpx;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.loading-animation {
|
||||
position: relative;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.spinner-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.spinner-dot {
|
||||
position: absolute;
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-radius: 50%;
|
||||
animation: spinner-rotate 2s linear infinite;
|
||||
}
|
||||
|
||||
.dot-1 {
|
||||
top: 10rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.dot-2 {
|
||||
top: 30rpx;
|
||||
right: 20rpx;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.dot-3 {
|
||||
bottom: 20rpx;
|
||||
right: 30rpx;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.dot-4 {
|
||||
bottom: 10rpx;
|
||||
left: 30rpx;
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
.dot-5 {
|
||||
top: 30rpx;
|
||||
left: 20rpx;
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
.pulse-ring {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border: 3rpx solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: pulse-ring 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes spinner-rotate {
|
||||
0% {
|
||||
transform: rotate(0deg) translateX(40rpx) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg) translateX(40rpx) rotate(-360deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-ring {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) scale(0.8);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -50%) scale(1.2);
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) scale(0.8);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
|
||||
animation: text-fade 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes text-fade {
|
||||
0%, 100% { opacity: 0.7; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* 进度条 */
|
||||
.progress-container {
|
||||
width: 500rpx;
|
||||
margin-bottom: 60rpx;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.progress-track {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 8rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 4rpx;
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(10rpx);
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, white 100%);
|
||||
border-radius: 4rpx;
|
||||
transition: width 0.3s ease;
|
||||
box-shadow: 0 0 10rpx rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.progress-glow {
|
||||
position: absolute;
|
||||
top: -4rpx;
|
||||
width: 20rpx;
|
||||
height: 16rpx;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
transform: translateX(-50%);
|
||||
transition: left 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.progress-percentage {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.progress-description {
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 版本信息 */
|
||||
.version-info {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.version-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 32rpx;
|
||||
backdrop-filter: blur(20rpx);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.version-icon {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.version-text {
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-family: 'Monaco', 'Consolas', monospace;
|
||||
}
|
||||
|
||||
/* 错误提示 */
|
||||
.error-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
backdrop-filter: blur(8rpx);
|
||||
animation: fade-in 0.3s ease;
|
||||
}
|
||||
|
||||
.error-content {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 32rpx;
|
||||
padding: 60rpx 48rpx;
|
||||
margin: 60rpx;
|
||||
max-width: 500rpx;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(20rpx);
|
||||
box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.2);
|
||||
animation: scale-in 0.3s ease;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
font-size: 80rpx;
|
||||
margin-bottom: 32rpx;
|
||||
animation: shake 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.error-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #e74c3c;
|
||||
margin-bottom: 16rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
font-size: 26rpx;
|
||||
color: #6c757d;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 40rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.error-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.retry-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
padding: 20rpx 40rpx;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 24rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.retry-button:active {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
font-size: 24rpx;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.button-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes scale-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-10rpx); }
|
||||
75% { transform: translateX(10rpx); }
|
||||
}
|
||||
|
||||
/* 启动完成动画 */
|
||||
.success-animation {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
z-index: 100;
|
||||
animation: success-appear 0.5s ease;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
font-size: 100rpx;
|
||||
animation: success-bounce 0.6s ease;
|
||||
}
|
||||
|
||||
.success-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
text-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
@keyframes success-appear {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0.5);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes success-bounce {
|
||||
0% { transform: scale(0); }
|
||||
50% { transform: scale(1.2); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
/* 响应式设计 - 适配不同屏幕尺寸 */
|
||||
@media screen and (max-width: 375px) {
|
||||
.logo-animation {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 80rpx;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.app-slogan {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
width: 280rpx;
|
||||
}
|
||||
|
||||
.error-content {
|
||||
padding: 48rpx 32rpx;
|
||||
margin: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 414px) {
|
||||
.logo-animation {
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
margin-bottom: 80rpx;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 120rpx;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 64rpx;
|
||||
}
|
||||
|
||||
.app-slogan {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
width: 400rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 667px) {
|
||||
.logo-container {
|
||||
margin-bottom: 80rpx;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-height: 812px) {
|
||||
.logo-container {
|
||||
margin-bottom: 160rpx;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
margin-bottom: 120rpx;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue