Hot/src/views/Home.vue

@@ -302,11 +302,11 @@ export default {
     width: 100%;
     margin: 0 auto;
     height: 100%;
-    padding: 30px 50px 20px 20px;
+    padding: 30px 20px 20px 20px;
     display: flex;
     align-items: center;
     flex-direction: column;
-
+    gap: 20px;
     justify-content: center;
     .myTitle {
       font-size: 22px;
@@ -338,7 +338,7 @@ export default {
       border-radius: 6px;
       overflow: hidden;
       width: 700px;
-      height: calc(100% - 270px);
+      height: calc(100% - 240px);
       margin-top: 40px;
       .oneTabNum {
         z-index: 10;
@@ -394,8 +394,8 @@ export default {
         top: 50%;
         transform: translateY(-50%);
         left: 30px;
-        width: 80px;
-        height: 99px;
+        width: 40px;
+        height: 60px;
         background-image: url("../assets/images/pc/left.png");
         background-size: 100% 100%;
         z-index: 1;
@@ -416,6 +416,7 @@ export default {
     .txtBox {
       height: 0;
       flex: 1;
+      width: 100%;
       .flooTxt {
         margin: 0 auto;
         margin-top: 10px;

Scene/public/css/main.css

@@ -3625,10 +3625,7 @@ ul {
   top: 25%;
 }
 
-.pinTop.right,
-.ui-icon {
-  text-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
-}
+
 
 #quick-logo {
   position: fixed;
@@ -4772,7 +4769,7 @@ a.tag-link {
   .pinBottom.left .ui-icon.wide,
   .ui-icon {
     font-size: 22px;
-    text-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
+    /* text-shadow: 0 0 5px rgba(0, 0, 0, 0.9); */
   }
   .pinBottom.right {
     right: 0;

Scene/public/css/oldVer/main0.css

@@ -78,8 +78,8 @@ iframe {
 }
 .popup-content {
   position: relative;
-  width: 80%;
-  height: 85%;
+  width: 60%;
+  height: 70%;
   overflow: hidden;
 }
 #id1 {
@@ -98,7 +98,7 @@ iframe {
   background-size: 100% 100%;
   position: absolute;
   top: 80px;
-  right: 200px;
+  right: 350px;
 }
 .specialTitle {
   bottom: 65%;
@@ -235,7 +235,7 @@ a {
     width: 30px;
     height: 30px;
     position: absolute;
-    top: 70px;
+    top: 90px;
     right: 25px;
   }
 

Scene/public/index.html

@@ -8,7 +8,7 @@
     <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
-    <title>武汉博物馆-琬琰英华</title>
+    <title>极目楚天 —湖北近代风云</title>
 
     <!-- 大场景相关 -->
     <link rel="stylesheet" href="./css/oldVer/main0.css" />

Scene/public/js/Hot.js

@@ -53,9 +53,9 @@ window.initHot = function (model) {
     var src = ''
     var r = link.substring(link.indexOf('html') + 4),
       o = 'en' == manage.number('lang') ? '&lang=' + manage.number('lang') : ''
-      ; -1 == r.indexOf('?') ? (src = link + '?time=' + randomTime().getTime() + '&id=' + window.number + o) : (src = link + '&time=' + randomTime().getTime() + '&id=' + window.number + o)
+    ;-1 == r.indexOf('?') ? (src = link + '?time=' + randomTime().getTime() + '&id=' + window.number + o) : (src = link + '&time=' + randomTime().getTime() + '&id=' + window.number + o)
 
-    return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'https://houseoss.4dkankan.com/project/WuhanMuseum/hot')
+    return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'https://houseoss.4dkankan.com/project/hubeiMuseum/hbjdfy/hot')
     // return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'http://localhost:8080')
     // return src
   }
@@ -341,7 +341,7 @@ window.initHot = function (model) {
         if (media) {
           this.changeShineTex(media)
         } else {
-          this.styleImg = /* this.styleImg || */[]
+          this.styleImg = /* this.styleImg || */ []
           if (this.info.styleImg) {
             this.styleImg = this.info.styleImg.map(src => {
               return { src: /* manage.dealURL( */ src } //如果要dealURL,在predeal里
@@ -429,7 +429,7 @@ window.initHot = function (model) {
         {
           let action = CloneObject(settings.hotClickEvent.shine)
           if (info.actionType == 'noAction' || info.noAction) {
-            ; (action.examine = false), (action.openHot = false)
+            ;(action.examine = false), (action.openHot = false)
           } else if (info.actionType == 'dontExam') {
             action.examine = false
           }
@@ -1135,29 +1135,29 @@ window.initHot = function (model) {
       var popup = document.getElementById('popup')
 
       if (openHot) {
-        ; (g_currentHot = this), (popup.style.display = 'block'), popup.classList.add('wait')
+        ;(g_currentHot = this), (popup.style.display = 'block'), popup.classList.add('wait')
         var n = document.createElement('iframe')
 
         SoundManager.play('hot')
 
         var src = getLink(this.info.link)
         n.src = src
-          ; (n.id = 'id1'), (n.allowTransparency = 'true')
+        ;(n.id = 'id1'), (n.allowTransparency = 'true')
         var a = document.getElementById('id1')
         if (void 0 === a || null == a) {
           document.querySelector('.popup-content').appendChild(n)
           var s = !1
-            ; (window.loaddingSuccess = function () {
-              s = !0
-            }),
-              setTimeout(function e() {
-                if (s) {
-                  var t = document.querySelector('#id1').contentWindow.document
-                  t.querySelector('video') &&
-                    (t.querySelector('video').play(), !t.querySelector('video').paused && t.querySelector('.playPause') && t.querySelector('.playPause').classList.add('fa-pause')),
-                    t.querySelector('audio') && t.querySelector('audio').play()
-                } else setTimeout(e, 300)
-              }, 800)
+          ;(window.loaddingSuccess = function () {
+            s = !0
+          }),
+            setTimeout(function e() {
+              if (s) {
+                var t = document.querySelector('#id1').contentWindow.document
+                t.querySelector('video') &&
+                  (t.querySelector('video').play(), !t.querySelector('video').paused && t.querySelector('.playPause') && t.querySelector('.playPause').classList.add('fa-pause')),
+                  t.querySelector('audio') && t.querySelector('audio').play()
+              } else setTimeout(e, 300)
+            }, 800)
         }
       }
 
@@ -1203,7 +1203,7 @@ window.initHot = function (model) {
           var f = new THREE.Matrix4().lookAt(c.position, h, new THREE.Vector3(0, 1, 0))
           p.quaternion = new THREE.Quaternion().setFromRotationMatrix(f)
         }
-        ; (p.callback = done), (p.duration = options.duration || 1500), (p.mode = 'panorama'), (p.aimDuration = options.aimDuration)
+        ;(p.callback = done), (p.duration = options.duration || 1500), (p.mode = 'panorama'), (p.aimDuration = options.aimDuration)
         player.flyToNewMode(p)
       }
     }

Scene/public/showa/js/loadCAD.js

@@ -38,7 +38,6 @@ window.grendCAD = (function grendCAD() {
     let style = document.createElement('style')
     style.innerHTML = `
       .cad {
-        cursor: pointer;
         position: absolute;
         right: 20px;
         top: 16px;
@@ -46,10 +45,6 @@ window.grendCAD = (function grendCAD() {
         height: 200px;
         background: rgba(0, 0, 0, .3);
         border-radius: 5px; 
-        background-image: url('./images/map_1.png');
-        path {
-          opacity: 0;
-        }
         g.sign>path {
           opacity: 1;
         }
@@ -80,11 +75,6 @@ window.grendCAD = (function grendCAD() {
             height: 100px;
             background: rgba(0, 0, 0, .3);
             border-radius: 5px;
-            background-image: url('./images/map_1.png');
-            background-size: cover;
-            path {
-              opacity: 0;
-            }
             g.sign>path {
               opacity: 1;
             }
@@ -134,11 +124,11 @@ window.grendCAD = (function grendCAD() {
     loadScript(function () {
       let [$layer, $img] = loadDOM($parent)
 
-      $layer.addEventListener('click', () => {
-        console.log(12)
-        $img.src = './images/map_2.png'
-        $img.style.display = $img.style.display === 'block' ? 'none' : 'block'
-      })
+      // $layer.addEventListener('click', () => {
+      //   console.log(12)
+      //   $img.src = './images/map_2.png'
+      //   $img.style.display = $img.style.display === 'block' ? 'none' : 'block'
+      // })
 
       $layer.style.visibility = 'hidden'
       window.cad = structureCAD({

Scene/src/pages/A0base/index.tsx

@@ -1,18 +1,13 @@
 import React, { useState } from 'react'
 import isMobile from '../../utils/isMobile'
-import A5Mobile from '../A5Mobile'
-import A4base from '../A4base'
+import A1home from '../A1home'
 import styles from './index.module.scss'
 function A0base() {
   const [show, setShow] = useState(true)
   return (
     <>
       {/* 初始封面 */}
-      {isMobile() ? (
-        <A5Mobile show={show} setShow={setShow} />
-      ) : (
-        <A4base show={show} setShow={setShow} />
-      )}
+      <A1home />
     </>
   )
 }

Scene/src/pages/A2main/index.module.scss

@@ -12,23 +12,51 @@
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
-      top: 45px;
+      top: 38px;
       width: 80px;
       height: 37px;
       line-height: 30px;
       text-align: center;
       font-size: 14px;
-      color: #fff;
+      color: #242764;
     }
 
     // 样式重置
     .pinBottom.left {
-      width: fit-content;
-      background-color: transparent;
-      left: 20px;
+      width: 960px;
+      margin-right: 350px;
+      height: 95px;
+      left: 50%;
+      transform: translateX(-50%);
+      background-size: contain;
+      background: url('../../assets/img/toolBar_bg.png');
+      background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      padding-bottom: 20px;
+      justify-content: center;
+
+      .logo {
+        position: relative;
+        bottom: -10px;
+        left: 20px;
+        height: 60px;
+        & img {
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+
+      .splitImg {
+        height: 100%;
+        object-fit: contain;
+        margin: 20px 0px 0px 36px;
+      }
     }
 
     #gui-modes-map {
+      margin-left: 30px;
+      background: #d5cfca;
       #play,
       #pause,
       #next,
@@ -37,14 +65,16 @@
       #gui-modes-inside,
       #gui-modes-dollhouse,
       #gui-modes-floorplan {
-        width: var(--pcIconWidth);
-        height: var(--pcIconWidth);
-        margin-left: 38px;
+        width: 45px;
+        height: 45px;
+        margin-left: 30px;
+
         background-color: transparent !important;
         position: relative;
+
         img {
-          width: 48px;
-          height: 48px;
+          width: 45px;
+          height: 45px;
         }
       }
 
@@ -59,15 +89,17 @@
       display: flex;
       justify-content: flex-end;
       align-items: center;
-      gap: 38px;
+      background: #d5cfca;
+      gap: 30px;
       .likeBox,
+      .A2_map_box,
       #volume,
       #gui-fullscreen,
       #gui-fullscreen-exit,
       .A2_share_box,
       .A2_view_box {
-        width: 48px;
-        height: 48px;
+        width: 45px;
+        height: 45px;
         margin: 0;
         background-color: transparent !important;
         position: relative;
@@ -75,12 +107,16 @@
           width: 100%;
           height: 100%;
         }
+        .hasHover {
+          width: 45px;
+          height: 45px;
+        }
       }
     }
 
     // 底部的位置
     .pinBottom {
-      bottom: 34px;
+      bottom: 26px;
     }
     .pinBottom.playing {
       bottom: 50px !important;
@@ -103,7 +139,10 @@
     }
 
     // 点赞
-    .likeBox {
+    .likeBox,
+    .A2_map_box,
+    .A2_share_box,
+    .A2_view_box {
       float: left;
       cursor: pointer;
 
@@ -117,7 +156,7 @@
         z-index: 100;
         left: -18px;
         bottom: 0;
-        text-shadow: 1px 1px 1px #fcda99;
+        // text-shadow: 1px 1px 1px #fcda99;
         opacity: 0;
         pointer-events: none;
       }
@@ -197,20 +236,149 @@
       }
     }
 
+    .sectionIndex {
+      position: fixed;
+      bottom: 40px;
+      right: 30px;
+      .sectionIndexImg {
+        width: 90px;
+        height: 100%;
+        object-fit: cover;
+        cursor: pointer;
+      }
+    }
+    .section {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 30000;
+      .arrL {
+        position: absolute;
+        left: 2%;
+        cursor: pointer;
+      }
+      .arrR {
+        position: absolute;
+        right: 2%;
+        cursor: pointer;
+      }
+      .sectionBox {
+        padding: 0 20px;
+        width: fit-content;
+        overflow: auto;
+        height: 85%;
+        width: 100%;
+        display: flex;
+        flex-wrap: nowrap;
+        scroll-behavior: smooth;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 20px;
+        ::-webkit-scrollbar {
+          display: none; /* Chrome, Safari, Edge */
+        }
+        -ms-overflow-style: none; /* IE and Edge */
+        scrollbar-width: none; /* Firefox */
+
+        & > div {
+          flex: 0 0 auto;
+          width: 16%;
+          height: 75%;
+          align-self: end;
+          background-size: contain;
+          cursor: pointer;
+          p {
+            margin-top: 325px;
+            padding: 38px;
+            font-size: 13px;
+            line-height: 21px;
+            text-indent: 2em;
+            color: #d5cdc8;
+            letter-spacing: 1px;
+          }
+        }
+        .section1 {
+          width: 17%;
+          height: 95%;
+          background: url(../../assets/img/section1.png) no-repeat;
+          background-size: 100% 100%;
+          & > p {
+            margin-top: 435px;
+          }
+        }
+        .section2 {
+          background: url(../../assets/img/section1.1.png) no-repeat;
+          background-size: 100% 100%;
+        }
+        .section3 {
+          background: url(../../assets/img/section1.2.png) no-repeat;
+          background-size: 100% 100%;
+        }
+        .section4 {
+          background: url(../../assets/img/section1.3.png) no-repeat;
+          background-size: 100% 100%;
+        }
+        .section5 {
+          width: 17%;
+          height: 95%;
+          background: url(../../assets/img/section2.png) no-repeat;
+          background-size: 100% 100%;
+          & > p {
+            margin-top: 445px;
+          }
+        }
+        .section6 {
+          background: url(../../assets/img/section2.1.png) no-repeat;
+          background-size: 100% 100%;
+        }
+        .section7 {
+          background: url(../../assets/img/section2.2.png) no-repeat;
+          background-size: 100% 100%;
+        }
+        .section8 {
+          background: url(../../assets/img/section2.3.png) no-repeat;
+          background-size: 100% 100%;
+        }
+        .section9 {
+          background: url(../../assets/img/section2.4.png) no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+      .sectionClose {
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        cursor: pointer;
+      }
+    }
+
     // 移动端
 
     @media screen and (max-width: 1000px) {
       .hoveImg {
         height: 20px;
-        top: 30px;
+        top: 24px;
         font-size: 10px;
+        color: #242764;
+        // text-shadow: 0 0 5px rgba(253, 251, 178, 0.8), 0 0 10px rgba(253, 251, 178, 0.6);
       }
       #gui-modes-map {
+        border-radius: 25px;
         display: flex;
         justify-content: flex-end;
         align-items: center;
         flex-direction: column;
         gap: 30px;
+        margin-left: 10px;
+        padding: 30px 0px;
+        width: 45px;
         #play,
         #pause,
         #next,
@@ -220,8 +388,8 @@
         #gui-modes-dollhouse,
         #gui-modes-floorplan {
           margin: 0;
-          width: 35px;
-          height: 35px;
+          width: 30px;
+          height: 30px;
           background-color: transparent !important;
           position: relative;
           img {
@@ -232,38 +400,56 @@
       }
 
       .pinBottom {
+        width: 100% !important;
+        align-items: flex-end !important;
+        justify-content: space-between !important;
+        background: transparent !important;
         right: 20px;
+        padding: 0 !important;
+        .logo {
+          display: none;
+        }
+        .splitImg {
+          display: none;
+        }
       }
 
       .rightViewContainer {
+        border-radius: 25px;
+        margin-right: 10px;
+        width: 45px;
         display: flex;
         justify-content: flex-end;
         flex-direction: column;
         align-items: center;
         gap: 30px;
-        margin-bottom: -30px;
         .likeBox,
+        .A2_map_box,
         #volume,
         #gui-fullscreen,
         #gui-fullscreen-exit,
         .A2_share_box,
         .A2_view_box {
-          width: 35px;
-          height: 35px;
+          width: 30px;
+          height: 30px;
           margin: 0;
           background-color: transparent !important;
           position: relative;
-          a {
-            width: 35px;
-            height: 35px;
+          .hasHover {
+            width: 30px;
+            height: 30px;
             img {
-              width: 35px;
-              height: 35px;
+              width: 30px;
+              height: 30px;
             }
           }
         }
       }
 
+      .sectionIndex {
+        display: none;
+      }
+
       .darkGlass {
         background-color: rgba(0, 0, 0, 0.5);
       }

Scene/src/pages/A2main/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState, useRef } from 'react'
 import styles from './index.module.scss'
 import A21vrOff from './components/A21vrOff'
 import A22hotListWrap from './components/A22hotListWrap'
@@ -10,11 +10,12 @@ import classNames from 'classnames'
 import A3hotList from '../A3hotList'
 import { message } from 'antd'
 import http from '@/utils/http'
+// import isMobile from '@/utils/isMobile'
 const imgArrTemp = ['like.png', 'likeAc.png']
 const imgArr = imgArrTemp.map(item => require(`@/assets/img/${item}`))
 
 function A2main() {
-  const SCENE_CODE = 'SG-56imSLC7Zli'
+  const SCENE_CODE = 'SG-NhzxmM4kcLn-05'
   // 漫游的状态
   const { state3d } = useSelector((state: RootState) => state.three)
 
@@ -22,6 +23,7 @@ function A2main() {
   const [like, setLike] = useState(false)
   const [likeNum, setLikeNum] = useState(1)
   const [viewNum, setViewNum] = useState(1)
+  const [isShowSection, setIsShowSection] = useState(false)
 
   useEffect(() => {
     http.get(`https://count.4dage.com/api/count/detail/${SCENE_CODE}`).then(res => {
@@ -69,6 +71,29 @@ function A2main() {
       message.success('链接已复制到剪贴板')
     }
   }
+  const sectionBoxRef = useRef<HTMLDivElement>(null)
+  const [isActive, setIsActive] = useState(true)
+  // 滚动到最左
+  const scrollToLeft = () => {
+    if (sectionBoxRef.current) {
+      sectionBoxRef.current.scrollTo({
+        left: 0,
+        behavior: 'smooth'
+      });
+      setIsActive(true)
+    }
+  };
+
+  // 滚动到最右 
+  const scrollToRight = () => {
+    if (sectionBoxRef.current) {
+      sectionBoxRef.current.scrollTo({
+        left: sectionBoxRef.current.scrollWidth,
+        behavior: 'smooth'
+      });
+      setIsActive(false)
+    }
+  };
 
   const hiddenMap = (isShow: boolean) => {
     const cad: any = document.querySelector('.cad')
@@ -77,6 +102,14 @@ function A2main() {
     }
   }
 
+  useEffect(() => {
+    const sections = document.querySelectorAll('.section1, .section2, .section3, .section4, .section5 , .section6, .section7, .section8, .section9')
+    sections.forEach((section, index) => {
+      section.setAttribute('data-index', index.toString())
+      console.log(section)
+    })
+  }, [])
+
   return (
     <div className={styles.A2main} id='gui' style={{ display: 'none' }}>
       <A21vrOff />
@@ -93,80 +126,72 @@ function A2main() {
         </div>
 
         <div className='pinBottom left'>
-          <div className='viewContainer'>
-            <div id='previous' className='previous desktop-only ui-icon' style={{ display: 'none' }}>
+          <div id='gui-modes-map' className='ui-icon double active'>
+            <div id='play' className='ui-icon' rel='tooltip' data-original-title='播放'>
+              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+              <a style={{ width: '100%', height: '100%' }}>
+                <img src='images/play.png' alt='' />
+              </a>
+              {/* 鼠标移入 */}
+              <div className='hoveImg'>开始漫游</div>
+            </div>
+            <div id='pause' className='ui-icon' rel='tooltip' style={{ display: 'none' }}>
+              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+              <a style={{ width: '100%', height: '100%' }}>
+                <img rel='tooltip' src='images/pause.png' alt='' />
+              </a>
+              {/* 鼠标移入 */}
+              <div className='hoveImg'>暂停漫游</div>
+            </div>
+            <div id='next' className='next desktop-only ui-icon wide' style={{ display: 'none' }}>
               {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
               <a>
-                <img rel='tooltip' src='images/play.png' width='24' height='24' data-original-title='播放' alt='' />
+                <i rel='tooltip' title='' className='icon icon-dpad-right' data-original-title='下一个'></i>
               </a>
             </div>
+            <div data-original-title='导览' id='pullTab' rel='tooltip' title=''>
+              <img className='icon icon-inside' src='images/auto.png' alt='' />
+              {/* 鼠标移入 */}
+              <div className='hoveImg'>导览列表</div>
+            </div>
 
-            <div id='gui-modes-map' className='ui-icon double active'>
-              <div id='play' className='ui-icon' rel='tooltip' data-original-title='播放'>
-                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                <a style={{ width: '100%', height: '100%' }}>
-                  <img src='images/play.png' alt='' />
-                </a>
-                {/* 鼠标移入 */}
-                <div className='hoveImg'>开始漫游</div>
-              </div>
-              <div id='pause' className='ui-icon' rel='tooltip' style={{ display: 'none' }}>
-                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                <a style={{ width: '100%', height: '100%' }}>
-                  <img rel='tooltip' src='images/pause.png' alt='' />
-                </a>
-                {/* 鼠标移入 */}
-                <div className='hoveImg'>暂停漫游</div>
-              </div>
-              <div id='next' className='next desktop-only ui-icon wide' style={{ display: 'none' }}>
-                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                <a>
-                  <i rel='tooltip' title='' className='icon icon-dpad-right' data-original-title='下一个'></i>
-                </a>
-              </div>
-              <div data-original-title='导览' id='pullTab' rel='tooltip' title=''>
-                <img className='icon icon-inside' src='images/auto.png' alt='' />
-                {/* 鼠标移入 */}
-                <div className='hoveImg'>导览列表</div>
-              </div>
-
-              {/* 原始热点列表---隐藏 */}
-              <div data-original-title='热点列表' id='hotList' rel='tooltip' style={{ display: 'none' }}>
-                <img className='icon icon-inside' src='images/hotlist.png' title='热点列表' alt='' />
-              </div>
+            {/* 原始热点列表---隐藏 */}
+            <div data-original-title='热点列表' id='hotList' rel='tooltip' style={{ display: 'none' }}>
+              <img className='icon icon-inside' src='images/hotlist.png' title='热点列表' alt='' />
+            </div>
 
-              {/* 新的热点列表 */}
-              <div
-                className='A2hotIcon'
-                rel='tooltip'
-                onClick={() => {
-                  // 停止自动导览
-                  window.player.director.stopTour()
-                  setHotListShow(true)
-                  hiddenMap(true)
-                }}
-              >
-                <img src='images/hotlist.png' alt='' />
-                {/* 鼠标移入 */}
-                <div className='hoveImg'>热点列表</div>
-              </div>
+            {/* 新的热点列表 */}
+            <div
+              className='A2hotIcon'
+              rel='tooltip'
+              onClick={() => {
+                // 停止自动导览
+                window.player.director.stopTour()
+                setHotListShow(true)
+                hiddenMap(true)
+              }}
+            >
+              <img src='images/hotlist.png' alt='' />
+              {/* 鼠标移入 */}
+              <div className='hoveImg'>热点列表</div>
+            </div>
 
-              <div data-original-title='全景漫游' id='gui-modes-inside' rel='tooltip'>
-                <img className='icon icon-inside' src={`images/inside${state3d === 'panorama' ? '_active' : ''}.png`} alt='' />
-                {/* 鼠标移入 */}
-                <div className='hoveImg'>全景漫游</div>
-              </div>
-              <div data-original-title='迷你模型' id='gui-modes-dollhouse' rel='tooltip'>
-                <img className='icon icon-inside' src={`images/dollhouse${state3d === 'dollhouse' ? '_active' : ''}.png`} alt='' />
-                {/* 鼠标移入 */}
-                <div className='hoveImg'>迷你模型</div>
-              </div>
-              <div data-original-title='俯视图' id='gui-modes-floorplan' rel='tooltip'>
-                <img className='icon icon-inside' src={`images/floor${state3d === 'floorplan' ? '_active' : ''}.png`} alt='' />
-                {/* 鼠标移入 */}
-                <div className='hoveImg'>顶部视图</div>
-              </div>
-              {/* <div
+            <div data-original-title='全景漫游' id='gui-modes-inside' rel='tooltip'>
+              <img className='icon icon-inside' src={`images/inside${state3d === 'panorama' ? '_active' : ''}.png`} alt='' />
+              {/* 鼠标移入 */}
+              <div className='hoveImg'>全景漫游</div>
+            </div>
+            <div data-original-title='迷你模型' id='gui-modes-dollhouse' rel='tooltip'>
+              <img className='icon icon-inside' src={`images/dollhouse${state3d === 'dollhouse' ? '_active' : ''}.png`} alt='' />
+              {/* 鼠标移入 */}
+              <div className='hoveImg'>迷你模型</div>
+            </div>
+            <div data-original-title='俯视图' id='gui-modes-floorplan' rel='tooltip'>
+              <img className='icon icon-inside' src={`images/floor${state3d === 'floorplan' ? '_active' : ''}.png`} alt='' />
+              {/* 鼠标移入 */}
+              <div className='hoveImg'>顶部视图</div>
+            </div>
+            {/* <div
                 data-original-title='VR'
                 id='vr'
                 rel='tooltip'
@@ -175,7 +200,7 @@ function A2main() {
               >
                 <img className='icon icon-inside' src='images/VR.png' title='VR' alt='' />
               </div> */}
-              {/* <div
+            {/* <div
                 data-original-title='消除外壳'
                 id='gui-remove-face'
                 rel='tooltip'
@@ -184,10 +209,9 @@ function A2main() {
               >
                 <img className='icon icon-inside' src='images/face.jpg' alt='' />
               </div> */}
-            </div>
           </div>
-        </div>
-        <div className='pinBottom right hideTarget'>
+
+          <img className='splitImg' src={require('../../assets/img/splitImg.png')} alt='' draggable='false' />
           <div className='rightViewContainer clearfix'>
             <div className='gui-floor'>
               <div className='gui-floor-title'></div>
@@ -201,14 +225,28 @@ function A2main() {
               <a>
                 <img src='images/Volume btn_on.png' alt='' />
               </a>
-              {/* 鼠标移入 */}
               <div className='hoveImg'>音乐开关</div>
             </div>
 
+            {/* 地图 */}
+            {/* <div
+              className='A2_map_box'
+              style={!isMobile() ? { display: 'none' } : {}}
+              onClick={() => {
+                if (!cad?.style.visibility) {
+                  hiddenMap(true)
+                }
+                const isShow = cad?.style.visibility === 'hidden'
+                hiddenMap(!isShow)
+              }}
+            >
+              <img src={require('@/assets/img/map.png')} alt='' />
+              <div className='hoveImg'>地图</div>
+            </div> */}
+
             {/* 点赞 */}
             <div className='likeBox' onClick={likeFu}>
               <img src={like ? imgArr[1] : imgArr[0]} alt='' />
-              {/* 鼠标移入 */}
               <div className='hoveImg'>点赞{likeNum}</div>
               <div className={classNames('likeMove', like ? 'likeMoveAc' : '')}>+1</div>
             </div>
@@ -260,6 +298,78 @@ function A2main() {
         </div>
       </div>
 
+      <div
+        className='sectionIndex'
+        onClick={() => {
+          setIsShowSection(true)
+          hiddenMap(true)
+        }}
+      >
+        <img className='sectionIndexImg' src={require('../../assets/img/section.png')} alt='' draggable='false' />
+      </div>
+
+      <div
+        className='section'
+        style={{
+          pointerEvents: isShowSection ? 'auto' : 'none',
+          opacity: isShowSection ? '1' : '0'
+        }}
+      >
+        <div className="arrL" style={{ opacity: isActive ? '0.1' : '1', cursor: isActive ? 'not-allowed' : 'pointer' }} onClick={scrollToLeft}><img src={require('../../assets/img/preP.png')} alt="" /></div>
+        <div className="arrR" style={{ opacity: isActive ? '1' : '0.1', cursor: isActive ? 'pointer' : 'not-allowed' }} onClick={scrollToRight}><img src={require('../../assets/img/nextP.png')} alt="" /></div>
+        <div className='sectionBox' ref={sectionBoxRef} onClick={() => setIsShowSection(false)}>
+          <div className='section1 sectionCont'>
+            <p>
+              鸦片战争前后，地处腹地的湖北，鸦片烟毒肆虐泛滥，农民起义风起云涌。第二次鸦片战争后，汉口成为对外通商口岸，西方列强蜂拥而至，对湖北进行经济掠夺和文化渗透。湖北开始从一个内陆封闭省份，沦为半殖民地、半封建的开放区域。湖北社会由此置身于数千年未有之大变局中。
+            </p>
+          </div>
+          <div className='section2 sectionCont'>
+            <p>
+              鸦片战争前后，湖北社会仍在传统的轨道上运行。1838年，湖广总督林则徐在武汉禁烟，拉开近代中国人民禁烟斗争的序幕。随后钟人杰起义震动鄂南，太平天国运动席卷荆楚。晚清日益激化的民族矛盾、阶级矛盾在湖北反映强烈。</p>
+          </div>
+          <div className='section3 sectionCont'>
+            <p>
+              英国通过不平等的《中英天津条约》，使深处内陆的汉口成为对外通商口岸。汉口开埠后，列强纷至沓来，划定租界，派驻领事，控制海关，汉口特别是租界区成为列强进行经济侵略和文化渗透的重要据点。 </p>
+          </div>
+          <div className='section4 sectionCont'>
+            <p>
+              汉口开埠后，外国商人利用不平等条约赋予的特权，在湖北先后开办上百家商行、银行和加工、运输企业，获取巨额经济利益。教会势力深入城乡，除传教布道外，通过办学校、建医院、设育婴堂等，扩大影响。列强势力的扩张，对湖北社会、经济、文化等带来重大冲击和影响。
+            </p>
+          </div>
+          <div className='section5 sectionCont'>
+            <p>
+              光绪年间，张之洞任湖广总督长达18年，任内推行洋务新政，锐意建设改革，使湖北一跃成为洋务运动后期的中心，不仅为湖北近代实业、教育、军政等打下基础，而且对湖北近代社会乃至晚清政局产生重要影响。
+            </p>
+          </div>
+          <div className='section6 sectionCont'>
+            <p>
+              1889年8月，张之洞由两广总督调补湖广总督12月正式到鄂履职，直至1907年8月奉旨进京。督鄂期间，他致力于办实业、兴学堂、倡游学、练新军等，极大推动了湖北特别是武汉地区的近代化进程。  </p>
+          </div>
+          <div className='section7 sectionCont'>
+            <p>
+              张之洞在湖北推行洋务新政，以兴办实业倾注心力最多，初步建成湖北重工业、轻工业体系，奠定了近代民族工业的基础。这一时期，京汉铁路建成通车，粤汉铁路相继动工，湖北铁路交通格局基本形成。城市基础建设加强，民营工业成批涌现，湖北实业兴旺，一时为全国瞩目。 </p>
+          </div>
+          <div className='section8 sectionCont'>
+            <p>
+              随着洋务新政的推行，张之洞深感人才的不足一方面对旧式书院进行改革，另一方面设立各级各类新式学堂，在湖北建立起较为完备的近代教育体系。同时延揽名师，大量派遣游学生，为湖北乃至全国造就了大批新式人才。    </p>
+          </div>
+          <div className='section9 sectionCont'>
+            <p>
+              随着洋务新政的推行，张之洞深感人才的不足一方面对旧式书院进行改革，另一方面设立各级各类新式学堂，在湖北建立起较为完备的近代教育体系。同时延揽名师，大量派遣游学生，为湖北乃至全国造就了大批新式人才。 </p>
+          </div>
+        </div>
+        <div
+          className='sectionClose'
+          onClick={() => {
+            setIsShowSection(false)
+            setIsActive(true)
+            hiddenMap(false)
+          }}
+        >
+          <img src={require('../../assets/img/close.png')} alt='' />
+        </div>
+      </div>
+
       {/* 底部导览列表 */}
       <A24drawerList />
 

Scene/src/pages/A3hotList/index.module.scss

@@ -3,7 +3,7 @@
   top: 50%;
   right: 0;
   transform: translate(0, -50%);
-  width: 250px;
+  width: 400px;
   height: 100%;
   z-index: 30001;
   display: flex;
@@ -16,15 +16,16 @@
       align-items: center;
       justify-content: flex-start;
       gap: 10px;
-      width: 250px;
+      width: 100%;
       height: 100%;
-      background: url('../../assets/img/hotlist_bg.png') center center;
-      background-size: cover;
-      color: rgba(43, 31, 23, 0.9);
+      // background: url('../../assets/img/hotlist_bg.png') center center;
+      // background-size: cover;
+      background-color: #d1ccc6;
+      color: #242764;
       font-size: 17px;
       font-weight: 500;
       overflow: auto;
-      padding-bottom: 40px;
+      padding-bottom: 50px;
       // 隐藏滚动条
       &::-webkit-scrollbar {
         display: none;
@@ -33,7 +34,7 @@
         padding: 40px 0 10px 0;
         font-size: 24px;
         font-weight: 400;
-        color: rgba(43, 31, 23, 0.9);
+        color: #2d2d45;
       }
       .A3item {
         display: flex;
@@ -44,15 +45,15 @@
         padding: 4px 3px;
         cursor: pointer;
         &:hover {
-          background-color: rgb(182, 154, 117);
+          background-color: #807b98;
         }
       }
       .A3close {
         position: fixed;
         bottom: 0;
-        width: 250px;
-        height: 40px;
-        background-color: rgba(157, 135, 106, 0.9);
+        width: 350px;
+        height: 50px;
+        background-color: #d1ccc6;
         border-top: 1px solid rgba(43, 31, 23, 0.1);
         cursor: pointer;
         &:hover {
@@ -63,8 +64,8 @@
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
-          width: 24px;
-          height: 24px;
+          width: 50px;
+          height: 50px;
           opacity: 0.6;
         }
       }
@@ -84,28 +85,24 @@
       .A3main {
         width: 100%;
         height: 100%;
-        background: url('../../assets/img/hotlist_bg.png') no-repeat center center;
-        background-size: cover;
+        // background: url('../../assets/img/hotlist_bg.png') no-repeat center center;
+        // background-size: cover;
         padding-bottom: 36px;
         .A3title {
           padding: 20px 0 10px 0;
           font-size: 16px;
         }
         .A3item {
-          font-size: 14px;
+          font-size: 13px;
           padding: 10px 3px;
-          &:touch {
-            background-color: rgba(163, 143, 116, 1);
-          }
         }
         .A3close {
           width: 100%;
           height: 40px;
-          background-color: rgba(157, 135, 106, 0.9);
           border-top: 1px solid rgba(43, 31, 23, 0.1);
           img {
-            width: 16px;
-            height: 16px;
+            width: 25px;
+            height: 25px;
           }
         }
       }

Scene/src/pages/A4base/index.module.scss

@@ -1,72 +0,0 @@
-.A4base {
-  position: relative;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 99999;
-  width: 100%;
-  height: 100%;
-  transition: all 0.5s;
-  background: url('./image/bg.png') repeat center center;
-  // background-size: 100% 100%;
-  > div {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    img {
-      object-fit: contain;
-      width: 100%;
-      height: 100%;
-    }
-  }
-  :global {
-    .A4base-title3 {
-      transform: translate(-50%, -420px);
-      width: 1728px;
-      height: 50px;
-    }
-    .A4base-logo {
-      transform: translate(-865px, -350px);
-      width: 100px;
-      height: 150px;
-    }
-    .A4base-content {
-      width: 1150px;
-      height: 500px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      transform: translate(-50%, -280px);
-      .A4base-title2 {
-        width: 68%;
-        height: 100%;
-      }
-      .A4base-title1 {
-        width: 100%;
-        height: 100%;
-      }
-      .A4base-other {
-        width: 78%;
-        height: 100%;
-      }
-    }
-
-    .A4base-pic1 {
-      transform: translate(650px, -70px);
-      width: 202px;
-      height: 316px;
-    }
-    .A4base-pic2 {
-      transform: translate(-50%, 50%);
-      width: 1920px;
-      height: 325px;
-    }
-    .A4base-button {
-      transform: translate(-50%, 345px);
-      width: 164px;
-      height: 41px;
-      cursor: pointer;
-    }
-  }
-}

Scene/src/pages/A4base/index.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import styles from './index.module.scss'
-import { useHistory } from 'react-router-dom'
-function A4base({ show, setShow }: { show: boolean; setShow: (show: boolean) => void }) {
-  const history = useHistory()
-  return (
-    <div className={styles.A4base} style={{ display: show ? 'block' : 'none' }}>
-      <div className='A4base-content'>
-        <div className='A4base-title1'>
-          <img src={require('./image/title.png')} alt='' />
-        </div>
-      </div>
-      <div
-        className='A4base-button'
-        onClick={() => {
-          setShow(false)
-          history.push('/home?m=SG-56imSLC7Zli')
-          window.location.reload()
-        }}
-      >
-        <img src={require('./image/button.png')} alt='' />
-      </div>
-    </div>
-  )
-}
-
-const MemoA4base = React.memo(A4base)
-
-export default MemoA4base

Scene/src/pages/A5Mobile/index.module.scss

@@ -1,33 +0,0 @@
-.A5Mobile {
-  position: relative;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 99999;
-  width: 100%;
-  height: 100%;
-  transition: all 0.5s;
-  background: url('./image/bg.png') no-repeat center center;
-  background-size: 100% 100%;
-  > div {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    img {
-      object-fit: contain;
-      width: 100%;
-      height: 100%;
-    }
-  }
-  :global {
-    .title {
-      transform: translate(-50%, -61%);
-      width: 200px;
-    }
-    .button {
-      cursor: pointer;
-      transform: translate(-50%, 229px);
-      width: 110px;
-    }
-  }
-}

Scene/src/pages/A5Mobile/index.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import styles from './index.module.scss'
-import { useHistory } from 'react-router-dom'
-function A5Mobile({ show, setShow }: { show: boolean; setShow: (show: boolean) => void }) {
-  const history = useHistory()
-  return (
-    <div className={styles.A5Mobile} style={{ display: show ? 'block' : 'none' }}>
-      <div className='title'>
-        <img src={require('./image/title.png')} alt='' />
-      </div>
-      <div
-        className='button'
-        onClick={() => {
-          setShow(false)
-          history.push('/home?m=SG-56imSLC7Zli')
-          window.location.reload()
-        }}
-      >
-        <img src={require('./image/button.png')} alt='' />
-      </div>
-    </div>
-  )
-}
-
-const MemoA5Mobile = React.memo(A5Mobile)
-
-export default MemoA5Mobile