修复样式问题

src/views/Home.vue

@@ -12,7 +12,7 @@
     ></audio>
     <div
       class="content"
-      v-if="fixIcon.length > 0"
+      v-if="(!audio && fixIcon.length > 0) || (audio && fixIcon.length > 1)"
       :class="{ isMobileCon: isMobile }"
     >
       <div
@@ -23,9 +23,17 @@
       <div class="mb-intro" v-show="active === 'title' && isMobile">
         <p v-html="data.title"></p>
         <p v-html="data.content"></p>
-        <p v-html="data.imagesDesc[myInd]" v-if="data.imagesDesc&&data.imagesDesc[myInd]"></p>
+        <p
+          v-html="data.imagesDesc[myInd]"
+          v-if="data.imagesDesc && data.imagesDesc[myInd]"
+        ></p>
       </div>
-      <swiper v-show="active !== 'title'" class="warpper" ref="mySwiper" :options="swiperOptions">
+      <swiper
+        v-show="active !== 'title'"
+        class="warpper"
+        ref="mySwiper"
+        :options="swiperOptions"
+      >
         <swiper-slide v-for="(item, i) in data[active]" :key="i">
           <div class="slide">
             <img
@@ -61,7 +69,11 @@
         class="swiper-button-next"
       ></div>
     </div>
-    <ul class="iconarr" v-if="fixIcon.length > 0" :class="{oneChuMusic:fixIcon.length===1&&!audio}">
+    <ul
+      class="iconarr"
+      v-if="fixIcon.length > 0"
+      :class="{ oneChuMusic: fixIcon.length === 1 && !audio }"
+    >
       <li
         :class="{ active: item.id === active || item.audioAc }"
         @click="changeActive(item.id, item.audioAc)"
@@ -74,12 +86,18 @@
     </ul>
     <div
       class="intro"
-      :class="{ ismtop: fixIcon.length <= 0 }"
+      :class="{
+        ismtop:
+          (!audio && fixIcon.length === 0) || (audio && fixIcon.length === 1),
+      }"
       v-if="!isMobile || (isMobile && fixIcon.length <= 0)"
     >
       <h3 v-html="data.title"></h3>
       <p v-html="data.content"></p>
-      <p v-html="data.imagesDesc[myInd]" v-if="data.imagesDesc&&data.imagesDesc[myInd]"></p>
+      <p
+        v-html="data.imagesDesc[myInd]"
+        v-if="data.imagesDesc && data.imagesDesc[myInd]"
+      ></p>
     </div>
   </div>
 </template>
@@ -321,14 +339,10 @@ export default {
   }
 }
 .home {
-  background-color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(0, 0, 0, 0.6);
   width: 100%;
   height: 100%;
   position: relative;
-  .ismtop {
-    padding-top: 40px !important;
-    max-height: 90vh !important;
-  }
   .content {
     width: 100%;
     height: 80%;
@@ -386,8 +400,9 @@ export default {
       border: none;
     }
   }
-  .oneChuMusic{
+  .oneChuMusic {
     opacity: 0;
+    pointer-events: none;
   }
   .intro {
     max-height: 19vh;
@@ -406,6 +421,14 @@ export default {
       text-indent: 32px;
     }
   }
+  .ismtop {
+    max-height: 65%;
+    height: 65%;
+    padding: 50px 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
 }
 
 @media screen and (max-width: 1400px) {