upp

pc/public/index.html

@@ -8,6 +8,7 @@
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Web site created using create-react-app" />
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <script src="./staticData.js"></script>
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

pc/public/staticData.js

@@ -0,0 +1,68 @@
+
+const staticData = [
+  {
+    id: 1,
+    data: [
+      {
+        id: 1,
+        name: "虎门销烟1-1",
+        info: {
+          title: "视频66666",
+          txt: "撒大苏打撒旦111111111111111111111111111111111111111111撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦11111",
+        },
+      },
+      {
+        id: 2,
+        name: "虎门销烟1-1",
+        info: {
+          title: "视频66666",
+          txt: "撒大苏打撒旦11111111111111111111111111111111111111111111111",
+        },
+      },
+      {
+        id: 3,
+        name: "虎门销烟1-1",
+        info: {
+          title: "视频66666",
+          txt: "撒大苏打撒旦11111111111111111111111111111111111111111111111",
+        },
+      },
+    ],
+  },
+  {
+    id: 2,
+    data: [
+      // {
+      //   id: 1,
+      //   img: "1.png",
+      //   name: "鸦片战争博物馆",
+      //   path: "https://www.4dkankan.com/spg.html?m=KJ-Db5vr10oMd&lang=zh",
+      // },
+      // {
+      //   id: 2,
+      //   img: "2.png",
+      //   name: "海战馆",
+      //   path: "https://www.4dkankan.com/spg.html?m=KJ-PoA0YhcfD7&lang=zh",
+      // },
+      // {
+      //   id: 3,
+      //   img: "3.png",
+      //   name: "虎门故事",
+      //   path: "https://www.4dkankan.com/spg.html?m=KJ-veEvm2HCkm&lang=zh",
+      // },
+    ],
+  },
+  {
+    id: 3,
+    data: [
+      // {
+      //   id: 1,
+      //   img: "4.png",
+      //   name: "威远炮台",
+      //   path: "https://laser.4dkankan.com/index.html?m=SS-TVMpM4DKEL",
+      // },
+    ],
+  },
+  { id: 4 },
+  { id: 5 },
+]

pc/src/assets/styles/base.css

@@ -40,7 +40,7 @@ textarea {
 }
 /* 主题色 */
 :root {
-  --themeColor: #c8b992;
+  --themeColor: #f0d89c;
 }
 [hidden] {
   display: none !important;
@@ -90,7 +90,7 @@ textarea {
   /*滚动条里面小方块*/
   border-radius: 10px;
   -webkit-box-shadow: inset 0 0 5px transparent;
-  background: #8a7351;
+  background: var(--themeColor);
 }
 #root .myscroll::-webkit-scrollbar-track {
   /*滚动条里面轨道*/

pc/src/assets/styles/base.less

@@ -49,7 +49,7 @@ textarea {
 
 /* 主题色 */
 :root {
-  --themeColor: #c8b992;
+  --themeColor: #f0d89c;
 }
 
 
@@ -111,7 +111,7 @@ textarea {
     /*滚动条里面小方块*/
     border-radius: 10px;
     -webkit-box-shadow: inset 0 0 5px transparent;
-    background: #8a7351;
+    background: var(--themeColor);
   }
 
   .myscroll::-webkit-scrollbar-track {

pc/src/index.tsx

@@ -23,7 +23,7 @@ root.render(
     locale={locale}
     theme={{
       token: {
-        colorPrimary: "#c8b992",
+        colorPrimary: "#f0d89c",
       },
     }}
   >

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

@@ -5,7 +5,7 @@
 
   :global {
 
-    .moveCCC{
+    .moveCCC {
       position: absolute;
       z-index: 100;
       right: 20px;
@@ -42,7 +42,8 @@
           height: 100%;
         }
       }
-      .videoRowAc{
+
+      .videoRowAc {
         opacity: 1;
       }
 
@@ -60,17 +61,14 @@
       top: 0;
       left: 0;
       z-index: 1;
-      transform-style: preserve-3d;
-      perspective: 1000px;
 
       .mapBac {
         z-index: 10;
-        transition: all .3s linear;
         position: absolute;
-        top: -3%;
-        left: -3%;
-        width: 106%;
-        height: 106%;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
         // transform:translate();
 
         &>img {

pc/src/pages/A0Map/index.tsx

@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import styles from "./index.module.scss";
 import maoBacImg from "@/assets/img/map/mapBac.jpg";
 import classNames from "classnames";
@@ -13,31 +7,31 @@ import { envUrl } from "@/utils/history";
 function A0Map() {
   const mapBac1 = useRef<HTMLDivElement>(null);
 
-  const mouseMoveFu = useCallback((e: MouseEvent) => {
-    let x = (e.clientX / window.innerWidth) * 2 - 1;
-    let y = -(e.clientY / window.innerHeight) * 2 + 1;
+  // const mouseMoveFu = useCallback((e: MouseEvent) => {
+  //   let x = (e.clientX / window.innerWidth) * 2 - 1;
+  //   let y = -(e.clientY / window.innerHeight) * 2 + 1;
 
-    // x = x > 1 ? 1 : x < -1 ? -1 : x;
-    // y = y > 1 ? 1 : y < -1 ? -1 : y;
+  //   // x = x > 1 ? 1 : x < -1 ? -1 : x;
+  //   // y = y > 1 ? 1 : y < -1 ? -1 : y;
 
-    const moveParam = `rotateX(${y * 2.5}deg) rotateY(${x}deg) translate(${
-      -x * 10
-    }px,${y * 10}px)`;
+  //   const moveParam = `rotateX(${y * 2.5}deg) rotateY(${x}deg) translate(${
+  //     -x * 10
+  //   }px,${y * 10}px)`;
 
-    if (mapBac1.current) mapBac1.current.style.transform = moveParam;
-  }, []);
+  //   if (mapBac1.current) mapBac1.current.style.transform = moveParam;
+  // }, []);
 
   const [videoInd, setVidoeInd] = useState(true);
 
-  useEffect(() => {
-    if (mapBac1.current) {
-      const dom1 = mapBac1.current;
-      dom1.addEventListener("mousemove", mouseMoveFu);
-      return () => {
-        dom1.removeEventListener("mousemove", mouseMoveFu);
-      };
-    }
-  }, [mouseMoveFu]);
+  // useEffect(() => {
+  //   if (mapBac1.current) {
+  //     const dom1 = mapBac1.current;
+  //     dom1.addEventListener("mousemove", mouseMoveFu);
+  //     return () => {
+  //       dom1.removeEventListener("mousemove", mouseMoveFu);
+  //     };
+  //   }
+  // }, [mouseMoveFu]);
 
   const [moveInd, setMoveInd] = useState(0);
 
@@ -82,9 +76,9 @@ function A0Map() {
   return (
     <div className={styles.A0Map}>
       {/* 测试开场动画帧 */}
-      <div className="moveCCC" onClick={() => setVidoeInd(true)}>
+      {/* <div className="moveCCC" onClick={() => setVidoeInd(true)}>
         开始
-      </div>
+      </div> */}
 
       {/* 开场动画帧 */}
       <div

pc/src/pages/A2Main/GoodsSw/index.module.scss

@@ -57,7 +57,7 @@
               writing-mode: vertical-lr;
               writing-mode: tb-lr;
               font-size: 16px;
-              color: #C8B992;
+              color: var(--themeColor);
               padding-top: 20px;
               letter-spacing: 3px;
               position: relative;
@@ -70,7 +70,7 @@
                 width: 8px;
                 height: 8px;
                 border-radius: 50%;
-                background-color: #C8B992;
+                background-color: var(--themeColor);
               }
             }
 

pc/src/pages/A2Main/SwiperCom/index.module.scss

@@ -1,111 +0,0 @@
-.SwiperCom {
-  width: 100%;
-  height: 156px;
-  padding: 0 100px;
-
-  :global {
-    .SwiperComBox {
-      height: 100%;
-
-      .swiper-wrapper {
-        cursor: move;
-      }
-
-      .swiper-slide {
-        // width: 230px;
-        padding-right: 30px;
-        height: 156px;
-      }
-
-      .SwiperComRow {
-        cursor: pointer;
-        position: relative;
-        width: 100%;
-        height: 100%;
-        border-radius: 4px;
-        overflow: hidden;
-        color: #fff;
-        // border: 2px solid transparent;
-
-        &>img {
-          width: 100%;
-          height: 100%;
-        }
-
-        &:hover {
-
-          border: 2px solid #F0D99C;
-
-        }
-
-
-        .SwiperComSm {
-          transition: all .2s;
-          position: absolute;
-          left: 0;
-          top: 0;
-          width: 100%;
-          height: 100%;
-          border-radius: 4px;
-          background-color: rgba(0, 0, 0, .5);
-
-          &>p {
-            padding: 10px;
-            text-align: center;
-            width: 100%;
-            letter-spacing: 2px;
-            color: #fff;
-            word-wrap: break-word;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-          }
-
-
-        }
-
-        .SwiperComName {
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 100%;
-          text-align: center;
-          opacity: 0;
-          transition: all .2s;
-          height: 40px;
-          line-height: 40px;
-          background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
-          word-wrap: break-word;
-          padding: 0 8px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
-
-      .SwiperComRowAc {
-        border: 2px solid #F0D99C;
-
-        .SwiperComSm {
-          opacity: 0;
-        }
-
-        .SwiperComName {
-          opacity: 1;
-        }
-      }
-    }
-
-    .SwiperComBoxCen {
-      .swiper-wrapper {
-        display: flex;
-        justify-content: center;
-        cursor: default;
-      }
-    }
-
-
-
-  }
-}

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

@@ -1,84 +0,0 @@
-import React, { useCallback, useEffect, useState } from "react";
-import styles from "./index.module.scss";
-import { Swiper, SwiperSlide } from "swiper/react";
-import classNames from "classnames";
-
-// Import Swiper styles
-import "swiper/css";
-import { envUrl } from "@/utils/history";
-import { A2SwType } from "@/types";
-import store from "@/store";
-
-type Props = {
-  data: A2SwType[];
-  type: number;
-};
-
-function SwiperCom({ data, type }: Props) {
-  useEffect(() => {
-    setActive(0);
-  }, [type]);
-
-  // 选中状态
-  const [active, setActive] = useState(0);
-  const cutAcFu = useCallback(
-    (item: A2SwType) => {
-      setActive(item.id);
-      if (type === 1) {
-        // 如果是历史，打开视频弹窗
-
-        store.dispatch({
-          type: "main/lookVideo",
-          payload: {
-            id: item.id,
-            title: item.info?.title!,
-            txt: item.info?.txt!,
-          },
-        });
-      } else {
-        window.open(item.path);
-      }
-    },
-    [type]
-  );
-
-  // swiper实例
-  // const mySwiperRef = useRef<any>(null);
-  return (
-    <div className={styles.SwiperCom}>
-      <Swiper
-        // centeredSlides={true}
-        spaceBetween={0}
-        slidesPerView={6}
-        className={classNames(
-          "SwiperComBox",
-          data.length <= 6 ? "SwiperComBoxCen" : ""
-        )}
-        // onSwiper={(swiper) => (mySwiperRef.current = swiper)}
-      >
-        {data.map((v) => (
-          <SwiperSlide key={v.id}>
-            <div
-              title={v.name}
-              onClick={() => cutAcFu(v)}
-              className={classNames(
-                "SwiperComRow",
-                active === v.id ? "SwiperComRowAc" : ""
-              )}
-            >
-              <img src={envUrl + `/swData/${type}/${v.img}`} alt="" />
-              <div className="SwiperComSm">
-                <p>{v.name}</p>
-              </div>
-              <div className="SwiperComName">{v.name}</div>
-            </div>
-          </SwiperSlide>
-        ))}
-      </Swiper>
-    </div>
-  );
-}
-
-const MemoSwiperCom = React.memo(SwiperCom);
-
-export default MemoSwiperCom;

pc/src/pages/A2Main/Tab1/index.module.scss

@@ -0,0 +1,67 @@
+.Tab1 {
+  width: 100%;
+  height: 100%;
+  background-color: #837b68;
+  padding: 30px 10px 30px 20px;
+
+  :global {
+    .Tab1main {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: space-between;
+
+      .Tab1main1 {
+        width: calc(100% - 220px);
+        background-color: #fff;
+      }
+
+      .Tab1main2 {
+        width: 200px;
+        height: 100%;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding-right: 10px;
+
+        &>div {
+          cursor: pointer;
+          width: 100%;
+          height: 130px;
+          margin-bottom: 30px;
+          position: relative;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          .name {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 30px;
+            line-height: 30px;
+            color: #fff;
+            text-align: center;
+            padding: 0 5px;
+            background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .6));
+          }
+
+
+          &>img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        .rowAc {
+          border: 2px solid var(--themeColor);
+        }
+      }
+
+
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+import React, { useMemo, useState } from "react";
+import styles from "./index.module.scss";
+import { envDataSonType } from "@/utils/env";
+import { envUrl } from "@/utils/history";
+import classNames from "classnames";
+
+type Props = {
+  data: envDataSonType[];
+};
+
+function Tab1({ data }: Props) {
+  // 当前选中状态
+  const [isAc, setIsAc] = useState(1);
+
+  const info = useMemo(() => {
+    return data.find((v) => v.id === isAc) || ({} as envDataSonType);
+  }, [data, isAc]);
+
+  return (
+    <div className={styles.Tab1}>
+      <div className="Tab1main">
+        {/* 左侧视频 */}
+        <div className="Tab1main1">
+          <div className="t1Tit">{info.name}</div>
+        </div>
+        {/* 右侧列表 */}
+        <div className="Tab1main2 myscroll">
+          {data.map((v) => (
+            <div
+              key={v.id}
+              title={v.name}
+              className={classNames(isAc === v.id ? "rowAc" : "")}
+            >
+              <img src={envUrl + `/swData/1/${v.img}`} alt="" />
+              <div className="name">{v.name}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const MemoTab1 = React.memo(Tab1);
+
+export default MemoTab1;

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

@@ -29,27 +29,31 @@
       transition: all .3s;
       position: absolute;
       z-index: 11;
-      width: 100%;
-      height: 100px;
-      left: 0;
-      bottom: 0;
+      width: 90px;
+      height: 100%;
+      right: 0;
+      top: 0;
       backdrop-filter: blur(4px);
 
       .swBoxMain {
         width: 100%;
         height: 100%;
-        border-radius: 50px 50px 0 0;
-        background-color: rgba(6, 10, 11, 0.80);
-
+        border-radius: 20px 0px 0 20px;
+        background-color: rgba(35, 28, 9, 0.65);
+        padding-left: 86px;
       }
 
       .top {
-        height: 100px;
+        width: 70px;
+        position: absolute;
+        left: 10px;
+        top: 0;
+        height: 100%;
         display: flex;
-        position: relative;
         align-items: center;
         justify-content: center;
-        padding-right: 40px;
+        flex-direction: column;
+        padding-bottom: 70px;
 
         .row {
           width: 70px;
@@ -57,7 +61,7 @@
           cursor: pointer;
           background-size: 100% 100%;
           transition: all .2s;
-          margin: 0 60px;
+          margin: 20px 0px;
         }
 
         .row1 {
@@ -124,25 +128,29 @@
           cursor: pointer;
           transition: all .3s;
           position: absolute;
-          top: 15px;
-          right: 38px;
+          bottom: 30px;
+          left: 0;
           width: 70px;
           height: 70px;
           background-image: url('../../assets/img/main/icon_down.png');
           background-size: 100% 100%;
-          transform: rotate(180deg);
-
+          // transform: rotate(90deg);
+          // left: -16px;
         }
 
         .openIconAc {
-          transform: rotate(0deg);
+          left: -6px;
+          transform: rotate(180deg);
         }
 
       }
     }
 
     .swBox1 {
-      height: 270px;
+      width: 100%;
+      .swBoxMain{
+        border-radius: 0;
+      }
     }
 
     .swBox2 {

pc/src/pages/A2Main/index.tsx

@@ -3,95 +3,21 @@ import React, { useCallback, useState } from "react";
 import styles from "./index.module.scss";
 import LogoImg from "@/assets/img/logo.png";
 import classNames from "classnames";
-import SwiperCom from "./SwiperCom";
 import VideoBox from "./VideoBox";
-import { A2SwType } from "@/types";
 import GoodsSw from "./GoodsSw";
 import history from "@/utils/history";
 import KnowLedge from "./KnowLedge";
 import A0Map from "../A0Map";
-
-const incoArr = [
-  {
-    id: 1,
-    data: [
-      {
-        id: 1,
-        img: "1.jpg",
-        name: "虎门销烟1-1",
-        path: "",
-        info: {
-          title: "视频66666",
-          txt: "撒大苏打撒旦111111111111111111111111111111111111111111撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦撒大苏打撒旦11111",
-        },
-      },
-      {
-        id: 2,
-        img: "1.jpg",
-        name: "虎门销烟1-1",
-        path: "",
-        info: {
-          title: "视频66666",
-          txt: "撒大苏打撒旦11111111111111111111111111111111111111111111111",
-        },
-      },
-      {
-        id: 3,
-        img: "1.jpg",
-        name: "虎门销烟1-1",
-        path: "",
-        info: {
-          title: "视频66666",
-          txt: "撒大苏打撒旦11111111111111111111111111111111111111111111111",
-        },
-      },
-    ],
-  },
-  {
-    id: 2,
-    data: [
-      {
-        id: 1,
-        img: "1.png",
-        name: "鸦片战争博物馆",
-        path: "https://www.4dkankan.com/spg.html?m=KJ-Db5vr10oMd&lang=zh",
-      },
-      {
-        id: 2,
-        img: "2.png",
-        name: "海战馆",
-        path: "https://www.4dkankan.com/spg.html?m=KJ-PoA0YhcfD7&lang=zh",
-      },
-      {
-        id: 3,
-        img: "3.png",
-        name: "虎门故事",
-        path: "https://www.4dkankan.com/spg.html?m=KJ-veEvm2HCkm&lang=zh",
-      },
-    ],
-  },
-  {
-    id: 3,
-    data: [
-      {
-        id: 1,
-        img: "4.png",
-        name: "威远炮台",
-        path: "https://laser.4dkankan.com/index.html?m=SS-TVMpM4DKEL",
-      },
-    ],
-  },
-  { id: 4 },
-  { id: 5 },
-];
+import { envData, envDataSonType, envDataType } from "@/utils/env";
+import Tab1 from "./Tab1";
 
 function A2Main() {
   // 传给轮播图的数据
-  const [swData, setSwData] = useState<A2SwType[]>([]);
+  const [swData, setSwData] = useState<envDataSonType[]>([]);
 
   // 底部选中的状态
   const [type, setType] = useState(0);
-  const typeChangeFu = useCallback((item: any) => {
+  const typeChangeFu = useCallback((item: envDataType) => {
     setSwData(item.data);
     setType(item.id);
   }, []);
@@ -111,13 +37,13 @@ function A2Main() {
       <div
         className={classNames(
           "swBox",
-          [1, 2, 3].includes(type) ? "swBox1" : "",
+          type === 1 ? "swBox1" : "",
           [4, 5].includes(type) ? "swBox2" : ""
         )}
       >
         <div className="swBoxMain">
           <div className="top">
-            {incoArr.map((v) => (
+            {envData.map((v) => (
               <div
                 onClick={() => typeChangeFu(v)}
                 className={classNames(
@@ -133,13 +59,13 @@ function A2Main() {
               className={classNames("openIcon", type ? "openIconAc" : "")}
               onClick={() => {
                 if (type) setType(0);
-                else typeChangeFu(incoArr[0]);
+                else typeChangeFu(envData[0]);
               }}
             ></div>
           </div>
           {/* 轮播图主体 */}
-          {[1, 2, 3].includes(type) ? (
-            <SwiperCom type={type} data={swData} />
+          {type === 1 ? (
+            <Tab1 data={swData} />
           ) : type === 4 ? (
             <GoodsSw />
           ) : type === 5 ? (

pc/src/utils/env.ts

@@ -0,0 +1,17 @@
+export type envDataSonType = {
+  id: number;
+  name: string;
+  path?: string;
+  info: {
+    title: string;
+    txt: string;
+  };
+};
+
+export type envDataType = {
+  id: number;
+  data: envDataSonType[];
+};
+
+//@ts-ignore
+export const envData = staticData as envDataType[];