zhongyidianandClaude Opus 4.7
6f289959be
完善新手导航和三大创作模块的视频完成缓存、未完成提示与学习进度计算，确保进度按实际学习资源完成情况更新。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
81 lines
3.0 KiB
Vue
81 lines
3.0 KiB
Vue
<script lang="ts" setup>
|
|
import { Overlay } from '@/components/Overlay'
|
|
|
|
interface Props {
|
|
visible: boolean
|
|
message?: string
|
|
continueText?: string
|
|
leaveText?: string
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
message: '当前页面还有学习资源没有学习完成，建议继续完成后再离开。',
|
|
continueText: '继续学习',
|
|
leaveText: '确认离开',
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'continue'): void
|
|
(e: 'leave'): void
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<Overlay
|
|
:visible="visible"
|
|
:clickable="false"
|
|
background="rgba(80, 220, 255, 0.18)"
|
|
animation="zoom"
|
|
:z-index="3000"
|
|
>
|
|
<div
|
|
class="relative w-[860px] overflow-hidden rounded-[42px] border-[5px] border-white/80 bg-gradient-to-br from-[#e8fbff]/95 via-[#d8ddff]/95 to-[#ffd8f3]/95 px-16 py-14 text-center shadow-[0_24px_70px_rgba(48,122,255,0.32)]"
|
|
>
|
|
<div
|
|
class="pointer-events-none absolute -left-16 -top-20 h-56 w-56 rounded-full bg-[#5ff3ff]/55 blur-3xl"
|
|
/>
|
|
<div
|
|
class="pointer-events-none absolute right-[-70px] top-[-60px] h-60 w-60 rounded-full bg-[#ff65d8]/45 blur-3xl"
|
|
/>
|
|
<div
|
|
class="pointer-events-none absolute bottom-[-90px] left-1/2 h-64 w-64 -translate-x-1/2 rounded-full bg-[#ffe96b]/45 blur-3xl"
|
|
/>
|
|
<div
|
|
class="pointer-events-none absolute inset-x-10 top-5 h-[3px] rounded-full bg-gradient-to-r from-transparent via-white to-transparent"
|
|
/>
|
|
|
|
<div
|
|
class="relative mx-auto mb-7 flex h-24 w-24 items-center justify-center rounded-[30px] border-[4px] border-white bg-gradient-to-br from-[#36eaff] to-[#7b7cff] shadow-[0_12px_28px_rgba(54,234,255,0.38)] rotate-[-6deg]"
|
|
>
|
|
<span
|
|
class="text-[56px] font-black leading-none text-white drop-shadow-[0_4px_0_rgba(34,80,180,0.45)]"
|
|
>
|
|
!
|
|
</span>
|
|
</div>
|
|
|
|
<p
|
|
class="relative mx-auto mt-7 max-w-[650px] text-[34px] font-black leading-[1.65] text-[#294579]"
|
|
>
|
|
{{ message }}
|
|
</p>
|
|
|
|
<div class="relative mt-12 flex items-center justify-center gap-9">
|
|
<button
|
|
class="h-[76px] min-w-[220px] rounded-full border-[3px] border-[#78bfff] bg-white/70 px-10 text-[28px] font-black text-[#3470c8] shadow-[0_10px_0_rgba(70,139,220,0.22)] transition-all duration-200 hover:-translate-y-1 hover:bg-white active:translate-y-1 active:shadow-[0_5px_0_rgba(70,139,220,0.22)]"
|
|
@click="emit('leave')"
|
|
>
|
|
{{ leaveText }}
|
|
</button>
|
|
|
|
<button
|
|
class="h-[76px] min-w-[220px] rounded-full border-[3px] border-white bg-gradient-to-r from-[#ff82d8] via-[#ff9f4a] to-[#ffd447] px-10 text-[28px] font-black text-white shadow-[0_10px_0_rgba(236,111,40,0.28),0_16px_35px_rgba(255,130,216,0.32)] transition-all duration-200 hover:-translate-y-1 active:translate-y-1 active:shadow-[0_5px_0_rgba(236,111,40,0.28)]"
|
|
@click="emit('continue')"
|
|
>
|
|
{{ continueText }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Overlay>
|
|
</template>
|