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>

      <!-- 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;
  }
}
</style>