热点完善

hot/src/views/Home.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="home">
-    <audio
-      id="myAudio"
-      v-if="audio"
-      v-show="isOneAduio"
-      :src="audio"
-      controls
-    ></audio>
     <div class="main">
-      <div class="mainCon">
+      <div class="mainCon" v-show="!oneTxt">
+        <audio
+          id="myAudio"
+          v-if="audio"
+          v-show="isOneAduio"
+          :src="audio"
+          controls
+        ></audio>
         <!-- 音频图标 -->
         <div
           class="audioIcon"
@@ -84,13 +84,13 @@
           </div>
           <!-- 左右箭头 -->
           <div
-            @click="myInd--"
+            @click="cutMyInd(-1, myInd === 0)"
             class="leftJJ awccJJ"
             :class="{ noClick: myInd === 0 }"
             v-if="data[myType] && data[myType].length > 1"
           ></div>
           <div
-            @click="myInd++"
+            @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"
@@ -99,7 +99,7 @@
       </div>
 
       <!-- 下面的文字介绍 -->
-      <div class="flooTxt">
+      <div class="flooTxt" :class="{ flooTxtOne: oneTxt }">
         <div class="flooTxtBox">
           <div class="myTitle">{{ myTitle }}</div>
           <!-- 视频的介绍 -->
@@ -162,6 +162,9 @@ export default {
       // 视频内容
       videoTxt: [],
       imgTxt: [],
+
+      // 只有标题和文字（没有视频，没有模型，没有图片）
+      oneTxt: false,
     };
   },
   watch: {
@@ -183,6 +186,11 @@ export default {
   computed: {},
   components: {},
   methods: {
+    // 点击左右箭头
+    cutMyInd(num, flag) {
+      if (flag) return;
+      this.myInd += num;
+    },
     // 点击查看大图
     lookImg(url) {
       let dom = this.$refs.viewer.$viewer;
@@ -196,7 +204,7 @@ export default {
       }/hot/js/data.js?time=${Math.random()}`;
       let result = (await this.$http.get(url)).data;
       const resData = result[this.m];
-      // console.log("----", resData);
+      console.log("----", resData);
       if (resData) {
         this.audio = resData.backgroundMusic;
         // 只有单独的音频上传
@@ -231,10 +239,15 @@ export default {
         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;
+        }
       }
     },
   },
@@ -255,6 +268,7 @@ export default {
   backdrop-filter: blur(10px);
   position: relative;
   #myAudio {
+    z-index: 11;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -381,8 +395,8 @@ export default {
         background-image: url("../assets/images/pc/right.png");
       }
       .noClick {
+        cursor: default;
         opacity: 0.4;
-        pointer-events: none;
       }
     }
     .flooTxt {
@@ -423,13 +437,16 @@ export default {
         }
       }
     }
+    .flooTxtOne {
+      height: 600px;
+    }
   }
 }
 // 移动端
 @media screen and (max-width: 1000px) {
   .home {
     #myAudio {
-      width: 100vw;
+      width: 90vw;
       max-width: 500px;
     }
     .main {
@@ -517,6 +534,9 @@ export default {
           }
         }
       }
+      .flooTxtOne {
+        height: 100%;
+      }
     }
   }
 }