feat6

hot/src/views/Home.vue

@@ -1,17 +1,8 @@
 <template>
   <div class="home">
     <div class="main">
-      <div
-        v-show="selectedTitle !== '揭開看看吧！'"
-        :class="['mainCon', { noImg: !activeObj.images[myInd]?.url }]"
-      >
-        <audio
-          id="myAudio"
-          v-if="audio"
-          v-show="isOneAduio"
-          :src="urlToFitFu(audio)"
-          controls
-        ></audio>
+      <div v-show="selectedTitle !== '揭開看看吧！'" :class="['mainCon', { noImg: !activeObj.images[myInd]?.url }]">
+        <audio id="myAudio" v-if="audio" v-show="isOneAduio" :src="urlToFitFu(audio)" controls></audio>
 
         <!-- 如果只有一个模块 -->
         <!-- <div
@@ -60,13 +51,7 @@
 
         <div class="contenBoxMain">
           <img class="logo" src="../assets/logo.png" alt="" />
-          <div
-            class="contenBox"
-            v-show="!onImg"
-            :class="{ contenBoxAc: index === myInd }"
-            v-for="(item, index) in filteredImages"
-            :key="item.url"
-          >
+          <div class="contenBox" v-show="!onImg" :class="{ contenBoxAc: index === myInd }" v-for="(item, index) in filteredImages" :key="item.url">
             <!-- 模型页面 -->
             <!-- <div class="modelBox" v-if="myType === 'model'">
               <iframe
@@ -87,56 +72,20 @@
             <div class="imgBox">
               <div class="smImgBox">
                 <video
-                  v-if="
-                    (/\.(mp4|webm|ogg|mov)$/i.test(item.url) &&
-                      curLanguage === 'zh-hk') ||
-                    (/\.(mp4|webm|ogg|mov)$/i.test(item.url_en) &&
-                      curLanguage === 'en') ||
-                    (/\.(mp4|webm|ogg|mov)$/i.test(item.url_pe) &&
-                      curLanguage === 'pe')
-                  "
-                  :src="
-                    curLanguage === 'zh-hk'
-                      ? item.url
-                      : curLanguage === 'en'
-                      ? item.url_en
-                      : item.url_pe
-                  "
+                  v-if="(/\.(mp4|webm|ogg|mov)$/i.test(item.url) && curLanguage === 'zh-hk') || (/\.(mp4|webm|ogg|mov)$/i.test(item.url_en) && curLanguage === 'en') || (/\.(mp4|webm|ogg|mov)$/i.test(item.url_pe) && curLanguage === 'pe')"
+                  :src="curLanguage === 'zh-hk' ? item.url : curLanguage === 'en' ? item.url_en : item.url_pe"
                   controls
                 />
-                <img
-                  v-if="/\.(jpg|jpeg|png)$/i.test(item.url)"
-                  v-lazy="item.url"
-                  alt=""
-                  @click="lookImg(item.url)"
-                />
+                <img v-if="/\.(jpg|jpeg|png)$/i.test(item.url)" v-lazy="item.url" alt="" @click="lookImg(item.url)" />
               </div>
             </div>
           </div>
           <div class="tips" v-if="filteredImages.length < 1">
-            {{
-              curLanguage === "zh-hk"
-                ? "暂无内容"
-                : curLanguage === "en"
-                ? "No content"
-                : "Nenhum conteúdo ainda"
-            }}
+            {{ curLanguage === "zh-hk" ? "暂无内容" : curLanguage === "en" ? "No content" : "Nenhum conteúdo ainda" }}
           </div>
           <!-- 左右箭头 -->
-          <div
-            @click="cutMyInd(-1, myInd === 0)"
-            class="leftJJ awccJJ"
-            :class="{ noClick: myInd === 0 }"
-            v-show="!onImg"
-            v-if="activeObj.images && filteredImages.length > 1"
-          ></div>
-          <div
-            @click="cutMyInd(1, myInd === filteredImages.length - 1)"
-            class="rightJJ awccJJ"
-            v-show="!onImg"
-            :class="{ noClick: myInd === filteredImages.length - 1 }"
-            v-if="activeObj.images && filteredImages.length > 1"
-          ></div>
+          <div @click="cutMyInd(-1, myInd === 0)" class="leftJJ awccJJ" :class="{ noClick: myInd === 0 }" v-show="!onImg" v-if="activeObj.images && filteredImages.length > 1"></div>
+          <div @click="cutMyInd(1, myInd === filteredImages.length - 1)" class="rightJJ awccJJ" v-show="!onImg" :class="{ noClick: myInd === filteredImages.length - 1 }" v-if="activeObj.images && filteredImages.length > 1"></div>
         </div>
         <div class="listBox">
           <div class="changeList">
@@ -191,12 +140,8 @@
               class="audioIcon"
               @click="showAudlist"
               :style="{
-                opacity:
-                  curLanguage === 'zh-hk' && audioList.length > 0 ? 1 : 0,
-                pointerEvents:
-                  curLanguage === 'zh-hk' && audioList.length > 0
-                    ? 'auto'
-                    : 'none',
+                opacity: curLanguage === 'zh-hk' && audioList.length > 0 ? 1 : 0,
+                pointerEvents: curLanguage === 'zh-hk' && audioList.length > 0 ? 'auto' : 'none',
               }"
             >
               <div class="ppList auList" v-show="isShowAudlist">
@@ -213,46 +158,21 @@
               </div>
               <img :src="require(`@/assets/images/pc/yuyin.png`)" alt="" />
             </div>
-            <div
-              class="audioIcon"
-              @click="autoAudioSta = !autoAudioSta"
-              :title="autoAudioSta ? '关闭自动续播' : '打开自动续播'"
-              v-show="audioList.length > 0"
-            >
-              <img
-                :src="
-                  require(`@/assets/images/pc/auto${
-                    !autoAudioSta ? 'Ac' : ''
-                  }.png`)
-                "
-                alt=""
-              />
+            <div class="audioIcon" @click="autoAudioSta = !autoAudioSta" :title="autoAudioSta ? '关闭自动续播' : '打开自动续播'" v-show="audioList.length > 0">
+              <img :src="require(`@/assets/images/pc/auto${!autoAudioSta ? 'Ac' : ''}.png`)" alt="" />
             </div>
           </div>
         </div>
 
         <!-- 下面的文字介绍 -->
-        <div
-          class="flooTxt"
-          :class="{ onImg: !!onImg }"
-          v-if="activeObj.images[myInd]"
-        >
+        <div class="flooTxt" :class="{ onImg: !!onImg }" v-if="activeObj.images[myInd]">
           <div class="flooTxtBox">
             <div class="myTitle" v-html="showText('title')"></div>
-            <div
-              class="myTxt"
-              v-html="showText('text')"
-              style="display: none"
-            ></div>
+            <div class="myTxt" v-html="showText('text')" style="display: none"></div>
           </div>
         </div>
       </div>
-      <Book
-        :lookImg="lookImg"
-        :list="list"
-        :curLang="curLanguage"
-        v-show="selectedTitle === '揭開看看吧！'"
-      />
+      <Book :lookImg="lookImg" :list="list" :curLang="curLanguage" v-show="selectedTitle === '揭開看看吧！'" />
     </div>
     <!-- 查看图片 -->
     <viewer class="viewerCla" ref="viewer" :images="lookPics">
@@ -304,11 +224,7 @@ export default {
       this.myInd = 0;
     },
     myInd(newVal) {
-      if (
-        !this.activeObj.images ||
-        newVal < 0 ||
-        newVal >= this.activeObj.images.length
-      ) {
+      if (!this.activeObj.images || newVal < 0 || newVal >= this.activeObj.images.length) {
         this.audio = "";
         return;
       }
@@ -342,26 +258,17 @@ export default {
     filteredImages() {
       if (!this.activeObj?.images) return [];
       const isVideo = (item) => {
-        return (
-          (/\.(mp4|webm|ogg|mov)$/i.test(item.url) &&
-            this.curLanguage === "zh-hk") ||
-          (/\.(mp4|webm|ogg|mov)$/i.test(item.url_en) &&
-            this.curLanguage === "en") ||
-          (/\.(mp4|webm|ogg|mov)$/i.test(item.url_pe) &&
-            this.curLanguage === "pe")
-        );
+        return (/\.(mp4|webm|ogg|mov)$/i.test(item.url) && this.curLanguage === "zh-hk") || (/\.(mp4|webm|ogg|mov)$/i.test(item.url_en) && this.curLanguage === "en") || (/\.(mp4|webm|ogg|mov)$/i.test(item.url_pe) && this.curLanguage === "pe");
       };
 
       const isImage = (item) => /\.(jpg|jpeg|png)$/i.test(item.url);
 
-      const isTitle = (item) => {
-        return (
-          item.title_zh || item.title_zhhk || item.title_pe || item.title_en
-        );
-      };
+      // const isTitle = (item) => {
+      //   return item.title_zh || item.title_zhhk || item.title_pe || item.title_en;
+      // };
 
       const filterArr = this.activeObj.images.filter((item) => {
-        return isVideo(item) || isImage(item) || isTitle(item);
+        return isVideo(item) || isImage(item);
       });
 
       console.log(
@@ -370,9 +277,10 @@ export default {
         })
       );
 
-      return filterArr.filter((i, index) => {
-        return index <= this.myInd + 3;
-      });
+      // return filterArr.filter((i, index) => {
+      //   return index <= this.myInd + 3;
+      // });
+      return filterArr;
     },
   },
   components: {
@@ -467,44 +375,17 @@ export default {
       isHk && this.languageList.push({ name: "繁體中文", key: "zh-hk" });
       isEn && this.languageList.push({ name: "English", key: "en" });
       isPe && this.languageList.push({ name: "Português", key: "pe" });
-      this.curLanguage === "zh-hk" &&
-        item?.mp3_zh &&
-        this.audioList.push({ name: "普通話", key: "mp3_zh" });
-      this.curLanguage === "zh-hk" &&
-        item?.mp3_zhhk &&
-        this.audioList.push({ name: "粵語", key: "mp3_zhhk" });
-      this.curLanguage === "en" &&
-        item?.mp3_en &&
-        this.audioList.push({ name: "English", key: "mp3_en" });
-      this.curLanguage === "pe" &&
-        item?.mp3_pe &&
-        this.audioList.push({ name: "Português", key: "mp3_pe" });
+      this.curLanguage === "zh-hk" && item?.mp3_zh && this.audioList.push({ name: "普通話", key: "mp3_zh" });
+      this.curLanguage === "zh-hk" && item?.mp3_zhhk && this.audioList.push({ name: "粵語", key: "mp3_zhhk" });
+      this.curLanguage === "en" && item?.mp3_en && this.audioList.push({ name: "English", key: "mp3_en" });
+      this.curLanguage === "pe" && item?.mp3_pe && this.audioList.push({ name: "Português", key: "mp3_pe" });
       console.log(this.audioList, "this.audioList");
       const cnPreference = localStorage.getItem("cnPreference");
       console.log(cnPreference === "mp3_zh", 'cnPreference === "mp3_zh"');
-      this.audio =
-        (this.curLanguage === "zh-hk" &&
-          (cnPreference === "mp3_zh" ? item?.mp3_zh : item?.mp3_zhhk)) ||
-        (this.curLanguage === "en" && item?.mp3_en) ||
-        (this.curLanguage === "pe" && item?.mp3_pe) ||
-        "";
+      this.audio = (this.curLanguage === "zh-hk" && (cnPreference === "mp3_zh" ? item?.mp3_zh : item?.mp3_zhhk)) || (this.curLanguage === "en" && item?.mp3_en) || (this.curLanguage === "pe" && item?.mp3_pe) || "";
       console.log(this.audio, "-----------audio");
-      this.audioType =
-        this.curLanguage === "zh-hk" && item?.mp3_zhhk
-          ? cnPreference || "mp3_zhhk"
-          : this.curLanguage === "en" && item?.mp3_en
-          ? "mp3_en"
-          : this.curLanguage === "pe" && item?.mp3_pe
-          ? "mp3_pe"
-          : "";
-      this.language =
-        this.curLanguage === "zh-hk" && isHk
-          ? "zh-hk"
-          : this.curLanguage === "en" && isEn
-          ? "en"
-          : this.curLanguage === "pe" && isPe
-          ? "pe"
-          : "not";
+      this.audioType = this.curLanguage === "zh-hk" && item?.mp3_zhhk ? cnPreference || "mp3_zhhk" : this.curLanguage === "en" && item?.mp3_en ? "mp3_en" : this.curLanguage === "pe" && item?.mp3_pe ? "mp3_pe" : "";
+      this.language = this.curLanguage === "zh-hk" && isHk ? "zh-hk" : this.curLanguage === "en" && isEn ? "en" : this.curLanguage === "pe" && isPe ? "pe" : "not";
       console.log(this.language, "===============");
       // this.$nextTick(() => {
       //   this.autoAudioSta = true;
@@ -521,13 +402,10 @@ export default {
       // }/data.json?time=${Math.random()}`;
       // let result = (await this.$http.get(url)).data;
       console.log("..................123", window.hotList);
-      const resData = window.hotList.find(
-        (item) => item.key === this.selectedTitle
-      )?.contentList;
+      const resData = window.hotList.find((item) => item.key === this.selectedTitle)?.contentList;
       console.log("..................", resData);
       this.list = resData;
       let showData = resData && resData[0];
-      this.onImg = showData?.onImg || false;
       let item = showData?.images[this.myInd];
       this.resetList(item);
       this.activeObj = {
@@ -775,7 +653,7 @@ export default {
         position: fixed;
         top: 50%;
         left: 50%;
-        transform: translate(-563px, -82px);
+        transform: translate(-563px, -60px);
         width: 48px;
         height: 60px;
         background-image: url("../assets/images/icon/left.png");
@@ -785,7 +663,7 @@ export default {
         }
       }
       .rightJJ {
-        transform: translate(526px, -82px);
+        transform: translate(526px, -60px);
         background-image: url("../assets/images/icon/right.png");
       }
       .noClick {