|
|
@@ -0,0 +1,254 @@
|
|
|
+<template>
|
|
|
+ <view class="splash-overlay">
|
|
|
+ <view class="splash-overlay-bg">
|
|
|
+ <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-logo-wrap">
|
|
|
+ <image class="splash-logo-img" src="/static/logo.png" mode="aspectFit" />
|
|
|
+ </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-tagline">给全家的一站式幸福提案</text>
|
|
|
+ <view class="splash-overlay-loading">
|
|
|
+ <view class="splash-overlay-dot"></view>
|
|
|
+ <view class="splash-overlay-dot"></view>
|
|
|
+ <view class="splash-overlay-dot"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ onShow() {
|
|
|
+ // 显示 2 秒后自动跳转到首页
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.reLaunch({ url: '/pages/index-home/index' })
|
|
|
+ }, 2000)
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.splash-overlay {
|
|
|
+ position: fixed;
|
|
|
+ top: 0; left: 0; right: 0; bottom: 0;
|
|
|
+ z-index: 9999;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: linear-gradient(160deg, #FFF7ED 0%, #FFEDD5 50%, #FED7AA 100%);
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.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.12;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-circle-1 {
|
|
|
+ width: 400rpx;
|
|
|
+ height: 400rpx;
|
|
|
+ background: #FF8C42;
|
|
|
+ top: -100rpx;
|
|
|
+ right: -80rpx;
|
|
|
+ animation: splash-float-1 4s ease-in-out infinite;
|
|
|
+}
|
|
|
+
|
|
|
+.bg-circle-2 {
|
|
|
+ width: 280rpx;
|
|
|
+ height: 280rpx;
|
|
|
+ background: #FF6B9D;
|
|
|
+ bottom: 80rpx;
|
|
|
+ left: -60rpx;
|
|
|
+ animation: splash-float-2 5s ease-in-out infinite;
|
|
|
+}
|
|
|
+
|
|
|
+.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.08); }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes splash-float-3 {
|
|
|
+ 0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
|
+ 50% { transform: translateY(-20rpx) rotate(10deg); }
|
|
|
+}
|
|
|
+
|
|
|
+.splash-overlay-body {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ animation: splash-body-in 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes splash-body-in {
|
|
|
+ from { opacity: 0; transform: translateY(40rpx) scale(0.96); }
|
|
|
+ to { opacity: 1; transform: translateY(0) scale(1); }
|
|
|
+}
|
|
|
+
|
|
|
+.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: 16rpx;
|
|
|
+ box-shadow: 0 8rpx 32rpx rgba(249,115,22,0.25);
|
|
|
+ animation: splash-logo-pulse 2.5s ease-in-out infinite;
|
|
|
+}
|
|
|
+
|
|
|
+@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-brand-name {
|
|
|
+ font-size: 64rpx;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #7C2D12;
|
|
|
+ letter-spacing: 10rpx;
|
|
|
+ margin-bottom: 2rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.splash-brand-en {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: rgba(124,45,18,0.5);
|
|
|
+ letter-spacing: 6rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.splash-dims-row {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 28rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.splash-dim-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ 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-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); }
|
|
|
+}
|
|
|
+
|
|
|
+.splash-tagline {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: rgba(124,45,18,0.7);
|
|
|
+ letter-spacing: 4rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.splash-overlay-loading {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 120rpx;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.splash-overlay-dot {
|
|
|
+ width: 14rpx;
|
|
|
+ height: 14rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: rgba(249,115,22,0.6);
|
|
|
+ animation: splash-dot-bounce 1.4s ease-in-out infinite both;
|
|
|
+}
|
|
|
+
|
|
|
+.splash-overlay-dot:nth-child(1) { animation-delay: -0.32s; }
|
|
|
+.splash-overlay-dot:nth-child(2) { animation-delay: -0.16s; }
|
|
|
+.splash-overlay-dot:nth-child(3) { animation-delay: 0s; }
|
|
|
+
|
|
|
+@keyframes splash-dot-bounce {
|
|
|
+ 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
|
|
|
+ 40% { transform: scale(1); opacity: 1; }
|
|
|
+}
|
|
|
+</style>
|