|
|
@@ -1,26 +1,41 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <!-- 首次进入的 splash loading 蒙板 — 覆盖首页直到数据加载完毕 -->
|
|
|
+ <!-- 冷启动 splash overlay — 覆盖首页直到数据加载完毕(tab 切回时不显示) -->
|
|
|
<view class="splash-overlay" :class="{'fade-out': splashOverlayFading}" v-if="splashOverlay || splashOverlayFading">
|
|
|
<view class="splash-overlay-bg">
|
|
|
- <view class="splash-overlay-circle c1"></view>
|
|
|
- <view class="splash-overlay-circle c2"></view>
|
|
|
- <view class="splash-overlay-circle c3"></view>
|
|
|
+ <view class="bg-circle bg-circle-1"></view>
|
|
|
+ <view class="bg-circle bg-circle-2"></view>
|
|
|
+ <view class="bg-circle bg-circle-3"></view>
|
|
|
</view>
|
|
|
<view class="splash-overlay-body">
|
|
|
- <view class="splash-overlay-logo-wrap">
|
|
|
- <image class="splash-overlay-logo" src="/static/logo.png" mode="aspectFit" />
|
|
|
+ <view class="splash-logo-wrap">
|
|
|
+ <image class="splash-logo-img" src="/static/logo.png" mode="aspectFit" />
|
|
|
</view>
|
|
|
- <text class="splash-overlay-brand">浠艾福</text>
|
|
|
- <text class="splash-overlay-en">Care Family</text>
|
|
|
- <view class="splash-overlay-dims">
|
|
|
- <view class="splash-overlay-dim"><text class="splash-overlay-dim-icon">🌏</text><text class="splash-overlay-dim-label">身</text></view>
|
|
|
- <view class="splash-overlay-dim"><text class="splash-overlay-dim-icon">🔥</text><text class="splash-overlay-dim-label">心</text></view>
|
|
|
- <view class="splash-overlay-dim"><text class="splash-overlay-dim-icon">⚡</text><text class="splash-overlay-dim-label">智</text></view>
|
|
|
- <view class="splash-overlay-dim"><text class="splash-overlay-dim-icon">🌿</text><text class="splash-overlay-dim-label">行</text></view>
|
|
|
- <view class="splash-overlay-dim"><text class="splash-overlay-dim-icon">💧</text><text class="splash-overlay-dim-label">富</text></view>
|
|
|
+ <text class="splash-brand-name">浠艾福</text>
|
|
|
+ <text class="splash-brand-en">Care Family</text>
|
|
|
+ <view class="splash-dims-row">
|
|
|
+ <view class="splash-dim-item">
|
|
|
+ <view class="splash-dim-circle" style="background:rgba(255,140,66,0.3);"><text class="splash-dim-icon">🌏</text></view>
|
|
|
+ <text class="splash-dim-label">身</text>
|
|
|
+ </view>
|
|
|
+ <view class="splash-dim-item">
|
|
|
+ <view class="splash-dim-circle" style="background:rgba(255,107,157,0.3);"><text class="splash-dim-icon">🔥</text></view>
|
|
|
+ <text class="splash-dim-label">心</text>
|
|
|
+ </view>
|
|
|
+ <view class="splash-dim-item">
|
|
|
+ <view class="splash-dim-circle" style="background:rgba(99,102,241,0.3);"><text class="splash-dim-icon">⚡</text></view>
|
|
|
+ <text class="splash-dim-label">智</text>
|
|
|
+ </view>
|
|
|
+ <view class="splash-dim-item">
|
|
|
+ <view class="splash-dim-circle" style="background:rgba(16,185,129,0.3);"><text class="splash-dim-icon">🌿</text></view>
|
|
|
+ <text class="splash-dim-label">行</text>
|
|
|
+ </view>
|
|
|
+ <view class="splash-dim-item">
|
|
|
+ <view class="splash-dim-circle" style="background:rgba(245,158,11,0.3);"><text class="splash-dim-icon">💧</text></view>
|
|
|
+ <text class="splash-dim-label">富</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <text class="splash-overlay-tagline">给全家的一站式幸福提案</text>
|
|
|
+ <text class="splash-tagline">给全家的一站式幸福提案</text>
|
|
|
<view class="splash-overlay-loading">
|
|
|
<view class="splash-overlay-dot"></view>
|
|
|
<view class="splash-overlay-dot"></view>
|
|
|
@@ -228,13 +243,15 @@ export default {
|
|
|
if (_token) {
|
|
|
_currentRole = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || ''
|
|
|
}
|
|
|
+ // 冷启动标记(由 App.vue onLaunch 设置,仅在冷启动时存在)
|
|
|
+ var _isFirstLaunch = (uni.getStorageSync('_showSplashOverlay') === '1')
|
|
|
return {
|
|
|
currentRole: _currentRole,
|
|
|
- // TabTransition 始终默认 true,确保首次渲染即出现
|
|
|
+ // TabTransition 始终默认 true,确保首次渲染即出现;冷启动时被 splash overlay 覆盖不可见
|
|
|
showTabTransition: true,
|
|
|
|
|
|
- // splash loading overlay 已移除,不再展示
|
|
|
- splashOverlay: false,
|
|
|
+ // splash loading overlay(冷启动时展示,数据加载完关闭)
|
|
|
+ splashOverlay: _isFirstLaunch,
|
|
|
splashOverlayFading: false,
|
|
|
_splashReady: false,
|
|
|
|
|
|
@@ -258,10 +275,28 @@ export default {
|
|
|
this._doInit(options)
|
|
|
},
|
|
|
onShow() {
|
|
|
- // TabTransition 已在 data() 中为 true,确保首次渲染即出现
|
|
|
- // 但组件缓存后再次切回时可能已被 _watchPageReady 置为 false,需要重置
|
|
|
- this.showTabTransition = true
|
|
|
- this._watchPageReady()
|
|
|
+ // splash overlay 已在 data() 中根据 storage 标记初始化,此处只需配置关闭条件
|
|
|
+ if (this.splashOverlay) {
|
|
|
+ uni.removeStorageSync('_showSplashOverlay')
|
|
|
+ this._splashLoadCount = 0
|
|
|
+ this._splashMinPassed = false
|
|
|
+
|
|
|
+ var self = this
|
|
|
+ // 最低展示 800ms
|
|
|
+ setTimeout(function() {
|
|
|
+ self._splashMinPassed = true
|
|
|
+ self._tryHideSplash()
|
|
|
+ }, 800)
|
|
|
+ // 最多展示 5s
|
|
|
+ setTimeout(function() {
|
|
|
+ if (self.splashOverlay) self._hideSplashOverlay()
|
|
|
+ }, 5000)
|
|
|
+ } else {
|
|
|
+ // tab 切回:TabTransition 已在 data() 中为 true,确保首次渲染即出现
|
|
|
+ // 但组件缓存后再次切回时可能已被 _watchPageReady 置为 false,需要重置
|
|
|
+ this.showTabTransition = true
|
|
|
+ this._watchPageReady()
|
|
|
+ }
|
|
|
|
|
|
// 始终执行初始化,确保登录态变更后及时切换视图
|
|
|
this._doInit()
|
|
|
@@ -925,13 +960,10 @@ export default {
|
|
|
color: #bbb;
|
|
|
}
|
|
|
|
|
|
-/* ===== Splash Loading Overlay(首次进入蒙板) ===== */
|
|
|
+/* ===== Splash Loading Overlay(冷启动蒙板,来自 merge splash.vue) ===== */
|
|
|
.splash-overlay {
|
|
|
position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
+ top: 0; left: 0; right: 0; bottom: 0;
|
|
|
z-index: 9999;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -945,96 +977,127 @@ export default {
|
|
|
opacity: 0;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
-.splash-overlay-bg {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- pointer-events: none;
|
|
|
-}
|
|
|
-.splash-overlay-circle {
|
|
|
+
|
|
|
+/* ---- bg circles from splash.vue ---- */
|
|
|
+.splash-overlay-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; }
|
|
|
+.bg-circle {
|
|
|
position: absolute;
|
|
|
border-radius: 50%;
|
|
|
- opacity: 0.15;
|
|
|
+ opacity: 0.12;
|
|
|
}
|
|
|
-.splash-overlay-circle.c1 {
|
|
|
+.bg-circle-1 {
|
|
|
width: 400rpx; height: 400rpx;
|
|
|
background: #FF8C42;
|
|
|
- top: -100rpx; right: -100rpx;
|
|
|
- animation: splash-float 6s ease-in-out infinite;
|
|
|
-}
|
|
|
-.splash-overlay-circle.c2 {
|
|
|
- width: 300rpx; height: 300rpx;
|
|
|
- background: #F59E0B;
|
|
|
- bottom: 100rpx; left: -80rpx;
|
|
|
- animation: splash-float 8s ease-in-out infinite reverse;
|
|
|
+ top: -100rpx; right: -80rpx;
|
|
|
+ animation: splash-float-1 4s ease-in-out infinite;
|
|
|
}
|
|
|
-.splash-overlay-circle.c3 {
|
|
|
- width: 200rpx; height: 200rpx;
|
|
|
+.bg-circle-2 {
|
|
|
+ width: 280rpx; height: 280rpx;
|
|
|
background: #FF6B9D;
|
|
|
- top: 300rpx; right: 50rpx;
|
|
|
- animation: splash-float 5s ease-in-out infinite 1s;
|
|
|
+ bottom: 80rpx; left: -60rpx;
|
|
|
+ animation: splash-float-2 5s ease-in-out infinite;
|
|
|
}
|
|
|
-@keyframes splash-float {
|
|
|
+.bg-circle-3 {
|
|
|
+ width: 180rpx; height: 180rpx;
|
|
|
+ background: #6366F1;
|
|
|
+ top: 50%; right: -40rpx;
|
|
|
+ animation: splash-float-3 6s ease-in-out infinite;
|
|
|
+}
|
|
|
+@keyframes splash-float-1 {
|
|
|
+ 0%, 100% { transform: translateY(0) scale(1); }
|
|
|
+ 50% { transform: translateY(-30rpx) scale(1.05); }
|
|
|
+}
|
|
|
+@keyframes splash-float-2 {
|
|
|
0%, 100% { transform: translateY(0) scale(1); }
|
|
|
- 50% { transform: translateY(-20rpx) scale(1.05); }
|
|
|
+ 50% { transform: translateY(20rpx) scale(1.08); }
|
|
|
+}
|
|
|
+@keyframes splash-float-3 {
|
|
|
+ 0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
|
+ 50% { transform: translateY(-20rpx) rotate(10deg); }
|
|
|
}
|
|
|
|
|
|
+/* ---- body fade-in ---- */
|
|
|
.splash-overlay-body {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
- animation: splash-overlay-fade-in 0.8s ease forwards;
|
|
|
+ animation: splash-body-in 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
|
|
|
}
|
|
|
-@keyframes splash-overlay-fade-in {
|
|
|
- from { opacity: 0; transform: translateY(30rpx); }
|
|
|
- to { opacity: 1; transform: translateY(0); }
|
|
|
+@keyframes splash-body-in {
|
|
|
+ from { opacity: 0; transform: translateY(40rpx) scale(0.96); }
|
|
|
+ to { opacity: 1; transform: translateY(0) scale(1); }
|
|
|
}
|
|
|
|
|
|
-.splash-overlay-logo-wrap {
|
|
|
+/* ---- logo ---- */
|
|
|
+.splash-logo-wrap {
|
|
|
width: 160rpx; height: 160rpx;
|
|
|
border-radius: 40rpx;
|
|
|
background: rgba(255,255,255,0.95);
|
|
|
display: flex; align-items: center; justify-content: center;
|
|
|
- margin-bottom: 24rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
box-shadow: 0 8rpx 32rpx rgba(249,115,22,0.25);
|
|
|
+ animation: splash-logo-pulse 2.5s ease-in-out infinite;
|
|
|
}
|
|
|
-.splash-overlay-logo {
|
|
|
- width: 100rpx; height: 100rpx;
|
|
|
+@keyframes splash-logo-pulse {
|
|
|
+ 0%, 100% { box-shadow: 0 8rpx 32rpx rgba(249,115,22,0.25); }
|
|
|
+ 50% { box-shadow: 0 8rpx 48rpx rgba(249,115,22,0.45); }
|
|
|
}
|
|
|
+.splash-logo-img { width: 100rpx; height: 100rpx; }
|
|
|
|
|
|
-.splash-overlay-brand {
|
|
|
- font-size: 60rpx; font-weight: 700;
|
|
|
+/* ---- brand ---- */
|
|
|
+.splash-brand-name {
|
|
|
+ font-size: 64rpx; font-weight: 800;
|
|
|
color: #7C2D12;
|
|
|
- letter-spacing: 8rpx; margin-bottom: 4rpx;
|
|
|
- text-shadow: 0 2rpx 12rpx rgba(0,0,0,0.1);
|
|
|
+ letter-spacing: 10rpx;
|
|
|
+ margin-bottom: 2rpx;
|
|
|
}
|
|
|
-.splash-overlay-en {
|
|
|
- font-size: 22rpx;
|
|
|
- color: rgba(124,45,18,0.6);
|
|
|
- letter-spacing: 4rpx; margin-bottom: 20rpx;
|
|
|
+.splash-brand-en {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: rgba(124,45,18,0.5);
|
|
|
+ letter-spacing: 6rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+}
|
|
|
+.splash-tagline {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: rgba(124,45,18,0.7);
|
|
|
+ letter-spacing: 4rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
}
|
|
|
|
|
|
-.splash-overlay-dims {
|
|
|
+/* ---- dims row from splash.vue (rounded circles) ---- */
|
|
|
+.splash-dims-row {
|
|
|
display: flex; flex-direction: row;
|
|
|
align-items: center; justify-content: center;
|
|
|
- gap: 20rpx; margin: 24rpx 0;
|
|
|
+ gap: 28rpx;
|
|
|
}
|
|
|
-.splash-overlay-dim {
|
|
|
+.splash-dim-item {
|
|
|
display: flex; flex-direction: column;
|
|
|
- align-items: center; gap: 6rpx;
|
|
|
+ align-items: center; gap: 8rpx;
|
|
|
+}
|
|
|
+.splash-dim-circle {
|
|
|
+ width: 80rpx; height: 80rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex; align-items: center; justify-content: center;
|
|
|
+}
|
|
|
+.splash-dim-icon { font-size: 36rpx; line-height: 1; }
|
|
|
+.splash-dim-label {
|
|
|
+ font-size: 22rpx; font-weight: 500;
|
|
|
+ color: rgba(124,45,18,0.75);
|
|
|
+ line-height: 1;
|
|
|
}
|
|
|
-.splash-overlay-dim-icon { font-size: 36rpx; line-height: 1; }
|
|
|
-.splash-overlay-dim-label { font-size: 20rpx; color: rgba(124,45,18,0.7); line-height: 1; font-weight: 500; }
|
|
|
|
|
|
-.splash-overlay-tagline {
|
|
|
- font-size: 28rpx;
|
|
|
- color: rgba(124,45,18,0.8);
|
|
|
- letter-spacing: 2rpx; font-weight: 500;
|
|
|
+/* ---- staggered dim entry from splash.vue ---- */
|
|
|
+.splash-dim-item:nth-child(1) { animation: splash-dim-in 0.5s ease 0.1s both; }
|
|
|
+.splash-dim-item:nth-child(2) { animation: splash-dim-in 0.5s ease 0.2s both; }
|
|
|
+.splash-dim-item:nth-child(3) { animation: splash-dim-in 0.5s ease 0.3s both; }
|
|
|
+.splash-dim-item:nth-child(4) { animation: splash-dim-in 0.5s ease 0.4s both; }
|
|
|
+.splash-dim-item:nth-child(5) { animation: splash-dim-in 0.5s ease 0.5s both; }
|
|
|
+@keyframes splash-dim-in {
|
|
|
+ from { opacity: 0; transform: translateY(16rpx) scale(0.8); }
|
|
|
+ to { opacity: 1; transform: translateY(0) scale(1); }
|
|
|
}
|
|
|
|
|
|
-/* Loading dots */
|
|
|
+/* ---- loading dots ---- */
|
|
|
.splash-overlay-loading {
|
|
|
position: absolute;
|
|
|
bottom: 120rpx;
|