feat

src/views/home/iframeView/index.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="iframe-view">
     <div class="close-btn" @click="close"></div>
-
+    <div class="audio-controls" @click="isPlay = !isPlay">{{ isPlay ? "播放" : "暂停" }}</div>
     <div class="iframe-box" v-if="iframeData.type == '3D'">
       <iframe :src="iframeData.modelUrl" frameborder="0"></iframe>
     </div>
@@ -11,18 +11,13 @@
         <div class="swiper-wrapper">
           <div class="swiper-slide">
             <div class="item-box" @click="changeIframe(i)">
-              <img :src="`resource/img/1.png`" alt="" />
-            </div>
-          </div>
-          <div class="swiper-slide">
-            <div class="item-box" @click="changeIframe(i)">
-              <img :src="`resource/img/1.png`" alt="" />
+              <img :src="`resource/img/${iframeData.deatilsImg ? 'details/' + iframeData.deatilsImg : '1.png'}`" alt="" />
             </div>
           </div>
         </div>
       </div>
     </div>
-    <div class="content">
+    <div class="content" ref="contentRef">
       <div class="scroll-box">
         <p class="title">{{ iframeData.name }}</p>
         <p class="desc">
@@ -33,18 +28,23 @@
       </div>
     </div>
   </div>
+  <audio ref="audioRef" preload="auto" loop class="bgm" :src="`resource/audio/music-user.mp3`"></audio>
 </template>
 
 <script setup>
 import "swiper/css/swiper.css";
 import Swiper from "swiper";
-import { reactive, ref, toRefs, onBeforeMount, onMounted, defineEmits, defineProps, nextTick } from "vue";
+import { reactive, ref, toRefs, onBeforeMount, onMounted, defineEmits, defineProps, nextTick, watch } from "vue";
 const props = defineProps(["iframeData"]);
 const emits = defineEmits(["close"]);
+const audioRef = ref(null);
+const contentRef = ref(null);
+const rectH = ref(0);
 
 const close = () => {
   emits("close");
 };
+const isPlay = ref(false);
 let imageSwiper = null;
 const options = {
   freeMode: false,
@@ -52,9 +52,27 @@ const options = {
 const setSwiper = () => {
   imageSwiper = new Swiper(".view-container", options);
 };
-
+watch(
+  () => isPlay.value,
+  (newVal) => {
+    if (newVal) {
+      audioRef.value.play();
+    } else {
+      audioRef.value.pause();
+    }
+  }
+);
 nextTick(() => {
   setSwiper();
+  rectH.value = contentRef.value.getBoundingClientRect().height;
+  let domBox = null;
+  if (props.iframeData.type == "2D") {
+    domBox = document.querySelector(".image-box");
+    domBox.style.height = `calc(100% - ${rectH.value - 20}px )`;
+  } else if (props.iframeData.type == "3D") {
+    domBox = document.querySelector(".iframe-box");
+    domBox.style.height = `calc(100% - ${rectH.value - 20}px )`;
+  }
 });
 </script>
 <style lang="scss" scoped>
@@ -64,15 +82,17 @@ nextTick(() => {
   position: fixed;
   z-index: 10;
   top: 0;
-  left: 0;
-
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 596px;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: 50%;
   background-image: url("@/assets/img/home_bg.jpg");
   color: #fff;
-
+  overflow-x: hidden;
   z-index: 101;
+  margin: 0 auto;
   .iframe-box {
     width: 100%;
     height: 100%;
@@ -83,7 +103,7 @@ nextTick(() => {
   }
   .image-box {
     width: 100%;
-    height: 100%;
+    height: 80%;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -96,7 +116,17 @@ nextTick(() => {
       }
     }
   }
-
+  .audio-controls {
+    position: absolute;
+    top: 2.1333rem;
+    right: 0.5333rem;
+    width: 1.0667rem;
+    height: 1.0667rem;
+    color: #fff;
+    z-index: 102;
+    color: #000;
+    background-size: 100%;
+  }
   .close-btn {
     position: absolute;
     top: 0.5333rem;
@@ -158,4 +188,14 @@ nextTick(() => {
     }
   }
 }
+.bgm {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.swiper-dom {
+  width: 100%;
+  overflow: visible !important;
+  padding: 0 20px;
+}
 </style>

src/views/home/index.vue

@@ -371,11 +371,13 @@ onMounted(() => {
   overflow: hidden;
   width: 100%;
   height: 100%;
+  max-width: 596px;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: 50%;
   background-image: url("@/assets/img/home_bg.jpg");
   color: #fff;
+  margin: 0 auto;
   .title {
     text-align: center;
     margin: 60px auto 1.4667rem;
@@ -527,8 +529,6 @@ onMounted(() => {
     }
   }
 }
-</style>
-<style>
 .swiper-dom {
   width: 100%;
   /* margin-top: 10px; */
@@ -536,6 +536,9 @@ onMounted(() => {
   overflow: visible !important;
   padding: 0 20px;
 }
+</style>
+<style>
+
 .swiper-wrapper {
   transition-timing-function: linear !important;
 }