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

<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>
      <text class="splash-identity">看见全家 · 了解健康 · 主动管理</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() {
    // 只允许跳转一次。onShow 在 devtools 重渲染、前后台切换时会重复触发，
    // 多个 reLaunch 并发会让框架对已销毁的 webview 调用 routeDone，
    // 报 "routeDone with a webviewId N is not found"。
    if (this._hasLaunched) return
    this._hasLaunched = true
    // 显示 2 秒后自动跳转到首页
    this._launchTimer = setTimeout(() => {
      this._launchTimer = null
      uni.reLaunch({ url: '/pages/index-home/index' })
    }, 2000)
  },
  onUnload() {
    // 离开启动页时清掉尚未触发的定时器，避免对已销毁的页面再发起 reLaunch
    if (this._launchTimer) {
      clearTimeout(this._launchTimer)
      this._launchTimer = null
    }
  }
}
</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-identity {
  font-size: 28rpx;
  font-weight: 600;
  color: rgba(124,45,18,0.85);
  letter-spacing: 2rpx;
  margin-bottom: 12rpx;
  text-align: center;
  line-height: 1.5;
}

.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>