upp

pc/src/assets/img/map/aaa.xmp

@@ -0,0 +1,146 @@
+<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
+<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 7.1-c000 79.4d2f597, 2021/09/01-20:51:22        " rdfhash="A80EDEBF33CC50AE6152CB296B73935C" merged="0">
+ <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+  <rdf:Description rdf:about=""
+    xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/"
+    xmlns:stEvt="http://ns.adobe.com/xap/1.0/sType/ResourceEvent#"
+    xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#"
+    xmlns:xmp="http://ns.adobe.com/xap/1.0/"
+    xmlns:xmpDM="http://ns.adobe.com/xmp/1.0/DynamicMedia/"
+    xmlns:tiff="http://ns.adobe.com/tiff/1.0/"
+    xmlns:creatorAtom="http://ns.adobe.com/creatorAtom/1.0/"
+    xmlns:stDim="http://ns.adobe.com/xap/1.0/sType/Dimensions#"
+    xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmpMM:InstanceID="xmp.iid:e2074a62-b355-2045-88b5-0d895cd12404"
+   xmpMM:DocumentID="e1f23059-15ab-c024-1b96-4c7600000041"
+   xmpMM:OriginalDocumentID="xmp.did:36c1b453-97f3-7449-a16c-7c6493a12495"
+   xmp:MetadataDate="2023-05-11T17:52:35+08:00"
+   xmp:ModifyDate="2023-05-11T17:52:35+08:00"
+   xmp:CreatorTool="Adobe Premiere Pro 2022.0 (Windows)"
+   xmp:CreateDate="2023-05-11T17:52:04+08:00"
+   xmpDM:videoFrameRate="24.000000"
+   xmpDM:videoFieldOrder="Progressive"
+   xmpDM:videoPixelAspectRatio="1/1"
+   xmpDM:audioSampleRate="48000"
+   xmpDM:audioSampleType="Compressed"
+   xmpDM:audioChannelType="Stereo"
+   xmpDM:startTimeScale="24"
+   xmpDM:startTimeSampleSize="1"
+   dc:format="WebM">
+   <xmpMM:History>
+    <rdf:Seq>
+     <rdf:li
+      stEvt:action="saved"
+      stEvt:instanceID="1ff6942d-8e29-d638-9a01-51180000006e"
+      stEvt:when="2023-05-11T17:52:35+08:00"
+      stEvt:softwareAgent="Adobe Premiere Pro 2022.0 (Windows)"
+      stEvt:changed="/"/>
+     <rdf:li
+      stEvt:action="created"
+      stEvt:instanceID="xmp.iid:3687d0e2-d133-0e47-9e16-6a8b94639829"
+      stEvt:when="2023-05-11T17:52:32+08:00"
+      stEvt:softwareAgent="Adobe Premiere Pro 2022.0 (Windows)"/>
+     <rdf:li
+      stEvt:action="saved"
+      stEvt:instanceID="xmp.iid:310f39a0-99da-c94e-ad9b-5d6648dd0f6c"
+      stEvt:when="2023-05-11T17:52:35+08:00"
+      stEvt:softwareAgent="Adobe Premiere Pro 2022.0 (Windows)"
+      stEvt:changed="/"/>
+     <rdf:li
+      stEvt:action="saved"
+      stEvt:instanceID="xmp.iid:e2074a62-b355-2045-88b5-0d895cd12404"
+      stEvt:when="2023-05-11T17:52:35+08:00"
+      stEvt:softwareAgent="Adobe Premiere Pro 2022.0 (Windows)"
+      stEvt:changed="/metadata"/>
+    </rdf:Seq>
+   </xmpMM:History>
+   <xmpMM:Ingredients>
+    <rdf:Bag>
+     <rdf:li
+      stRef:instanceID="142728e8-70fa-1f8a-6ee5-e0f600000088"
+      stRef:documentID="6d047dd5-7005-7bac-47da-04330000005b"
+      stRef:fromPart="time:31752000000f254016000000d328104000000f254016000000"
+      stRef:toPart="time:0d328104000000f254016000000"
+      stRef:filePath="fogTransitionIn1080p.mp4"
+      stRef:maskMarkers="None"/>
+    </rdf:Bag>
+   </xmpMM:Ingredients>
+   <xmpMM:Pantry>
+    <rdf:Bag>
+     <rdf:li>
+      <rdf:Description
+       xmp:CreateDate="2022-04-11T09:15:32Z"
+       xmp:ModifyDate="2023-05-11T17:51:26+08:00"
+       xmp:MetadataDate="2023-05-11T17:51:26+08:00"
+       tiff:Orientation="1"
+       xmpMM:InstanceID="142728e8-70fa-1f8a-6ee5-e0f600000088"
+       xmpMM:DocumentID="6d047dd5-7005-7bac-47da-04330000005b"
+       xmpMM:OriginalDocumentID="xmp.did:fa80e015-4ce1-a445-9af5-2fd6c64982d9">
+      <xmpDM:duration
+       xmpDM:value="2100"
+       xmpDM:scale="1/1000"/>
+      <xmpMM:History>
+       <rdf:Seq>
+        <rdf:li
+         stEvt:action="saved"
+         stEvt:instanceID="142728e8-70fa-1f8a-6ee5-e0f600000088"
+         stEvt:when="2023-05-11T17:51:26+08:00"
+         stEvt:softwareAgent="Adobe Premiere Pro 2022.0 (Windows)"
+         stEvt:changed="/"/>
+       </rdf:Seq>
+      </xmpMM:History>
+      </rdf:Description>
+     </rdf:li>
+    </rdf:Bag>
+   </xmpMM:Pantry>
+   <xmpMM:DerivedFrom
+    stRef:instanceID="xmp.iid:3687d0e2-d133-0e47-9e16-6a8b94639829"
+    stRef:documentID="xmp.did:3687d0e2-d133-0e47-9e16-6a8b94639829"
+    stRef:originalDocumentID="xmp.did:3687d0e2-d133-0e47-9e16-6a8b94639829"/>
+   <creatorAtom:windowsAtom
+    creatorAtom:extension=".prproj"
+    creatorAtom:invocationFlags="/L"
+    creatorAtom:uncProjectPath="\\?\C:\Users\xiaoyu\Desktop\无标题项目.prproj"/>
+   <creatorAtom:macAtom
+    creatorAtom:applicationCode="1347449455"
+    creatorAtom:invocationAppleEvent="1129468018"/>
+   <xmpDM:projectRef
+    xmpDM:type="movie"/>
+   <xmpDM:videoFrameSize
+    stDim:w="1920"
+    stDim:h="1080"
+    stDim:unit="pixel"/>
+   <xmpDM:duration
+    xmpDM:value="31"
+    xmpDM:scale="1/24"/>
+   <xmpDM:startTimecode
+    xmpDM:timeFormat="24Timecode"
+    xmpDM:timeValue="00:00:00:03"/>
+   <xmpDM:altTimecode
+    xmpDM:timeValue="00:00:00:03"
+    xmpDM:timeFormat="24Timecode"/>
+  </rdf:Description>
+ </rdf:RDF>
+</x:xmpmeta>
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                           
+<?xpacket end="w"?>

pc/src/assets/styles/base.css

@@ -113,3 +113,14 @@ textarea {
     bottom: 100px;
   }
 }
+.yunSon2 {
+  animation: moveyun 8s linear infinite alternate;
+}
+@keyframes moveyun {
+  0% {
+    transform: translate(0);
+  }
+  100% {
+    transform: translate(-800px);
+  }
+}

pc/src/assets/styles/base.less

@@ -62,7 +62,8 @@ textarea {
 .noFindPage {
   opacity: 0;
   transition: opacity .5s;
-  .noFindBtn{
+
+  .noFindBtn {
     text-align: center;
   }
 }
@@ -143,19 +144,20 @@ textarea {
 
 }
 
-// .barrMove {
-//   animation: barrMove 3.5s linear infinite;
-// }
 
-// // 弹幕动画帧
-// // 动画帧
-// @keyframes barrMove {
-//   0% {
-//     right: -100px;
-//   }
 
-//   100% {
-//     right: 1000px;
-//   }
+.yunSon2 {
+  animation: moveyun 8s linear infinite alternate;
+}
+
+// 动画帧
+@keyframes moveyun {
+  0% {
+    transform: translate(0);
+  }
+
+  100% {
+    transform: translate(-800px);
+  }
 
-// }
+}

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

@@ -0,0 +1,91 @@
+.A0Map {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  :global {
+    .videoBox {
+      opacity: 1;
+      pointer-events: auto;
+      transition: all 1s;
+      position: absolute;
+      z-index: 11;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+
+      &>video {
+        width: 100%;
+      }
+    }
+
+    .videoBoxHide {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .mapMain {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      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%;
+        // transform:translate();
+
+        &>img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+
+    // 云层 动画帧
+    .yunBox {
+      pointer-events: none;
+      position: absolute;
+      z-index: 9;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+
+      .yunSon1 {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-image: url('../../assets/img/map/yun2.png');
+        background-size: 100% 100%;
+
+      }
+
+      .yunSon2 {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 200%;
+        height: 100%;
+        background-image: url('../../assets/img/map/yun1.png');
+        background-size: 100% 100%;
+
+      }
+
+    }
+  }
+}

pc/src/pages/A0Map/index.tsx

@@ -0,0 +1,78 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import styles from "./index.module.scss";
+import maoBacImg from "@/assets/img/map/mapBac.jpg";
+import staVideo from "@/assets/img/map/staVideo.mp4";
+import classNames from "classnames";
+
+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;
+    // console.log("-------", x, y);
+    x = x > 1 ? 1 : x;
+    x = x < -1 ? -1 : x;
+    y = y > 1 ? 1 : y;
+    y = y < -1 ? -1 : y;
+    if (mapBac1.current) {
+      const dom1 = mapBac1.current;
+      dom1.style.transform = `rotateX(${
+        y * 2.5
+      }deg) rotateY(${x}deg) translate(${-x * 10}px,${y * 10}px)`;
+    }
+  }, []);
+
+  const [videoInd, setVidoeInd] = useState(1);
+
+  // 视频的播放
+  const videoPlayFu = useCallback(() => {
+    const dom1 = document.querySelector("#video1") as HTMLVideoElement;
+    if (dom1) {
+      dom1.play();
+      dom1.onended = () => {
+        setVidoeInd(0);
+      };
+    }
+  }, []);
+
+  useEffect(() => {
+    if (videoInd === 1) videoPlayFu();
+  }, [videoInd, videoPlayFu]);
+
+  useEffect(() => {
+    if (mapBac1.current) {
+      const dom1 = mapBac1.current;
+      dom1.addEventListener("mousemove", mouseMoveFu);
+      return () => {
+        dom1.removeEventListener("mousemove", mouseMoveFu);
+      };
+    }
+  }, [mouseMoveFu]);
+
+  return (
+    <div className={styles.A0Map}>
+      {/* 2个视频 */}
+      <div
+        className={classNames("videoBox", videoInd !== 1 ? "videoBoxHide" : "")}
+      >
+        <video id="video1" src={staVideo} muted></video>
+      </div>
+
+      {/* 一级地图 */}
+      <div className="mapMain">
+        <div className="mapBac" ref={mapBac1}>
+          <img src={maoBacImg} alt="" />
+        </div>
+      </div>
+      <div className="yunBox">
+      <div className="yunSon1"></div>
+      <div className="yunSon2"></div>
+      </div>
+    </div>
+  );
+}
+
+const MemoA0Map = React.memo(A0Map);
+
+export default MemoA0Map;

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

@@ -258,6 +258,8 @@
     }
 
     .curTitBox {
+      opacity: 0;
+      pointer-events: none;
       border-radius: 0 0 4px 4px;
       border-top: 3px solid #b6ab97;
       position: absolute;

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

@@ -294,6 +294,24 @@ function GoodsSw() {
     };
   }, []);
 
+  const curTime = useRef(-1);
+
+  useEffect(() => {
+    clearTimeout(curTime.current);
+    curTime.current = window.setTimeout(() => {
+      const dom = document.querySelector(".curTitBox") as HTMLDivElement;
+      if (list1.length > 4) {
+        if (dom) {
+          dom.style.opacity = "1";
+          dom.style.pointerEvents = "auto";
+        }
+      }
+    }, 500);
+    return () => {
+      clearTimeout(curTime.current);
+    };
+  }, [list1.length]);
+
   return (
     <div className={styles.GoodsSw}>
       {/* 轮播图主体 */}

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

@@ -1,20 +1,15 @@
 .A2Main {
-  background-image: url('../../assets/img/tempBg.jpg');
   background-size: 100% 100%;
   position: relative;
 
   :global {
 
-    .threeBox{
+    .threeBox {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
-      iframe{
-        width: 100%;
-        height: 100%;
-      }
     }
 
     .logo {
@@ -25,6 +20,7 @@
       left: 20px;
 
       &>img {
+        pointer-events: none;
         width: 180px;
       }
     }
@@ -43,7 +39,6 @@
         width: 100%;
         height: 100%;
         border-radius: 50px 50px 0 0;
-
         background-color: rgba(6, 10, 11, 0.80);
 
       }

pc/src/pages/A2Main/index.tsx

@@ -9,6 +9,7 @@ import { A2SwType } from "@/types";
 import GoodsSw from "./GoodsSw";
 import history from "@/utils/history";
 import KnowLedge from "./KnowLedge";
+import A0Map from "../A0Map";
 
 const incoArr = [
   {
@@ -99,10 +100,7 @@ function A2Main() {
     <div className={styles.A2Main}>
       {/* 三维模型页面 */}
       <div className="threeBox">
-        {/* <iframe
-          src="https://4dscene.4dage.com/culturalrelics/YFYCModel/index.html#/"
-          frameBorder="0"
-        ></iframe> */}
+        <A0Map />
       </div>
 
       {/* 左上方logo */}

pc/src/types/declaration.d.ts

@@ -2,4 +2,6 @@ declare module "history";
 declare module "*.scss";
 declare module "*.png";
 declare module "*.jpg";
-declare module "*.gif";
+declare module "*.gif";
+declare module "*.mp4";
+declare module "*.xmp";