upp

hot/src/views/Home.vue

@@ -1,78 +1,84 @@
 <template>
   <div class="home">
     <div class="main">
-      <div class="mainCon" v-show="!oneTxt">
-        <!-- 音频播放器 -->
-        <audio id="myAudio" v-if="audio" v-show="isOneAduio" :src="audio" controls></audio>
-        <!-- 音频图标 -->
-        <div class="audioIcon" v-if="audio && !isOneAduio" @click="audioSta = !audioSta"
-          :title="audioSta ? '关闭音频' : '打开音频'">
-          <img :src="require(`@/assets/images/pc/audio${audioSta ? 'Ac' : ''}.png`)
-            " alt="" />
-        </div>
-
-        <!-- 如果只有一个模块 -->
-        <div class="oneTabNum" v-if="flooTab.length === 1 && data[myType] && data[myType].length">
-          {{ myInd + 1 }} / {{ data[myType].length }}
-        </div>
-
-        <!-- 底部的tab -->
-        <div class="flooTabBox" v-if="flooTab.length > 1">
-          <div @click="myType = item.type" class="tabRow" :class="{ tabRowAc: myType === item.type }"
-            v-for="item in flooTab" :key="item.id">
-            <img :src="require(`@/assets/images/pc/icon${item.id}${myType === item.type ? 'Ac' : ''
-              }.png`)
+      <div class="main-bg">
+        <!-- 关闭按钮 -->
+        <img class="close-btn" @click="closeHot()" src="@/assets/images/close.png" alt="">
+        <div class="mainCon" v-show="!oneTxt">
+          <!-- 音频播放器 -->
+          <audio id="myAudio" v-if="audio" v-show="isOneAduio" :src="audio" controls></audio>
+          <!-- 音频图标 -->
+          <div class="audioIcon" v-if="audio && !isOneAduio" @click="audioSta = !audioSta"
+            :title="audioSta ? '关闭音频' : '打开音频'">
+            <img :src="require(`@/assets/images/pc/audio${audioSta ? 'Ac' : ''}.png`)
               " alt="" />
-            <!-- {{ item.name }}
+          </div>
+
+          <!-- 如果只有一个模块 -->
+          <!-- <div class="oneTabNum" v-if="flooTab.length === 1 && data[myType] && data[myType].length">
+            {{ myInd + 1 }} / {{ data[myType].length }}
+          </div> -->
+
+          <!-- 底部的tab -->
+          <div class="flooTabBox" v-if="flooTab.length > 1">
+            <div @click="myType = item.type" class="tabRow" :class="{ tabRowAc: myType === item.type }"
+              v-for="item in flooTab" :key="item.id">
+              <img :src="require(`@/assets/images/pc/icon${item.id}${myType === item.type ? 'Ac' : ''
+                }.png`)
+                " alt="" />
+              <!-- {{ item.name }}
             <span v-if="data[item.type] &&
               data[item.type].length &&
               data[item.type].length > 1
             ">{{ item.type === myType ? myInd + 1 + "/" : null
               }}{{ data[item.type].length }}</span> -->
+            </div>
           </div>
-        </div>
 
-        <!-- 主要内容 -->
+          <!-- 主要内容 -->
 
-        <div class="contenBoxMain">
-          <div class="contenBox" :class="{ contenBoxAc: index === myInd }" v-for="(item, index) in data[myType]"
-            :key="myType === 'video' ? item.url : item">
-            <!-- 模型页面 -->
-            <div class="modelBox" v-if="myType === 'model'">
-              <iframe :src="item" frameborder="0" v-if="index === myInd"></iframe>
-            </div>
-            <!-- 视频页面 -->
-            <div class="videoBox" v-else-if="myType === 'video'">
-              <video id="videoID" controls :src="item.url" v-if="index === myInd" autoplay></video>
-            </div>
-            <!-- 图片页面 -->
-            <div class="imgBox" v-else-if="myType === 'img'">
-              <div class="smImgBox" @click="lookImg(item)">
-                <img v-lazy="item" alt="" />
+          <div class="contenBoxMain"
+            :style="{ height: (myType == 'img' && myTxt === '') || (myType === 'video' && myTxt === '') ? '300px' : '' }">
+            <div class="contenBox" :class="{ contenBoxAc: index === myInd }" v-for="(item, index) in data[myType]"
+              :key="myType === 'video' ? item.url : item">
+              <!-- 模型页面 -->
+              <div class="modelBox" v-if="myType === 'model'">
+                <iframe :src="item" frameborder="0" v-if="index === myInd"></iframe>
+              </div>
+              <!-- 视频页面 -->
+              <div class="videoBox" v-else-if="myType === 'video'">
+                <video id="videoID" controls :src="item.url" v-if="index === myInd" autoplay></video>
+              </div>
+              <!-- 图片页面 -->
+              <div class="imgBox" v-else-if="myType === 'img'">
+                <div class="smImgBox" @click="lookImg(item)">
+                  <img v-lazy="item" alt="" />
+                </div>
               </div>
             </div>
-          </div>
-          <!-- 左右箭头 -->
-          <div @click="cutMyInd(-1, myInd === 0)" class="leftJJ awccJJ" :class="{ noClick: myInd === 0 }"
-            v-if="data[myType] && data[myType].length > 1"></div>
-          <div @click="cutMyInd(1, myInd === data[myType].length - 1)" class="rightJJ awccJJ"
-            :class="{ noClick: myInd === data[myType].length - 1 }" v-if="data[myType] && data[myType].length > 1">
+            <!-- 左右箭头 -->
+            <div @click="cutMyInd(-1, myInd === 0)" class="leftJJ awccJJ" :class="{ noClick: myInd === 0 }"
+              v-if="data[myType] && data[myType].length > 1"></div>
+            <div @click="cutMyInd(1, myInd === data[myType].length - 1)" class="rightJJ awccJJ"
+              :class="{ noClick: myInd === data[myType].length - 1 }" v-if="data[myType] && data[myType].length > 1">
+            </div>
           </div>
         </div>
-      </div>
 
-      <!-- 下面的文字介绍 -->
-      <div class="flooTxt" :class="{ flooTxtOne: oneTxt }">
-        <div class="flooTxtBox">
-          <div class="myTitle">{{ myTitle }}</div>
-          <!-- 视频的介绍 -->
-          <div class="myTxt" v-if="myType === 'video' && videoTxt[myInd]">
-            {{ videoTxt[myInd] }}
-          </div>
-          <div class="myTxt" v-if="myType === 'img' && imgTxt[myInd]">
-            {{ imgTxt[myInd] }}
+        <!-- 下面的文字介绍 -->
+        <div class="flooTxt" :class="{ flooTxtOne: oneTxt }">
+          <div class="flooTxtBox" :style="{ paddingTop: (myType == 'img' || myType == 'audio') ? '10px' : '' }">
+            <div class="myTitle">{{ myTitle }}</div>
+            <div class="line" v-show="myType == 'img' || myType == 'audio'"></div>
+            <!-- 视频的介绍 -->
+            <div class="myTxt" v-if="myType === 'video' && videoTxt[myInd]">
+              {{ videoTxt[myInd] }}
+            </div>
+            <div class="myTxt" v-if="myType === 'img' && imgTxt[myInd]">
+              {{ imgTxt[myInd] }}
+            </div>
+            <div class="myTxt" :class="{ 'imgTxt': myType == 'img' || myType === 'video' }" v-html="myTxt"></div>
           </div>
-          <div class="myTxt" v-html="myTxt"></div>
         </div>
       </div>
     </div>
@@ -135,6 +141,7 @@ export default {
   },
   watch: {
     myType(val) {
+      console.log('currentMyType', val)
       this.myInd = 0;
       if (val === 'img') {
         // 开始计时
@@ -187,6 +194,13 @@ export default {
   computed: {},
   components: {},
   methods: {
+
+    // 关闭热点
+    closeHot() {
+      if (window.parent) {
+        window.parent.window.closeHotfu()
+      }
+    },
     // 点击左右箭头
     cutMyInd(num, flag) {
       if (flag) return;
@@ -274,9 +288,12 @@ export default {
 
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.85);
+  background-color: rgba(0, 0, 0, 0);
   // backdrop-filter: blur(10px);
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   #myAudio {
     z-index: 11;
@@ -289,17 +306,39 @@ export default {
   }
 
   .main {
-    width: 1200px;
-    margin: 0 auto;
-    height: 100%;
-    padding-top: 40px;
+    width: 350px;
+    // margin: 0 auto;
+    height: 400px;
+    // padding-top: 40px;
+    // backdrop-filter: blur(10px);
+    border-radius: 5px;
+    box-shadow: 0 0 20px #090909;
+    padding: 5px;
+    box-sizing: border-box;
+    background: rgba(255, 255, 255, 0.53);
+
+    .main-bg {
+      width: 100%;
+      height: 100%;
+      background: url('../assets/images/bg.png');
+      background-size: 100% 100%;
+      position: relative;
+      padding: 30px 30px 10px 30px;
+
+      .close-btn {
+        position: absolute;
+        right: 15px;
+        top: 10px;
+        cursor: pointer;
+      }
+    }
 
     .mainCon {
       position: relative;
       border-radius: 6px;
       overflow: hidden;
       width: 100%;
-      height: calc(100% - 200px);
+      // height: calc(100% - 200px);
       // background: linear-gradient(#929292, #c5c5c5);
 
       .audioIcon {
@@ -307,7 +346,11 @@ export default {
         cursor: pointer;
         position: absolute;
         right: 20px;
-        bottom: 30px;
+        bottom: -3px;
+
+        >img {
+          width: 30px;
+        }
       }
 
       .oneTabNum {
@@ -322,7 +365,7 @@ export default {
       .flooTabBox {
         z-index: 10;
         position: absolute;
-        bottom: 30px;
+        bottom: 0;
         left: 50%;
         transform: translateX(-50%);
         display: flex;
@@ -341,6 +384,7 @@ export default {
 
           &>img {
             margin-right: 6px;
+            width: 30px;
           }
         }
 
@@ -354,7 +398,9 @@ export default {
       .contenBoxMain {
         position: relative;
         width: 100%;
-        height: 100%;
+        height: 150px;
+        // background: green;
+        margin-top: 25px;
       }
 
       .contenBox {
@@ -382,7 +428,7 @@ export default {
         }
 
         .videoBox {
-          padding: 100px 100px 120px;
+          // padding: 100px 100px 120px;
 
           video {
             width: 100%;
@@ -419,8 +465,8 @@ export default {
         top: 50%;
         transform: translateY(-50%);
         left: 10px;
-        width: 37px;
-        height: 37px;
+        width: 25px;
+        height: 25px;
         background-image: url("../assets/images/pc/left.png");
         background-size: 100% 100%;
 
@@ -442,54 +488,84 @@ export default {
     }
 
     .flooTxt {
-      margin-top: 20px;
+      // margin-top: 20px;
       width: 100%;
-      height: 160px;
+      height: auto;
+      // margin-top: 20px;
 
       .flooTxtBox {
         width: 100%;
         height: 100%;
-        overflow-y: auto;
+        // overflow-y: auto;
+        padding-top: 25px;
+
+        .line {
+          width: 100%;
+          height: 1.5px;
+          background: url('../assets/images/line-bg.png');
+          background-size: 100% 100%;
+        }
 
         .myTitle {
           color: #fff;
           font-size: 22px;
           font-weight: 700;
-          margin-bottom: 10px;
+          margin-bottom: 15px;
+          // margin-top: 10px;
           text-align: center;
+          text-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
+          position: absolute;
+          top: 18px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 85%;
+
         }
 
         .myTxt {
           font-size: 16px;
           color: #ffffff;
           line-height: 24px;
-        }
+          max-height: 95%;
+          // max-height: 150px;
+          overflow-y: auto;
+          letter-spacing: 1px;
+          text-align: justify;
+          // margin-top: 25px;
+
+          &::-webkit-scrollbar {
+            /*滚动条整体样式*/
+            width: 3px;
+            /*高宽分别对应横竖滚动条的尺寸*/
+            height: 1px;
+          }
 
-        &::-webkit-scrollbar {
-          /*滚动条整体样式*/
-          width: 3px;
-          /*高宽分别对应横竖滚动条的尺寸*/
-          height: 1px;
-        }
+          &::-webkit-scrollbar-thumb {
+            /*滚动条里面小方块*/
+            border-radius: 10px;
+            -webkit-box-shadow: inset 0 0 5px transparent;
+            background: rgb(39, 55, 111);
+          }
 
-        &::-webkit-scrollbar-thumb {
-          /*滚动条里面小方块*/
-          border-radius: 10px;
-          -webkit-box-shadow: inset 0 0 5px transparent;
-          background: rgb(39, 55, 111);
+          &::-webkit-scrollbar-track {
+            /*滚动条里面轨道*/
+            -webkit-box-shadow: inset 0 0 5px transparent;
+            border-radius: 10px;
+            background: transparent;
+          }
         }
 
-        &::-webkit-scrollbar-track {
-          /*滚动条里面轨道*/
-          -webkit-box-shadow: inset 0 0 5px transparent;
-          border-radius: 10px;
-          background: transparent;
+        .imgTxt {
+          max-height: 150px;
+          margin-top: 15px
         }
+
+
       }
     }
 
     .flooTxtOne {
-      height: 600px;
+      height: 100%;
     }
   }
 }
@@ -497,10 +573,11 @@ export default {
 @media screen and (max-width: 1200px) and (orientation: landscape) {
   .home {
     .main {
-      width: 1000px;
-      .mainCon{
-        .contenBox{
-          .videoBox{
+      // width: 1000px;
+
+      .mainCon {
+        .contenBox {
+          .videoBox {
             padding: 0px !important;
           }
         }

scene/public/static/js/Hot.js

@@ -1761,6 +1761,10 @@ window.initHot = function(model){
         $('#closepop').on("touchstart",Hot.closePopup); 
     }else{
         $('#closepop').on("click",Hot.closePopup); 
+
+        window.closeHotfu = () => {
+            Hot.closePopup()
+        }
     }
     
     

scene/src/views/gui/menu.vue

@@ -115,7 +115,7 @@
         </div>
 
         <!-- 回到pc页面（首页） -->
-        <div class="toHomeBox" @click="toHomeFu">
+        <div class="toHomeBox" @click="back()">
           <img src="../../assets/img/toHome.png" alt="" />
         </div>
 
@@ -237,6 +237,10 @@ export default {
       }
     }, 100);
 
+    window.parent.window.closeHotfu = () => {
+
+    }
+
 
     setTimeout(() => {
       if (window.location.href.includes('showBack=1')) {

scene/src/views/popup/index.vue

@@ -1,12 +1,19 @@
 <template>
   <div id="popup">
-        <div class="popup-content"></div>
-        <div id="closepop">close</div>
-    </div>
+    <div class="popup-content"></div>
+    <div id="closepop">close</div>
+  </div>
 </template>
 
 <script>
 export default {
-  
+
+}
+</script>
+<style lang="less" scoped>
+#popup {
+  #closepop {
+    display: none;
+  }
 }
-</script>
+</style>