gx

project/public/index.html

@@ -9,7 +9,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" />
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
+    <link rel="shortcut icon" href="./favicon.png" />
     <script src="./three/data.js"></script>
     <title>革命领袖视察黑龙江纪念馆</title>
   </head>

project/src/pages/A0base/index.module.scss

@@ -24,7 +24,7 @@
 
 .homeLogo {
   position: absolute;
-  top: 17%;
+  top: 11%;
   left: 12%;
   width: 26%;
   height: 42%;

project/src/pages/A1home/index.tsx

@@ -34,6 +34,10 @@ function A1home() {
   useEffect(() => {
     const dom = document.querySelector('.baseVideo')
     if (!dom) return
+    const container = dom as HTMLElement
+    container.style.width = '100vw'
+    container.style.height = '100vh'
+    container.style.overflow = 'hidden'
 
     if (isOpenPano) {
       if (videoRef.current?.destroy) {
@@ -48,6 +52,8 @@ function A1home() {
       objectFit: 'cover', // 视频的object-fit样式, 默认 cover
       loop: true, // 是否循环, 默认false
       autoplay: true, // 自动播放, 默认false
+      audio: false, // 关闭音频解码，降低 CPU 压力
+      videoBufferSize: 8 * 1024 * 1024, // 适当增大缓冲，减少卡顿
       onSourceEstablished: () => {} //有足够的数据可以播放了
     }
 

project/src/pages/A1homeM/PanoHot/index.module.scss

@@ -1,110 +1,111 @@
-  .PanoHot {
+.PanoHot {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 200;
+  background-color: rgba(70, 47, 9, 0.6);
+  backdrop-filter: blur(5px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .content {
     width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 200;
-    background-color: rgba(70, 47, 9, 0.6);
-    backdrop-filter: blur(5px);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    .content {
+    height: 25%;
+    border-radius: 10px 10px 0 0;
+    background: linear-gradient(180deg, #a56f2c 0%, #824e0f 41.35%, #4f310c 100%);
+    padding: 20px 20px 10px;
+    .title {
       width: 100%;
-      height: 25%;
-      border-radius: 10px 10px 0 0;
-      background: linear-gradient(180deg, #A56F2C 0%, #824E0F 41.35%, #4F310C 100%);
-      padding: 20px 20px 10px;
-      .title {
-        width: 100%;
-        height: fit-content;
-        margin-bottom: 10px;
-        font-size: 20px;
-        font-weight: 500;
-        color: rgba(249, 211, 109, 1);
-      }
-      .desc {
-        width: 100%;
-        height: 80%;
-        padding-bottom: 10px;
-        font-size: 13px;
-        line-height: 1.5;
-        color: rgba(255, 243, 197, 1);
-        overflow: auto;
-        &::-webkit-scrollbar {
-          display: none;
-        }
-      }
+      height: fit-content;
+      margin-bottom: 10px;
+      font-size: 20px;
+      font-weight: 500;
+      color: rgba(249, 211, 109, 1);
     }
-    .top {
+    .desc {
       width: 100%;
-      height: calc(75% - 100px);
-      .model{
-        padding: 40px 10% 20px;
-        width: 100%;
-        height: 100%;
-        & > iframe {
-          width: 100%;
-          height: 100%;
-          border: none;
-          object-fit: contain;
-        }
+      height: 80%;
+      padding-bottom: 10px;
+      font-size: 13px;
+      line-height: 1.5;
+      color: rgba(255, 243, 197, 1);
+      overflow: auto;
+      &::-webkit-scrollbar {
+        display: none;
       }
-      .img {
+    }
+  }
+  .top {
+    width: 100%;
+    height: calc(75% - 100px);
+    .model {
+      padding: 40px 10% 20px;
+      width: 100%;
+      height: 100%;
+      & > iframe {
         width: 100%;
         height: 100%;
+        border: none;
+        object-fit: contain;
       }
-      .video {
-        padding: 4% 10%;
+    }
+    .img {
+      width: 100%;
+      height: 100%;
+    }
+    .video {
+      padding: 4% 10%;
+      width: 100%;
+      height: 100%;
+      & > video {
         width: 100%;
         height: 100%;
-        & > video {
-          width: 100%;
-          height: 100%;
-          object-fit: contain;
-        }
+        object-fit: contain;
       }
     }
-    .bottom {
-      width: 100%;
-      height: 100px;
+  }
+  .bottom {
+    width: 100%;
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5%;
+    position: relative;
+
+    .tab {
+      width: 25%;
+      height: 50px;
+      background-image: url('../../../assets/img/A1_home_tab.png');
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      cursor: pointer;
       display: flex;
       justify-content: center;
       align-items: center;
-      gap: 0.5%;
-      position: relative;
-      
-      .tab {
-        width:25%;
-        height: 50px;
-        background-image: url('../../../assets/img/A1_home_tab.png');
-        background-size: contain;
-        background-repeat: no-repeat;
-        background-position: center center;
-        cursor: pointer;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: rgba(112, 73, 7, 1);
-        font-size: 14px;
-        &.active {
-          color: rgba(255, 243, 197, 1);
-          background-image: url('../../../assets/img/A1_home_tab_ac.png');
-        }
+      color: rgba(112, 73, 7, 1);
+      font-size: 14px;
+      &.active {
+        color: rgba(255, 243, 197, 1);
+        background-image: url('../../../assets/img/A1_home_tab_ac.png');
       }
     }
+  }
 
-    .closeBtn {
-      position: absolute;
-      top: 15px;
-      right: 15px;
-      width: 30px;
-      height: 30px;
-      cursor: pointer;
-      & > img {
-        width: 100% ;
-        height: 100% ;
-      }
+  .closeBtn {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+    z-index: 100;
+    & > img {
+      width: 100%;
+      height: 100%;
     }
+  }
 }