gx

hot/src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home">
     <div class="main">
-      <!-- <div class="myTitle">{{ myTitle }}</div> -->
+      <div class="myTitle">{{ myTitle }}</div>
       <div class="mainCon" v-show="!oneTxt">
         <audio id="myAudio" v-if="audio" v-show="isOneAduio" :src="urlToFitFu(audio)" controls></audio>
         <!-- 如果只有一个模块 -->
@@ -47,7 +47,7 @@
 
       <!-- 下面的文字介绍 -->
       <div class="txtBox" v-if="myTitle !== '程哲碑'">
-        <div class="myTitle">{{ myTitle }}</div>
+        <!-- <div class="myTitle">{{ myTitle }}</div> -->
 
         <div class="flooTxt" :class="{ flooTxtOne: oneTxt }">
           <div class="flooTxtBox">
@@ -335,10 +335,10 @@ export default {
     width: 100%;
     margin: 0 auto;
     height: 100%;
-    padding: 50px 50px 20px 20px;
+    padding: 20px 50px 20px 20px;
     display: flex;
     align-items: center;
-
+    flex-direction: column;
     justify-content: center;
     .myTitle {
       font-size: 22px;
@@ -346,7 +346,7 @@ export default {
       margin-bottom: 20px;
       padding: 0 30px;
       letter-spacing: 4px;
-      color: #fff;
+      color: rgba(255, 233, 182, 1);
     }
     .fixedTx {
       font-size: 14px;
@@ -370,8 +370,8 @@ export default {
       position: relative;
       border-radius: 6px;
       overflow: hidden;
-      width: 50%;
-      height: 100%;
+      width: 60%;
+      height: 70%;
       .oneTabNum {
         z-index: 10;
         position: absolute;
@@ -446,8 +446,8 @@ export default {
       }
     }
     .txtBox {
-      width: 50%;
-      height: 85%;
+      width: 60%;
+      height: 30%;
       .flooTxt {
         margin: 0 auto;
         margin-top: 10px;
@@ -457,20 +457,21 @@ export default {
         .flooTxtBox {
           width: 100%;
           height: 100%;
-          padding: 0 30px;
           overflow-y: auto;
-
+          padding-bottom: 30px;
           .myTxt {
             font-size: 16px;
             color: #f9f9f1;
             letter-spacing: 3px;
             line-height: 32px;
           }
+          mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 80%, /* 保留顶部70%不透明 */ rgba(0, 0, 0, 0) 100% /* 底部30%完全透明 */);
+          -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);
           &::-webkit-scrollbar {
             /*滚动条整体样式*/
-            width: 3px;
+            width: 0px;
             /*高宽分别对应横竖滚动条的尺寸*/
-            height: 1px;
+            height: 0px;
           }
           &::-webkit-scrollbar-thumb {
             /*滚动条里面小方块*/
@@ -667,7 +668,7 @@ export default {
         .flooTxt {
           margin-top: -5px;
           width: 100%;
-          padding: 10px 15px 0px 15px;
+          padding-top: 15px;
           max-height: 200px;
 
           .flooTxtBox {

scene/public/js/Hot.js

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

scene/src/pages/A2main/index.tsx

@@ -17,7 +17,7 @@ function A2main() {
   // 漫游的状态
   const { state3d } = useSelector((state: RootState) => state.three)
 
-
+  const [hotListShow, setHotListShow] = useState(false)
   const hiddenMap = (isShow: boolean) => {
     const cad: any = document.querySelector('.cad')
     if (cad) {
@@ -75,6 +75,22 @@ function A2main() {
               <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${hotListShow ? '_active' : ''}.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='' />
               {/* 鼠标移入 */}
@@ -162,6 +178,16 @@ function A2main() {
 
       {/* 底部导览列表 */}
       <A24drawerList />
+
+      {/* 热点列表 */}
+      <A3hotList
+        show={hotListShow}
+        setShow={setHotListShow}
+        closeFu={() => {
+          setHotListShow(false)
+          hiddenMap(false)
+        }}
+      />
     </div>
   )
 }

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

@@ -75,40 +75,68 @@
 
 @media screen and (max-width: 1000px) {
   .A3hotList {
-    width: 100%;
-    height: 50%;
-    transform: translate(0, -100%);
+    width: 210px;
     :global {
-      html .cad {
-        z-index: -1;
-      }
       .A3main {
         width: 100%;
         height: 100%;
-        // background: url('../../assets/img/hotlist_bg.png') no-repeat center center;
+        // background: url('../../assets/img/hotlist_bg.png') center center;
         // background-size: cover;
-        padding-bottom: 36px;
+        font-size: 13px;
         .A3title {
-          padding: 20px 0 10px 0;
-          font-size: 16px;
-        }
-        .A3item {
-          font-size: 13px;
-          padding: 10px 3px;
-          &:touch {
-            background-color: rgba(163, 143, 116, 1);
-          }
+          font-size: 18px;
         }
         .A3close {
-          width: 100%;
-          height: 40px;
-          border-top: 1px solid rgba(43, 31, 23, 0.1);
+          width: 210px;
+          height: 50px;
           img {
-            width: 16px;
-            height: 16px;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 30px;
+            height: 30px;
+            opacity: 0.6;
           }
         }
       }
     }
   }
+  // .A3hotList {
+  //   width: 100%;
+  //   height: 50%;
+  //   transform: translate(0, -100%);
+  //   :global {
+  //     html .cad {
+  //       z-index: -1;
+  //     }
+  //     .A3main {
+  //       width: 100%;
+  //       height: 100%;
+  //       // 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: 13px;
+  //         padding: 10px 3px;
+  //         &:touch {
+  //           background-color: rgba(163, 143, 116, 1);
+  //         }
+  //       }
+  //       .A3close {
+  //         width: 100%;
+  //         height: 40px;
+  //         border-top: 1px solid rgba(43, 31, 23, 0.1);
+  //         img {
+  //           width: 16px;
+  //           height: 16px;
+  //         }
+  //       }
+  //     }
+  //   }
+  // }
 }