优化代码

src/App.tsx

@@ -22,7 +22,7 @@ const App: React.FC = () => {
             <Route path="/ships" element={<Ships />} />
             <Route path="/itineraries" element={<Itineraries />} />
             <Route path="/guide" element={<Guide />} />
-            <Route path="/space" element={<CruiseSpace />} />
+            <Route path="/spaces" element={<CruiseSpace />} />
             <Route path="/experience" element={<CruiseExperience />} />
             <Route path="/about" element={<AboutUs />} />
             <Route path="*" element={<Home />} />

src/components/FAQItem.tsx

@@ -7,7 +7,8 @@ export interface FAQItemProps {
 
 const FAQItem: React.FC<FAQItemProps> = ({ question, answer }) => {
   return (
-    <div className="bg-vista-gold rounded-lg shadow-xl p-6">
+    // <div className="bg-vista-gold rounded-lg shadow-xl p-6">
+    <div className="bg-white rounded-lg shadow-xl p-6">
       <h3 className="text-xl font-serif text-vista-black mb-3">
         {question}
       </h3>

src/constants.ts

@@ -53,11 +53,11 @@ export const CONTENT = {
         },
         { 
           title: "游轮空间", 
-          link: "#/space",
+          link: "#/spaces",
           submenu: [
-            { title: "设施设备", link: "#/space?section=facilities" },
-            { title: "房型介绍", link: "#/space?section=rooms" },
-            { title: "尊享礼遇", link: "#/space?section=vip" },
+            { title: "设施设备", link: "#/spaces?section=facislities" },
+            { title: "房型介绍", link: "#/spaces?section=rooms" },
+            { title: "尊享礼遇", link: "#/spaces?section=vip" },
           ]
         },
         { 

src/pages/CruiseExperience.tsx

@@ -34,7 +34,7 @@ const CruiseExperience: React.FC = () => {
           element.scrollIntoView({ 
             behavior: 'smooth', 
             block: 'start',
-            inline: 'nearest'
+            // inline: 'nearest'
           });
         }
       }, 300);

src/pages/CruiseSpace.tsx

@@ -17,45 +17,32 @@ const CruiseSpace: React.FC = () => {
     const t = CONTENT[language].shipsPage as any;
     const location = useLocation();
 
-//
-//     const params = new URLSearchParams(location.search);
-//     const section = params.get('section');
-//
-//     let elementId = '';
-//     if (section === 'tips') {
-//         elementId = 'guide-tips';
-//     } else if (section === 'faq') {
-//         elementId = 'guide-faq';
-//     }
-//
-//     if (elementId) {
-//         const element = document.getElementById(elementId);
-//         if (element) {
-//             element.scrollIntoView({ behavior: 'smooth' });
-//         }
-//     }
-// }, [location.search]);
-
-// Scroll to section on load or location change
+    // Scroll to section on load or location change
     useEffect(() => {
+        const SECTION_PREFIX = 'space-';
+        const SCROLL_DELAY = 300; // ms - delay to ensure DOM is fully rendered
+        
         const params = new URLSearchParams(location.search);
         const section = params.get('section');
-        const preStr = 'space-';
-        let elementId = preStr;
         
-        // Always scroll to top first
         if (!section) {
+            // Scroll to top when no section specified
             window.scrollTo({ top: 0, behavior: 'smooth' });
-        } else {
-            // Correctly construct elementId with section parameter
-            elementId = preStr + section;
-            const element = document.getElementById(elementId);
-            if (element) {
-                // Small delay to ensure render
-                setTimeout(() => {
-                    element.scrollIntoView({ behavior: 'smooth' });
-                }, 300);
-            }
+            return;
+        }
+        
+        // Construct element ID and scroll to target section
+        const elementId = `${SECTION_PREFIX}${section}`;
+        const element = document.getElementById(elementId);
+        
+        if (element) {
+            // Delay to ensure DOM is fully rendered before scrolling
+            const timeoutId = setTimeout(() => {
+                element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            }, SCROLL_DELAY);
+            
+            // Cleanup timeout on unmount or search change
+            return () => clearTimeout(timeoutId);
         }
     }, [location.search]);
 

src/pages/Guide.tsx

@@ -86,7 +86,8 @@ const Guide: React.FC = () => {
         </section>
 
         {/* FAQ Section */}
-        <section id="guide-faq" className="py-24 bg-vista-teal">
+        {/*<section id="guide-faq" className="py-24 bg-vista-teal">*/}
+        <section id="guide-faq" className="py-24 bg-gray-500">
           <div className="max-w-7xl mx-auto px-6">
             <div className="text-center mb-16">
               <span className="text-white uppercase tracking-widest text-sm font-bold">{t.guide.faq.sectionTitle}</span>