bswl-开发

hot/src/views/Home.vue

@@ -3,7 +3,13 @@
     <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="
           flooTab.length === 1 &&
@@ -18,31 +24,54 @@
 
         <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="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>
+                <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>
+                <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))" />
+                  <img
+                    v-lazy="urlToFitFu(item)"
+                    alt=""
+                    @click="lookImg(urlToFitFu(item))"
+                  />
                 </div>
               </div>
             </div>
           </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>
+            <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>
@@ -54,10 +83,16 @@
         <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>
@@ -69,24 +104,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>
@@ -94,13 +150,12 @@
 </template>
 
 <script>
-import Swiper from "swiper"
-import "swiper/css/swiper.min.css"
+import Swiper from "swiper";
+import "swiper/css/swiper.min.css";
 
 export default {
   name: "Home",
-  components: {
-  },
+  components: {},
   data() {
     return {
       isMobile: /iPhone|iPad|iPod|Android/i.test(navigator.userAgent),
@@ -143,29 +198,29 @@ export default {
 
       // 只有标题和文字（没有视频，没有模型，没有图片）
       oneTxt: false,
-    }
+    };
   },
   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: {},
   methods: {
     // 本地化 url 适配
     urlToFitFu(url) {
-      return url
+      return url;
       // const resUrl = url;
       // if (url.includes("https://super.4dage.com")) {
       //   return url.replace("https://super.4dage.com", "");
@@ -176,22 +231,22 @@ export default {
 
     // 点击左右箭头
     cutMyInd(num) {
-      console.log(num, this.swiper)
-      if (!this.swiper) return
+      console.log(num, this.swiper);
+      if (!this.swiper) return;
       if (num > 0) {
-        this.swiper.slideNext()
+        this.swiper.slideNext();
       } else {
-        this.swiper.slidePrev()
+        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/
@@ -202,12 +257,12 @@ export default {
         // let url = `/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 &&
@@ -215,62 +270,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', {
+          const _this = this;
+          this.swiper = new Swiper(".contenBoxMain", {
             on: {
               slideChange() {
-                _this.myInd = this.activeIndex
-              }
+                _this.myInd = this.activeIndex;
+              },
             },
             pagination: {
-              el: '.swiper-pagination',
+              el: ".swiper-pagination",
               clickable: true,
-            }
-          })
-        })
+            },
+          });
+        });
       }
     },
   },
   mounted() {
-    this.getData()
+    this.getData();
   },
-}
+};
 </script>
 
 <style lang="less" scoped>
@@ -279,7 +334,7 @@ export default {
   background-color: rgba(transparent, 0.8);
   background-size: 100% 100%;
   border-radius: 10px;
-  color: rgba(80, 61, 42, 0.9);
+  color: #f0ece0;
   .swiper-pagination {
     margin: 10px 0 0;
     position: relative;
@@ -297,7 +352,7 @@ export default {
       opacity: 1;
 
       &.swiper-pagination-bullet-active {
-        background: #603C23;
+        background: #603c23;
       }
     }
   }
@@ -390,8 +445,8 @@ export default {
         top: 50%;
         transform: translateY(-50%);
         left: 30px;
-        width: 16px;
-        height: 30px;
+        width: 40px;
+        height: 40px;
         background-image: url("../assets/images/pc/left.png");
         background-size: 100% 100%;
         z-index: 1;
@@ -402,7 +457,8 @@ export default {
       .rightJJ {
         left: auto;
         right: 30px;
-        background-image: url("../assets/images/pc/right.png");
+        background: url("../assets/images/pc/right.png") no-repeat;
+        background-size: cover;
       }
       .noClick {
         cursor: default;
@@ -422,7 +478,7 @@ export default {
 
         .myTxt {
           font-size: 16px;
-          color: #333333;
+          color: #f0ece0;
           line-height: 24px;
         }
         &::-webkit-scrollbar {