feat:1、结构优化 2、修改header

src/App.js

@@ -4,14 +4,11 @@ import Footer from "./component/Footer/Footer";
 import Header from "./component/Header/Header";
 import Home from "./pages/Home/Home";
 import FreeGo from "./pages/FreeGo/FreeGo";
-import Partner from "./pages/Partner/Partner";
-import News from "./pages/News/News";
 import AboutUs from "./pages/AboutUs/AboutUs";
-import {ABOUT_US, FREE_GO, HOME, NEWS, NEWS_DETAIL, PARTNER} from "./uitls/Constants";
+import {ABOUT_US, FREE_GO, HOME} from "./uitls/Constants";
 import './i18n';
 import React from "react";
 import ScrollToTopButton from "./component/ScrollToTopButton/ScrollToTopButton";
-import NewsDetail from "./pages/News/NewsDetail"; // 引入 i18n 配置
 
 // 主页面组件
 const App = () => {
@@ -22,10 +19,7 @@ const App = () => {
                 <Routes>
                     <Route path={HOME} element={<Home/>}/>
                     <Route path={FREE_GO} element={<FreeGo/>}/>
-                    <Route path={PARTNER} element={<Partner/>}/>
-                    <Route path={NEWS} element={<News/>}/>
                     <Route path={ABOUT_US} element={<AboutUs/>}/>
-                    <Route path={NEWS_DETAIL} element={<NewsDetail/>}/>
                 </Routes>
                 <Footer/>
                 <ScrollToTopButton/>

src/component/Header/Header.js

@@ -1,8 +1,5 @@
 import React from 'react';
 import Navigation from "../Navigation/Navigation";
-import email from '../../assets/images/main/email.png';
-import language from '../../assets/images/main/language.png';
-import register from '../../assets/images/main/register.png';
 import logo from '../../assets/images/main/logo.png';
 import Styles from './Header.module.css';
 import {useTranslation} from "react-i18next";
@@ -24,25 +21,10 @@ const Header = () => {
     };
     return (
         <header className={Styles.root}>
-            <div className={Styles.leftContainer}>
-                <Link to={HOME} className={Styles.link}>
-                    <img className={Styles.logoImg} src={logo} alt="logo"/>
-                </Link>
-                <Navigation/>
-            </div>
-            <div className={Styles.rightContainer}>
-                <img className={Styles.rightImg}
-                     src={language}
-                     alt="language" style={{cursor: 'pointer'}}
-                     onClick={() => {
-                         // changeLanguage('')
-                     }}/>
-                <img className={Styles.rightImg} src={register} alt="register"/>
-                <img className={Styles.emailImg} src={email}
-                     alt="email"
-                     style={{cursor: 'pointer'}}
-                     onClick={handleEmailClick}/>
-            </div>
+            <Link to={HOME} className={Styles.link}>
+                <img className={Styles.logoImg} src={logo} alt="logo"/>
+            </Link>
+            <Navigation/>
         </header>
     );
 };

src/component/Header/Header.module.css

@@ -2,21 +2,15 @@
 .root {
     display: flex;
     justify-content: space-between;
-    align-items: flex-end;
+    align-items: center;
     color: white;
-    height: 80px;
+    height: 64px;
     background-color: white;
     position: sticky; /* 使导航栏固定在顶部 */
     top: 0; /* 固定在顶部 */
     z-index: 1000; /* 确保导航栏在最上层 */
     transition: top 0.3s ease-in-out;
-    padding: 0 95px;
-}
-
-.leftContainer {
-    display: flex;
-    align-items: center;
-    text-decoration: none;
+    padding: 0 326px;
 }
 
 .link {
@@ -29,90 +23,6 @@ a {
 
 .logoImg {
     object-fit: contain;
-    width: 200px;
-    height: 23.29px;
-    margin-right: 32px;
-}
-
-.rightContainer {
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-end;
-    margin-bottom: 7px;
-    gap: 20px;
-}
-
-.bottomContainer {
-    display: flex;
-    height: 100%;
-    justify-content: flex-end;
-    align-items: flex-end;
-    column-gap: 1.25rem;
-}
-
-
-.rightImg {
-    object-fit: contain;
-    width: 22px;
-    height: 22px;
+    width: 127px;
+    height: 25px;
 }
-
-.emailImg {
-    object-fit: contain;
-    width: 22px;
-    height: 22px;
-    margin-bottom: -2px;
-}
-
-/*@media (max-width: 768px) {*/
-/*    .root {*/
-/*        display: flex;*/
-/*        justify-content: space-between;*/
-/*        align-items: flex-end;*/
-/*        color: white;*/
-/*        height: 40px;*/
-/*        background-color: white;*/
-/*        position: sticky; !* 使导航栏固定在顶部 *!*/
-/*        top: 0; !* 固定在顶部 *!*/
-/*        z-index: 1000; !* 确保导航栏在最上层 *!*/
-/*        transition: top 0.3s ease-in-out;*/
-/*        padding: 0 20px;*/
-/*    }*/
-
-/*    .logoImg {*/
-/*        object-fit: contain;*/
-/*        width: 65px;*/
-/*        height: 8px;*/
-/*        margin-right: 10px;*/
-/*        margin-bottom: 5px;*/
-/*    }*/
-
-/*    .rightContainer {*/
-/*        display: flex;*/
-/*        justify-content: flex-end;*/
-/*        align-items: flex-end;*/
-/*        margin-bottom: 4px;*/
-/*        gap: 10px;*/
-/*    }*/
-
-/*    .bottomContainer {*/
-/*        display: flex;*/
-/*        height: 100%;*/
-/*        justify-content: flex-end;*/
-/*        align-items: flex-end;*/
-/*        column-gap: 1.25rem;*/
-/*    }*/
-
-/*    .emailImg {*/
-/*        object-fit: contain;*/
-/*        width: 11px;*/
-/*        height: 11px;*/
-/*    }*/
-
-/*    .rightImg {*/
-/*        object-fit: contain;*/
-/*        width: 11px;*/
-/*        height: 11px;*/
-/*    }*/
-/*}*/
-

src/component/Navigation/Navigation.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {NavLink} from 'react-router-dom';
 import './Navigation.module.css';
-import {ABOUT_US, HOME, NEWS, PARTNER} from "../../uitls/Constants";
+import {ABOUT_US, FREE_GO, HOME} from "../../uitls/Constants";
 import Styles from './Navigation.module.css';
 import {useTranslation} from "react-i18next";
 import eventBus from "../../uitls/EventBus";
@@ -22,24 +22,12 @@ const Navigation = () => {
                          }}
                          className={({isActive}) => isActive ? Styles.active : ''}
                 >{t('home')}</NavLink>
-                {/*<NavLink to={FREE_GO}*/}
-                {/*         onClick={() => {*/}
-                {/*             changeTab(FREE_GO)*/}
-                {/*         }}*/}
-                {/*         className={({isActive}) => isActive ? Styles.active : ''}*/}
-                {/*>{t('freeGo')}</NavLink>*/}
-                <NavLink to={PARTNER}
+                <NavLink to={FREE_GO}
                          onClick={() => {
-                             changeTab(PARTNER)
+                             changeTab(FREE_GO)
                          }}
                          className={({isActive}) => isActive ? Styles.active : ''}
-                >{t('partner')}</NavLink>
-                <NavLink to={NEWS}
-                         onClick={() => {
-                             changeTab(PARTNER)
-                         }}
-                         className={({isActive}) => isActive ? Styles.active : ''}>
-                    {t('news')}</NavLink>
+                >{t('freeGo')}</NavLink>
                 <NavLink to={ABOUT_US} onClick={() => {
                     changeTab(ABOUT_US)
                 }}

src/component/Navigation/Navigation.module.css

@@ -12,7 +12,7 @@
     align-self: flex-end;
     color: #333333;
     text-decoration: none;
-    column-gap: 60px;
+    column-gap: 80px;
 }
 
 .navbarLinks a {
@@ -20,22 +20,22 @@
     font-size: 22px;
     font-weight: normal;
     text-decoration: none;
-    border-bottom: 4px solid transparent; /* 设置下划线高度和颜色 */
-    padding-bottom: 3px
+    /*border-bottom: 4px solid transparent; !* 设置下划线高度和颜色 *!*/
+    /*padding-bottom: 3px*/
 }
 
 .navbarLinks a:hover {
     color: #333333;
     text-decoration: none; /* 移除默认下划线 */
-    border-bottom: 4px solid cornflowerblue; /* 设置下划线高度和颜色 */
-    padding-bottom: 3px /* 控制下划线与文字的间距 */
+    /*border-bottom: 4px solid cornflowerblue; !* 设置下划线高度和颜色 *!*/
+    /*padding-bottom: 3px !* 控制下划线与文字的间距 *!*/
 }
 
 .navbarLinks a.active {
     color: #333333;
     text-decoration: none; /* 移除默认下划线 */
-    border-bottom: 4px solid #FF4E00; /* 设置下划线高度和颜色 */
-    padding-bottom: 3px /* 控制下划线与文字的间距 */
+    /*border-bottom: 4px solid #FF4E00; !* 设置下划线高度和颜色 *!*/
+    /*padding-bottom: 3px !* 控制下划线与文字的间距 *!*/
 }
 
 /*@media (max-width: 768px) {*/

src/component/Swiper/BannerSwiper.js

@@ -9,7 +9,6 @@ import 'swiper/css/navigation';
 import styles from './BannerSwiper.module.css'
 import preBtn from '../../assets/images/product/pre.png'
 import nextBtn from '../../assets/images/product/next.png'
-import test from '../../assets/images/news/news_top.png'
 
 const BannerSwiper = () => {
     return (
@@ -47,13 +46,13 @@ const BannerSwiper = () => {
             >
 
                 <SwiperSlide key={1}>
-                    <img src={test} className={styles.slideImage}/>
+                    <img src={nextBtn} className={styles.slideImage}/>
                 </SwiperSlide>
                 <SwiperSlide key={2}>
-                    <img src={test} className={styles.slideImage}/>
+                    <img src={nextBtn} className={styles.slideImage}/>
                 </SwiperSlide>
                 <SwiperSlide key={3}>
-                    <img src={test} className={styles.slideImage}/>
+                    <img src={nextBtn} className={styles.slideImage}/>
                 </SwiperSlide>
 
                 <div className="swiper-pagination"></div>

src/pages/News/News.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import Style from './News.module.css';
-import {useTranslation} from "react-i18next";
-
-const News = () => {
-    const {t} = useTranslation();
-    return (
-        <main className={Style.root}>
-            <div className={Style.topContainer}>
-                <p className={Style.newsTitle}>{t('newsTitle')}</p>
-                <p className={Style.newsSubtitle}>{t('newsSubtitle')}</p>
-            </div>
-            {/*<div className={Style.contentContainer}>*/}
-            {/*    <Link to={NEWS_DETAIL} className={Style.rightContentContainer}>*/}
-            {/*        <p className={Style.boldFont}>{t('newsContentTitle')}</p>*/}
-            {/*        <p className={Style.normalFont}>{t('newsContent')}</p>*/}
-            {/*    </Link>*/}
-            {/*    <img className={Style.image} src={img}/>*/}
-            {/*</div>*/}
-        </main>
-    );
-};
-
-export default News;

src/pages/News/News.module.css

@@ -1,72 +0,0 @@
-.root {
-    flex: 1; /* 占据剩余空间 */
-    padding: 0;
-    margin: 0;
-    background-color: #E9E9E9;
-}
-
-.topContainer {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    padding-left: 255px;
-    height: 620px;
-    width: 100%;
-    background-image: url("../../assets/images/news/news_top.png");
-    background-size: cover;
-    background-position: center;
-    background-Repeat: no-repeat;
-}
-
-.newsTitle {
-    font-size: 72px;
-    font-weight: bold;
-    color: #ffffff;
-    margin-bottom: 10px;
-}
-
-.newsSubtitle {
-    font-size: 72px;
-    font-weight: bold;
-    color: #ffffff;
-}
-
-.contentContainer {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    padding: 150px 0;
-    gap: 64px;
-    text-decoration: none;
-}
-
-.image {
-    width: 690px;
-    height: 450px;
-    object-fit: contain;
-}
-
-.rightContentContainer {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    justify-content: center;
-    width: 670px;
-}
-
-.boldFont {
-    font-size: 40px;
-    font-weight: Bold;
-    color: #333333;
-    margin-bottom: 16px;
-    text-align: left;
-}
-
-.normalFont {
-    font-size: 22px;
-    font-weight: normal;
-    color: #666666;
-    text-align: left;
-}

src/pages/News/NewsDetail.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import Style from './NewsDetail.module.css';
-import {useTranslation} from "react-i18next";
-import img from "../../assets/images/news/news_img.png"
-
-const News = () => {
-    const {t} = useTranslation();
-    return (
-        <main className={Style.root}>
-            <div className={Style.topContainer}>
-                <p className={Style.newsTitle}>{t('detailNewsTitle')}</p>
-            </div>
-            <div className={Style.contentContainer}>
-                <p className={Style.title}>{t('newsDetailTitle')}</p>
-                <p className={Style.content}>{t('newsDetailContent')}</p>
-                <p className={Style.author}>{t('newsDetailAuthor')}</p>
-            </div>
-            <div className={Style.bottomContainer}>
-                <div className={Style.bottomItem}>
-                    <img className={Style.bottomImg} src={img}/>
-                    <p className={Style.bottomText}>{t('newsDetailAuthor')}</p>
-                </div>
-                <div className={Style.bottomItem}>
-                    <img className={Style.bottomImg} src={img}/>
-                    <p className={Style.bottomText}>{t('newsDetailAuthor')}</p>
-                </div>
-                <div className={Style.bottomItem}>
-                    <img className={Style.bottomImg} src={img}/>
-                    <p className={Style.bottomText}>{t('newsDetailAuthor')}</p>
-                </div>
-                <div className={Style.bottomItem}>
-                    <img className={Style.bottomImg} src={img}/>
-                    <p className={Style.bottomText}>{t('newsDetailAuthor')}</p>
-                </div>
-            </div>
-        </main>
-    );
-};
-
-export default News;

src/pages/News/NewsDetail.module.css

@@ -1,97 +0,0 @@
-.root {
-    flex: 1; /* 占据剩余空间 */
-    padding: 0;
-    margin: 0;
-    background-color: #E9E9E9;
-}
-
-.topContainer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 300px;
-    width: 100%;
-    background-image: url("../../assets/images/news/news_detail_top.png");
-    background-size: cover;
-    background-position: center;
-    background-Repeat: no-repeat;
-}
-
-.newsTitle {
-    font-size: 48px;
-    font-weight: normal;
-    color: #ffffff;
-    width: 740px;
-    text-align: left;
-    margin-top: 30px;
-    margin-left: 600px;
-}
-
-.newsSubtitle {
-    font-size: 48px;
-    font-weight: bold;
-    color: #333333;
-}
-
-.contentContainer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border-top: 1px solid #979797;
-    border-bottom: 1px solid #979797;
-    padding: 130px 255px 0 255px;
-}
-
-.title {
-    font-size: 56px;
-    font-weight: bold;
-    color: #333333;
-    margin-bottom: 33px;
-}
-
-.content {
-    font-size: 24px;
-    font-weight: normal;
-    color: #333333;
-    text-indent: 2em;
-    line-height: 1.5em;
-}
-
-.author {
-    font-size: 18px;
-    font-weight: normal;
-    color: #666666;
-    margin-top: 165px;
-    margin-bottom: 22px;
-    width: 100%;
-    text-align: right;
-}
-
-.bottomContainer {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    height: 388px;
-    gap: 30px;
-}
-
-.bottomItem {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 17px;
-}
-
-.bottomImg {
-    width: 290px;
-    height: 144px;
-    object-fit: contain;
-}
-.bottomText {
-    font-size: 24px;
-    font-weight: normal;
-    color: #333333;
-}

src/pages/Partner/Partner.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import {useTranslation} from "react-i18next";
-import Styles from './Partner.module.css'
-import img from "../../assets/images/partner/bottom.png";
-
-const Partner = () => {
-    const {t} = useTranslation();
-    return (
-        <main className={Styles.root}>
-            <div className={Styles.top}>
-                <p className={Styles.title}>{t('partnerTitle')}</p>
-                <p className={Styles.subtitle}>{t('partnerSubtitle')}</p>
-            </div>
-            <p className={Styles.titleFont}>{t('partnerThirdTitle')}</p>
-            <img className={Styles.bottomImg} src={img}/>
-            <p className={Styles.bottomTitle}>{t('partnerBottomTitle')}</p>
-            <p className={Styles.bottomContent}>{t('partnerContent1')}</p>
-            <p className={Styles.bottomContent}>{t('partnerContent2')}</p>
-            <p className={Styles.bottomContent}>{t('partnerContent3')}</p>
-
-        </main>
-    );
-};
-
-export default Partner;

src/pages/Partner/Partner.module.css

@@ -1,72 +0,0 @@
-.root {
-    text-align: center;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    background-color: #2B3034;
-    padding-bottom: 100px;
-}
-
-.top {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    padding-left: 255px;
-    height: 850px;
-    width: 100%;
-    background-image: url("../../assets/images/partner/top_img.png");
-    background-size: cover;
-    background-position: center;
-    background-Repeat: no-repeat;
-}
-
-.title {
-    font-size: 72px;
-    font-weight: bold;
-    color: #FFFFFF;
-    margin-bottom: 24px;
-}
-
-.subtitle {
-    font-size: 24px;
-    font-weight: normal;
-    color: #FFFFFF;
-}
-
-.titleFont {
-    font-size: 32px;
-    font-weight: normal;
-    color: #ffffff;
-    margin-top: 107px;
-    padding: 0 255px;
-    text-align: left;
-}
-
-.bottomImg {
-    width: 1410px;
-    height: 584px;
-    object-fit: contain;
-    margin-top: 98px;
-}
-
-.bottomTitle {
-    font-size: 40px;
-    font-weight: bold;
-    color: #ffffff;
-    padding: 0 255px;
-    text-align: left;
-    margin-top: 39px;
-    margin-bottom: 23px;
-}
-
-.bottomContent {
-    font-size: 32px;
-    font-weight: normal;
-    color: #ffffff;
-    padding: 0 255px;
-    text-align: left;
-    margin-top: 5px;
-}
-
-

src/uitls/Constants.js

@@ -1,6 +1,4 @@
 export const HOME = "/"
 export const FREE_GO = "/freeGo"
-export const PARTNER = "/partner"
 export const NEWS = "/news"
 export const ABOUT_US = "/aboutUs"
-export const NEWS_DETAIL = "/news/details"