app-知识

pc/public/knowInfo.html

@@ -47,6 +47,42 @@
       color: #8f8f94;
       text-align: center;
     }
+
+    /* 移动端样式兼容 */
+    @media screen and (max-width: 500px) {
+      * {
+      max-width: 100% !important;
+      width: 100% !important;
+      height: auto !important;
+    }
+
+      html{
+        width: calc(100% - 20px) !important;
+      }
+
+      body{
+        width: 100%;
+        height: auto;
+        overflow-x: hidden;
+        padding-bottom: 80px;
+      }
+
+      .title {
+        position: relative;
+        background-color: transparent;
+        color: #F0D99C;
+        box-shadow: none;
+        line-height: 30px;
+      }
+      .content{
+        padding: 0;
+      }
+
+      p {
+        color: #fff;
+      }
+
+    }
   </style>
 
 </head>

pc/src/components/RouterOrder.tsx

@@ -8,14 +8,14 @@ function RouterOrder() {
   // 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"));
+
+  // 公用的 详情页路由
+  const A3Goods = React.lazy(() => import("@/pages/A3Goods"));
+  const A4Know = React.lazy(() => import("@/pages/A4Know"));
 
   return (
     <Router history={history}>
@@ -30,9 +30,9 @@ function RouterOrder() {
             component={isMobiileFu() ? A2MainM : A2Main}
           />
           {/* 通过文物分享id打开的页面 */}
-          <Route path="/goods" component={isMobiileFu() ? A3GoodsM : A3Goods} />
+          <Route path="/goods" component={A3Goods} />
           {/* 单独打开的知识详情页面 */}
-          <Route path="/know" component={isMobiileFu() ? A4KnowM : A4Know} />
+          <Route path="/know" component={A4Know} />
           {/* 找不到页面 */}
           <Route path="*" component={NotFound} />
         </Switch>

pc/src/pages/A2Main/Tab5/index.tsx

@@ -9,7 +9,7 @@ import { RootState } from "@/store";
 import ImageLazy from "@/components/ImageLazy";
 import Tab5Info from "../Tab5Info";
 
-const list = [
+export const listPcKnow = [
   { id: 1, name: "全部", type: "" },
   { id: 2, name: "历史", type: "历史" },
   { id: 3, name: "军事", type: "军事" },
@@ -45,7 +45,7 @@ function Tab5() {
       style={{ backgroundImage: `url(${envUrl}/goods/bac.jpg)` }}
     >
       <div className="tab5Top">
-        {list.map((v) => (
+        {listPcKnow.map((v) => (
           <div
             onClick={() =>
               setFromData({ ...fromData, tagType: v.type, pageNum: 1 })

pc/src/pages/A2Main/Tab5Info/index.tsx

@@ -7,11 +7,11 @@ import { Spin } from "antd";
 import { LeftOutlined } from "@ant-design/icons";
 import { isEnvFlag } from "@/utils/env";
 
-type ListType = {
+export type PcTab5ListType = {
   id: string;
   name: string;
   flag?: boolean;
-  children?: ListType[];
+  children?: PcTab5ListType[];
 };
 
 type Props = {
@@ -23,9 +23,9 @@ type Props = {
 
 function Tab5Info({ sId, closeFu, isOpen, title }: Props) {
   // 顶部的标题
-  const [titleTxt, setTieleTxt] = useState("");
+  const [titleTxt, setTitleTxt] = useState("");
 
-  const [data, setData] = useState([] as ListType[]);
+  const [data, setData] = useState([] as PcTab5ListType[]);
 
   const getInfoFu = useCallback(async () => {
     const res = await A2_APItab5Info(sId);
@@ -34,15 +34,15 @@ function Tab5Info({ sId, closeFu, isOpen, title }: Props) {
 
       if (res.data && res.data[0]) {
         // 顶部的标题
-        setTieleTxt(res.data[0].text);
+        setTitleTxt(res.data[0].text);
       }
 
       if (res.data && res.data[0] && res.data[0].channelChildren)
         tempArr = res.data[0].channelChildren;
 
-      const arrRes: ListType[] = [];
+      const arrRes: PcTab5ListType[] = [];
       tempArr.forEach((v) => {
-        const obj: ListType = {
+        const obj: PcTab5ListType = {
           id: v.id,
           name: v.text,
           flag: v.flag,

pc/src/pages/A3Goods/index.tsx

@@ -16,6 +16,7 @@ function A3Goods() {
   }, [location.search]);
 
   return (
+    // 待完善 isMobiileFu
     <div className={styles.A3Goods}>
       {id ? <Tab4Info id={id} isOpen={true} /> : null}
     </div>

pc/src/pages/A4Know/index.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from "react";
 import styles from "./index.module.scss";
 import { useLocation } from "react-router-dom";
-import { urlParameter } from "@/utils/history";
+import { isMobiileFu, urlParameter } from "@/utils/history";
 import Tab5Info from "../A2Main/Tab5Info";
+import Info from "../App/MainM/Tab5/Info";
 function A4Know() {
   const [id, setId] = useState("");
 
@@ -15,7 +16,13 @@ function A4Know() {
   }, [location.search]);
   return (
     <div className={styles.A4Know}>
-      {id ? <Tab5Info sId={id} closeFu={() => {}} isOpen={true} /> : null}
+      {id ? (
+        isMobiileFu() ? (
+          <Info sId={id} closeFu={() => {}} isOpen={true} />
+        ) : (
+          <Tab5Info sId={id} closeFu={() => {}} isOpen={true} />
+        )
+      ) : null}
     </div>
   );
 }

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

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

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

@@ -1,14 +0,0 @@
-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/KnowM/index.module.scss

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

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

@@ -1,14 +0,0 @@
-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/Tab2/index.module.scss

@@ -33,32 +33,57 @@
     }
 
     .tab2Main {
-      padding-top: 1px;
+      padding-top: 6px;
       margin-top: 10px;
       width: 100%;
       height: calc(100% - 50px);
       overflow-y: auto;
       padding-right: 20px;
-      
+
       .tab2Row {
         border: 1px solid #F0D99C;
         border-radius: 6px;
         margin-bottom: 20px;
-        overflow: hidden;
         position: relative;
-        &>p{
+        height: 180px;
+
+        .tab2RowSon {
           position: absolute;
-          bottom: 0;
-          left: 0;
-          height: 40px;
-          line-height: 40px;
+          top: -5px;
+          left: -5px;
           width: 100%;
-          color: #fff;
-          font-size: 16px;
-          padding: 0 5px 0 15px;
-          letter-spacing: 2px;
-          background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.6));
+          height: 100%;
+          border-radius: 6px;
+          overflow: hidden;
+
+          &::before {
+            content: '';
+            position: absolute;
+            z-index: 10;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, .2);
+          }
+
+          &>p {
+            z-index: 10;
+            position: absolute;
+            bottom: 0px;
+            left: 0px;
+            height: 40px;
+            line-height: 40px;
+            width: 100%;
+            color: #fff;
+            font-size: 16px;
+            padding: 0 5px 0 15px;
+            letter-spacing: 2px;
+            background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
+          }
         }
+
+
       }
     }
   }

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

@@ -54,15 +54,17 @@ function Tab2() {
       <div className="tab2Main" ref={tab2MainRef}>
         {list.map((v) => (
           <div className="tab2Row" key={v.id} onClick={() => setCode(v.code)}>
-            <ImageLazy
-              // 图片直接放在测试服务器
-              src={`${baseURL}/backstage/sceneCover/${v.code}.jpg`}
-              width="100%"
-              height={180}
-              offline={true}
-              noLook={true}
-            />
-            <p>{v.name}</p>
+            <div className="tab2RowSon">
+              <ImageLazy
+                // 图片直接放在测试服务器
+                src={`${baseURL}/backstage/sceneCover/${v.code}.jpg`}
+                width="100%"
+                height='100%'
+                offline={true}
+                noLook={true}
+              />
+              <p>{v.name}</p>
+            </div>
           </div>
         ))}
       </div>

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

@@ -1,5 +1,86 @@
-.Tab4{
-  :global{
-    
+.Tab4 {
+  background-color: #554a3e;
+  padding: 20px;
+
+  :global {
+    .tab4Main {
+      padding-top: 6px;
+      margin-top: 10px;
+      width: 100%;
+      height: calc(100% - 50px);
+      overflow-y: auto;
+      padding-right: 20px;
+
+      .tab4Row {
+        border: 1px solid #F0D99C;
+        border-radius: 6px;
+        margin-bottom: 20px;
+        position: relative;
+        height: 190px;
+
+        .tab4RowSon {
+          position: absolute;
+          top: -5px;
+          left: -5px;
+          width: 100%;
+          height: 100%;
+          border-radius: 6px;
+          overflow: hidden;
+
+          &::before {
+            content: '';
+            position: absolute;
+            z-index: 10;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, .2);
+          }
+
+          .tab4VideoBox {
+            position: absolute;
+            z-index: 11;
+            width: 100%;
+            height: 100%;
+            background-color: black;
+
+            video {
+
+              width: 100%;
+              height: 100%;
+            }
+          }
+
+
+          &>p {
+            z-index: 10;
+            position: absolute;
+            bottom: 0px;
+            left: 0px;
+            height: 40px;
+            line-height: 40px;
+            width: 100%;
+            color: #fff;
+            font-size: 16px;
+            padding: 0 5px 0 15px;
+            letter-spacing: 2px;
+            background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
+          }
+
+          .tab4Btn {
+            position: absolute;
+            z-index: 10;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: #fff;
+            font-size: 60px;
+          }
+        }
+
+
+      }
+    }
   }
 }

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

@@ -1,12 +1,74 @@
-import React from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import styles from "./index.module.scss";
- function Tab4() {
-  
+import { envData } from "@/utils/env";
+import ImageLazy from "@/components/ImageLazy";
+import { CaretRightOutlined } from "@ant-design/icons";
+
+function Tab4() {
+  const list = useMemo(() => {
+    return envData.find((v) => v.id === 1)!.data;
+  }, []);
+
+  // 视频点击播放
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  // 当前选中状态
+  const [isAc, setIsAc] = useState(0);
+
+  const videoPlayFu = useCallback(
+    (id: number) => {
+      if (isAc === id) return;
+
+      setIsAc(id);
+
+      setTimeout(() => {
+        const dom = videoRef.current;
+
+        if (dom) {
+          dom.requestFullscreen();
+          dom.play();
+        }
+      }, 100);
+    },
+    [isAc]
+  );
+
   return (
     <div className={styles.Tab4}>
-      <h1>Tab4</h1>
+      <div className="tab4Main">
+        {list.map((v) => (
+          <div className="tab4Row" key={v.id} onClick={() => videoPlayFu(v.id)}>
+            <div className="tab4RowSon">
+              {isAc === v.id ? (
+                <div className="tab4VideoBox">
+                  <video
+                    ref={videoRef}
+                    controls
+                    src={`https://houseoss.4dkankan.com/project/ypzz/${v.id}.mp4`}
+                  ></video>
+                </div>
+              ) : (
+                <>
+                  <ImageLazy
+                    src={`https://houseoss.4dkankan.com/project/ypzz/imgs/${v.id}-min.png`}
+                    width="100%"
+                    height="100%"
+                    offline={true}
+                    noLook={true}
+                  />
+                  <p>{v.name}</p>
+                  {/* 播放按钮 */}
+                  <div className="tab4Btn">
+                    <CaretRightOutlined />
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
     </div>
-  )
+  );
 }
 
 const MemoTab4 = React.memo(Tab4);

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

@@ -0,0 +1,99 @@
+.Info {
+  position: absolute;
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: #554a3e;
+  padding: 20px 0px 20px 30px;
+
+  :global {
+    .tab5Iback {
+      position: absolute;
+      z-index: 10;
+      top: 18px;
+      left: 8px;
+    }
+
+    .tab5Ititle {
+      padding: 0 35px 0 15px;
+      text-align: center;
+      color: #F0D99C;
+      letter-spacing: 3px;
+      font-size: 18px;
+      font-weight: 700;
+      margin-bottom: 20px;
+    }
+
+    .iframeBox {
+      overflow: hidden;
+      width: 100%;
+
+      iframe {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .tab5ILoding {
+      width: 100%;
+      height: calc(100% - 100px);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .tab5Ibtn {
+      position: fixed;
+      z-index: 10;
+      left: 20px;
+      width: calc(100% - 40px);
+      height: 46px;
+      display: flex;
+      justify-content: space-between;
+
+      &>div {
+        height: 100%;
+        border-radius: 4px;
+        background-color: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        img {
+          width: 30px;
+          display: inline-block;
+          margin-right: 6px;
+        }
+      }
+
+      .tab5Ibtn1 {
+        width: 30%;
+      }
+
+      .tab5Ibtn2 {
+        width: calc(40% - 20px);
+
+        img {
+          width: 36px;
+        }
+
+        font-weight: 700;
+      }
+
+      .tab5Ibtn3 {
+        img {
+          margin-right: 0;
+          margin-left: 6px;
+        }
+      }
+
+      .tab5IbtnNo {
+        pointer-events: none;
+        opacity: .5;
+      }
+    }
+
+  }
+}

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

@@ -0,0 +1,208 @@
+/* eslint-disable jsx-a11y/iframe-has-title */
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import styles from "./index.module.scss";
+import backImg from "@/assets/img/goods/toBack.png";
+import { PcTab5ListType } from "@/pages/A2Main/Tab5Info";
+import { A2_APItab5Info } from "@/store/action/A2Main";
+import { envUrl, isEnvFlag } from "@/utils/env";
+import { Spin } from "antd";
+import classNmaes from "classnames";
+import Menu from "../Menu";
+
+type Props = {
+  sId: string;
+  closeFu: () => void;
+  isOpen?: boolean;
+  title?: string;
+};
+
+function Info({ sId, closeFu, isOpen, title }: Props) {
+  // 顶部的标题
+  const [titleTxt, setTitleTxt] = useState("");
+
+  const [data, setData] = useState([] as PcTab5ListType[]);
+
+  const getInfoFu = useCallback(async () => {
+    const res = await A2_APItab5Info(sId);
+    if (res.code === 0) {
+      let tempArr: any[] = [];
+
+      if (res.data && res.data[0]) {
+        // 顶部的标题
+        setTitleTxt(res.data[0].text);
+      }
+
+      if (res.data && res.data[0] && res.data[0].channelChildren)
+        tempArr = res.data[0].channelChildren;
+
+      const arrRes: PcTab5ListType[] = [];
+      tempArr.forEach((v) => {
+        const obj: PcTab5ListType = {
+          id: v.id,
+          name: v.text,
+          flag: v.flag,
+          children: [],
+        };
+        if (v.children && v.children.length) {
+          v.children.forEach((v2: any) => {
+            obj.children!.push({
+              id: v2.id,
+              name: v2.text,
+            });
+          });
+        }
+        arrRes.push(obj);
+      });
+      setData(arrRes);
+    }
+  }, [sId]);
+
+  useEffect(() => {
+    getInfoFu();
+  }, [getInfoFu]);
+
+  // 右边嵌套页面的加载loding
+  const [isLoding, setIsLoding] = useState(true);
+
+  // 选中的id
+  const [acId, setAcId] = useState("");
+
+  useEffect(() => {
+    if (data[0]) {
+      if (data[0].flag) {
+        setAcId(data[0].id);
+      } else if (data[0].children && data[0].children[0]) {
+        setAcId(data[0].children[0].id);
+      }
+    }
+  }, [data]);
+
+  // 动态获取标题的 高度
+  const tab5ItitleRef = useRef<HTMLDivElement>(null);
+
+  // 动态设置 iframe 外层盒子的高度
+  const [ifrHeight, setIfrHeight] = useState(0);
+
+  useEffect(() => {
+    const dom = tab5ItitleRef.current;
+    if (dom) {
+      const num = dom.offsetHeight + 30;
+      const numRes =
+        document.documentElement.clientHeight - (isOpen ? 40 : 100) - num;
+      setIfrHeight(numRes);
+    }
+  }, [isOpen]);
+
+  // 过滤出有详情的 数据
+  const dataFilter = useMemo(() => {
+    const arr = [] as PcTab5ListType[];
+    data.forEach((v) => {
+      if (v.flag) arr.push(v);
+      if (v.children) {
+        v.children.forEach((v2) => {
+          arr.push(v2);
+        });
+      }
+    });
+    return arr;
+  }, [data]);
+
+  // 通过 当前 详情 页面的 id 拿到 索引
+  const acIndex = useMemo(() => {
+    let index = 0;
+
+    if (acId && dataFilter.length) {
+      index = dataFilter.findIndex((v) => v.id === acId);
+    }
+    return index;
+  }, [acId, dataFilter]);
+
+  // 点击 上一页  和 下一页
+  const cutAcIdFu = useCallback(
+    (num: number, index: number) => {
+      const cutId = dataFilter[index + num].id;
+      setAcId(cutId);
+    },
+    [dataFilter]
+  );
+
+  // 点击目录
+  const [menuFlag, setMenuFlag] = useState(false);
+
+  return (
+    <div className={styles.Info}>
+      {/* 返回按钮 */}
+      <img
+        className="tab5Iback"
+        hidden={isOpen}
+        onClick={closeFu}
+        src={backImg}
+        alt=""
+      />
+
+      <div className="tab5Ititle" ref={tab5ItitleRef}>
+        {title ? title : titleTxt}
+      </div>
+
+      <div className="tab5ILoding" hidden={!isLoding}>
+        <Spin size="large" />
+      </div>
+
+      <div className="iframeBox" style={{ height: ifrHeight }}>
+        {acId ? (
+          <iframe
+            onLoad={() => setIsLoding(false)}
+            key={acId}
+            src={`${isEnvFlag ? "" : "/pc"}/knowInfo.html?sId=${acId}`}
+            frameBorder="0"
+          ></iframe>
+        ) : null}
+      </div>
+
+      {/* 底部固定的 操作按钮 */}
+      <div className="tab5Ibtn" style={{ bottom: isOpen ? 10 : 100 }}>
+        <div
+          onClick={() => cutAcIdFu(-1, acIndex)}
+          className={classNmaes("tab5Ibtn1", acIndex === 0 ? "tab5IbtnNo" : "")}
+        >
+          <img src={`${envUrl}/App/main5/left.png`} alt="" />
+          <span>上一页</span>
+        </div>
+        <div className="tab5Ibtn2" onClick={() => setMenuFlag(true)}>
+          <img src={`${envUrl}/App/main5/menu.png`} alt="" />
+          <span>目录</span>
+        </div>
+        <div
+          onClick={() => cutAcIdFu(1, acIndex)}
+          className={classNmaes(
+            "tab5Ibtn1 tab5Ibtn3",
+            acIndex >= dataFilter.length - 1 ? "tab5IbtnNo" : ""
+          )}
+        >
+          <span>下一页</span>
+          <img src={`${envUrl}/App/main5/right.png`} alt="" />
+        </div>
+      </div>
+
+      {/* 点击目录出来的页面 */}
+      {menuFlag ? (
+        <Menu
+          data={data}
+          acId={acId}
+          closeFu={() => setMenuFlag(false)}
+          cutAcIdFuToSon={(id) => setAcId(id)}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+const MemoInfo = React.memo(Info);
+
+export default MemoInfo;

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

@@ -0,0 +1,55 @@
+.Menu {
+  position: absolute;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #554a3e;
+  overflow-y: auto;
+
+  :global {
+
+      .tab5Row {
+        margin-bottom: 20px;
+        font-size: 18px;
+
+        .tab5Row1 {
+          color: #fff;
+          font-weight: 700;
+          padding: 30px 0 30px 20px;
+          border-bottom: 1px dashed var(--themeColor);
+          pointer-events: none;
+
+        }
+
+        .tab5Row1Ac {
+          color: var(--themeColor);
+          pointer-events: auto;
+
+          &:hover {
+            background-color: var(--themeColor);
+            color: #47392C;
+          }
+        }
+
+        .tab5RowSon {
+          color: var(--themeColor);
+          padding: 16px 0 16px 40px;
+          border-bottom: 1px dashed var(--themeColor);
+
+          &:hover {
+            background-color: var(--themeColor);
+            color: #47392C;
+          }
+        }
+
+        .tab5IsActive {
+          background-color: var(--themeColor);
+          color: #47392C;
+        }
+
+      }
+
+  }
+}

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

@@ -0,0 +1,70 @@
+import React, { useCallback, useEffect, useRef } from "react";
+import styles from "./index.module.scss";
+import { PcTab5ListType } from "@/pages/A2Main/Tab5Info";
+import classNames from "classnames";
+
+type Props = {
+  data: PcTab5ListType[];
+  acId: string;
+  closeFu: () => void;
+  cutAcIdFuToSon: (id: string) => void;
+};
+
+function Menu({ data, acId, closeFu, cutAcIdFuToSon }: Props) {
+  // 点击切换
+  const cutAcIdFu = useCallback(
+    (id: string) => {
+      if (acId !== id) cutAcIdFuToSon(id);
+      closeFu();
+    },
+    [acId, closeFu, cutAcIdFuToSon]
+  );
+
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const dom = document.querySelector(".tab5IsActive") as HTMLDivElement;
+    if (dom && menuRef.current) {
+      menuRef.current.scrollTop = dom.offsetTop - 200;
+    }
+  }, []);
+
+  return (
+    <div className={styles.Menu} ref={menuRef}>
+      {data.map((v1) => (
+        <div className="tab5Row" key={v1.id}>
+          <div
+            onClick={() => cutAcIdFu(v1.id)}
+            className={classNames(
+              "tab5Row1",
+              !!v1.flag ? "tab5Row1Ac" : "",
+              acId === v1.id ? "tab5IsActive" : ""
+            )}
+          >
+            {v1.name}
+          </div>
+          {v1.children && v1.children.length ? (
+            <>
+              {v1.children.map((v2) => (
+                <div
+                  onClick={() => cutAcIdFu(v2.id)}
+                  className={classNames(
+                    "tab5RowSon",
+                    acId === v2.id ? "tab5IsActive" : ""
+                  )}
+                  key={v2.id}
+                >
+                  {v2.name}
+                </div>
+              ))}
+            </>
+          ) : null}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const MemoMenu = React.memo(Menu);
+
+export default MemoMenu;

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

@@ -1,5 +1,94 @@
-.Tab5{
-  :global{
-    
+.Tab5 {
+  background-color: #554a3e;
+  padding: 10px 0 20px 20px;
+  position: relative;
+
+  :global {
+    .tab5Top {
+      height: 40px;
+      display: flex;
+
+      .tab5TopRow {
+        height: 40px;
+        line-height: 40px;
+        color: #F0D99C;
+        font-size: 18px;
+        margin-right: 20px;
+      }
+
+      .tab5TopRowAc {
+        color: #fff;
+        font-weight: 700;
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          bottom: 6px;
+          left: 0;
+          width: 100%;
+          height: 4px;
+          background-color: #F0D99C;
+        }
+      }
+    }
+
+    .tab5Main {
+      padding-top: 6px;
+      margin-top: 10px;
+      width: 100%;
+      height: calc(100% - 50px);
+      overflow-y: auto;
+      padding-right: 20px;
+
+      .tab5Row {
+        border: 1px solid #F0D99C;
+        border-radius: 6px;
+        margin-bottom: 20px;
+        position: relative;
+        height: 240px;
+
+        .tab5RowSon {
+          position: absolute;
+          top: -5px;
+          left: -5px;
+          width: 100%;
+          height: 100%;
+          border-radius: 6px;
+          overflow: hidden;
+
+          &::before {
+            content: '';
+            position: absolute;
+            z-index: 10;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, .2);
+          }
+
+          &>p {
+            z-index: 10;
+            position: absolute;
+            bottom: 0px;
+            left: 0px;
+            height: 40px;
+            line-height: 40px;
+            width: 100%;
+            color: #fff;
+            font-size: 16px;
+            padding: 0 5px 0 15px;
+            letter-spacing: 2px;
+            background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+
+
+      }
+    }
   }
 }

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

@@ -1,12 +1,89 @@
-import React from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import styles from "./index.module.scss";
- function Tab5() {
-  
+import { listPcKnow } from "@/pages/A2Main/Tab5";
+import { useDispatch, useSelector } from "react-redux";
+import classNames from "classnames";
+import { A2_APIgetKnowData } from "@/store/action/A2Main";
+import { RootState } from "@/store";
+import ImageLazy from "@/components/ImageLazy";
+import Info from "./Info";
+
+function Tab5() {
+  const dispatch = useDispatch();
+
+  const [fromData, setFromData] = useState({
+    tagType: "",
+    pageNum: 1,
+    pageSize: 99999,
+  });
+
+  const tab5MainRef = useRef<HTMLDivElement>(null);
+
+  // 切换的时候滚动到顶部
+  useEffect(() => {
+    // 兼容苹果手机
+    setTimeout(() => {
+      if (tab5MainRef.current) tab5MainRef.current.scrollTop = 1;
+    }, 100);
+  }, [fromData]);
+
+  const getListFu = useCallback(async () => {
+    dispatch(A2_APIgetKnowData(fromData));
+  }, [dispatch, fromData]);
+
+  useEffect(() => {
+    getListFu();
+  }, [getListFu]);
+
+  const tab5List = useSelector((state: RootState) => state.A2Main.tab5List);
+
+  // 打开详情页的id
+  const [infoId, setInfoId] = useState({ id: "", name: "" });
+
   return (
     <div className={styles.Tab5}>
-      <h1>Tab5</h1>
+      {/* 展陈 旧址的切换 */}
+      <div className="tab5Top">
+        {listPcKnow.map((v) => (
+          <div
+            key={v.id}
+            onClick={() =>
+              setFromData({ ...fromData, tagType: v.type, pageNum: 1 })
+            }
+            className={classNames(
+              "tab5TopRow",
+              fromData.tagType === v.type ? "tab5TopRowAc" : ""
+            )}
+          >
+            {v.name}
+          </div>
+        ))}
+      </div>
+
+      <div className="tab5Main" ref={tab5MainRef}>
+        {tab5List.list.map((v) => (
+          <div
+            className="tab5Row"
+            key={v.id}
+            onClick={() => setInfoId({ id: v.channelId, name: v.name })}
+          >
+            <div className="tab5RowSon">
+              <ImageLazy src={v.thumb} width="100%" height="100%" noLook />
+              <p>{v.name}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {infoId.id ? (
+        <Info
+          sId={infoId.id}
+          closeFu={() => setInfoId({ id: "", name: "" })}
+          title={infoId.name}
+        />
+      ) : null}
     </div>
-  )
+  );
 }
 
 const MemoTab5 = React.memo(Tab5);

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

@@ -10,13 +10,16 @@ export const mainFlloArr = [
   {
     id: 3,
     name: "馆藏",
+    awId:4,
   },
   {
     id: 4,
     name: "视频",
+    awId:1,
   },
   {
     id: 5,
     name: "知识",
+    awId:5,
   },
 ];

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styles from "./index.module.scss";
 import { mainFlloArr } from "./data";
 import classNames from "classnames";
@@ -8,6 +8,8 @@ import Tab2 from "./Tab2";
 import Tab3 from "./Tab3";
 import Tab4 from "./Tab4";
 import Tab5 from "./Tab5";
+import { aIdObj } from "@/pages/A2Main";
+import { A2_APIsaveModulesVisit } from "@/store/action/A2Main";
 
 const pageObj = {
   1: <Tab1 />,
@@ -20,6 +22,22 @@ const pageObj = {
 function MainM() {
   const [acPage, setAcPage] = useState(1);
 
+  // 增加访问量 - 馆藏 视频 知识
+
+  // 保存访问量
+  const saveModulesVisitFu = useCallback(async () => {
+    if (acPage >= 3) {
+      const awId = mainFlloArr.find((v) => v.id === acPage)!.awId!;
+
+      const key = Reflect.get(aIdObj, awId);
+      await A2_APIsaveModulesVisit(key);
+    }
+  }, [acPage]);
+
+  useEffect(() => {
+    saveModulesVisitFu();
+  }, [saveModulesVisitFu]);
+
   const PageCom = useMemo(() => {
     return Reflect.get(pageObj, acPage);
   }, [acPage]);