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

<template>
  <view class="splash-root">
    <view class="splash-content">
      <!-- Brand Logo Mark -->
      <view class="splash-logo-mark">
        <text class="splash-logo-char">浠</text>
      </view>

      <!-- Brand Name -->
      <text class="splash-brand-name">浠艾福</text>

      <!-- 五维图标行 -->
      <view class="splash-dims-row">
        <view class="splash-dim-item">
          <view class="splash-dim-circle" style="background:rgba(141,110,99,0.25);">
            <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,53,0.25);">
            <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,215,0,0.25);">
            <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(76,175,80,0.25);">
            <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(66,165,245,0.25);">
            <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() {
    // 标记 splash 已展示
    this.ready = true
  },
  onReady() {
    // 延迟 2500ms 后跳转到首页
    setTimeout(function() {
      uni.setStorageSync('_splashReady', true)
      uni.reLaunch({
        url: '/pages/index/index'
      })
    }, 2500)
  }
}
</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%, #F97316 100%);
  z-index: 9999;
}

.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(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Logo Mark ===== */
.splash-logo-mark {
  width: 144rpx;
  height: 144rpx;
  border-radius: 36rpx;
  background: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24rpx;
  backdrop-filter: blur(4px);
}

.splash-logo-char {
  font-size: 72rpx;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
}

/* ===== Brand Name ===== */
.splash-brand-name {
  font-size: 56rpx;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 8rpx;
  margin-bottom: 12rpx;
  text-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

/* ===== Tagline ===== */
.splash-tagline {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 4rpx;
  font-weight: 400;
}

/* ===== 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(255, 255, 255, 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: 16rpx;
  margin: 16rpx 0 20rpx;
}

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

.splash-dim-icon {
  font-size: 28rpx;
  line-height: 1;
  color: #FFFFFF;
}

.splash-dim-label {
  font-size: 18rpx;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1;
}

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