shaogen1995 7 månader sedan
förälder
incheckning
19f6f5dbc3

+ 1 - 12
README.md

@@ -1,12 +1 @@
-1.用 yarn
-
-2.测试堡垒机存放目录
-227/data/data/guangdong_guangzhou_zhongda_zhongliuyiyuan_data
-
-3.蓝湖地址
-https://lanhuapp.com/web/#/item/project/detailDetach?pid=80948489-b74b-4a80-ad55-af0100d0f72f&tid=de3e5e3e-a489-4b19-862a-7c87ce113467&see=all&project_id=80948489-b74b-4a80-ad55-af0100d0f72f&image_id=81dcc2d5-c5f0-4111-8771-e8b110de9524&fromEditor=true&type=image
-
-4.测试域名
-https://sit-zhongliuyiyuan.4dage.com
-接口地址在后面拼接:/api/doc.html#/home
-测试网址在后面拼接:/web
+1.用 npm,不知道为啥 用 yarn 报 route 的错误,应该是版本问题

BIN
public/images/Volume btn_off.png


BIN
public/images/Volume btn_on.png


BIN
public/images/auto-suspend.png


BIN
public/images/auto.png


BIN
public/images/dollhouse.png


BIN
public/images/dollhouse_active.png


BIN
public/images/floor.png


BIN
public/images/floor_active.png


BIN
public/images/full.png


BIN
public/images/fullx.png


BIN
public/images/hotlist.png


BIN
public/images/inside.png


BIN
public/images/inside_active.png


BIN
public/images/pause.png


BIN
public/images/play.png


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 1704 - 1819
public/js/Hot.js


+ 3 - 2
public/js/manage.js

@@ -2662,11 +2662,12 @@ Manage.prototype.loadAudio = function () {
     callback: state => {
       //play或pause时随之触发的函数(即使还没开始播放)
       if (state) {
+        // 备注sg
         $('#volume a img').attr('src', './images/Volume btn_off.png')
-        $('#volume').attr('title', '关闭声音')
+        // $('#volume').attr('title', '关闭声音')
       } else {
         $('#volume a img').attr('src', './images/Volume btn_on.png')
-        $('#volume').attr('title', '打开声音')
+        // $('#volume').attr('title', '打开声音')
       }
     }
   })

BIN
src/assets/img/hotListX.png


BIN
src/assets/img/hoverTit.png


BIN
src/assets/img/like.png


BIN
src/assets/img/likeAc.png


+ 29 - 7
src/assets/styles/base.css

@@ -40,6 +40,8 @@ textarea {
 :root {
   --themeColor: #c8a063;
   --themeColor2: #f58543;
+  --pcIconWidth: 48px;
+  --appIconWidthH: 36px;
 }
 /* 找不到页面 */
 .noFindPage {
@@ -95,7 +97,7 @@ textarea {
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 10000;
+  z-index: 99999;
   background-color: rgba(0, 0, 0, 0.8);
   display: flex;
   flex-direction: column;
@@ -114,12 +116,6 @@ textarea {
   font-size: 18px;
   height: 40px;
 }
-@media screen and (orientation: landscape) {
-  #root #ScreenChange {
-    opacity: 1;
-    pointer-events: auto;
-  }
-}
 .ant-image-preview-operations {
   background-color: rgba(0, 0, 0, 0.6) !important;
 }
@@ -139,3 +135,29 @@ body,
   position: relative;
   overflow: hidden;
 }
+.likeMoveAc {
+  animation: likeMoveAc 2s linear forwards;
+}
+@keyframes likeMoveAc {
+  0% {
+    opacity: 1;
+    bottom: 0;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    bottom: 50px;
+    transform: scale(1.5);
+  }
+}
+@media screen and (max-width: 1000px) {
+  html .cad {
+    width: 120px;
+    height: 120px;
+  }
+}
+@media screen and (max-width: 600px) {
+  html .cad {
+    top: 20px;
+  }
+}

+ 41 - 7
src/assets/styles/base.less

@@ -53,6 +53,8 @@ textarea {
 :root {
   --themeColor: #c8a063;
   --themeColor2: #f58543;
+  --pcIconWidth: 48px;
+  --appIconWidthH: 36px;
 }
 
 /* 找不到页面 */
@@ -117,7 +119,7 @@ textarea {
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 10000;
+    z-index: 99999;
     background-color: rgba(0, 0, 0, 0.8);
     display: flex;
     flex-direction: column;
@@ -140,12 +142,12 @@ textarea {
   }
 
   /*横屏*/
-  @media screen and (orientation: landscape) {
-    #ScreenChange {
-      opacity: 1;
-      pointer-events: auto;
-    }
-  }
+  // @media screen and (orientation: landscape) {
+  //   #ScreenChange {
+  //     opacity: 1;
+  //     pointer-events: auto;
+  //   }
+  // }
 }
 
 .ant-image-preview-operations {
@@ -167,3 +169,35 @@ body,
   position: relative;
   overflow: hidden;
 }
+
+// 点赞的动画
+.likeMoveAc {
+  animation: likeMoveAc 2s linear forwards;
+}
+
+@keyframes likeMoveAc {
+  0% {
+    opacity: 1;
+    bottom: 0;
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    bottom: 50px;
+    transform: scale(1.5);
+  }
+}
+
+@media screen and (max-width: 1000px) {
+  html .cad {
+    width: 120px;
+    height: 120px;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  html .cad {
+    top: 20px;
+  }
+}

+ 4 - 0
src/pages/A1home/index.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import styles from './index.module.scss'
 import A2main from '../A2main'
+import A4base from '../A4base'
 
 const scriptArr = [
   './js/manage.js',
@@ -27,6 +28,9 @@ function A1home() {
 
   return (
     <div className={styles.A1home}>
+      {/* 初始封面 */}
+      <A4base />
+
       <div id='hot'> </div>
       <div className='widgets-doll-labels'> </div>
       <div id='popup'>

+ 1 - 1
src/pages/A2main/components/A23pinTop/index.tsx

@@ -3,7 +3,7 @@ import styles from './index.module.scss'
 import classNames from 'classnames'
 function A23pinTop() {
   return (
-    <div className={classNames('pinTop left', styles.A23pinTop)}>
+    <div className={classNames('pinTop left', styles.A23pinTop)} hidden>
       <div id='model-title'>
         <div className='title-row'>
           <div id='title-toggle'>

+ 1 - 1
src/pages/A2main/components/A24drawerList/index.tsx

@@ -23,7 +23,7 @@ function A24drawerList() {
         </div>
       </div>
 
-      <div id='myCompany' className={styles.A24logo}>
+      <div id='myCompany' className={styles.A24logo} hidden>
         <img src='./images/btm_logo.png' alt='' />
         <span>提供技术支持</span>
       </div>

+ 282 - 0
src/pages/A2main/index.module.scss

@@ -4,5 +4,287 @@
     #hotList {
       display: none !important;
     }
+
+    // 鼠标移入按钮
+    .hoveImg {
+      pointer-events: none;
+      transition: all 0.5s;
+      opacity: 0;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      top: -40px;
+      width: 80px;
+      height: 37px;
+      line-height: 30px;
+      text-align: center;
+      background-image: url('../../assets/img/hoverTit.png');
+      background-size: 100% 100%;
+      font-size: 14px;
+      color: #fff;
+    }
+
+    // 样式重置
+    .pinBottom.left {
+      background-color: transparent;
+      left: 20px;
+    }
+
+    #play,
+    #pause {
+      width: var(--pcIconWidth);
+      height: var(--pcIconWidth);
+      background-color: transparent !important;
+      position: relative;
+      a {
+        width: 100%;
+        height: 100%;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      &:hover {
+        .hoveImg {
+          opacity: 1;
+        }
+      }
+    }
+
+    #gui-modes-map {
+      #pullTab,
+      .A2hotIcon,
+      #gui-modes-inside,
+      #gui-modes-dollhouse,
+      #gui-modes-floorplan {
+        width: var(--pcIconWidth);
+        height: var(--pcIconWidth);
+        margin-left: 18px;
+        background-color: transparent !important;
+        position: relative;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+        &:hover {
+          .hoveImg {
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    .likeBox,
+    #volume,
+    #gui-fullscreen,
+    #gui-fullscreen-exit {
+      width: var(--pcIconWidth);
+      height: var(--pcIconWidth);
+      margin-right: 18px;
+      background-color: transparent !important;
+      position: relative;
+      a {
+        width: 100%;
+        height: 100%;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      &:hover {
+        .hoveImg {
+          opacity: 1;
+        }
+      }
+    }
+
+    // 底部的位置
+    .pinBottom {
+      bottom: 34px;
+    }
+    .pinBottom.playing {
+      bottom: 50px !important;
+    }
+    .pinBottom.open {
+      bottom: 164px !important;
+    }
+    .pinBottom.open.playing {
+      bottom: 184px !important;
+    }
+
+    // 只有在全景漫游下其他按钮才能点
+    .pinBottom-containerNo {
+      // #pullTab,
+      // .likeBox,
+      // #volume,
+      // #gui-fullscreen,
+      // #gui-fullscreen-exit
+      #play,
+      #pause,
+      .A2hotIcon {
+        opacity: 0.5 !important;
+        pointer-events: none !important;
+      }
+    }
+
+    // 点赞
+    .likeBox {
+      float: left;
+      cursor: pointer;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+
+      .likeNum {
+        position: absolute;
+        bottom: -16px;
+        width: 100%;
+        text-align: center;
+        text-shadow: 1px 1px 1px #fcda99;
+      }
+      .likeMove {
+        position: absolute;
+        z-index: 100;
+        left: -18px;
+        bottom: 0;
+        text-shadow: 1px 1px 1px #fcda99;
+        opacity: 0;
+        pointer-events: none;
+      }
+      .likeMoveAc {
+        opacity: 1;
+      }
+      &:hover {
+        .hoveImg {
+          opacity: 1;
+        }
+      }
+    }
+
+    .pinBottom-container.drawerOpen {
+      bottom: 0;
+    }
+
+    // 展开的导览样式
+    .darkGlass {
+      background-color: red;
+    }
+    #drawer.open {
+      height: 140px !important;
+      #scrollFrame {
+        height: 107px;
+      }
+    }
+    #thumb-container {
+      .thumbImg {
+        width: 122px;
+        & > img {
+          height: 86px;
+          &:hover {
+            border-color: yellow;
+          }
+        }
+        .overlay {
+          background-color: transparent;
+          bottom: -24px;
+          font-weight: 700;
+          color: #fff;
+        }
+      }
+      .active > img {
+        border-color: #fff !important;
+      }
+    }
+
+    // 滚动条
+    .scrollbar {
+      background-color: transparent;
+      .handle {
+        background-color: blue;
+        height: 6px;
+      }
+    }
+
+    // 进度条
+    #playHead {
+      background-color: red;
+      #progressBar {
+        .step {
+          &::before {
+            background-color: #fff;
+          }
+        }
+        .active {
+          &::before {
+            background-color: blue;
+          }
+        }
+      }
+    }
+
+    // 移动端
+    @media screen and (max-width: 1000px) {
+      .hoveImg {
+        display: none !important;
+      }
+      #play,
+      #pause {
+        width: var(--appIconWidthH);
+        height: var(--appIconWidthH);
+      }
+      #gui-modes-map {
+        #pullTab,
+        .A2hotIcon,
+        #gui-modes-inside,
+        #gui-modes-dollhouse,
+        #gui-modes-floorplan {
+          width: var(--appIconWidthH);
+          height: var(--appIconWidthH);
+        }
+      }
+      .likeBox,
+      #volume,
+      #gui-fullscreen,
+      #gui-fullscreen-exit {
+        width: var(--appIconWidthH);
+        height: var(--appIconWidthH);
+      }
+      #drawer.open {
+        height: 130px !important;
+      }
+      #thumb-container {
+        .thumbImg {
+          & > img {
+            &:hover {
+              border-color: transparent;
+            }
+          }
+        }
+      }
+    }
+
+    @media screen and (max-width: 600px) {
+      #gui-modes-map {
+        #pullTab,
+        .A2hotIcon,
+        #gui-modes-inside,
+        #gui-modes-dollhouse,
+        #gui-modes-floorplan {
+          margin-left: 0;
+          margin-top: 5px;
+        }
+      }
+      .likeBox,
+      #volume,
+      #gui-fullscreen,
+      #gui-fullscreen-exit {
+        margin-right: 5px;
+      }
+      .pinBottom.right {
+        right: 10px;
+      }
+    }
   }
 }

+ 102 - 52
src/pages/A2main/index.tsx

@@ -1,14 +1,37 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useState } from 'react'
 import styles from './index.module.scss'
 import A21vrOff from './components/A21vrOff'
 import A22hotListWrap from './components/A22hotListWrap'
 import A23pinTop from './components/A23pinTop'
 import A24drawerList from './components/A24drawerList'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
+import classNames from 'classnames'
+import A3hotList from '../A3hotList'
+
+const imgArrTemp = ['like.png', 'likeAc.png']
+const imgArr = imgArrTemp.map(item => require(`@/assets/img/${item}`))
+
 function A2main() {
+  // 漫游的状态
+  const { state3d } = useSelector((state: RootState) => state.three)
+
+  // 点赞
+  const [like, setLike] = useState(false)
+  const [likeNum, setLikeNum] = useState(1)
+
+  // 点击点赞
+  const likeFu = useCallback(() => {
+    if (like) return
+    setLike(true)
+    setTimeout(() => {
+      setLikeNum(likeNum + 1)
+      setLike(false)
+    }, 2000)
+  }, [like, likeNum])
+
   // 点击热点列表
-  const clickHotIconFu = useCallback(() => {
-    alert('点击热点列表')
-  }, [])
+  const [hotListShow, setHotListShow] = useState(false)
 
   return (
     <div className={styles.A2main} id='gui' style={{ display: 'none' }}>
@@ -20,7 +43,12 @@ function A2main() {
       <A23pinTop />
 
       {/* 主要修改的图标部分 */}
-      <div className='pinBottom-container'>
+      <div
+        className={classNames(
+          'pinBottom-container',
+          state3d === 'panorama' ? '' : 'pinBottom-containerNo'
+        )}
+      >
         <div className='pinBottom center'>
           <div id='view-controllers'></div>
         </div>
@@ -47,21 +75,18 @@ function A2main() {
             <div id='play' className='ui-icon' rel='tooltip' data-original-title='播放'>
               {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
               <a>
-                <img src='images/play.png' width='24' height='24' alt='' />
+                <img src='images/play.png' alt='' />
               </a>
+              {/* 鼠标移入 */}
+              <div className='hoveImg'>自动导览</div>
             </div>
             <div id='pause' className='ui-icon' style={{ display: 'none' }}>
               {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
               <a>
-                <img
-                  rel='tooltip'
-                  title='暂停'
-                  src='images/pause.png'
-                  width='24'
-                  height='24'
-                  alt=''
-                />
+                <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 */}
@@ -77,15 +102,16 @@ function A2main() {
 
             <div id='gui-modes-map' className='ui-icon double active'>
               <div data-original-title='导览' id='pullTab' rel='tooltip' title=''>
-                <img className='icon icon-inside' src='images/auto.png' title='导览' alt='' />
+                <img className='icon icon-inside' src='images/auto.png' alt='' />
+                {/* 鼠标移入 */}
+                <div className='hoveImg'>导览列表</div>
               </div>
 
-              {/* 原始热点列表 */}
+              {/* 原始热点列表---隐藏 */}
               <div
                 data-original-title='热点列表'
                 id='hotList'
                 rel='tooltip'
-                title=''
                 style={{ display: 'none' }}
               >
                 <img
@@ -96,36 +122,32 @@ function A2main() {
                 />
               </div>
 
-              {/* 新的热点列表 */}
-              <div className='A2hotIcon' rel='tooltip' onClick={clickHotIconFu}>
-                <img src='images/hotlist.png' title='热点列表' alt='' />
-              </div>
-
-              <div
-                data-original-title='全景漫游'
-                id='gui-modes-inside'
-                rel='tooltip'
-                title=''
-                className=''
-              >
-                <img className='icon icon-inside' src='images/inside.png' title='全景漫游' alt='' />
+              <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'
-                title=''
-                className=''
-              >
+              <div data-original-title='迷你模型' id='gui-modes-dollhouse' rel='tooltip'>
                 <img
                   className='icon icon-inside'
-                  src='images/dollhouse.png'
-                  title='迷你模型'
+                  src={`images/dollhouse${state3d === 'dollhouse' ? '_active' : ''}.png`}
                   alt=''
                 />
+                {/* 鼠标移入 */}
+                <div className='hoveImg'>三维视觉</div>
               </div>
-              <div data-original-title='俯视图' id='gui-modes-floorplan' rel='tooltip' title=''>
-                <img className='icon icon-inside' src='images/floor.png' title='俯视图' alt='' />
+              <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'
@@ -145,6 +167,21 @@ function A2main() {
               >
                 <img className='icon icon-inside' src='images/face.jpg' alt='' />
               </div>
+
+              {/* 新的热点列表 */}
+              <div
+                className='A2hotIcon'
+                rel='tooltip'
+                onClick={() => {
+                  // 停止自动导览
+                  window.player.director.stopTour()
+                  setHotListShow(true)
+                }}
+              >
+                <img src='images/hotlist.png' alt='' />
+                {/* 鼠标移入 */}
+                <div className='hoveImg'>热点列表</div>
+              </div>
             </div>
           </div>
         </div>
@@ -160,9 +197,21 @@ function A2main() {
             <div id='volume' className='ui-icon wide'>
               {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
               <a>
-                <img src='images/Volume btn_on.png' width='24' height='24' alt='' />
+                <img src='images/Volume btn_on.png' alt='' />
               </a>
+              {/* 鼠标移入 */}
+              <div className='hoveImg'>音乐开关</div>
+            </div>
+
+            {/* 点赞 */}
+            <div className='likeBox' onClick={likeFu}>
+              <img src={like ? imgArr[1] : imgArr[0]} alt='' />
+              {/* 鼠标移入 */}
+              <div className='hoveImg'>点赞</div>
+              <div className='likeNum'>{likeNum}</div>
+              <div className={classNames('likeMove', like ? 'likeMoveAc' : '')}>+1</div>
             </div>
+
             <div id='vr' className='ui-icon wide hidden' style={{ display: 'none' }}>
               {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
               <a>
@@ -175,31 +224,29 @@ function A2main() {
                 <i rel='tooltip' title='{[{ SOCIAL_SHARING }]}' className='icon icon-share'></i>
               </a>
             </div>
-            <div
-              id='gui-fullscreen'
-              className='ui-icon wide'
-              data-placement='top'
-              rel='tooltip'
-              title='{[{ VIEW_FULLSCREEN }]}'
-            >
+            <div id='gui-fullscreen' className='ui-icon wide' data-placement='top' rel='tooltip'>
               {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
               <a>
-                <i className='icon icon-fullscreen'></i>
+                <img src='images/full.png' alt='' />
               </a>
+              {/* 鼠标移入 */}
+              <div className='hoveImg'>全屏</div>
             </div>
             <div
               id='gui-fullscreen-exit'
               className='ui-icon wide'
               data-placement='top'
               rel='tooltip'
-              title='{[{ EXIT_FULLSCREEN }]}'
               style={{ display: 'none' }}
             >
               {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
               <a>
-                <i className='icon icon-fullscreen-exit'></i>
+                <img src='images/fullx.png' alt='' />
               </a>
+              {/* 鼠标移入 */}
+              <div className='hoveImg'>关闭全屏</div>
             </div>
+
             <div className='pull-right terms terms2'>
               {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
               <a>{'{[{ TERMS }]}'}</a>
@@ -210,6 +257,9 @@ function A2main() {
 
       {/* 底部导览列表 */}
       <A24drawerList />
+
+      {/* 热点列表 */}
+      <A3hotList show={hotListShow} closeFu={() => setHotListShow(false)} />
     </div>
   )
 }

+ 34 - 0
src/pages/A3hotList/index.module.scss

@@ -0,0 +1,34 @@
+.A3hotList {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 30001;
+  background-color: rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(4px);
+  padding: 10%;
+  transition: all 0.3s;
+  :global {
+    .A3close {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      cursor: pointer;
+    }
+    .A3main {
+      width: 100%;
+      height: 100%;
+      background-color: red;
+      color: #fff;
+      overflow: auto;
+      & > div {
+        cursor: pointer;
+        margin-bottom: 10px;
+        &:hover {
+          color: blue;
+        }
+      }
+    }
+  }
+}

+ 46 - 0
src/pages/A3hotList/index.tsx

@@ -0,0 +1,46 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import styles from './index.module.scss'
+import { A3listType } from './type'
+
+const imgArrTemp = ['hotListX.png']
+const imgArr = imgArrTemp.map(item => require(`@/assets/img/${item}`))
+
+type Props = {
+  show: boolean
+  closeFu: () => void
+}
+
+function A3hotList({ show, closeFu }: Props) {
+  const [list, setList] = useState<A3listType[]>([])
+
+  useEffect(() => {
+    if (show && list.length <= 0) setList(window.myHotList || [])
+  }, [list.length, show])
+
+  const openHot = useCallback((item: A3listType) => {
+    setTimeout(() => {
+      item && item.examine(window.player, true)
+    }, 200)
+  }, [])
+
+  return (
+    <div
+      className={styles.A3hotList}
+      style={{ opacity: show ? '1' : '0', pointerEvents: show ? 'auto' : 'none' }}
+    >
+      <img onClick={closeFu} className='A3close' src={imgArr[0]} alt='' />
+
+      <div className='A3main'>
+        {list.map((item, index) => (
+          <div onClick={() => openHot(item)} key={index}>
+            {item.info.title || '热点'}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+const MemoA3hotList = React.memo(A3hotList)
+
+export default MemoA3hotList

+ 4 - 0
src/pages/A3hotList/type.d.ts

@@ -0,0 +1,4 @@
+export type A3listType = {
+  info: { title: string }
+  examine: any
+}

+ 12 - 0
src/pages/A4base/index.module.scss

@@ -0,0 +1,12 @@
+.A4base {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 99999;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  transition: all 0.5s;
+  // :global {
+  // }
+}

+ 24 - 0
src/pages/A4base/index.tsx

@@ -0,0 +1,24 @@
+import React, { useCallback, useState } from 'react'
+import styles from './index.module.scss'
+
+function A4base() {
+  const [show, setShow] = useState(true)
+
+  const baseStart = useCallback(() => {
+    window.manage.switchBgmState(true)
+    setShow(false)
+  }, [])
+
+  return (
+    <div
+      className={styles.A4base}
+      style={{ opacity: show ? '1' : '0', pointerEvents: show ? 'auto' : 'none' }}
+    >
+      <h1 onClick={baseStart}>A4base</h1>
+    </div>
+  )
+}
+
+const MemoA4base = React.memo(A4base)
+
+export default MemoA4base

+ 12 - 1
src/store/reducer/three.ts

@@ -1,3 +1,5 @@
+import { A3listType } from '@/pages/A3hotList/type'
+
 export type ThreeState3dType = 'panorama' | 'dollhouse' | 'floorplan' | 'transitioning'
 
 declare global {
@@ -7,13 +9,22 @@ declare global {
     threeReact: {
       state3d: (str: ThreeState3dType) => void
     }
+    player: {
+      director: {
+        stopTour: () => void
+      }
+    }
+    manage: {
+      switchBgmState: (val: boolean) => void
+    }
+    myHotList: A3listType[]
   }
 }
 
 // 初始化状态
 const initState = {
   // 1.panorama 全景漫游 2.dollhouse 3D模型 3.floorplan 顶部俯视 4.transitioning 切换中
-  state3d: 'transitioning'
+  state3d: 'transitioning' as ThreeState3dType
 }
 
 // 定义 action 类型