feat：大场景开发

public/css/main.css

@@ -4462,11 +4462,6 @@ a.tag-link {
   bottom: 135px;
 }
 
-#gui #drawer.playing,
-#gui .pinBottom.playing {
-  bottom: 20px;
-}
-
 #thumb-container .thumbImg {
   cursor: pointer;
 }

public/css/oldVer/main0.css

@@ -187,10 +187,11 @@ a {
 
 @media screen and (max-width: 1200px) {
   #closepop {
-    width: 40px;
-    height: 40px;
-    top: 20px;
-    right: 20px;
+    width: 45px;
+    height: 45px;
+    top: 50%;
+    right: 50%;
+    transform: translate(50%, 156px);
   }
   .specialTitle {
     bottom: 66%;
@@ -220,10 +221,11 @@ a {
 }
 @media screen and (max-width: 667px) {
   #closepop {
-    width: 20px;
-    height: 20px;
-    top: 105px;
-    right: 30px;
+    width: 45px;
+    height: 45px;
+    top: 50%;
+    right: 50%;
+    transform: translate(50%, 176px);
   }
 
   #title-toggle {

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" />

public/js/Hot.js

@@ -57,10 +57,11 @@ window.initHot = function (model) {
       ? (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/HainanMuseum/hot'
-    )
+    // return src.replace(
+    //   'https://www.4dmodel.com/SuperTwo/hot_online1',
+    //   'https://houseoss.4dkankan.com/project/HainanMuseum/hot'
+    // )
+    return src.replace('https://www.4dmodel.com/SuperTwo/hot_online1', 'http://localhost:8080')
     // return src
   }
   var removeSrcPostMark = function (url) {

src/pages/A2main/index.module.scss

@@ -18,7 +18,6 @@
       line-height: 30px;
       text-align: center;
       font-size: 14px;
-      font-family: 'fzFont';
       color: #fff;
     }
 
@@ -176,23 +175,23 @@
     .scrollbar {
       background-color: transparent;
       .handle {
-        background-color: blue;
+        background-color: rgb(253, 251, 178);
         height: 6px;
       }
     }
 
     // 进度条
     #playHead {
-      background-color: red;
+      background-color: rgba(0, 0, 0, 0.5);
       #progressBar {
         .step {
           &::before {
-            background-color: #fff;
+            background-color: rgb(195, 164, 125);
           }
         }
         .active {
           &::before {
-            background-color: blue;
+            background-color: rgb(253, 251, 178);
           }
         }
       }
@@ -211,7 +210,7 @@
         justify-content: flex-end;
         align-items: center;
         flex-direction: column;
-        gap: 20px;
+        gap: 30px;
         #play,
         #pause,
         #next,
@@ -241,8 +240,8 @@
         justify-content: flex-end;
         flex-direction: column;
         align-items: center;
-        gap: 20px;
-        margin-bottom: -20px;
+        gap: 30px;
+        margin-bottom: -30px;
         .likeBox,
         #volume,
         #gui-fullscreen,

src/pages/A2main/index.tsx

@@ -14,7 +14,7 @@ const imgArrTemp = ['like.png', 'likeAc.png']
 const imgArr = imgArrTemp.map(item => require(`@/assets/img/${item}`))
 
 function A2main() {
-  const sceneCode = 'mm-1562'
+  const SCENE_CODE = 'SG-zeRFYMaTE9F'
   // 漫游的状态
   const { state3d } = useSelector((state: RootState) => state.three)
 
@@ -24,10 +24,10 @@ function A2main() {
   const [viewNum, setViewNum] = useState(1)
 
   useEffect(() => {
-    http.get(`https://count.4dage.com/api/count/detail/${sceneCode}`).then(res => {
+    http.get(`https://count.4dage.com/api/count/detail/${SCENE_CODE}`).then(res => {
       setLikeNum(res.data.starSum!)
     })
-    http.get(`https://count.4dage.com/api/count/saveVisit/${sceneCode}`).then(res => {
+    http.get(`https://count.4dage.com/api/count/saveVisit/${SCENE_CODE}`).then(res => {
       setViewNum(res.data.visitSum!)
     })
   }, [])
@@ -37,7 +37,7 @@ function A2main() {
     if (like) return
     setLike(true)
     setTimeout(() => {
-      http.get(`https://count.4dage.com/api/count/saveStar/${sceneCode}`).then(res => {
+      http.get(`https://count.4dage.com/api/count/saveStar/${SCENE_CODE}`).then(res => {
         setLikeNum(likeNum + 1)
         setLike(false)
       })
@@ -70,6 +70,13 @@ function A2main() {
     }
   }
 
+  const hiddenMap = (isShow: boolean) => {
+    const cad: any = document.querySelector('.cad')
+    if (cad) {
+      cad.style.visibility = isShow ? 'hidden' : 'visible'
+    }
+  }
+
   return (
     <div className={styles.A2main} id='gui' style={{ display: 'none' }}>
       <A21vrOff />
@@ -167,6 +174,7 @@ function A2main() {
                   // 停止自动导览
                   window.player.director.stopTour()
                   setHotListShow(true)
+                  hiddenMap(true)
                 }}
               >
                 <img src='images/hotlist.png' alt='' />
@@ -190,7 +198,7 @@ function A2main() {
                   alt=''
                 />
                 {/* 鼠标移入 */}
-                <div className='hoveImg'>全景模型</div>
+                <div className='hoveImg'>迷你模型</div>
               </div>
               <div data-original-title='俯视图' id='gui-modes-floorplan' rel='tooltip'>
                 <img
@@ -308,7 +316,10 @@ function A2main() {
       <A3hotList
         show={hotListShow}
         setShow={setHotListShow}
-        closeFu={() => setHotListShow(false)}
+        closeFu={() => {
+          setHotListShow(false)
+          hiddenMap(false)
+        }}
       />
     </div>
   )

src/pages/A3hotList/index.module.scss

@@ -19,11 +19,10 @@
       width: 250px;
       height: 100%;
       background: url('../../assets/img/hotlist_bg.png') center center;
-      background-size: 100% 100%;
+      background-size: cover;
       color: rgba(43, 31, 23, 0.9);
       font-size: 17px;
       font-weight: 500;
-      font-family: 'fzFont';
       overflow: auto;
       padding-bottom: 40px;
       // 隐藏滚动条
@@ -31,7 +30,7 @@
         display: none;
       }
       .A3title {
-        padding: 40px 0 30px 0;
+        padding: 40px 0 10px 0;
         font-size: 24px;
         font-weight: 400;
         color: rgba(43, 31, 23, 0.9);
@@ -45,7 +44,7 @@
         padding: 4px 3px;
         cursor: pointer;
         &:hover {
-          background-color: rgba(163, 124, 79, 1);
+          background-color: rgb(182, 154, 117);
         }
       }
       .A3close {
@@ -53,7 +52,7 @@
         bottom: 0;
         width: 250px;
         height: 40px;
-        background-color: rgba(148, 113, 76, 0.9);
+        background-color: rgba(157, 135, 106, 0.9);
         border-top: 1px solid rgba(43, 31, 23, 0.1);
         cursor: pointer;
         &:hover {
@@ -79,11 +78,14 @@
     height: 50%;
     transform: translate(0, -100%);
     :global {
+      html .cad {
+        z-index: -1;
+      }
       .A3main {
         width: 100%;
         height: 100%;
-        background: url('../../assets/img/hotlist_bg.png') center center;
-        background-size: 100% 100%;
+        background: url('../../assets/img/hotlist_bg.png') no-repeat center center;
+        background-size: cover;
         padding-bottom: 20px;
         .A3title {
           padding: 20px 0 10px 0;
@@ -93,13 +95,13 @@
           font-size: 14px;
           padding: 10px 3px;
           &:touch {
-            background-color: rgba(163, 124, 79, 1);
+            background-color: rgba(163, 143, 116, 1);
           }
         }
         .A3close {
           width: 100%;
           height: 40px;
-          background-color: rgba(148, 113, 76, 0.9);
+          background-color: rgba(157, 135, 106, 0.9);
           border-top: 1px solid rgba(43, 31, 23, 0.1);
           img {
             width: 16px;

src/pages/A4base/index.tsx

@@ -5,34 +5,16 @@ function A4base({ show, setShow }: { show: boolean; setShow: (show: boolean) =>
   const history = useHistory()
   return (
     <div className={styles.A4base} style={{ display: show ? 'block' : 'none' }}>
-      <div className={'A4base-title3'}>
-        <img src={require('./image/title_3.png')} alt='' />
-      </div>
-      <div className='A4base-logo'>
-        <img src={require('./image/logo.png')} alt='' />
-      </div>
       <div className='A4base-content'>
         <div className='A4base-title1'>
           <img src={require('./image/title.png')} alt='' />
         </div>
-        <div className='A4base-title2'>
-          <img src={require('./image/title_2.png')} alt='' />
-        </div>
-        <div className='A4base-other'>
-          <img src={require('./image/other.png')} alt='' />
-        </div>
-      </div>
-      <div className='A4base-pic1'>
-        <img src={require('./image/pic_1.png')} alt='' />
-      </div>
-      <div className='A4base-pic2'>
-        <img src={require('./image/pic_2.png')} alt='' />
       </div>
       <div
         className='A4base-button'
         onClick={() => {
           setShow(false)
-          history.push('/home?m=mm-1562')
+          history.push('/home?m=SG-zeRFYMaTE9F')
           window.location.reload()
         }}
       >

src/pages/A5Mobile/index.module.scss

@@ -7,7 +7,8 @@
   width: 100%;
   height: 100%;
   transition: all 0.5s;
-  background: url('./image/bg.png') repeat center center;
+  background: url('./image/bg.png') no-repeat center center;
+  background-size: 100% 100%;
   > div {
     position: absolute;
     top: 50%;
@@ -20,37 +21,13 @@
   }
   :global {
     .title {
-      transform: translate(-100px, -340px);
-      width: 155px;
-    }
-    .title2 {
-      transform: translate(-145px, -340px);
-      width: 12px;
-    }
-    .pic1 {
-      transform: translate(70px, -228px);
-      width: 100px;
-    }
-    .pic2 {
-      transform: translate(-150px, -10px);
-      width: 65px;
-    }
-    .pic3 {
-      transform: translate(-50%, 48%);
-      width: 100%;
-    }
-    .other {
-      transform: translate(45px, -30px);
-      width: 100px;
-    }
-    .logo {
-      transform: translate(130px, -320px);
-      width: 37px;
+      transform: translate(-50%, -61%);
+      width: 200px;
     }
     .button {
       cursor: pointer;
-      transform: translate(-50%, 260px);
-      width: 100px;
+      transform: translate(-50%, 229px);
+      width: 110px;
     }
   }
 }

src/pages/A5Mobile/index.tsx

@@ -8,29 +8,11 @@ function A5Mobile({ show, setShow }: { show: boolean; setShow: (show: boolean) =
       <div className='title'>
         <img src={require('./image/title.png')} alt='' />
       </div>
-      <div className='title2'>
-        <img src={require('./image/title_2.png')} alt='' />
-      </div>
-      <div className='pic1'>
-        <img src={require('./image/pic_1.png')} alt='' />
-      </div>
-      <div className='pic2'>
-        <img src={require('./image/pic_2.png')} alt='' />
-      </div>
-      <div className='pic3'>
-        <img src={require('./image/pic_3.png')} alt='' />
-      </div>
-      <div className='other'>
-        <img src={require('./image/other.png')} alt='' />
-      </div>
-      <div className='logo'>
-        <img src={require('./image/logo.png')} alt='' />
-      </div>
       <div
         className='button'
         onClick={() => {
           setShow(false)
-          history.push('/home?m=mm-1562')
+          history.push('/home?m=SG-zeRFYMaTE9F')
           window.location.reload()
         }}
       >