feat:完善孙中山

src/components/layout/quiz/SingleChoiceQuizPanel.tsx

@@ -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>