82 lines
2.8 KiB
TypeScript
82 lines
2.8 KiB
TypeScript
import { SingleChoice } from "@/components";
|
|
import { getBackgroundImage } from "@/lib/utils";
|
|
import type { QuizPanelProps } from "./types";
|
|
|
|
/** 单选题展示面板：题干使用“底板”背景，点击即选，hover 高亮 */
|
|
const QuizPanel = ({
|
|
visible,
|
|
zIndex = 10000,
|
|
title,
|
|
options,
|
|
value,
|
|
error,
|
|
onChange,
|
|
}: QuizPanelProps) => {
|
|
if (!visible) return null;
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 flex items-center justify-center bg-black/40"
|
|
style={{ zIndex }}
|
|
>
|
|
<div className="relative w-[1728px] h-[972px] flex flex-col items-center justify-center">
|
|
{/* 题干卡片 */}
|
|
<div className="w-[1600px] min-h-[260px] rounded-[32px] bg-black px-20 py-14 shadow-[0_20px_60px_rgba(240,190,117,0.8)] border-4 border-[#d4c5a9]">
|
|
<div className="text-[34px] leading-relaxed text-white">{title}</div>
|
|
</div>
|
|
|
|
{/* 选项区域 */}
|
|
<div className="mt-16 w-[1500px]">
|
|
<SingleChoice
|
|
options={options}
|
|
value={value}
|
|
renderOption={(option, isSelected) => (
|
|
<div
|
|
key={option.value}
|
|
className="mb-6 cursor-pointer"
|
|
onClick={() => onChange?.(option.value)}
|
|
>
|
|
<div
|
|
className="w-[1431px] h-[156px] flex items-center px-16 text-[28px] leading-snug text-[#fdf5e6] bg-cover bg-center bg-no-repeat transition-all duration-150"
|
|
style={{
|
|
backgroundImage: getBackgroundImage(
|
|
isSelected
|
|
? "components/quiz/选中"
|
|
: "components/quiz/未选择"
|
|
),
|
|
filter: isSelected ? undefined : "brightness(0.96)",
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
if (isSelected) return;
|
|
(e.currentTarget as HTMLDivElement).style.backgroundImage =
|
|
getBackgroundImage("components/quiz/选中");
|
|
(e.currentTarget as HTMLDivElement).style.filter = "";
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
if (isSelected) return;
|
|
(e.currentTarget as HTMLDivElement).style.backgroundImage =
|
|
getBackgroundImage("components/quiz/未选择");
|
|
(e.currentTarget as HTMLDivElement).style.filter =
|
|
"brightness(0.96)";
|
|
}}
|
|
>
|
|
{option.label}
|
|
</div>
|
|
</div>
|
|
)}
|
|
/>
|
|
|
|
{/* 答案反馈 */}
|
|
{error && (
|
|
<div className="mt-6 text-center text-[26px] text-[#ff4d4f]">
|
|
{error}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default QuizPanel;
|