feat3

hot/src/components/Book.vue

@@ -2,22 +2,123 @@
   <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 class="book book1">
+        <div
+          class="leftArr"
+          @click="cutMyInd(-1, myInd === 0)"
+          :class="{ noClick: myInd === 0 }"
+        >
+          <img src="../assets//images/icon/left.png" alt="" />
+        </div>
+        <div class="bookList">
+          <div
+            class="contenBox"
+            :class="{ contenBoxAc: index === myInd }"
+            v-for="(item, index) in activeObj.images"
+            :key="index"
+          >
+            <img v-lazy="item.url" alt="" @click="lookImg(item.url)" />
+          </div>
+        </div>
+        <div
+          class="rightArr"
+          @click="cutMyInd(1, myInd === activeObj.images.length - 1)"
+          :class="{ noClick: myInd === activeObj.images.length - 1 }"
+        >
+          <img src="../assets//images/icon/right.png" alt="" />
+        </div>
+      </div>
+      <div class="bookTitle">
+        <div
+          class="title"
+          v-for="(item, index) in list"
+          :key="index"
+          @click="changeBook(index)"
+        >
+          {{ item.title }}
+        </div>
+      </div>
+      <div class="book book2">
+        <div
+          class="leftArr"
+          @click="cutMyInd(-1, myInd === 0)"
+          :class="{ noClick: myInd === 0 }"
+        >
+          <img src="../assets//images/icon/left.png" alt="" />
+        </div>
+        <div class="bookList">
+          <div
+            class="contenBox"
+            :class="{ contenBoxAc: index === myInd }"
+            v-for="(item, index) in activeObj.images"
+            :key="index"
+          >
+            <img v-lazy="item.url" alt="" @click="lookImg(item.url)" />
+          </div>
+        </div>
+        <div
+          class="rightArr"
+          @click="cutMyInd(1, myInd === activeObj.images.length - 1)"
+          :class="{ noClick: myInd === activeObj.images.length - 1 }"
+        >
+          <img src="../assets//images/icon/right.png" alt="" />
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
-<script></script>
+<script>
+export default {
+  props: {
+    lookImg: {
+      type: Function,
+      default: () => {},
+    },
+    list: {
+      type: Array,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      selectTitle: 0,
+      myInd: 0,
+      activeObj: this.list[0],
+    };
+  },
+  watch: {
+    list: {
+      immediate: true,
+      handler(newVal) {
+        this.activeObj = newVal[0] || { images: [] };
+        this.myInd = 0;
+      },
+    },
+  },
+  methods: {
+    cutMyInd(num, flag) {
+      if (flag) return;
+      this.myInd += num;
+    },
+    changeBook(index) {
+      this.activeObj = this.list[index];
+      this.myInd = 0;
+    },
+  },
+  mounted() {},
+};
+</script>
 
 <style lang="less" scoped>
 .bookHot {
+  position: relative;
   width: 100%;
   height: 100%;
   background: url(../assets/bg.png);
   background-size: 100% 100%;
   .logo {
-    position: fixed;
+    position: absolute;
     left: 52px;
     top: 37px;
     height: 60px;
@@ -27,16 +128,115 @@
       object-fit: contain;
     }
   }
-  .bookBox{
+  .bookBox {
     display: flex;
     width: 100%;
     height: 100%;
     padding: 120px 30px 30px;
-    .bookTitle{
+
+    .bookTitle {
       width: 300px;
       height: 100%;
-      font-size: 24px;
+      padding: 20px;
+      font-size: 18px;
       color: #d6b970;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 40px;
+      .title {
+        cursor: pointer;
+        border-bottom: 1px solid rgba(52, 191, 75, 0.5);
+      }
+      .title_ac {
+        color: #34bf4b;
+      }
+    }
+
+    .book {
+      width: 0;
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .leftArr,
+      .rightArr {
+        width: 100px;
+        height: 100px;
+        cursor: pointer;
+        & > img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+      .noClick {
+        cursor: default;
+        opacity: 0.4;
+      }
+      .bookList {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        .contenBox {
+          height: 100%;
+          width: 100%;
+          position: absolute;
+          padding: 45px;
+          opacity: 0;
+          transition: opacity 0.5s ease;
+          pointer-events: none;
+          & > img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
+        }
+        .contenBoxAc {
+          opacity: 1;
+          pointer-events: auto;
+        }
+      }
+    }
+    .book1 {
+      display: none;
+    }
+  }
+}
+
+@media screen and (max-width: 1000px) {
+  .bookHot {
+    background-image: url("../assets/images/mobileBg.png");
+    background-size: 100% 100%;
+    .logo {
+      display: none;
+    }
+    .bookBox {
+      padding: 50px 10px 30px;
+      flex-direction: column;
+      .book1 {
+        display: flex;
+        height: 0;
+        width: 100%;
+        .leftArr,
+        .rightArr {
+          width: 40px;
+        }
+        .bookList {
+          .contenBox {
+            padding: 0 6px;
+          }
+        }
+      }
+      .book2 {
+        display: none;
+      }
+      .bookTitle {
+        width: 100%;
+        height: 315px;
+        gap: 10px;
+      }
     }
   }
 }

hot/src/views/Home.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="home">
     <div class="main">
-      <div :class="['mainCon', { noImg: !activeObj.images[myInd]?.url }]">
+      <div
+        v-show="selectedTitle !== '揭開看看吧！'"
+        :class="['mainCon', { noImg: !activeObj.images[myInd]?.url }]"
+      >
         <audio
           id="myAudio"
           v-if="audio"
@@ -210,6 +213,11 @@
           </div>
         </div>
       </div>
+      <Book
+        :lookImg="lookImg"
+        :list="list"
+        v-show="selectedTitle === '揭開看看吧！'"
+      />
     </div>
     <!-- 查看图片 -->
     <viewer class="viewerCla" ref="viewer" :images="lookPics">
@@ -220,6 +228,7 @@
 
 <script>
 import { hotList } from "./data.js";
+import Book from "@/components/Book.vue";
 export default {
   name: "Home",
   data() {
@@ -294,7 +303,9 @@ export default {
     },
   },
   computed: {},
-  components: {},
+  components: {
+    Book,
+  },
   methods: {
     handlePlay() {
       console.log("----this.$refs.videoRef", this.$refs.videoRef);
@@ -381,7 +392,7 @@ export default {
       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" });
-      item?.mp3_zhhk && this.audioList.push({ name: "粤语", key: "mp3_zhhk" });
+      item?.mp3_zhhk && this.audioList.push({ name: "粵語", key: "mp3_zhhk" });
       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 =
@@ -407,6 +418,9 @@ export default {
           ? "pe"
           : "not";
       console.log(this.language, "===============");
+      this.$nextTick(() => {
+        this.autoAudioSta = true;
+      });
     },
     getData() {
       // https://www.4dmodel.com/