zhongyidian
d445f81e60
- 更新陈云、鲁迅、聂耳等故居的展品图片素材 - 更新拼图细节图片 - 优化学习地图底图和详情图 - 更新音频素材 - 优化各故居 store 和页面组件
104 lines
3.6 KiB
TypeScript
104 lines
3.6 KiB
TypeScript
import type { MouseEvent } from 'react'
|
|
|
|
export interface ContinueLearningModalProps {
|
|
/** 是否可见 */
|
|
visible?: boolean
|
|
/** 标题 */
|
|
title?: string
|
|
/** 提示正文 */
|
|
message?: string
|
|
/** 继续按钮文案 */
|
|
continueText?: string
|
|
/** 取消按钮文案 */
|
|
cancelText?: string
|
|
/** 点击「继续学习」回调 */
|
|
onContinue?: () => void
|
|
/** 点击「取消」或遮罩回调 */
|
|
onCancel?: () => void
|
|
}
|
|
|
|
/**
|
|
* ContinueLearningModal - 「未完成，是否继续学习」二选一确认弹窗
|
|
* 纯 CSS 实现，暖纸 + 朱红 + 金线古籍风，不依赖图片素材。
|
|
*/
|
|
const ContinueLearningModal = ({
|
|
visible = true,
|
|
title = '温馨提示',
|
|
message = '你还没有完成本故居的学习，是否继续上次的进度？',
|
|
continueText = '继续学习',
|
|
cancelText = '取消',
|
|
onContinue,
|
|
onCancel,
|
|
}: ContinueLearningModalProps) => {
|
|
if (!visible) return null
|
|
|
|
const swallow = (e: MouseEvent) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-10000 flex items-center justify-center">
|
|
{/* 遮罩 */}
|
|
<div className="absolute inset-0 bg-[#1f0e06]/65" onClick={onCancel} />
|
|
|
|
{/* 哑光米纸卡片 */}
|
|
<div
|
|
className="relative z-10 w-[920px] rounded-[28px] border-[3px] border-[#bfa05c] bg-gradient-to-b from-[#e4d4b2] to-[#d6c198] px-20 py-14 shadow-[0_24px_70px_rgba(20,8,4,0.5)]"
|
|
onClick={swallow}
|
|
>
|
|
{/* 内层细金线描边 */}
|
|
<div className="pointer-events-none absolute inset-[10px] rounded-[20px] border border-[#bfa05c]/55" />
|
|
|
|
<div className="relative flex flex-col items-center">
|
|
{/* 标题 */}
|
|
<div className="text-5xl font-bold tracking-[10px] text-[#a8281c]">{title}</div>
|
|
|
|
{/* 菱形分隔线 */}
|
|
<div className="mt-6 flex items-center gap-4">
|
|
<span className="h-[2px] w-24 bg-gradient-to-r from-transparent to-[#c0392b]/70" />
|
|
<span className="h-3 w-3 rotate-45 bg-[#c0392b]" />
|
|
<span className="h-[2px] w-24 bg-gradient-to-l from-transparent to-[#c0392b]/70" />
|
|
</div>
|
|
|
|
{/* 正文 */}
|
|
<p className="indent-18 mt-10 max-w-[720px] text-4xl font-medium leading-relaxed tracking-wide text-[#5c3a1e]">
|
|
{message}
|
|
</p>
|
|
|
|
{/* 按钮组 */}
|
|
<div className="mt-12 flex items-center gap-12">
|
|
{/* 取消（次要：米底描边） */}
|
|
<button
|
|
type="button"
|
|
className="cursor-pointer rounded-full border-2 border-[#bfa05c] bg-[#ecdcb6] px-14 py-3.5 text-3xl font-bold tracking-[4px] text-[#8a5326] transition-all duration-200 hover:bg-[#e2d0a8] active:scale-95"
|
|
onMouseDown={swallow}
|
|
onClick={(e) => {
|
|
swallow(e)
|
|
onCancel?.()
|
|
}}
|
|
>
|
|
{cancelText}
|
|
</button>
|
|
|
|
{/* 继续学习（主要：朱红渐变 + 金边） */}
|
|
<button
|
|
type="button"
|
|
className="cursor-pointer rounded-full border-2 border-[#e8c06a] bg-gradient-to-b from-[#d4452f] to-[#a8281c] px-14 py-3.5 text-3xl font-bold tracking-[4px] text-[#fdf1da] shadow-[0_8px_20px_rgba(150,40,25,0.45)] transition-all duration-200 hover:brightness-110 active:scale-95"
|
|
onMouseDown={swallow}
|
|
onClick={(e) => {
|
|
swallow(e)
|
|
onContinue?.()
|
|
}}
|
|
>
|
|
{continueText}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ContinueLearningModal
|