From ea63e56f969a1d14c7f944ed506f20e29256bf3a Mon Sep 17 00:00:00 2001 From: jeremygan2021 Date: Fri, 13 Feb 2026 14:25:41 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .trae/documents/plan_20260213_061302.md | 13 ++++++ public/index.html | 4 +- public/logo.svg | 35 +++++++++++++++ src/App.css | 57 ++++++++++++++++--------- src/App.js | 1 + src/asset/logo.svg | 35 +++++++++++++++ src/components/ContactSection.js | 2 +- 7 files changed, 124 insertions(+), 23 deletions(-) create mode 100644 .trae/documents/plan_20260213_061302.md create mode 100644 public/logo.svg create mode 100644 src/asset/logo.svg diff --git a/.trae/documents/plan_20260213_061302.md b/.trae/documents/plan_20260213_061302.md new file mode 100644 index 0000000..94f9a9f --- /dev/null +++ b/.trae/documents/plan_20260213_061302.md @@ -0,0 +1,13 @@ +I will optimize the layout for `ContactSection.js` and fix the responsive issues, including the "bottom text" visibility and mobile layout. + +### Plan: +1. **Modify `src/App.css` to fix layout and scrolling issues:** + * **Enable Scrolling:** Update the `.section` class to include `overflow-y: auto` and `overflow-x: hidden`. This is critical for mobile devices where content height often exceeds the viewport, ensuring the bottom text (footer) in `ContactSection` is accessible. + * **Optimize Mobile Layout for ContactSection:** + * Adjust `.contact-section` margins and paddings for mobile screens (`max-width: 768px`) to reduce wasted space and ensure content fits better. + * Tweaking `.contact-footer` spacing. + * **Verify/Fix HeroSection Video Layout:** + * Ensure the container for the video (`.hero-right`) has appropriate sizing on mobile so the video (`stay.mp4`) displays correctly within its container, addressing the user's concern about the "responsive layout" of that element. + +2. **Verify the changes:** + * I will verify the CSS changes by checking the code structure and ensuring the styles logically solve the overflow and spacing issues. diff --git a/public/index.html b/public/index.html index 1c0da8c..ed8de0e 100644 --- a/public/index.html +++ b/public/index.html @@ -5,7 +5,9 @@ - Radiant AI - 创新科技，引领未来 + + + 量迹AI科技 diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..25f8a5d --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + QUANT SPEED + + \ No newline at end of file diff --git a/src/App.css b/src/App.css index 539b8b0..77797be 100644 --- a/src/App.css +++ b/src/App.css @@ -104,10 +104,14 @@ body, html { height: 100%; display: flex; flex-direction: column; - justify-content: center; + justify-content: flex-start; align-items: center; padding: 2rem; + padding-top: 6rem; transform-style: preserve-3d; + overflow-y: auto; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; } .section-title { @@ -1650,36 +1654,37 @@ body, html { .contact-section { width: 100%; max-width: 1400px; - margin-top: 8rem; + margin-top: auto; + margin-bottom: auto; } .contact-header { text-align: center; - margin-bottom: 4rem; + margin-bottom: 2rem; } .contact-header h2 { - font-size: 2.5rem; - margin-bottom: 1rem; + font-size: 2.2rem; + margin-bottom: 0.5rem; color: var(--text-primary); } .contact-header p { - font-size: 1.2rem; + font-size: 1rem; color: var(--text-secondary); } .contact-container { display: grid; grid-template-columns: 1fr 1fr; - gap: 3rem; + gap: 2rem; } .contact-methods { display: flex; flex-direction: column; - gap: 1.5rem; - margin-bottom: 3rem; + gap: 1rem; + margin-bottom: 2rem; } .contact-method { @@ -1687,11 +1692,11 @@ body, html { backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--border-radius); - padding: 2rem; + padding: 1.5rem; transition: var(--transition-smooth); display: flex; align-items: center; - gap: 1.5rem; + gap: 1.2rem; } .contact-method:hover { @@ -1726,30 +1731,31 @@ body, html { backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--border-radius); - padding: 2rem; + padding: 1.5rem; } .contact-social h4 { color: var(--text-primary); - margin-bottom: 1rem; + margin-bottom: 0.8rem; } .social-links { display: flex; - gap: 1rem; + gap: 0.8rem; } .social-link { background: var(--gradient-primary); color: white; - padding: 0.8rem 1.2rem; - border-radius: 15px; + padding: 0.6rem 1rem; + border-radius: 12px; cursor: pointer; font-weight: 500; transition: var(--transition-smooth); text-align: center; - min-width: 80px; + min-width: 70px; box-shadow: var(--shadow-soft); + font-size: 0.9rem; } .social-link:hover { @@ -1762,12 +1768,12 @@ body, html { backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--border-radius); - padding: 3rem; + padding: 2rem; box-shadow: var(--shadow-soft); } .form-group { - margin-bottom: 1.5rem; + margin-bottom: 1.2rem; } .form-group label { @@ -2107,9 +2113,18 @@ body, html { } .contact-section { - margin-top: 5rem; - padding: 0 1.5rem; + margin-top: 2rem; + margin-bottom: 0; + padding: 0 1rem; + padding-bottom: 4rem; /* Ensure footer has space */ } + + .contact-footer { + margin-top: 2rem; + padding-top: 1.5rem; + padding-bottom: 2rem; + } + .contact-header h2 { font-size: 2rem; diff --git a/src/App.js b/src/App.js index ca90fae..ea2ff13 100644 --- a/src/App.js +++ b/src/App.js @@ -39,6 +39,7 @@ const App = () => { // 同步 ref 值 useEffect(() => { + document.title = "量迹AI科技"; isScrollingRef.current = isScrolling; currentSectionRef.current = currentSection; }, [isScrolling, currentSection]); diff --git a/src/asset/logo.svg b/src/asset/logo.svg new file mode 100644 index 0000000..25f8a5d --- /dev/null +++ b/src/asset/logo.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + QUANT SPEED + + \ No newline at end of file diff --git a/src/components/ContactSection.js b/src/components/ContactSection.js index 46c65da..9996c26 100644 --- a/src/components/ContactSection.js +++ b/src/components/ContactSection.js @@ -159,7 +159,7 @@ const ContactSection = ({ isActive }) => { animate={isActive ? { opacity: 1 } : {}} transition={{ duration: 1, delay: 1.2 }} > -

© 2024 Radiant AI. 创新科技，引领未来。

+

© 2024 量迹AI. 创新科技，引领未来。

滇ICP备2025071546号-1