|
@@ -1,42 +1,50 @@
|
|
|
<template>
|
|
<template>
|
|
|
<view class="splash-root">
|
|
<view class="splash-root">
|
|
|
|
|
+ <!-- 背景装饰 -->
|
|
|
|
|
+ <view class="splash-bg-decor">
|
|
|
|
|
+ <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-content">
|
|
<view class="splash-content">
|
|
|
- <!-- Brand Logo Mark -->
|
|
|
|
|
- <view class="splash-logo-mark">
|
|
|
|
|
- <text class="splash-logo-char">浠</text>
|
|
|
|
|
|
|
+ <!-- Logo 图标 -->
|
|
|
|
|
+ <view class="splash-logo-wrap">
|
|
|
|
|
+ <image class="splash-logo-img" src="/static/logo.png" mode="aspectFit" />
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<!-- Brand Name -->
|
|
<!-- Brand Name -->
|
|
|
<text class="splash-brand-name">浠艾福</text>
|
|
<text class="splash-brand-name">浠艾福</text>
|
|
|
|
|
+ <text class="splash-brand-en">Care Family</text>
|
|
|
|
|
|
|
|
<!-- 五维图标行 -->
|
|
<!-- 五维图标行 -->
|
|
|
<view class="splash-dims-row">
|
|
<view class="splash-dims-row">
|
|
|
<view class="splash-dim-item">
|
|
<view class="splash-dim-item">
|
|
|
- <view class="splash-dim-circle" style="background:rgba(141,110,99,0.25);">
|
|
|
|
|
|
|
+ <view class="splash-dim-circle" style="background:rgba(255,140,66,0.3);">
|
|
|
<text class="splash-dim-icon">🌏</text>
|
|
<text class="splash-dim-icon">🌏</text>
|
|
|
</view>
|
|
</view>
|
|
|
<text class="splash-dim-label">身</text>
|
|
<text class="splash-dim-label">身</text>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="splash-dim-item">
|
|
<view class="splash-dim-item">
|
|
|
- <view class="splash-dim-circle" style="background:rgba(255,107,53,0.25);">
|
|
|
|
|
|
|
+ <view class="splash-dim-circle" style="background:rgba(255,107,157,0.3);">
|
|
|
<text class="splash-dim-icon">🔥</text>
|
|
<text class="splash-dim-icon">🔥</text>
|
|
|
</view>
|
|
</view>
|
|
|
<text class="splash-dim-label">心</text>
|
|
<text class="splash-dim-label">心</text>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="splash-dim-item">
|
|
<view class="splash-dim-item">
|
|
|
- <view class="splash-dim-circle" style="background:rgba(255,215,0,0.25);">
|
|
|
|
|
|
|
+ <view class="splash-dim-circle" style="background:rgba(99,102,241,0.3);">
|
|
|
<text class="splash-dim-icon">⚡</text>
|
|
<text class="splash-dim-icon">⚡</text>
|
|
|
</view>
|
|
</view>
|
|
|
<text class="splash-dim-label">智</text>
|
|
<text class="splash-dim-label">智</text>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="splash-dim-item">
|
|
<view class="splash-dim-item">
|
|
|
- <view class="splash-dim-circle" style="background:rgba(76,175,80,0.25);">
|
|
|
|
|
|
|
+ <view class="splash-dim-circle" style="background:rgba(16,185,129,0.3);">
|
|
|
<text class="splash-dim-icon">🌿</text>
|
|
<text class="splash-dim-icon">🌿</text>
|
|
|
</view>
|
|
</view>
|
|
|
<text class="splash-dim-label">行</text>
|
|
<text class="splash-dim-label">行</text>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="splash-dim-item">
|
|
<view class="splash-dim-item">
|
|
|
- <view class="splash-dim-circle" style="background:rgba(66,165,245,0.25);">
|
|
|
|
|
|
|
+ <view class="splash-dim-circle" style="background:rgba(245,158,11,0.3);">
|
|
|
<text class="splash-dim-icon">💧</text>
|
|
<text class="splash-dim-icon">💧</text>
|
|
|
</view>
|
|
</view>
|
|
|
<text class="splash-dim-label">富</text>
|
|
<text class="splash-dim-label">富</text>
|
|
@@ -65,16 +73,17 @@ export default {
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
onLoad() {
|
|
onLoad() {
|
|
|
- // 标记 splash 已展示
|
|
|
|
|
this.ready = true
|
|
this.ready = true
|
|
|
},
|
|
},
|
|
|
onReady() {
|
|
onReady() {
|
|
|
- // 延迟 2500ms 后跳转到首页(至少 1s 展示保证)
|
|
|
|
|
|
|
+ // 标记来自 splash 页,首页首次加载跳过 tab-transition
|
|
|
|
|
+ uni.setStorageSync('_fromSplash', '1')
|
|
|
|
|
+ // 至少展示 1 秒后跳转
|
|
|
setTimeout(function() {
|
|
setTimeout(function() {
|
|
|
uni.switchTab({
|
|
uni.switchTab({
|
|
|
url: '/pages/index/index'
|
|
url: '/pages/index/index'
|
|
|
})
|
|
})
|
|
|
- }, 2500)
|
|
|
|
|
|
|
+ }, 1200)
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
@@ -89,10 +98,60 @@ export default {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
- background: linear-gradient(160deg, #FFF7ED 0%, #F97316 100%);
|
|
|
|
|
|
|
+ background: linear-gradient(160deg, #FFF7ED 0%, #FFEDD5 50%, #FED7AA 100%);
|
|
|
z-index: 9999;
|
|
z-index: 9999;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* ===== 背景装饰 ===== */
|
|
|
|
|
+.splash-bg-decor {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ pointer-events: none;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.bg-circle {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ opacity: 0.15;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.bg-circle-1 {
|
|
|
|
|
+ width: 400rpx;
|
|
|
|
|
+ height: 400rpx;
|
|
|
|
|
+ background: #FF8C42;
|
|
|
|
|
+ top: -100rpx;
|
|
|
|
|
+ right: -100rpx;
|
|
|
|
|
+ animation: float 6s ease-in-out infinite;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.bg-circle-2 {
|
|
|
|
|
+ width: 300rpx;
|
|
|
|
|
+ height: 300rpx;
|
|
|
|
|
+ background: #F59E0B;
|
|
|
|
|
+ bottom: 100rpx;
|
|
|
|
|
+ left: -80rpx;
|
|
|
|
|
+ animation: float 8s ease-in-out infinite reverse;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+.bg-circle-3 {
|
|
|
|
|
+ width: 200rpx;
|
|
|
|
|
+ height: 200rpx;
|
|
|
|
|
+ background: #FF6B9D;
|
|
|
|
|
+ top: 300rpx;
|
|
|
|
|
+ right: 50rpx;
|
|
|
|
|
+ animation: float 5s ease-in-out infinite 1s;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+@keyframes float {
|
|
|
|
|
+ 0%, 100% { transform: translateY(0) scale(1); }
|
|
|
|
|
+ 50% { transform: translateY(-20rpx) scale(1.05); }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* ===== 主内容 ===== */
|
|
|
.splash-content {
|
|
.splash-content {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
@@ -104,7 +163,7 @@ export default {
|
|
|
@keyframes splash-fade-in {
|
|
@keyframes splash-fade-in {
|
|
|
from {
|
|
from {
|
|
|
opacity: 0;
|
|
opacity: 0;
|
|
|
- transform: translateY(20rpx);
|
|
|
|
|
|
|
+ transform: translateY(30rpx);
|
|
|
}
|
|
}
|
|
|
to {
|
|
to {
|
|
|
opacity: 1;
|
|
opacity: 1;
|
|
@@ -112,42 +171,47 @@ export default {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-/* ===== Logo Mark ===== */
|
|
|
|
|
-.splash-logo-mark {
|
|
|
|
|
- width: 144rpx;
|
|
|
|
|
- height: 144rpx;
|
|
|
|
|
- border-radius: 36rpx;
|
|
|
|
|
- background: rgba(255, 255, 255, 0.3);
|
|
|
|
|
|
|
+/* ===== Logo ===== */
|
|
|
|
|
+.splash-logo-wrap {
|
|
|
|
|
+ width: 160rpx;
|
|
|
|
|
+ height: 160rpx;
|
|
|
|
|
+ border-radius: 40rpx;
|
|
|
|
|
+ background: rgba(255, 255, 255, 0.95);
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
margin-bottom: 24rpx;
|
|
margin-bottom: 24rpx;
|
|
|
- backdrop-filter: blur(4px);
|
|
|
|
|
|
|
+ box-shadow: 0 8rpx 32rpx rgba(249, 115, 22, 0.25);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.splash-logo-char {
|
|
|
|
|
- font-size: 72rpx;
|
|
|
|
|
- font-weight: 700;
|
|
|
|
|
- color: #FFFFFF;
|
|
|
|
|
- line-height: 1;
|
|
|
|
|
|
|
+.splash-logo-img {
|
|
|
|
|
+ width: 100rpx;
|
|
|
|
|
+ height: 100rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* ===== Brand Name ===== */
|
|
/* ===== Brand Name ===== */
|
|
|
.splash-brand-name {
|
|
.splash-brand-name {
|
|
|
- font-size: 56rpx;
|
|
|
|
|
|
|
+ font-size: 60rpx;
|
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
|
- color: #FFFFFF;
|
|
|
|
|
|
|
+ color: #7C2D12;
|
|
|
letter-spacing: 8rpx;
|
|
letter-spacing: 8rpx;
|
|
|
- margin-bottom: 12rpx;
|
|
|
|
|
|
|
+ margin-bottom: 4rpx;
|
|
|
text-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
text-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+.splash-brand-en {
|
|
|
|
|
+ font-size: 22rpx;
|
|
|
|
|
+ color: rgba(124, 45, 18, 0.6);
|
|
|
|
|
+ letter-spacing: 4rpx;
|
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
/* ===== Tagline ===== */
|
|
/* ===== Tagline ===== */
|
|
|
.splash-tagline {
|
|
.splash-tagline {
|
|
|
font-size: 28rpx;
|
|
font-size: 28rpx;
|
|
|
- color: rgba(255, 255, 255, 0.85);
|
|
|
|
|
- letter-spacing: 4rpx;
|
|
|
|
|
- font-weight: 400;
|
|
|
|
|
|
|
+ color: rgba(124, 45, 18, 0.8);
|
|
|
|
|
+ letter-spacing: 2rpx;
|
|
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* ===== Loading Dots ===== */
|
|
/* ===== Loading Dots ===== */
|
|
@@ -166,21 +230,13 @@ export default {
|
|
|
width: 14rpx;
|
|
width: 14rpx;
|
|
|
height: 14rpx;
|
|
height: 14rpx;
|
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
|
- background: rgba(255, 255, 255, 0.6);
|
|
|
|
|
|
|
+ background: rgba(249, 115, 22, 0.6);
|
|
|
animation: splash-dot-bounce 1.4s ease-in-out infinite both;
|
|
animation: splash-dot-bounce 1.4s ease-in-out infinite both;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.splash-dot--1 {
|
|
|
|
|
- animation-delay: -0.32s;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.splash-dot--2 {
|
|
|
|
|
- animation-delay: -0.16s;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.splash-dot--3 {
|
|
|
|
|
- animation-delay: 0s;
|
|
|
|
|
-}
|
|
|
|
|
|
|
+.splash-dot--1 { animation-delay: -0.32s; }
|
|
|
|
|
+.splash-dot--2 { animation-delay: -0.16s; }
|
|
|
|
|
+.splash-dot--3 { animation-delay: 0s; }
|
|
|
|
|
|
|
|
@keyframes splash-dot-bounce {
|
|
@keyframes splash-dot-bounce {
|
|
|
0%, 80%, 100% {
|
|
0%, 80%, 100% {
|
|
@@ -199,8 +255,8 @@ export default {
|
|
|
flex-direction: row;
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
- gap: 16rpx;
|
|
|
|
|
- margin: 16rpx 0 20rpx;
|
|
|
|
|
|
|
+ gap: 20rpx;
|
|
|
|
|
+ margin: 24rpx 0 24rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.splash-dim-item {
|
|
.splash-dim-item {
|
|
@@ -213,15 +269,15 @@ export default {
|
|
|
animation: splash-dim-enter 0.4s ease forwards;
|
|
animation: splash-dim-enter 0.4s ease forwards;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.splash-dim-item:nth-child(1) { animation-delay: 0.8s; }
|
|
|
|
|
-.splash-dim-item:nth-child(2) { animation-delay: 1.05s; }
|
|
|
|
|
-.splash-dim-item:nth-child(3) { animation-delay: 1.3s; }
|
|
|
|
|
-.splash-dim-item:nth-child(4) { animation-delay: 1.55s; }
|
|
|
|
|
-.splash-dim-item:nth-child(5) { animation-delay: 1.8s; }
|
|
|
|
|
|
|
+.splash-dim-item:nth-child(1) { animation-delay: 0.4s; }
|
|
|
|
|
+.splash-dim-item:nth-child(2) { animation-delay: 0.55s; }
|
|
|
|
|
+.splash-dim-item:nth-child(3) { animation-delay: 0.7s; }
|
|
|
|
|
+.splash-dim-item:nth-child(4) { animation-delay: 0.85s; }
|
|
|
|
|
+.splash-dim-item:nth-child(5) { animation-delay: 1.0s; }
|
|
|
|
|
|
|
|
.splash-dim-circle {
|
|
.splash-dim-circle {
|
|
|
- width: 64rpx;
|
|
|
|
|
- height: 64rpx;
|
|
|
|
|
|
|
+ width: 68rpx;
|
|
|
|
|
+ height: 68rpx;
|
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
@@ -229,15 +285,15 @@ export default {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.splash-dim-icon {
|
|
.splash-dim-icon {
|
|
|
- font-size: 28rpx;
|
|
|
|
|
|
|
+ font-size: 30rpx;
|
|
|
line-height: 1;
|
|
line-height: 1;
|
|
|
- color: #FFFFFF;
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.splash-dim-label {
|
|
.splash-dim-label {
|
|
|
- font-size: 18rpx;
|
|
|
|
|
- color: rgba(255, 255, 255, 0.7);
|
|
|
|
|
|
|
+ font-size: 20rpx;
|
|
|
|
|
+ color: rgba(124, 45, 18, 0.7);
|
|
|
line-height: 1;
|
|
line-height: 1;
|
|
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@keyframes splash-dim-enter {
|
|
@keyframes splash-dim-enter {
|
|
@@ -250,4 +306,4 @@ export default {
|
|
|
transform: translateY(0);
|
|
transform: translateY(0);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-</style>
|
|
|
|
|
|
|
+</style>
|