hot/src/App.vue

@@ -1,16 +1,16 @@
 <template>
   <div id="app">
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
 <style lang="less">
-html,body{
+html, body {
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
-*{
+* {
   margin: 0;
   padding: 0;
 }
@@ -18,5 +18,4 @@ html,body{
   width: 100%;
   height: 100%;
 }
-
 </style>

hot/src/views/Home.vue

@@ -3,55 +3,99 @@
     <div class="main">
       <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>
+        <audio
+          id="myAudio"
+          v-if="audio"
+          v-show="isOneAduio"
+          :src="urlToFitFu(audio)"
+          controls
+        ></audio>
         <!-- 如果只有一个模块 -->
-        <div class="oneTabNum" v-if="
+        <!-- <div class="oneTabNum" v-if="
           flooTab.length === 1 &&
           data[myType] &&
           data[myType].length &&
           data[myType].length > 1
         ">
           {{ myInd + 1 }} / {{ data[myType].length }}
-        </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="urlToFitFu(item)" frameborder="0" v-if="index === myInd"></iframe>
-            </div>
-            <!-- 视频页面 -->
-            <div class="videoBox" v-else-if="myType === 'video'">
-              <video controls controlslist="nodownload" :src="urlToFitFu(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="contenBoxMain swiper-container">
+          <div class="swiper-wrapper">
+            <div
+              class="contenBox swiper-slide"
+              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>
+              </div>
+              <!-- 视频页面 -->
+              <div class="videoBox" v-else-if="myType === 'video'">
+                <video
+                  controls
+                  controlslist="nodownload"
+                  :src="urlToFitFu(item.url)"
+                  v-if="index === myInd"
+                ></video>
+              </div>
+              <!-- 图片页面 -->
+              <div class="imgBox" v-else-if="myType === 'img'">
+                <div class="smImgBox">
+                  <img
+                    v-lazy="urlToFitFu(item)"
+                    alt=""
+                    @click="lookImg(urlToFitFu(item))"
+                  />
+                </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>
+          <template v-if="!isMobile">
+            <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>
+          </template>
         </div>
       </div>
 
+      <div
+        class="swiper-pagination"
+        v-if="data[myType] && data[myType].length > 1"
+      ></div>
+
       <!-- 下面的文字介绍 -->
       <div class="flooTxt" :class="{ flooTxtOne: oneTxt }">
         <div class="flooTxtBox">
           <!-- <div class="myTitle">{{ myTitle }}</div> -->
           <!-- 视频的介绍 -->
-          <div class="myTxt" v-if="myType === 'video' && videoTxt[myInd]" v-html="videoTxt[myInd]">
-          </div>
-          <div class="myTxt" v-if="myType === 'img' && imgTxt[myInd]" v-html="imgTxt[myInd]">
-          </div>
+          <div
+            class="myTxt"
+            v-if="myType === 'video' && videoTxt[myInd]"
+            v-html="videoTxt[myInd]"
+          ></div>
+          <div
+            class="myTxt"
+            v-if="myType === 'img' && imgTxt[myInd]"
+            v-html="imgTxt[myInd]"
+          ></div>
           <div class="myTxt" v-html="myTxt"></div>
         </div>
       </div>
@@ -63,24 +107,45 @@
 
     <!-- 底部的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="" />
+      <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=""
+        />
         <div>
           {{ 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>
+          <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="tabRow" v-if="audio && !isOneAduio" @click="audioSta = !audioSta" :title="audioSta ? '关闭音频' : '打开音频'">
-        <img :src="require(`@/assets/images/pc/audio${audioSta ? 'Ac' : ''}.png`)" alt="" />
+      <div
+        class="tabRow"
+        v-if="audio && !isOneAduio"
+        @click="audioSta = !audioSta"
+        :title="audioSta ? '关闭音频' : '打开音频'"
+      >
+        <img
+          :src="require(`@/assets/images/pc/audio${audioSta ? 'Ac' : ''}.png`)"
+          alt=""
+        />
         <div>音频</div>
       </div>
     </div>
@@ -88,10 +153,15 @@
 </template>
 
 <script>
+import Swiper from "swiper";
+import "swiper/css/swiper.min.css";
+
 export default {
   name: "Home",
+  components: {},
   data() {
     return {
+      isMobile: /iPhone|iPad|iPod|Android/i.test(navigator.userAgent),
       m: this.$route.query.m,
       id: this.$route.query.id,
       // 音频地址
@@ -131,52 +201,56 @@ export default {
 
       // 只有标题和文字（没有视频，没有模型，没有图片）
       oneTxt: false,
-      baseUrl: ''
-    }
+      baseUrl: "",
+    };
   },
   watch: {
     myType() {
-      this.myInd = 0
+      this.myInd = 0;
     },
     // 音频的开启和关闭
     audioSta(val) {
-      const dom = document.querySelector("#myAudio")
+      const dom = document.querySelector("#myAudio");
       if (val) {
-        dom.play()
+        dom.play();
         dom.onended = () => {
           // console.log("----音频播放完毕");
-          this.audioSta = false
-        }
-      } else dom.pause()
+          this.audioSta = false;
+        };
+      } else dom.pause();
     },
   },
   computed: {},
-  components: {},
   methods: {
     // 本地化 url 适配
     urlToFitFu(url) {
-      // return url
-      const resUrl = url
+      // return url;
+      const resUrl = url;
       if (url.includes("https://super.4dage.com")) {
-        return url.replace("https://super.4dage.com", this.baseUrl)
+        return url.replace("https://super.4dage.com", this.baseUrl);
       } else if (url.includes("http://super.4dage.com")) {
-        return url.replace("http://super.4dage.com", this.baseUrl)
-      } else return resUrl
+        return url.replace("http://super.4dage.com", this.baseUrl);
+      } else return resUrl;
     },
 
     // 点击左右箭头
-    cutMyInd(num, flag) {
-      if (flag) return
-      this.myInd += num
+    cutMyInd(num) {
+      console.log(num, this.swiper);
+      if (!this.swiper) return;
+      if (num > 0) {
+        this.swiper.slideNext();
+      } else {
+        this.swiper.slidePrev();
+      }
     },
     // 点击查看大图
     lookImg(url) {
       // console.log(url)
-      let dom = this.$refs.viewer.$viewer
-      this.lookPics = [url]
+      let dom = this.$refs.viewer.$viewer;
+      this.lookPics = [url];
       // console.log(Object.keys(dom))
-      dom.options.toolbar = false
-      dom.show()
+      dom.options.toolbar = false;
+      dom.show();
     },
     async getData() {
       // https://www.4dmodel.com/
@@ -184,15 +258,15 @@ export default {
       // let url = `https://super.4dage.com/data/${
       // 线上数据
 
-      let url = `${this.baseUrl}data/${
+      let url = `../scene/data/${
         //本地化部署
         this.id
-        }/hot/js/data.js?time=${Math.random()}`
-      let result = (await this.$http.get(url)).data
-      const resData = result[this.m]
+      }/hot/js/data.js?time=${Math.random()}`;
+      let result = (await this.$http.get(url)).data;
+      const resData = result[this.m];
       // console.log("----", resData);
       if (resData) {
-        this.audio = resData.backgroundMusic
+        this.audio = resData.backgroundMusic;
         // 只有单独的音频上传
         if (
           resData.backgroundMusic &&
@@ -200,50 +274,62 @@ export default {
           !resData.video &&
           !resData.images
         ) {
-          this.isOneAduio = true
+          this.isOneAduio = true;
         }
         // 底部的tab
-        const arr = []
-        const obj = {}
+        const arr = [];
+        const obj = {};
         if (resData.model) {
-          obj.model = resData.model
-          arr.push({ id: 1, type: "model", name: "模型" })
+          obj.model = resData.model;
+          arr.push({ id: 1, type: "model", name: "模型" });
         }
         if (resData.video) {
-          obj.video = resData.video
-          arr.push({ id: 2, type: "video", name: "视频" })
+          obj.video = resData.video;
+          arr.push({ id: 2, type: "video", name: "视频" });
         }
         if (resData.images) {
-          obj.img = resData.images
-          arr.push({ id: 3, type: "img", name: "图片" })
+          obj.img = resData.images;
+          arr.push({ id: 3, type: "img", name: "图片" });
         }
-        this.flooTab = arr
-        this.data = obj
+        this.flooTab = arr;
+        this.data = obj;
 
         // 当前type的值 应该为
-        if (resData.model) this.myType = "model"
-        else if (resData.video) this.myType = "video"
-        else if (resData.images) this.myType = "img"
+        if (resData.model) this.myType = "model";
+        else if (resData.video) this.myType = "video";
+        else if (resData.images) this.myType = "img";
 
-        this.myTitle = resData.title || ""
-        this.myTxt = resData.content || ""
-        this.videoTxt = resData.videosDesc || []
-        this.imgTxt = resData.imagesDesc || []
+        this.myTitle = resData.title || "";
+        this.myTxt = resData.content || "";
+        this.videoTxt = resData.videosDesc || [];
+        this.imgTxt = resData.imagesDesc || [];
 
         // 只有 标题和 文字介绍（没有视频，没有模型，没有图片）
         if (!obj.model && !obj.video && !obj.img && !resData.backgroundMusic) {
-          this.oneTxt = true
+          this.oneTxt = true;
         }
+
+        this.$nextTick(() => {
+          const _this = this;
+          this.swiper = new Swiper(".contenBoxMain", {
+            on: {
+              slideChange() {
+                _this.myInd = this.activeIndex;
+              },
+            },
+            pagination: {
+              el: ".swiper-pagination",
+            },
+          });
+        });
       }
     },
   },
   mounted() {
-    this.baseUrl = window.location.href.split('hot')[0] + 'scene/'
-
-
-    this.getData()
+    this.baseUrl = window.location.href.split("hot")[0] + "scene/";
+    this.getData();
   },
-}
+};
 </script>
 
 <style lang="less" scoped>
@@ -253,15 +339,31 @@ export default {
   background-size: 100% 100%;
   border-radius: 10px;
   color: rgba(80, 61, 42, 0.9);
+  .swiper-pagination {
+    margin: 10px 0 0;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    width: 100%;
+
+    :deep(.swiper-pagination-bullet) {
+      width: 24px;
+      height: 4px;
+      border-radius: 2px;
+      background: #66442c49;
+      opacity: 1;
+
+      &.swiper-pagination-bullet-active {
+        background: #603c23;
+      }
+    }
+  }
   .viewerCla img {
     display: none;
   }
-  position: relative;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 60%;
-  height: 65%;
+  height: 100%;
   position: relative;
   #myAudio {
     z-index: 11;
@@ -292,7 +394,7 @@ export default {
       border-radius: 6px;
       overflow: hidden;
       width: 100%;
-      height: calc(100% - 200px);
+      height: calc(100% - 300px);
       .oneTabNum {
         z-index: 10;
         position: absolute;
@@ -308,15 +410,6 @@ export default {
         height: 100%;
       }
       .contenBox {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        opacity: 0;
-        pointer-events: none;
-        transition: all 0.5s;
-
         .modelBox,
         .videoBox,
         .imgBox {
@@ -343,7 +436,6 @@ export default {
             height: 100%;
             // cursor: zoom-in;
             & > img {
-              pointer-events: none;
               width: 100%;
               height: 100%;
               object-fit: contain;
@@ -351,27 +443,24 @@ export default {
           }
         }
       }
-      .contenBoxAc {
-        opacity: 1;
-        pointer-events: auto;
-      }
       .awccJJ {
         cursor: pointer;
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
-        left: 10px;
-        width: 30px;
-        height: 40px;
+        left: 30px;
+        width: 16px;
+        height: 30px;
         background-image: url("../assets/images/pc/left.png");
         background-size: 100% 100%;
+        z-index: 1;
         &:focus {
           outline: none;
         }
       }
       .rightJJ {
         left: auto;
-        right: 10px;
+        right: 30px;
         background-image: url("../assets/images/pc/right.png");
       }
       .noClick {
@@ -381,9 +470,10 @@ export default {
     }
     .flooTxt {
       margin: 0 auto;
-      margin-top: 20px;
+      margin-top: 10px;
       width: 70%;
-      max-height: 120px;
+      height: 100%;
+      max-height: 200px;
       .flooTxtBox {
         width: 100%;
         height: 100%;
@@ -457,11 +547,17 @@ export default {
 // 移动端
 @media screen and (max-width: 1000px) {
   .home {
-    width: 90%;
-    height: 55%;
     background: url("../assets/images/pc/hot_bg_M.png") no-repeat center center;
     background-size: cover !important;
-    transform: translate(-50%, -65%);
+    .swiper-pagination {
+      margin: 10px 0 0;
+      gap: 4px;
+
+      :deep(.swiper-pagination-bullet) {
+        width: 15px;
+        height: 3px;
+      }
+    }
     #myAudio {
       width: 90vw;
       max-width: 500px;
@@ -473,6 +569,7 @@ export default {
       position: absolute;
       .myTitle {
         font-size: 16px;
+        margin: 8px 0;
       }
       .mainCon {
         border-radius: 0;
@@ -516,9 +613,10 @@ export default {
         margin-top: -5px;
         width: 100%;
         padding: 10px 15px 0px 15px;
-        max-height: 98px;
+        max-height: 250px;
 
         .flooTxtBox {
+          padding: 0;
           .myTxt {
             font-size: 14px;
             line-height: 22px;

WuhanMuseumScene/README.md

@@ -0,0 +1 @@
+dev 启动

scene/public/css/main.css

@@ -2952,7 +2952,7 @@ html {
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 2),
-  only screen and (-o-min-device-pixel-ratio: 2) {
+only screen and (-o-min-device-pixel-ratio: 2) {
   .gui-floorplan-label-mobile {
     font-size: 65%;
     border-radius: 1px;
@@ -2960,7 +2960,7 @@ html {
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 3),
-  only screen and (-o-min-device-pixel-ratio: 3) {
+only screen and (-o-min-device-pixel-ratio: 3) {
   .gui-floorplan-label-mobile {
     font-size: 65%;
     border-radius: 1px;
@@ -3647,7 +3647,7 @@ ul {
   height: auto;
 }
 
-@media only screen and (max-width: 600px), (max-height: 600px) {
+@media only screen and (max-width: 1000px), (max-height: 600px) {
   #quick-logo img {
     width: 150px;
     height: auto;
@@ -3753,7 +3753,7 @@ a.tag-link {
   height: 22px;
   line-height: 20px;
   left: 0px;
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#262626', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#262626', GradientType=0);
   font-size: 16px;
   text-align: center;
   -webkit-border-radius: 6px;
@@ -5836,12 +5836,7 @@ a.hasHover.tag-link:hover {
   #help-dialog.desktop.es-MX .interactions .bottom-info,
   #help-dialog.desktop.es-MX.dollhouse .interactions .bottom-info,
   #help-dialog.desktop.fr-FR.dollhouse .interactions .bottom-info,
-  #help-dialog.desktop.fr-FR.floorplan
-    .interactions
-    .bottom-info
-    #help-dialog.desktop.fr-FR
-    .interactions
-    .bottom-info {
+  #help-dialog.desktop.fr-FR.floorplan .interactions .bottom-info #help-dialog.desktop.fr-FR .interactions .bottom-info {
     top: 65%;
   }
   #help-dialog.desktop.es-MX.dollhouse .interactions .bottom-info,
@@ -6509,7 +6504,7 @@ a.hasHover.tag-link:hover {
 }
 
 @media only screen and (min-height: 650px) and (min-width: 650px) and (max-aspect-ratio: 650/800),
-  (min-aspect-ratio: 800/650) and (min-height: 650px) and (min-width: 650px) {
+(min-aspect-ratio: 800/650) and (min-height: 650px) and (min-width: 650px) {
   #help-dialog.mobile .interactions .top-info,
   #help-dialog.mobile.fr-FR.dollhouse .interactions .top-info {
     font-size: 21px;
@@ -7622,7 +7617,7 @@ a.hasHover.tag-link:hover {
   }
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 1000px) {
   #myCompany {
     width: 200px;
   }
@@ -7678,12 +7673,12 @@ a.hasHover.tag-link:hover {
   }
 }
 
-@media screen and (orientation: landscape) {
+/* @media screen and (orientation: landscape) {
   .viewContainer,
   #gui-modes-map {
     display: block !important;
   }
-}
+} */
 
 @media only screen and (max-width: 370px) {
   #gui-name {
@@ -8017,4 +8012,4 @@ a.hasHover.tag-link:hover {
     opacity: 1;
     margin-top: 0;
   }
-}
+}

scene/public/css/main.css.bak

@@ -3167,7 +3167,7 @@ body,html {
     height: auto
 }
 
-@media only screen and (max-width: 600px),(max-height:600px) {
+@media only screen and (max-width: 1000px),(max-height:600px) {
     #quick-logo img {
         width:150px;
         height: auto

scene/public/css/oldVer/main0.css

@@ -57,20 +57,29 @@ iframe {
 }
 
 #popup {
-  text-align: center;
-  padding: 0;
-  position: relative;
-  width: 100%;
-  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
   /* margin: 80px auto; */
   display: none;
   z-index: 999999;
-  background: rgba(0, 0, 0, 0.6);
 }
-.popup-content {
-  position: relative;
+.popup-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 30px;
   width: 100%;
   height: 100%;
+}
+.popup-content {
+  position: relative;
+  width: 80%;
+  height: 85%;
   overflow: hidden;
 }
 #id1 {
@@ -82,14 +91,14 @@ iframe {
 }
 #closepop {
   background: url(../../images/close1.png) no-repeat;
-  width: 30px;
-  height: 30px;
+  width: 45px;
+  height: 45px;
   cursor: pointer;
-  position: absolute;
-  right: 405px;
-  top: 185px;
   text-indent: -999em;
   background-size: 100% 100%;
+  position: absolute;
+  top: 80px;
+  right: 200px;
 }
 .specialTitle {
   bottom: 65%;
@@ -189,16 +198,18 @@ a {
   #closepop {
     width: 45px;
     height: 45px;
-    top: 50%;
-    right: 50%;
-    transform: translate(50%, 156px);
   }
   .specialTitle {
     bottom: 66%;
     font-size: 26px;
   }
 }
-
+@media screen and (max-width: 1000px) {
+  .popup-content {
+    width: 90%;
+    height: 80%;
+  }
+}
 @media screen and (max-width: 768px) {
   .specialTitle {
     bottom: 62%;
@@ -221,11 +232,11 @@ a {
 }
 @media screen and (max-width: 667px) {
   #closepop {
-    width: 45px;
-    height: 45px;
-    top: 50%;
-    right: 50%;
-    transform: translate(50%, 176px);
+    width: 30px;
+    height: 30px;
+    position: absolute;
+    top: 70px;
+    right: 25px;
   }
 
   #title-toggle {
@@ -284,4 +295,4 @@ a {
   .pinTop {
     top: 0px;
   }
-}
+}

WuhanMuseumScene/public/hottemp/css/style.css

@@ -0,0 +1,204 @@
+button {
+  background: transparent;
+}
+html, body {
+  width: 100%;
+  height: 100%;
+  font-family: "Microsoft YaHei";
+  margin: 0px;
+  overflow: hidden;
+}
+body {
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+.wrapper {
+  width: 64%;
+  height: 100%;
+  margin: 0 auto;
+  padding-top: 100px;
+}
+.contioner {
+  overflow: hidden;
+}
+.wrap-img, .wrap-video, .wrap-model {
+  background: rgba(0, 0, 0, 0.8);
+  width: 100%;
+  height: 100%;
+  display: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.wrap-img img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.wrap-img > div, .wrap-video > video, .wrap-model > div {
+  width: 100%;
+  height: 100%;
+}
+.footer-title {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+.footer-text {
+  margin-top: 20px;
+}
+.footer-title h3 {
+  font-size: 20px;
+  color: #fff;
+  font-weight: 600;
+}
+.wrap-iframe {
+  height: 100%;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+.wrap-iframe iframe, .wrap-model iframe {
+  width: 100%;
+  height: 99%;
+}
+.footer-btn button {
+  font-size: 14px;
+  color: #fff;
+  width: 90px;
+  height: 32px;
+  line-height: 32px;
+  cursor: pointer;
+  border-radius: 10px;
+  border: solid 1px #fff;
+  margin-right: 10px;
+}
+.footer-btn button.active {
+  background: #19bbed;
+  border: none;
+}
+.footer-text {
+  color: #fff;
+  line-height: 120%;
+  position: relative;
+  text-align: justify;
+}
+.img-icon {
+  background: url("https://super.4dage.com/data/388/hot/images/img-icon.png")no-repeat left top;
+}
+.video-icon {
+  background: url("https://super.4dage.com/data/388/hot/images/video-icon.png")no-repeat left top;
+}
+.model-icon {
+  background: url("https://super.4dage.com/data/388/hot/images/model-icon.png")no-repeat left top;
+}
+.iframe-icon {
+  background: url("https://super.4dage.com/data/388/hot/images/iframe-icon.png")no-repeat left top;
+}
+.footer-btn i {
+  display: inline-block;
+  position: relative;
+  top: 4px;
+  background-size: 100%;
+  width: 18px;
+  position: relative;
+  height: 18px;
+  margin-right: 5px;
+}
+.footer-mask {
+  position: absolute;
+  /* background: linear-gradient(rgba(61,61,61,0) 0%, rgba(61,61,61,0.9) 40%,  rgba(61,61,61,1) 60%,rgba(61,61,61,0) 100%);*/
+  z-index: 10;
+  bottom: -16px;
+  left: 0;
+  width: 100%;
+  height: 50%;
+}
+
+.pinch-zoom-container {
+  height: 100%;
+}
+
+@media screen and (max-width: 1600px) {
+  .wrapper {
+    width: 76%;
+    padding-top: 70px;
+  }
+
+}
+@media screen and (max-width: 1000px) {
+  .wrapper {
+    width: 86%;
+    padding-top: 50px;
+  }
+}
+@media screen and (max-width: 700px) {
+  .footer-title h3 {
+    font-size: 16px;
+  }
+  .footer-text {
+    font-size: 14px;
+    margin-top: 10px;
+    padding: 0 6px;
+    line-height: 150%;
+  }
+  .footer-text p {
+    text-indent: 28px;
+  }
+  .wrapper {
+    width: 94%;
+    padding-top: 30px;
+  }
+  .footer-title {
+    flex-direction: column-reverse;
+    align-items: center;
+    margin-top: 10px;
+  }
+  .footer-btn {
+    margin-bottom: 10px;
+  }
+  .ui-icon-before:before {
+    left: 4px;
+  }
+
+}
+@media screen and (max-width: 1000px) {
+  .wrapper {
+    width: 100%;
+    padding-top: 34px;
+  }
+  .o-slider--item {
+    background: rgba(0, 0, 0, 0.4);
+  }
+}
+@media screen and (max-width: 400px) {}
+
+
+::-webkit-scrollbar
+/*整体部分*/
+  {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track
+/*滑动轨道*/
+  {
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0px;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+::-webkit-scrollbar-thumb
+/*滑块*/
+  {
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(192, 192, 192, 0.2);
+  background: rgba(192, 192, 192, 0.2);
+}
+
+::-webkit-scrollbar-thumb:hover
+/*滑块效果*/
+  {
+  border-radius: 5px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.4);
+}

scene/public/hottemp/css/video.css

@@ -64,7 +64,9 @@
 .playPause.ui-icon.fa-pause {
   opacity: 0;
 }
-.video-index{ height: 100%;}
+.video-index {
+  height: 100%;
+}
 .ui {
   color: #fff;
   padding: 10px 1vw;
@@ -127,7 +129,7 @@
   color: rgba(0, 0, 0, 0.6);
 }
 .fullscreen:hover:before {
-  color: rgba(0,0,0, 0.8);
+  color: rgba(0, 0, 0, 0.8);
 }
 
 .ui-icon {
@@ -170,7 +172,7 @@
 }
 
 .progress-buffer {
-  background-color:#cccccc;
+  background-color: #cccccc;
   -moz-transition: width 250ms linear;
   -o-transition: width 250ms linear;
   -webkit-transition: width 250ms linear;
@@ -203,9 +205,17 @@
 .volumeControl .ui-slider-handle:focus {
   outline: none;
 }
-.ui-icon-before{display: flex;justify-content: center;align-items: center;width: 120px;height: 120px;background:rgba(0, 0, 0, 0.8);border-radius:50%;}
-.ui-icon-before:before{
-  content:"\f04b";
+.ui-icon-before {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 120px;
+  height: 120px;
+  background: rgba(0, 0, 0, 0.8);
+  border-radius: 50%;
+}
+.ui-icon-before:before {
+  content: "\f04b";
   font-size: 50px;
   color: rgba(255, 255, 255, 0.8);
   z-index: 2;
@@ -213,12 +223,19 @@
   position: relative;
   left: 5px;
 }
-.fa-play:before{ content:""; }
-@media screen and (max-width: 600px){
-  .ui-icon-before{width: 60px;height: 60px;}
-  .ui-icon-before:before{
+.fa-play:before {
+  content: "";
+}
+@media screen and (max-width: 1000px) {
+  .ui-icon-before {
+    width: 60px;
+    height: 60px;
+  }
+  .ui-icon-before:before {
     font-size: 35px;
     left: 3px;
   }
-  .ui{padding: 2px 1vw;}
+  .ui {
+    padding: 2px 1vw;
+  }
 }