更换热点模板代码

hot/src/App.vue

@@ -1,39 +1,22 @@
 <template>
   <div id="app">
-    <router-view />
+    <router-view/>
   </div>
 </template>
 
 <style lang="less">
-@font-face {
-  font-family: "SourceHanSerifCN-Medium";
-  src: url("./assets/fonts/SourceHanSerifCN-Medium.otf");
-}
-@font-face {
-  font-family: "SourceHanSerifCN-Regular";
-  src: url("./assets/fonts/SourceHanSerifCN-Regular.otf");
-}
-@font-face {
-  font-family: "SourceHanSerifCN-Bold";
-  src: url("./assets/fonts/SourceHanSerifCN-Bold.otf");
-}
-html,
-body {
+html,body{
   width: 100%;
   height: 100%;
   overflow: hidden;
-  backdrop-filter: blur(30px);
 }
-* {
+*{
   margin: 0;
   padding: 0;
 }
-* {
-  font-family: "SourceHanSerifCN-Regular";
-}
 #app {
   width: 100%;
   height: 100%;
-  backdrop-filter: blur(30px);
 }
+
 </style>

hot/src/assets/base.css

@@ -29,6 +29,6 @@ body{
 @media screen and (max-width: 800px) {
   .viewer-footer {
     bottom: auto;
-    bottom: 10px;
+    top: 10px;
   }
 }

hot/src/views/Home.vue

@@ -2,143 +2,61 @@
   <div class="home">
     <div class="main">
       <div class="mainCon" v-show="!oneTxt">
-        <audio
-          id="myAudio"
-          v-if="audio"
-          v-show="isOneAduio"
-          :src="urlToFitFu(audio)"
-          controls
-        ></audio>
+        <!-- 音频播放器 -->
+        <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
-            width="30px"
-            :src="
-              require(`@/assets/images/pc/audio${audioSta ? 'Ac' : ''}.png`)
-            "
-            alt=""
-          />
-        </div> -->
+        <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 &&
-              data[myType].length > 1
-          "
-        >
+        <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 class="contenBoxMain">
-          <div
-            class="contenBox"
-            :class="{ contenBoxAc: index === myInd }"
-            v-for="(item, index) in data[myType]"
-            :key="myType === 'video' ? item.url : item"
-          >
+          <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="urlToFitFu(item)"
-                frameborder="0"
-                v-if="index === myInd"
-              ></iframe>
+              <iframe :src="item" frameborder="0" v-if="index === myInd"></iframe>
             </div>
             <!-- 视频页面 -->
             <div class="videoBox" v-else-if="myType === 'video'">
-              <video
-                controls
-                :src="urlToFitFu(item.url)"
-                v-if="index === myInd"
-              ></video>
+              <video controls :src="item.url" v-if="index === myInd"></video>
             </div>
             <!-- 图片页面 -->
             <div class="imgBox" v-else-if="myType === 'img'">
-              <div class="smImgBox" @click="lookImg(urlToFitFu(item))">
-                <img v-lazy="urlToFitFu(item)" alt="" />
+              <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"
-        >
-          <img
-            v-show="screenWidth > 900"
-            class="iconimg"
-            src="../assets/images/pc/left.png"
-            alt=""
-          />
-          <img
-            v-show="screenWidth < 900"
-            class="iconimg"
-            src="../assets/images/pc/leftMo.png"
-            alt=""
-          />
-        </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"
-        >
-          <img
-            v-show="screenWidth > 900"
-            class="iconimg"
-            src="../assets/images/pc/right.png"
-            alt=""
-          />
-          <img
-            v-show="screenWidth < 900"
-            class="iconimg"
-            src="../assets/images/pc/rightMo.png"
-            alt=""
-          />
-        </div>
-      </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 @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>
 
@@ -164,6 +82,7 @@
   </div>
 </template>
 
+
 <script>
 export default {
   name: "Home",
@@ -208,7 +127,6 @@ export default {
 
       // 只有标题和文字（没有视频，没有模型，没有图片）
       oneTxt: false,
-      screenWidth: 0,
     };
   },
   watch: {
@@ -230,23 +148,9 @@ export default {
   computed: {},
   components: {},
   methods: {
-    // 本地化 url 适配
-    urlToFitFu(url) {
-      console.log("返回", url);
-      return url;
-      // const resUrl = url;
-      // if (url.includes("https://super.4dage.com")) {
-      //   return url.replace("https://super.4dage.com", "");
-      // } else if (url.includes("http://super.4dage.com")) {
-      //   return url.replace("http://super.4dage.com", "");
-      // } else return resUrl;
-    },
-
     // 点击左右箭头
     cutMyInd(num, flag) {
-      if (flag) {
-        return;
-      }
+      if (flag) return;
       this.myInd += num;
     },
     // 点击查看大图
@@ -257,17 +161,11 @@ export default {
     },
     async getData() {
       // https://www.4dmodel.com/
-
-      let url = `https://super.4dage.com/data/${
-        // 线上数据
-
-        // let url = `/data/${
-        //本地化部署
-        this.id
-      }/hot/js/data.js?time=${Math.random()}`;
+      let url = `https://super.4dage.com/data/${this.id
+        }/hot/js/data.js?time=${Math.random()}`;
       let result = (await this.$http.get(url)).data;
       const resData = result[this.m];
-      // console.log("----", resData);
+      console.log("----", resData);
       if (resData) {
         this.audio = resData.backgroundMusic;
         // 只有单独的音频上传
@@ -296,7 +194,6 @@ export default {
         }
         this.flooTab = arr;
         this.data = obj;
-        console.log("data", this.data);
 
         // 当前type的值 应该为
         if (resData.model) this.myType = "model";
@@ -317,10 +214,6 @@ export default {
   },
   mounted() {
     this.getData();
-    this.screenWidth = document.documentElement.clientWidth;
-    window.onresize = () => {
-      this.screenWidth = document.documentElement.clientWidth;
-    };
   },
 };
 </script>
@@ -330,11 +223,13 @@ export default {
   .viewerCla img {
     display: none;
   }
+
   width: 100%;
   height: 100%;
-  background: url("../assets/bg.jpg");
-  backdrop-filter: blur(30px) !important;
+  background-color: rgba(0, 0, 0, 0.79);
+  // backdrop-filter: blur(10px);
   position: relative;
+
   #myAudio {
     z-index: 11;
     position: absolute;
@@ -343,24 +238,22 @@ export default {
     transform: translate(-50%, -50%);
     width: 500px;
     height: 60px;
-    backdrop-filter: blur(30px) !important;
   }
+
   .main {
-    width: 100%;
+    width: 1200px;
     margin: 0 auto;
     height: 100%;
-    // padding-top: 40px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+    padding-top: 40px;
+
     .mainCon {
       position: relative;
       border-radius: 6px;
       overflow: hidden;
       width: 100%;
-      height: 70%;
-      display: flex;
-      justify-content: center;
+      height: calc(100% - 200px);
+      // background: linear-gradient(#929292, #c5c5c5);
+
       .audioIcon {
         z-index: 10;
         cursor: pointer;
@@ -368,6 +261,7 @@ export default {
         right: 20px;
         bottom: 30px;
       }
+
       .oneTabNum {
         z-index: 10;
         position: absolute;
@@ -376,11 +270,45 @@ export default {
         transform: translateX(-50%);
         font-size: 14px;
       }
+
+      .flooTabBox {
+        z-index: 10;
+        position: absolute;
+        bottom: 30px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+
+        .tabRow {
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          margin: 0 12px;
+          font-size: 12px;
+          background-color: #489182;
+          color: #FCE9AC;
+          padding: 0px 14px;
+          height: 36px;
+          border-radius: 18px;
+
+          &>img {
+            margin-right: 6px;
+          }
+        }
+
+        .tabRowAc {
+          background-color: #EAD5A3;
+          pointer-events: none;
+          color: #489182;
+        }
+      }
+
       .contenBoxMain {
         position: relative;
-        width: 80%;
+        width: 100%;
         height: 100%;
       }
+
       .contenBox {
         width: 100%;
         height: 100%;
@@ -397,26 +325,32 @@ export default {
           width: 100%;
           height: 100%;
         }
+
         .modelBox {
           iframe {
             width: 100%;
             height: 100%;
           }
         }
+
         .videoBox {
-          // padding: 100px 100px 120px;
+          padding: 100px 100px 120px;
+
           video {
             width: 100%;
             height: 100%;
           }
         }
+
         .imgBox {
           // padding: 100px 100px 120px;
+
           .smImgBox {
             width: 100%;
             height: 100%;
             cursor: zoom-in;
-            & > img {
+
+            &>img {
               pointer-events: none;
               width: 100%;
               height: 100%;
@@ -425,135 +359,78 @@ export default {
           }
         }
       }
+
       .contenBoxAc {
         opacity: 1;
         pointer-events: auto;
       }
+
       .awccJJ {
         cursor: pointer;
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         left: 10px;
-        width: 40px;
-        height: 40px;
+        width: 37px;
+        height: 37px;
         background-image: url("../assets/images/pc/left.png");
         background-size: 100% 100%;
-        .iconimg {
-          display: none;
-        }
+
         &:focus {
           outline: none;
         }
       }
+
       .rightJJ {
         left: auto;
         right: 10px;
         background-image: url("../assets/images/pc/right.png");
       }
+
       .noClick {
         cursor: default;
         opacity: 0.4;
       }
     }
 
-    .flooTabBox {
-      z-index: 10;
-      // position: absolute;
-      // bottom: 23%;
-      // left: 50%;
-      // transform: translateX(-50%);
-      display: flex;
-      justify-content: center;
-      margin-top: 20px;
-      .tabRow {
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        margin: 0 12px;
-        font-size: 14px;
-        background: linear-gradient(#070c2b, #162162);
-        padding: 0px 14px;
-        height: 30px;
-        border-radius: 18px;
-        color: #17c7fc;
-        & > img {
-          margin-right: 6px;
-          width: 20px;
-        }
-      }
-      .tabRowAc {
-        background: linear-gradient(
-          #0175c2,
-          #0481cb,
-          #10a9e7,
-          #16c2f9,
-          #19cbff
-        );
-        pointer-events: none;
-        font-weight: 400;
-        color: #ffffff;
-      }
-    }
     .flooTxt {
       margin-top: 20px;
       width: 100%;
-      // height: 160px;
+      height: 160px;
+
       .flooTxtBox {
         width: 100%;
         height: 100%;
         overflow-y: auto;
-        text-align: center;
+
         .myTitle {
-          color: #ffffff;
+          color: #fff;
           font-size: 22px;
           font-weight: 700;
           margin-bottom: 10px;
-          // text-align: center;
-          // font-family: "SourceHanSerifCN-Bold";
+          text-align: center;
         }
+
         .myTxt {
-          // font-size: 16px;
-          // color: #ffffff;
-          // line-height: 24px;
-          // text-indent: 2em;
           font-size: 16px;
-          color: #fff;
+          color: #ffffff;
           line-height: 24px;
-          text-indent: 2em;
-          max-height: 10vh;
-          width: 90%;
-          margin: auto;
-          overflow: auto;
-          &::-webkit-scrollbar {
-            /*滚动条整体样式*/
-            width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
-            height: 1px;
-          }
-          &::-webkit-scrollbar-thumb {
-            /*滚动条里面小方块*/
-            border-radius: 10px;
-            -webkit-box-shadow: inset 0 0 5px transparent;
-            background: #19cbff;
-          }
-          &::-webkit-scrollbar-track {
-            /*滚动条里面轨道*/
-            -webkit-box-shadow: inset 0 0 5px transparent;
-            border-radius: 10px;
-            background: transparent;
-          }
         }
+
         &::-webkit-scrollbar {
           /*滚动条整体样式*/
-          width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
+          width: 3px;
+          /*高宽分别对应横竖滚动条的尺寸*/
           height: 1px;
         }
+
         &::-webkit-scrollbar-thumb {
           /*滚动条里面小方块*/
           border-radius: 10px;
           -webkit-box-shadow: inset 0 0 5px transparent;
-          background: #19cbff;
+          background: #EAD5A3;
         }
+
         &::-webkit-scrollbar-track {
           /*滚动条里面轨道*/
           -webkit-box-shadow: inset 0 0 5px transparent;
@@ -562,151 +439,125 @@ export default {
         }
       }
     }
+
     .flooTxtOne {
       height: 600px;
     }
   }
 }
+
 // 移动端
 @media screen and (max-width: 1000px) {
-  ::-webkit-scrollbar-thumb {
-    background: #19cbff;
-    border-radius: 50px;
-  }
-  ::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
-  }
   .home {
-    background: url("../assets/bgMo.jpg");
-    backdrop-filter: blur(30px);
     #myAudio {
       width: 90vw;
       max-width: 500px;
     }
+
     .main {
-      width: 100%;
-      height: 100%;
+      width: 90%;
+      height: 94%;
       padding: 0;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      justify-content: space-between;
 
       .mainCon {
-        flex: 0 0 auto;
-        border-radius: 0 0 0 0;
-        margin-top: 30%;
-        height: 35%;
+        border-radius: 8px 8px 0 0;
+
         .audioIcon {
           cursor: default;
           right: auto;
           bottom: auto;
           top: 6px;
           left: 6px;
-          img {
+
+          &>img {
             width: 30px;
           }
         }
 
-        .contenBoxMain {
+        .flooTabBox {
           width: 100%;
-          height: 100%;
+          bottom: 20px;
+          justify-content: center;
+
+          .tabRow {
+            cursor: default;
+            margin: 0 6px;
+            padding: 0 10px;
+            height: 32px;
+
+            &>img {
+              width: 16px;
+            }
+          }
         }
 
         .contenBox {
           .videoBox {
             padding: 0px 0;
             position: relative;
+
             video {
-              width: 100%;
+              width: 96%;
               max-height: 100%;
               height: auto;
               position: absolute;
               top: 50%;
+              left: 2%;
               transform: translateY(-50%);
-              background-color: black;
             }
           }
+
           .imgBox {
             // padding: 60px 50px 80px;
+
             .smImgBox {
               cursor: default;
             }
           }
         }
-        .awccJJ {
-          left: 0px;
-          width: 5%;
-          height: 100%;
-          display: flex;
-          justify-content: left;
-          align-items: center;
 
-          // height: px;
+        .awccJJ {
+          left: 0;
+          width: 28px;
+          height: 57px;
           cursor: default;
-          background-image: none;
-          // background-size: 50% 50%;
-          .iconimg {
-            display: block;
-            width: 100%;
-          }
+          background-image: url("../assets/images/pc/icon-left.png");
         }
+
         .rightJJ {
           left: auto;
-          // right: 15px;
-          right: 0px;
-          background-image: none;
-          justify-content: right;
-        }
-      }
-      .flooTabBox {
-        width: 100%;
-        bottom: 20px;
-        justify-content: center;
-        margin-top: 15px;
-        .tabRow {
-          cursor: default;
-          margin: 0 6px;
-          padding: 0 10px;
-          height: 25px;
-          font-size: 14px;
-          & > img {
-            width: 16px;
-          }
+          right: 0;
+          background-image: url("../assets/images/pc/icon-right.png");
         }
       }
+
       .flooTxt {
-        flex: 1 0 1px;
-        max-height: 300px;
-        min-height: 180px;
-        left: 0;
-        bottom: 0;
-        padding: 30px;
-        box-sizing: border-box;
-        background: linear-gradient(180deg, #070c2b 0%, #162162 100%);
-        border-radius: 40px 40px 0 0;
-        margin-top: 30px;
-        overflow: initial;
+        margin-top: 0;
+        padding: 20px 15px 15px;
+        height: 200px;
+        // background-color: #fff;
+        border-radius: 0 0 8px 8px;
+
         .flooTxtBox {
-          overflow-y: hidden;
           .myTitle {
             font-size: 18px;
           }
+
           .myTxt {
             font-size: 14px;
             line-height: 22px;
-            height: calc(100% - 36px);
-            max-height: initial;
-            overflow: auto;
           }
         }
       }
+
       .flooTxtOne {
         height: 100%;
       }
     }
   }
-}
-</style>
+}</style>
+

zhengquan/src/utils/https.ts

@@ -1,7 +1,7 @@
 // 本地开发
-const baseUrl = "/staticData";
+// const baseUrl = "/staticData";
 
 // 线上开发
-// const baseUrl = './staticData'
+const baseUrl = './staticData'
 
 export default baseUrl;

zhengquan/src/views/Scene/ScenePage.vue

@@ -89,7 +89,7 @@ onMounted(() => {
 
 <template>
   <div class='all'>
-    <iframe id="sceneiframe" :src="`/scene/index.html?m=${currentUnit.code}`"></iframe>
+    <iframe id="sceneiframe" :src="`./scene/index.html?m=${currentUnit.code}`"></iframe>
     <!-- 热点列表 -->
     <div v-show="isShowHosList" class="hots-box">
       <img v-show="browser.mobile" @click="isShowHosList = false" class="close-icon" src="@/assets/images/close-icon.png"