cfc/cfc-frontend/components/MilestoneCelebration.vue

<template>
  <view class="celebration-overlay" v-if="visible" @click="dismiss" @touchmove.stop.prevent>
    <!-- CSS粒子 -->
    <view
      class="celebration-particle"
      v-for="p in particles"
      :key="p.id"
      :style="{
        left: p.left + '%',
        animationDelay: p.delay + 's',
        animationDuration: p.duration + 's',
        background: p.color,
        width: p.size + 'rpx',
        height: p.size + 'rpx'
      }">
    </view>
    <!-- 文字 -->
    <view class="celebration-content">
      <text class="celebration-title">{{ title }}</text>
      <text class="celebration-subtitle">{{ subtitle }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    visible: { type: Boolean, default: false },
    title: { type: String, default: '' },
    subtitle: { type: String, default: '' },
    particles: { type: Array, default: function() { return [] } }
  },
  methods: {
    dismiss: function() {
      this.$emit('dismiss')
    }
  }
}
</script>

<style scoped>
.celebration-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.celebration-particle {
  position: absolute;
  top: -20rpx;
  border-radius: 50%;
  animation: particleFall linear forwards;
  opacity: 0.9;
}
.celebration-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
  z-index: 1;
  animation: celebrationTextIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.celebration-title {
  font-size: 56rpx;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 4rpx 20rpx rgba(0,0,0,0.3);
}
.celebration-subtitle {
  font-size: 32rpx;
  color: rgba(255,255,255,0.9);
}
</style>

<style>
@keyframes particleFall {
  0%   { transform: translateY(-20rpx) rotate(0deg); opacity: 0.9; }
  50%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}
@keyframes celebrationTextIn {
  0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
</style>