feat 2.3

hot/src/components/Book.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="bookHot">
+    <div class="logo"><img src="../assets/logo.png" alt="" /></div>
+    <div class="bookBox">
+      <div class="bookTitle"></div>
+      <div class="book"></div>
+    </div>
+  </div>
+</template>
+
+<script></script>
+
+<style lang="less" scoped>
+.bookHot {
+  width: 100%;
+  height: 100%;
+  background: url(../assets/bg.png);
+  background-size: 100% 100%;
+  .logo {
+    position: fixed;
+    left: 52px;
+    top: 37px;
+    height: 60px;
+    & > img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+  .bookBox{
+    display: flex;
+    width: 100%;
+    height: 100%;
+    padding: 120px 30px 30px;
+    .bookTitle{
+      width: 300px;
+      height: 100%;
+      font-size: 24px;
+      color: #d6b970;
+    }
+  }
+}
+</style>

hot/src/views/Home.vue

@@ -160,10 +160,10 @@
                   {{ item.name }}
                 </div>
               </div>
-              <div
-                class="ppList auList"
-                v-show="isShowLanlist && audioList.length"
-              >
+              <img :src="require(`@/assets/images/pc/yuyan.png`)" alt="" />
+            </div>
+            <div class="audioIcon" @click="showAudlist">
+              <div class="ppList auList" v-show="isShowAudlist">
                 <div
                   v-for="item in audioList"
                   :key="item.key"
@@ -175,7 +175,21 @@
                   {{ item.name }}
                 </div>
               </div>
-              <img :src="require(`@/assets/images/pc/yuyan.png`)" alt="" />
+              <img :src="require(`@/assets/images/pc/yuyin.png`)" alt="" />
+            </div>
+            <div
+              class="audioIcon"
+              @click="autoAudioSta = !autoAudioSta"
+              :title="autoAudioSta ? '关闭自动续播' : '打开自动续播'"
+            >
+              <img
+                :src="
+                  require(`@/assets/images/pc/auto${
+                    !autoAudioSta ? 'Ac' : ''
+                  }.png`)
+                "
+                alt=""
+              />
             </div>
           </div>
         </div>
@@ -188,7 +202,11 @@
         >
           <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>
@@ -201,7 +219,7 @@
 </template>
 
 <script>
-import { hotList } from './data.js'
+import { hotList } from "./data.js";
 export default {
   name: "Home",
   data() {
@@ -219,6 +237,8 @@ export default {
       isOneAduio: false,
       // 音频状态
       audioSta: false,
+      // 自动续播
+      autoAudioSta: false,
       //无图，模式
       onImg: false,
       myInd: 0,
@@ -231,6 +251,7 @@ export default {
         images: [],
       },
       isShowLanlist: false,
+      isShowAudlist: false,
     };
   },
   watch: {
@@ -260,10 +281,17 @@ export default {
         dom.play();
         dom.onended = () => {
           // console.log("----音频播放完毕");
-          this.audioSta = false;
+          if (this.autoAudioSta) {
+            this.cutMyInd(1, this.myInd === this.activeObj.images.length - 1);
+          } else {
+            this.audioSta = false;
+          }
         };
       } else dom.pause();
     },
+    autoAudioSta(val) {
+      this.audioSta = val;
+    },
   },
   computed: {},
   components: {},
@@ -297,6 +325,7 @@ export default {
         "zh-hk": item.title_zhhk,
         pe: item.title_pe,
         en: item.title_en,
+        not: "暂无",
       };
       let objText = {
         "zh-cn": item.text_zh,
@@ -325,6 +354,12 @@ export default {
     cutMyInd(num, flag) {
       if (flag) return;
       this.myInd += num;
+      this.audioSta = false;
+      if (this.autoAudioSta)
+        this.$nextTick(() => {
+          this.audioSta = true;
+        });
+
       // this.activeObj = this.activeObj.images[this.myInd];
     },
     // 点击查看大图
@@ -334,13 +369,15 @@ export default {
       dom.show();
     },
     resetList(item) {
+      console.log(localStorage.getItem("locale"), "---------------stor");
       this.languageList = [];
       this.audioList = [];
       const isHk = item?.title_zhhk || item?.text_zhhk;
       const isEn = item?.title_en || item?.text_en;
       const isPe = item?.title_pe || item?.text_pe;
+      const curLanguage = localStorage.getItem("locale");
 
-      isHk && this.languageList.push({ name: "繁体中文", key: "zh-hk" });
+      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" });
       item?.mp3_zh && this.audioList.push({ name: "普通话", key: "mp3_zh" });
@@ -348,15 +385,28 @@ export default {
       item?.mp3_en && this.audioList.push({ name: "English", key: "mp3_en" });
       item?.mp3_pe && this.audioList.push({ name: "Português", key: "mp3_pe" });
       this.audio =
-        item?.mp3_zh || item?.mp3_zhhk || item?.mp3_en || item?.mp3_pe || "";
-      this.audioType = item?.mp3_zh
-        ? "mp3_zh"
-        : item?.mp3_zhhk
-        ? "mp3_zhhk"
-        : item?.mp3_en
-        ? "mp3_en"
-        : "mp3_pe";
-      this.language = isHk ? "zh-hk" : isEn ? "en" : isPe ? "pe" : "zh-cn";
+        (curLanguage === "zh-hk" && item?.mp3_zhhk) ||
+        (curLanguage === "en" && item?.mp3_en) ||
+        (curLanguage === "pe" && item?.mp3_pe) ||
+        "";
+      console.log(this.audio, "-----------audio");
+      this.audioType =
+        curLanguage === "zh-hk" && item?.mp3_zhhk
+          ? "mp3_zhhk"
+          : curLanguage === "en" && item?.mp3_en
+          ? "mp3_en"
+          : curLanguage === "pe" && item?.mp3_pe
+          ? "mp3_pe"
+          : "";
+      this.language =
+        curLanguage === "zh-hk" && isHk
+          ? "zh-hk"
+          : curLanguage === "en" && isEn
+          ? "en"
+          : curLanguage === "pe" && isPe
+          ? "pe"
+          : "not";
+      console.log(this.language, "===============");
     },
     getData() {
       // https://www.4dmodel.com/
@@ -383,6 +433,9 @@ export default {
     showLanlist() {
       this.isShowLanlist = !this.isShowLanlist;
     },
+    showAudlist() {
+      this.isShowAudlist = !this.isShowAudlist;
+    },
   },
   mounted() {
     this.getData();
@@ -490,8 +543,8 @@ export default {
               padding: 8px 10px;
               width: 99px;
               position: absolute;
-              top: 6px;
-              left: 63px;
+              top: 66px;
+              left: -46px;
               background: #fff;
               opacity: 0.85;
               border-radius: 8px;
@@ -511,12 +564,12 @@ export default {
               }
             }
             .auList {
-              left: 168px;
+              left: 6px;
             }
           }
         }
         .changeList {
-              margin-left: 95px;
+          margin-left: 95px;
           .list {
             display: flex;
             align-items: center;
@@ -641,9 +694,8 @@ export default {
             font-size: 22px;
             font-weight: 700;
             margin-bottom: 10px;
-            * {
-              text-indent: 2em;
-            }
+            text-align: justify;
+            // text-indent: 2em;
           }
           .myTxt {
             font-family: Adobe Heiti Std;
@@ -682,18 +734,18 @@ export default {
         .contenBox {
           display: none;
         }
-        .awccJJ{
+        .awccJJ {
           position: fixed;
-          top:50%;
-          left: 320px;  
+          top: 50%;
+          left: 50%;
+          transform: translate(-610px, -85px);
         }
-        .rightJJ{
-          left: auto;
-          right: 320px;
+        .rightJJ {
+          transform: translate(560px, -85px);
         }
       }
       .listBox {
-        width: 68%;
+        width: 80%;
       }
       .flooTxt {
         height: 70%;
@@ -782,7 +834,7 @@ export default {
             width: 100%;
             height: 30px;
             margin: 0;
-            .list{
+            .list {
               gap: 5px;
             }
 
@@ -805,9 +857,9 @@ export default {
               & > img {
                 width: 30px;
               }
-              .auList{
-              left: -180px !important;
-            }
+              .auList {
+                left: -180px !important;
+              }
               .ppList {
                 top: 35px !important;
                 left: -75px !important;
@@ -850,24 +902,23 @@ export default {
         }
       }
 
-      .noImg{
-        .contenBoxMain{
+      .noImg {
+        .contenBoxMain {
           height: 10%;
-          .awccJJ{
+          .awccJJ {
             top: 50%;
           }
         }
-        .listBox{
-          .iconList{
-            .audioIcon{
-              .auList{
-              left: -180px !important;
-            }
+        .listBox {
+          .iconList {
+            .audioIcon {
+              .auList {
+                left: -4px !important;
+              }
             }
-            
           }
         }
-        .flooTxt{
+        .flooTxt {
           height: 75%;
         }
       }