super_video/src/views/home/components/StudyProgressPopup/CertificateDetailPopup.vue

<script lang="ts" setup>
import { getStaticImage } from '@/utils'
import { ImgButton } from '@/components'

defineOptions({
  name: 'CertificateDetailPopup',
})

defineProps<{
  date: string // '2026-06-18' 颁发日期
  certificateNumber: string // '001' 证书编号
  studentNumber: string // '001' 学员数量
}>()

const visible = defineModel<boolean>({ default: false })

const emit = defineEmits<{
  close: []
}>()

const handleClose = () => {
  visible.value = false
  emit('close')
}
</script>

<template>
  <Transition
    enter-active-class="transition-all duration-500 ease-out"
    enter-from-class="opacity-0 scale-95 blur-[6px]"
    enter-to-class="opacity-100 scale-100 blur-none"
    leave-active-class="transition-all duration-300 ease-in"
    leave-from-class="opacity-100 scale-100 blur-none"
    leave-to-class="opacity-0 scale-95 blur-[6px]"
  >
    <div
      v-if="visible"
      class="absolute inset-0 z-[120] flex items-center justify-center bg-black/45"
      @click.stop
    >
      <div class="certificate-detail relative text-2xl">
        <img
          draggable="false"
          :src="getStaticImage('components/medal/证书详情')"
          class="certificate-detail-img object-contain"
          alt=""
        />
        <ImgButton
          class="absolute right-2 top-0 z-10"
          :image="'components/close'"
          @click="handleClose"
        />

        <!-- 证书编号 -->
        <span class="absolute bottom-[154px] left-[390px]">
          {{ certificateNumber }}
        </span>
        <!-- 颁发日期 -->
        <span class="absolute bottom-[122px] left-[390px]">{{ date }}</span>
        <!-- 多少位学员 -->
        <span class="absolute bottom-[468px] left-[948px] text-3xl">
          {{ studentNumber }}
        </span>
        <span class="absolute bottom-[380px] left-[1070px]">
          {{ studentNumber }}
        </span>
      </div>
    </div>
  </Transition>
</template>

<style scoped>
.certificate-detail {
  animation: certificate-detail-pop 650ms cubic-bezier(0.18, 0.9, 0.24, 1.12)
    both;
  filter: drop-shadow(0 0 38px rgba(133, 236, 255, 0.85));
}

.certificate-detail::before {
  content: '';
  position: absolute;
  inset: 8% 12%;
  z-index: -1;
  border-radius: 48px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(117, 235, 255, 0.32) 38%,
    rgba(117, 235, 255, 0) 72%
  );
  animation: certificate-glow 1600ms ease-in-out infinite;
}

.certificate-detail-img {
  width: 100%;
  height: 100%;
}

@keyframes certificate-detail-pop {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.9);
  }
  58% {
    opacity: 1;
    transform: translateY(-8px) scale(1.025);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes certificate-glow {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.98);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.04);
  }
}
</style>