feat: 完善实战进度与技能树联动

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-23 10:15:57 +08:00
1 parent 3e258b87d9
commit dd233e102b
@@ -0,0 +1,125 @@
+<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>