cfc/cfc-frontend/pages/splash/splash.vue

<template>
  <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">
      <!-- Logo 图标 -->
      <view class="splash-logo-wrap">
        <image class="splash-logo-img" src="/static/logo.png" mode="aspectFit" />
      </view>

      <!-- Brand Name -->
      <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>

      <!-- Tagline -->
      <text class="splash-tagline">给全家的一站式幸福提案</text>

      <!-- Loading dots at bottom -->
      <view class="splash-loading">
        <view class="splash-dot splash-dot--1"></view>
        <view class="splash-dot splash-dot--2"></view>
        <view class="splash-dot splash-dot--3"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SplashPage',
  data() {
    return {
      ready: false
    }
  },
  onLoad() {
    this.ready = true
  },
  onReady() {
    // 标记来自 splash 页，首页首次加载跳过 tab-transition
    uni.setStorageSync('_fromSplash', '1')
    // 至少展示 1 秒后跳转
    setTimeout(function() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }, 1200)
  }
}
</script>

<style scoped>
.splash-root {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #FFF7ED 0%, #FFEDD5 50%, #FED7AA 100%);
  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 {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  animation: splash-fade-in 0.8s ease forwards;
}

@keyframes splash-fade-in {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== 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;
  box-shadow: 0 8rpx 32rpx rgba(249, 115, 22, 0.25);
}

.splash-logo-img {
  width: 100rpx;
  height: 100rpx;
}

/* ===== Brand Name ===== */
.splash-brand-name {
  font-size: 60rpx;
  font-weight: 700;
  color: #7C2D12;
  letter-spacing: 8rpx;
  margin-bottom: 4rpx;
  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 ===== */
.splash-tagline {
  font-size: 28rpx;
  color: rgba(124, 45, 18, 0.8);
  letter-spacing: 2rpx;
  font-weight: 500;
}

/* ===== Loading Dots ===== */
.splash-loading {
  position: absolute;
  bottom: 120rpx;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12rpx;
}

.splash-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-dot--1 { animation-delay: -0.32s; }
.splash-dot--2 { animation-delay: -0.16s; }
.splash-dot--3 { animation-delay: 0s; }

@keyframes splash-dot-bounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===== 五维图标行 ===== */
.splash-dims-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
  margin: 24rpx 0 24rpx;
}

.splash-dim-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rpx;
  opacity: 0;
  transform: translateY(20rpx);
  animation: splash-dim-enter 0.4s ease forwards;
}

.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 {
  width: 68rpx;
  height: 68rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.splash-dim-icon {
  font-size: 30rpx;
  line-height: 1;
}

.splash-dim-label {
  font-size: 20rpx;
  color: rgba(124, 45, 18, 0.7);
  line-height: 1;
  font-weight: 500;
}

@keyframes splash-dim-enter {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>