移动端初始化

pc/src/App.tsx

@@ -1,21 +1,12 @@
 import "@/assets/styles/base.css";
 
 import React from "react";
-import SpinLoding from "./components/SpinLoding";
 import AsyncSpinLoding from "./components/AsyncSpinLoding";
-import { Router, Route, Switch } from "react-router-dom";
 import { Image } from "antd";
-import history from "./utils/history";
 import { useSelector } from "react-redux";
 import store, { RootState } from "./store";
 import MessageCom from "./components/Message";
-
-// 使用 React.lazy 懒加载页面
-const A1Home = React.lazy(() => import("./pages/A1Home"));
-const A2Main = React.lazy(() => import("./pages/A2Main"));
-const A3Goods = React.lazy(() => import("./pages/A3Goods"));
-const A4Know = React.lazy(() => import("./pages/A4Know"));
-const NotFound = React.lazy(() => import("@/components/NotFound"));
+import RouterOrder from "./components/RouterOrder";
 
 function App() {
   // 从仓库中获取查看图片的信息
@@ -25,22 +16,7 @@ function App() {
   return (
     <div id="app">
       {/* 关于路由 */}
-      <Router history={history}>
-        <React.Suspense fallback={<SpinLoding />}>
-          <Switch>
-            {/* 封面页 */}
-            <Route path="/" exact component={A1Home} />
-            {/* 主要页 */}
-            <Route path="/main" exact component={A2Main} />
-            {/* 通过文物分享id打开的页面 */}
-            <Route path="/goods" component={A3Goods} />
-            {/* 单独打开的知识详情页面 */}
-            <Route path="/know" component={A4Know} />
-            {/* 找不到页面 */}
-            <Route path="*" component={NotFound} />
-          </Switch>
-        </React.Suspense>
-      </Router>
+      <RouterOrder />
 
       {/* 发送请求的加载组件 */}
       <AsyncSpinLoding />

pc/src/AppM.tsx

@@ -0,0 +1,55 @@
+import "@/assets/styles/base.css";
+
+import React, { useCallback, useEffect, useRef } from "react";
+import AsyncSpinLoding from "./components/AsyncSpinLoding";
+import RouterOrder from "./components/RouterOrder";
+import screenImg from "@/assets/img/landtip.png";
+
+function AppM() {
+  const setFullFu = useCallback(() => {
+    clearTimeout(time.current);
+    time.current = window.setTimeout(() => {
+      const dom: HTMLDivElement | null = document.querySelector("#root");
+      if (dom) {
+        dom.style.height = document.documentElement.clientHeight + "px";
+      }
+    }, 100);
+  }, []);
+
+  const time = useRef(-1);
+
+  useEffect(() => {
+    const dom: HTMLDivElement | null = document.querySelector("#root");
+    if (dom) {
+      dom.style.width = "100vw";
+      dom.style.minHeight = "auto";
+      dom.style.height = document.documentElement.clientHeight + "px";
+      dom.style.minWidth = "auto";
+    }
+    window.addEventListener("resize", setFullFu, true);
+
+    return () => {
+      window.removeEventListener("resize", setFullFu);
+    };
+  }, [setFullFu]);
+
+  return (
+    <div className="appM">
+      {/* 关于路由 */}
+      <RouterOrder />
+
+      {/* 发送请求的加载组件 */}
+      <AsyncSpinLoding />
+
+      {/* 横屏提示 */}
+      <div id="ScreenChange">
+        <img src={screenImg} alt="" />
+        <p>请在竖屏模式浏览</p>
+      </div>
+    </div>
+  );
+}
+
+const MemoAppM = React.memo(AppM);
+
+export default MemoAppM;

pc/src/assets/styles/base.css

@@ -113,3 +113,43 @@ textarea {
     bottom: 100px;
   }
 }
+#ScreenChange {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10000;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.5s;
+}
+#ScreenChange > img {
+  width: 200px;
+}
+#ScreenChange > p {
+  margin-top: 20px;
+  color: #fff;
+  font-size: 18px;
+  height: 40px;
+}
+/*横屏*/
+@media screen and (orientation: landscape) {
+  #ScreenChange {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+.appM {
+  width: 100%;
+  height: 100%;
+}
+.appM > div {
+  width: 100%;
+  height: 100%;
+}

pc/src/assets/styles/base.less

@@ -160,4 +160,50 @@ textarea {
 //     transform: translate(-1600px);
 //   }
 
-// }
+// }
+
+// 横屏 竖屏的切换
+#ScreenChange {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10000;
+  background-color: rgba(0, 0, 0, .8);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  pointer-events: none;
+  transition: all .5s;
+
+  &>img {
+    width: 200px;
+  }
+
+  &>p {
+    margin-top: 20px;
+    color: #fff;
+    font-size: 18px;
+    height: 40px;
+  }
+}
+
+/*横屏*/
+@media screen and (orientation: landscape) {
+  #ScreenChange {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+.appM{
+  width: 100%;
+  height: 100%;
+  &>div{
+    width: 100%;
+    height: 100%;
+  }
+}

pc/src/components/RouterOrder.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import history, { isMobiileFu } from "@/utils/history";
+import { Route, Router, Switch } from "react-router-dom";
+import SpinLoding from "./SpinLoding";
+function RouterOrder() {
+  const NotFound = React.lazy(() => import("@/components/NotFound"));
+
+  // pc路由
+  const A1Home = React.lazy(() => import("@/pages/A1Home"));
+  const A2Main = React.lazy(() => import("@/pages/A2Main"));
+  const A3Goods = React.lazy(() => import("@/pages/A3Goods"));
+  const A4Know = React.lazy(() => import("@/pages/A4Know"));
+
+  // 移动端路由
+  const A1HomeM = React.lazy(() => import("@/pages/App/HomeM"));
+  const A2MainM = React.lazy(() => import("@/pages/App/MainM"));
+  const A3GoodsM = React.lazy(() => import("@/pages/App/GoodsM"));
+  const A4KnowM = React.lazy(() => import("@/pages/App/KnowM"));
+
+  return (
+    <Router history={history}>
+      <React.Suspense fallback={<SpinLoding />}>
+        <Switch>
+          {/* 封面页 */}
+          <Route path="/" exact component={isMobiileFu() ? A1HomeM : A1Home} />
+          {/* 主要页 */}
+          <Route
+            path="/main"
+            exact
+            component={isMobiileFu() ? A2MainM : A2Main}
+          />
+          {/* 通过文物分享id打开的页面 */}
+          <Route path="/goods" component={isMobiileFu() ? A3GoodsM : A3Goods} />
+          {/* 单独打开的知识详情页面 */}
+          <Route path="/know" component={isMobiileFu() ? A4KnowM : A4Know} />
+          {/* 找不到页面 */}
+          <Route path="*" component={NotFound} />
+        </Switch>
+      </React.Suspense>
+    </Router>
+  );
+}
+
+const MemoRouterOrder = React.memo(RouterOrder);
+
+export default MemoRouterOrder;

pc/src/index.tsx

@@ -1,4 +1,6 @@
 import App from "./App";
+import AppM from "./AppM";
+
 import store from "./store/index";
 import { Provider } from "react-redux";
 import { createRoot } from "react-dom/client";
@@ -13,6 +15,7 @@ import {
 
 import "dayjs/locale/zh-cn";
 import locale from "antd/locale/zh_CN";
+import { isMobiileFu } from "./utils/history";
 
 const container = document.getElementById("root") as HTMLElement;
 
@@ -32,7 +35,7 @@ root.render(
         hashPriority="high"
         transformers={[legacyLogicalPropertiesTransformer]}
       >
-        <App />
+        {isMobiileFu() ? <AppM /> : <App />}
       </StyleProvider>
     </Provider>
   </ConfigProvider>

pc/src/pages/A1Home/index.module.scss

@@ -1,22 +1,12 @@
-.A1Home{
+.A1Home {
   cursor: pointer;
   position: relative;
-  :global{
-    .HomeBac{
+
+  :global {
+    .HomeBac {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }
-
-    .A1tit{
-      position: absolute;
-      bottom: 15px;
-      font-size: 12px;
-      color: #fff;
-      left: 50%;
-      transform: translateX(-50%);
-      text-shadow: 1px 1px 1px black;
-    }
-
   }
 }

pc/src/pages/A1Home/index.tsx

@@ -40,8 +40,6 @@ function A1Home() {
           alt=""
         />
       ) : null}
-
-      <div className="A1tit">点击任意处开始探索</div>
     </div>
   );
 }

pc/src/pages/App/GoodsM/index.module.scss

@@ -0,0 +1,5 @@
+.GoodsM{
+  :global{
+    
+  }
+}

pc/src/pages/App/GoodsM/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./index.module.scss";
+ function GoodsM() {
+  
+  return (
+    <div className={styles.GoodsM}>
+      <h1>GoodsM</h1>
+    </div>
+  )
+}
+
+const MemoGoodsM = React.memo(GoodsM);
+
+export default MemoGoodsM;

pc/src/pages/App/HomeM/index.module.scss

@@ -0,0 +1,11 @@
+.HomeM {
+  position: relative;
+
+  :global {
+    .HomeBac {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+}

pc/src/pages/App/HomeM/index.tsx

@@ -0,0 +1,49 @@
+import React, { useCallback, useEffect, useState } from "react";
+import styles from "./index.module.scss";
+import { A1_APIgetCover } from "@/store/action/A1Home";
+import { addVisitFu } from "@/utils/storage";
+import history from "@/utils/history";
+import ImgLoding from "@/components/ImgLoding";
+import { baseURL } from "@/utils/http";
+import { imgLodingFu } from "@/pages/A0Map/data";
+function HomeM() {
+  const [cover, setCover] = useState("");
+
+  const A1_APIgetCoverFu = useCallback(async () => {
+    const res = await A1_APIgetCover('app');
+    if (res.code === 0) {
+      const urlObj = res.data.find((v: any) => v.isIndex === 1);
+      setCover(urlObj.thumb || res.data[0].thumb);
+    }
+  }, []);
+
+  useEffect(() => {
+    A1_APIgetCoverFu();
+  }, [A1_APIgetCoverFu]);
+
+  useEffect(() => {
+    // 进来页面 线上访客  访问量+1（23小时内）
+    addVisitFu();
+  }, []);
+
+  return (
+    <div className={styles.HomeM} onClick={() => history.push("/main")}>
+      {/* 大图片加载中 */}
+      <ImgLoding id={-1} />
+
+      {cover ? (
+        <img
+          className="HomeBac"
+          onLoad={() => imgLodingFu(-1)}
+          src={baseURL + cover}
+          alt=""
+        />
+      ) : null}
+
+    </div>
+  );
+}
+
+const MemoHomeM = React.memo(HomeM);
+
+export default MemoHomeM;

pc/src/pages/App/KnowM/index.module.scss

@@ -0,0 +1,5 @@
+.KnowM{
+  :global{
+    
+  }
+}

pc/src/pages/App/KnowM/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./index.module.scss";
+ function KnowM() {
+  
+  return (
+    <div className={styles.KnowM}>
+      <h1>KnowM</h1>
+    </div>
+  )
+}
+
+const MemoKnowM = React.memo(KnowM);
+
+export default MemoKnowM;

pc/src/pages/App/MainM/Tab1/index.module.scss

@@ -0,0 +1,5 @@
+.Tab1{
+  :global{
+    
+  }
+}

pc/src/pages/App/MainM/Tab1/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./index.module.scss";
+ function Tab1() {
+  
+  return (
+    <div className={styles.Tab1}>
+      <h1>Tab1</h1>
+    </div>
+  )
+}
+
+const MemoTab1 = React.memo(Tab1);
+
+export default MemoTab1;

pc/src/pages/App/MainM/Tab2/index.module.scss

@@ -0,0 +1,5 @@
+.Tab2{
+  :global{
+    
+  }
+}

pc/src/pages/App/MainM/Tab2/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./index.module.scss";
+ function Tab2() {
+  
+  return (
+    <div className={styles.Tab2}>
+      <h1>Tab2</h1>
+    </div>
+  )
+}
+
+const MemoTab2 = React.memo(Tab2);
+
+export default MemoTab2;

pc/src/pages/App/MainM/Tab3/index.module.scss

@@ -0,0 +1,5 @@
+.Tab3{
+  :global{
+    
+  }
+}

pc/src/pages/App/MainM/Tab3/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./index.module.scss";
+ function Tab3() {
+  
+  return (
+    <div className={styles.Tab3}>
+      <h1>Tab3</h1>
+    </div>
+  )
+}
+
+const MemoTab3 = React.memo(Tab3);
+
+export default MemoTab3;

pc/src/pages/App/MainM/Tab4/index.module.scss

@@ -0,0 +1,5 @@
+.Tab4{
+  :global{
+    
+  }
+}

pc/src/pages/App/MainM/Tab4/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./index.module.scss";
+ function Tab4() {
+  
+  return (
+    <div className={styles.Tab4}>
+      <h1>Tab4</h1>
+    </div>
+  )
+}
+
+const MemoTab4 = React.memo(Tab4);
+
+export default MemoTab4;

pc/src/pages/App/MainM/Tab5/index.module.scss

@@ -0,0 +1,5 @@
+.Tab5{
+  :global{
+    
+  }
+}

pc/src/pages/App/MainM/Tab5/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./index.module.scss";
+ function Tab5() {
+  
+  return (
+    <div className={styles.Tab5}>
+      <h1>Tab5</h1>
+    </div>
+  )
+}
+
+const MemoTab5 = React.memo(Tab5);
+
+export default MemoTab5;

pc/src/pages/App/MainM/data.ts

@@ -0,0 +1,22 @@
+export const mainFlloArr = [
+  {
+    id: 1,
+    name: "探索",
+  },
+  {
+    id: 2,
+    name: "场景",
+  },
+  {
+    id: 3,
+    name: "馆藏",
+  },
+  {
+    id: 4,
+    name: "视频",
+  },
+  {
+    id: 5,
+    name: "知识",
+  },
+];

pc/src/pages/App/MainM/index.module.scss

@@ -0,0 +1,41 @@
+.MainM {
+  :global {
+    .mainBox {
+      width: 100%;
+      height: calc(100% - 90px);
+    }
+
+    .mainFllo {
+      width: 100%;
+      height: 90px;
+      background-color: #fff;
+      display: flex;
+      align-items: center;
+
+      .mainFlloRow {
+        width: 20%;
+        text-align: center;
+
+        &>div {
+          margin: 0 auto;
+          width: 40px;
+          height: 40px;
+          background-size: 100% 100%;
+        }
+
+        &>p {
+          font-size: 14px;
+          color: #47392C;
+        }
+      }
+
+      .mainFlloRowAc {
+        pointer-events: none;
+        &>p {
+          color: #47392C;
+          font-weight: 700;
+        }
+      }
+    }
+  }
+}

pc/src/pages/App/MainM/index.tsx

@@ -0,0 +1,59 @@
+import React, { useMemo, useState } from "react";
+import styles from "./index.module.scss";
+import { mainFlloArr } from "./data";
+import classNames from "classnames";
+import { envUrl } from "@/utils/env";
+import Tab1 from "./Tab1";
+import Tab2 from "./Tab2";
+import Tab3 from "./Tab3";
+import Tab4 from "./Tab4";
+import Tab5 from "./Tab5";
+
+const pageObj = {
+  1: <Tab1 />,
+  2: <Tab2 />,
+  3: <Tab3 />,
+  4: <Tab4 />,
+  5: <Tab5 />,
+};
+
+function MainM() {
+  const [acPage, setAcPage] = useState(1);
+
+  const PageCom = useMemo(() => {
+    return Reflect.get(pageObj, acPage);
+  }, [acPage]);
+
+  return (
+    <div className={styles.MainM}>
+      {/* 主体 */}
+      <div className="mainBox">{PageCom}</div>
+      {/* 底部 */}
+      <div className="mainFllo">
+        {mainFlloArr.map((v) => (
+          <div
+            key={v.id}
+            onClick={() => setAcPage(v.id)}
+            className={classNames(
+              "mainFlloRow",
+              acPage === v.id ? "mainFlloRowAc" : ""
+            )}
+          >
+            <div
+              style={{
+                backgroundImage: `url(${envUrl}/App/main1/${v.id}${
+                  v.id === acPage ? "Ac" : ""
+                }.jpg)`,
+              }}
+            ></div>
+            <p>{v.name}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const MemoMainM = React.memo(MainM);
+
+export default MemoMainM;

pc/src/utils/history.ts

@@ -1,9 +1,9 @@
 // createBrowserHistory 和 createHashHistory。
 // 这里我们简单说一下 createBrowserHistory地址栏不带#； createHashHistory 带#
 // 根据公司要求自己选择，createBrowserHistory在项目上线的时候需要服务器映射等处理。
-import { createHashHistory  } from 'history'
-const history = createHashHistory()
-export default history
+import { createHashHistory } from "history";
+const history = createHashHistory();
+export default history;
 
 export const urlParameter = (data: string) => {
   if (data) {
@@ -18,3 +18,14 @@ export const urlParameter = (data: string) => {
     return params;
   } else return {};
 };
+
+// 判断是手机端还是pc端 。手机端返回 true
+export const isMobiileFu = () => {
+  if (
+    window.navigator.userAgent.match(
+      /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
+    )
+  ) {
+    return true;
+  } else return false;
+};