fix

src/App.less

@@ -108,10 +108,15 @@
 }
 
 .news-nav {
-    width: 7rem;
+    width: 7.5rem;
     margin: 6.78rem auto 0;
     overflow: hidden;
 
+    .news-nav-center {
+        width: 7.5rem;
+        padding: 0.1rem 0.25rem;
+    }
+
     .fixed {
         position: fixed;
         z-index: 2;
@@ -120,9 +125,6 @@
         top: 0;
         z-index: 2;
         background-color: #f8fbfd;
-        width: 7.5rem;
-        margin-left: -0.25rem;
-        padding: 10px 0.5rem;
         box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
     }
 }
@@ -191,11 +193,16 @@
     .strategy-nav {
         overflow-x: auto;
         overflow-y: hidden;
-        scrollbar-width: thin;
+        scrollbar-width: none;
         height: 0.5rem;
         line-height: 0.5rem;
         max-width: 6.4rem;
         box-sizing: border-box;
+
+        &::-webkit-scrollbar {
+            display: none;
+            /* 隐藏滚动条 */
+        }
     }
 
     ul {
@@ -235,6 +242,10 @@
         left: .15rem;
     }
 
+    .news-nav {
+        width: 7rem;
+    }
+
     .news-nav-con {
         border-bottom: 1px solid #dcdcdc;
         text-align: center;

src/components/OtherHeader/index.tsx

@@ -61,7 +61,7 @@ const OtherHeader: React.FC<Props> = ({ title, navList, children, onChange }) =>
         };
     }, []);
 
-    const topHeight =  document.querySelector('.bg-top')?.clientHeight
+    const topHeight = document.querySelector('.bg-top')?.clientHeight
 
     return <>
         <div className="bg-box" style={{ height: '100%' }}>
@@ -74,57 +74,61 @@ const OtherHeader: React.FC<Props> = ({ title, navList, children, onChange }) =>
             <div className="news-nav" style={{ height: '1.62rem' }}>
                 <div
                     ref={ref1}
-                    className={`sticky ${affixed ? 'fixed' : ''}`}
+                    className={`news-nav-center ${affixed ? 'fixed' : ''}`}
                     style={(affixed && scrollDirection === 'up') ? { top: (document.getElementById('bodyHeader')?.clientHeight || 0) + 10 } : {}}
                 >
-                    <div className="location-box">
-                        <a className="goback" onClick={handleGoBack}></a>
-                        <div className="location">当前位置：{title}</div>
-                    </div>
-                    <div className="news-nav-con">
-                        {/* <h2 style={{ textAlign: 'center', marginBottom: '0.4rem' }}>{title}</h2> */}
-                        <div className="news-nav-con-strategy">
-                            <div className="left" />
-                            <div className="strategy-nav">
-                                <ul>
-                                    {navList.map(item => <li
-                                        key={item.value}
-                                        className={fatherNav?.value === item.value ? 'active' : ''}
-                                        onClick={(e) => {
-                                            const nav = item?.children?.[0]?.value
-                                            setFatherNav(item)
-                                            setNav(nav)
-                                            onChange?.(nav, item)
-                                            scrollToTab(e)
-                                            document.getElementById('sonNav')?.scrollTo({ left: 0 });
-                                            const scY = topHeight ? topHeight / 1.5 : 200;
-                                            scrollY > scY && window.scrollTo({ top: scY }); // 跳转到顶部
-                                        }}
-                                    >{item.label}</li>)}
-                                </ul>
+                    <div
+                        className="sticky"
+                    >
+                        <div className="location-box">
+                            <a className="goback" onClick={handleGoBack}></a>
+                            <div className="location">当前位置：{title}</div>
+                        </div>
+                        <div className="news-nav-con">
+                            {/* <h2 style={{ textAlign: 'center', marginBottom: '0.4rem' }}>{title}</h2> */}
+                            <div className="news-nav-con-strategy">
+                                <div className="left" />
+                                <div className="strategy-nav">
+                                    <ul>
+                                        {navList.map(item => <li
+                                            key={item.value}
+                                            className={fatherNav?.value === item.value ? 'active' : ''}
+                                            onClick={(e) => {
+                                                const nav = item?.children?.[0]?.value
+                                                setFatherNav(item)
+                                                setNav(nav)
+                                                onChange?.(nav, item)
+                                                scrollToTab(e)
+                                                document.getElementById('sonNav')?.scrollTo({ left: 0 });
+                                                const scY = topHeight ? topHeight / 1.5 : 200;
+                                                scrollY > scY && window.scrollTo({ top: scY }); // 跳转到顶部
+                                            }}
+                                        >{item.label}</li>)}
+                                    </ul>
+                                </div>
+                                <div className="right" />
                             </div>
-                            <div className="right" />
                         </div>
-                    </div>
-                    <div className="news-nav-con sub-news-nav-con">
-                        <div className="news-nav-con-strategy">
-                            <div className="left" />
-                            <div className="strategy-nav" id="sonNav">
-                                <ul>
-                                    {fatherNav?.children?.map(item => <li
-                                        key={item.value}
-                                        className={nav === item.value ? 'active' : ''}
-                                        onClick={(e) => {
-                                            setNav(item.value)
-                                            onChange?.(item.value, fatherNav)
-                                            scrollToTab(e)
-                                            const scY = topHeight ? topHeight / 1.5 : 200;
-                                            scrollY > scY && window.scrollTo({ top: scY }); // 跳转到顶部
-                                        }}
-                                    >{item.label}</li>)}
-                                </ul>
+                        <div className="news-nav-con sub-news-nav-con">
+                            <div className="news-nav-con-strategy">
+                                <div className="left" />
+                                <div className="strategy-nav" id="sonNav">
+                                    <ul>
+                                        {fatherNav?.children?.map(item => <li
+                                            key={item.value}
+                                            className={nav === item.value ? 'active' : ''}
+                                            onClick={(e) => {
+                                                setNav(item.value)
+                                                onChange?.(item.value, fatherNav)
+                                                scrollToTab(e)
+                                                const scY = topHeight ? topHeight / 1.5 : 200;
+                                                scrollY > scY && window.scrollTo({ top: scY }); // 跳转到顶部
+                                            }}
+                                        >{item.label}</li>)}
+                                    </ul>
+                                </div>
+                                <div className="right" />
                             </div>
-                            <div className="right" />
                         </div>
                     </div>
                 </div>

src/layout/index.tsx

@@ -4,7 +4,7 @@ import gameIcon from '../assets/favicon.ico'
 import { Link, useLocation } from "react-router-dom"
 import { DispatchApp } from "../App";
 
-const noShow = ['/gameIntroduction', '/systemIntroduction', '/gameplayIntroduction', '/commonInformation']
+const noShow = ['/m/gameIntroduction', '/m/systemIntroduction', '/m/gameplayIntroduction', '/m/commonInformation']
 
 interface Props {
     children?: React.ReactNode;
@@ -41,13 +41,13 @@ const Layout: React.FC<Props> = ({ children }) => {
                 setActive(!active)
                 window.scrollTo({ top: 0 })
             }}>
-                <li><Link to="/">官网首页</Link></li>
-                <li><Link to="/gameIntroduction">游戏介绍</Link></li>
-                <li><Link to="/systemIntroduction">系统介绍</Link></li>
-                <li><Link to="/gameplayIntroduction">玩法介绍</Link></li>
-                <li><Link to="/commonInformation">常用信息</Link></li>
-                <li><Link to="/news">新闻中心</Link></li>
-                <li><Link to="/strategy">游戏攻略</Link></li>
+                <li><Link to="/m">官网首页</Link></li>
+                <li><Link to="/m/gameIntroduction">游戏介绍</Link></li>
+                <li><Link to="/m/systemIntroduction">系统介绍</Link></li>
+                <li><Link to="/m/gameplayIntroduction">玩法介绍</Link></li>
+                <li><Link to="/m/commonInformation">常用信息</Link></li>
+                <li><Link to="/m/news">新闻中心</Link></li>
+                <li><Link to="/m/strategy">游戏攻略</Link></li>
             </ul>
         </header>
         {/* 主内容 */}

src/main.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
 import { Result } from 'antd'
-import { NavLink, Route, BrowserRouter as Router, Routes } from 'react-router-dom'
+import { NavLink, Route, HashRouter as Router, Routes } from 'react-router-dom'
 import Home from './pages/Home/index.tsx'
 import InfoCenter from './pages/Strategy/index.tsx'
 import GameIntroduction from './pages/GameIntroduction/index.tsx'
@@ -18,7 +18,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <Router>
       <Routes>
-        <Route path="/" element={<App />}>
+        <Route path="/m" element={<App />}>
           <Route index element={<Home />} />
           <Route path="gameIntroduction" element={<GameIntroduction />} />
           <Route path="systemIntroduction" element={<SystemIntroduction />} />
@@ -33,7 +33,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
           status="404"
           title="404"
           subTitle="Sorry, the page you visited does not exist."
-          extra={<NavLink to="/">
+          extra={<NavLink to="/m">
             返回首页
           </NavLink>}
         />} />

src/utils/index.ts

@@ -159,14 +159,14 @@ export const isWeChat = () => {
  */
 export const scrollToTab = (e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
   const tab = e.currentTarget;
-  const tabContainer = tab.parentElement?.parentElement; // 获取 tab 的父容器  
+  const tabContainer = tab.parentElement?.parentElement; // 获取 tab 的父容器 
   if (tabContainer) {
-      const tabPosition = tab.getBoundingClientRect().left + tabContainer.scrollLeft; // 计算 tab 的绝对位置  
-      const containerWidth = tabContainer.clientWidth; // 获取容器的宽度  
-      const scrollPosition = tabPosition - containerWidth / 2 + tab.offsetWidth / 2; // 计算滚动位置  
-      tabContainer?.scrollTo({
-          left: scrollPosition,
-          behavior: 'smooth' // 平滑滚动  
-      });
+    const tabPosition = tab.getBoundingClientRect().left + tabContainer.scrollLeft - tabContainer.getBoundingClientRect().left; // 计算 tab 的绝对位置  
+    const containerWidth = tabContainer.clientWidth; // 获取容器的宽度  
+    const scrollPosition = tabPosition - containerWidth / 2 + tab.offsetWidth / 2; // 计算滚动位置  
+    tabContainer?.scrollTo({
+      left: scrollPosition,
+      behavior: 'smooth' // 平滑滚动  
+    });
   }
 };