network-course/shanghai-residences
2
0 Fork 0
forked from zhongyidian/shanghai-residences
Code Pull Requests Activity

feat:完善孙中山

Browse Source
This commit is contained in:
zhongyidian committed 2026-01-10 21:09:26 +08:00
1 parent b3d30100da
commit ec7e8e2bd2
14 files changed
+846 -135
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/guide/StudyGuideModal.tsx
+2 -2
View File
@@ -74,7 +74,7 @@ export const StudyGuideModal = ({
{/* 文本内容 */}
<div
className={cn(
"relative z-10 w-[1400px] flex items-center justify-center mx-auto text-white pointer-events-none",
"relative z-10 w-[1480px] flex items-center justify-center mx-auto text-white pointer-events-auto",
ailgn === "left" && "justify-start",
ailgn === "right" && "justify-end"
)}
@@ -87,7 +87,7 @@ export const StudyGuideModal = ({
{children && (
<div
className={cn(
"text-4xl leading-relaxed whitespace-pre-line",
"text-4xl leading-relaxed whitespace-pre-line overflow-y-auto custom-scrollbar max-h-[300px]",
"[text-shadow:_0px_0px_10px_rgba(193,85,64,0.4),_0px_0px_10px_rgba(193,85,64,0.4),_0px_0px_10px_rgba(193,85,64,0.4),_0px_0px_10px_rgba(193,85,64,0.4)]"
)}
style={{
src/components/layout/quiz/MultipleChoiceQuizPanel.tsx
+21 -42
View File
@@ -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>
src/components/layout/quiz/SingleChoiceQuizPanel.tsx
+18 -34
View File
@@ -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>