feat:完善孙中山
This commit is contained in:
zhongyidian committed
1 parent
b3d30100da
commit
ec7e8e2bd2
14 files changed
+846
-135
No files matched your search
@@ -1,6 +1,5 @@
|
||||
import { useState } from "react";
|
||||
import { MultipleChoice } from "@/components";
|
||||
import { getBackgroundImage } from "@/lib/utils";
|
||||
import type { MultipleChoiceQuizPanelProps } from "./types";
|
||||
|
||||
/**
|
||||
@@ -110,14 +109,21 @@ const MultipleChoiceQuizPanel = ({
|
||||
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 py-8">
|
||||
<div className="relative w-[1728px] flex flex-col items-center py-6">
|
||||
{/* 题干卡片 */}
|
||||
<div className="w-[1600px] min-h-[200px] max-h-[280px] rounded-[32px] bg-black px-20 py-12 shadow-[0_20px_60px_rgba(240,190,117,0.8)] border-4 border-[#d4c5a9] flex-shrink-0">
|
||||
<div className="w-[1700px] rounded-[32px] bg-black px-20 py-12 shadow-[0_20px_60px_rgba(240,190,117,0.8)] border-4 border-[#d4c5a9] flex-shrink-0">
|
||||
<div className="text-[34px] leading-relaxed text-white">{title}</div>
|
||||
|
||||
{/* 答案反馈 */}
|
||||
{error && (
|
||||
<div className="mt-5 text-center text-[26px] text-[#fcbe53]">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 选项区域 - 可滚动 */}
|
||||
<div className="mt-8 w-[1500px] flex-1 overflow-y-auto overflow-x-hidden px-4 min-h-0 quiz-scrollbar">
|
||||
<div className="mt-8 overflow-y-auto overflow-x-hidden custom-scrollbar">
|
||||
<MultipleChoice
|
||||
options={options}
|
||||
value={selectedValues}
|
||||
@@ -166,36 +172,16 @@ const MultipleChoiceQuizPanel = ({
|
||||
return (
|
||||
<div key={option.value} className="mb-4">
|
||||
<div
|
||||
className="w-full max-w-[1431px] min-h-[120px] h-auto py-4 flex items-center px-16 text-[28px] leading-relaxed 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)",
|
||||
opacity: isDisabled ? 0.6 : 1,
|
||||
cursor: isDisabled ? "not-allowed" : "pointer",
|
||||
}}
|
||||
className={`w-[1500px] flex items-center p-4 text-[28px] leading-relaxed rounded-tr-[50px] rounded-bl-4xl transition-all duration-150 ${
|
||||
isDisabled
|
||||
? "opacity-60 cursor-not-allowed"
|
||||
: "cursor-pointer"
|
||||
} ${
|
||||
isSelected
|
||||
? "bg-[#d4a574] text-[#5c3e2e] bg-gradient-to-r from-[#ddf3e1] to-[#fbdd97]"
|
||||
: "bg-[#d7b888] text-[#5c3e2e] hover:brightness-110"
|
||||
}`}
|
||||
onClick={handleClick}
|
||||
onMouseEnter={(e) => {
|
||||
if (isSelected || isDisabled) return;
|
||||
(
|
||||
e.currentTarget as HTMLDivElement
|
||||
).style.backgroundImage =
|
||||
getBackgroundImage("components/quiz/选中");
|
||||
(e.currentTarget as HTMLDivElement).style.filter = "";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (isSelected || isDisabled) return;
|
||||
(
|
||||
e.currentTarget as HTMLDivElement
|
||||
).style.backgroundImage = getBackgroundImage(
|
||||
"components/quiz/未选择"
|
||||
);
|
||||
(e.currentTarget as HTMLDivElement).style.filter =
|
||||
"brightness(0.96)";
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
</div>
|
||||
@@ -206,14 +192,7 @@ const MultipleChoiceQuizPanel = ({
|
||||
</div>
|
||||
|
||||
{/* 提交按钮和错误信息 - 固定在底部，不滚动 */}
|
||||
<div className="w-[1500px] flex-shrink-0 mt-4">
|
||||
{/* 答案反馈 */}
|
||||
{error && (
|
||||
<div className="mb-4 text-center text-[26px] text-[#ff4d4f]">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-shrink-0 mt-4">
|
||||
{/* 提交按钮 */}
|
||||
<div className="flex justify-center">
|
||||
<button
|
||||
@@ -224,7 +203,7 @@ const MultipleChoiceQuizPanel = ({
|
||||
(minSelections !== undefined &&
|
||||
selectedValues.length < minSelections)
|
||||
}
|
||||
className="px-30 py-4 text-[28px] font-medium text-white bg-[#b4915a] rounded-[40px] transition-all duration-200 hover:brightness-110 disabled:opacity-50 disabled:cursor-not-allowed shadow-lg"
|
||||
className="px-30 py-4 text-[28px] font-medium text-white bg-[#c2995f] rounded-[40px] transition-all duration-200 hover:brightness-110 disabled:opacity-50 disabled:cursor-not-allowed shadow-lg"
|
||||
>
|
||||
{submitText}
|
||||
</button>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { useState } from "react";
|
||||
import { SingleChoice } from "@/components";
|
||||
import { getBackgroundImage } from "@/lib/utils";
|
||||
import type { SingleChoiceQuizPanelProps } from "./types";
|
||||
|
||||
/**
|
||||
@@ -87,12 +86,19 @@ const SingleChoiceQuizPanel = ({
|
||||
>
|
||||
<div className="relative w-[1728px] h-[972px] flex flex-col items-center justify-center">
|
||||
{/* 题干卡片 */}
|
||||
<div className="w-[1600px] rounded-[32px] bg-black px-20 py-14 shadow-[0_20px_60px_rgba(240,190,117,0.8)] border-4 border-[#d4c5a9]">
|
||||
<div className="w-[1700px] rounded-[32px] bg-black px-20 py-8 shadow-[0_20px_60px_rgba(240,190,117,0.8)] border-4 border-[#d4c5a9]">
|
||||
<div className="text-[34px] leading-relaxed text-white">{title}</div>
|
||||
|
||||
{/* 答案反馈 */}
|
||||
{error && (
|
||||
<div className="mt-5 text-center text-[26px] text-[#fcbe53]">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 选项区域 */}
|
||||
<div className="mt-16 w-[1500px]">
|
||||
<div className="mt-16">
|
||||
<SingleChoice
|
||||
options={options}
|
||||
value={selectedValue}
|
||||
@@ -104,43 +110,21 @@ const SingleChoiceQuizPanel = ({
|
||||
onClick={() => handleOptionClick(option.value)}
|
||||
>
|
||||
<div
|
||||
className="w-[1431px] max-h-[156px] min-h-[100px] 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)",
|
||||
opacity: disabled ? 0.6 : 1,
|
||||
cursor: disabled ? "not-allowed" : "pointer",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (isSelected || disabled) return;
|
||||
(e.currentTarget as HTMLDivElement).style.backgroundImage =
|
||||
getBackgroundImage("components/quiz/选中");
|
||||
(e.currentTarget as HTMLDivElement).style.filter = "";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (isSelected || disabled) return;
|
||||
(e.currentTarget as HTMLDivElement).style.backgroundImage =
|
||||
getBackgroundImage("components/quiz/未选择");
|
||||
(e.currentTarget as HTMLDivElement).style.filter =
|
||||
"brightness(0.96)";
|
||||
}}
|
||||
className={`w-[1500px] flex items-center p-4 text-[28px] leading-relaxed rounded-tr-[50px] rounded-bl-4xl transition-all duration-150 ${
|
||||
disabled
|
||||
? "opacity-60 cursor-not-allowed"
|
||||
: "cursor-pointer"
|
||||
} ${
|
||||
isSelected
|
||||
? "bg-[#d4a574] text-[#5c3e2e]"
|
||||
: "bg-[#d7b888] text-[#5c3e2e] hover:bg-gradient-to-r from-[#ddf3e1] to-[#fbdd97]"
|
||||
}`}
|
||||
>
|
||||
{option.label}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* 答案反馈 */}
|
||||
{error && (
|
||||
<div className="mt-6 text-center text-[26px] text-[#ff4d4f]">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user