优化

unknown

2024-06-17 304689614daa96595aeeeed8e46e5dfa992ef2df

 src/books/artAndDrama/view/components/index.vue

@@ -3,44 +3,21 @@
      <div id="searchDomBox" style="display: none">
        <div id="searchContent"></div>
      </div>
      <div
        class="page-content"
        :style="{
    <div class="page-content" :style="{
          fontSize: fontSize ? fontSize + 'px' : '16px',
          transform: `scale(${pageZoom ? pageZoom : 1})`,
          transformOrigin: 'center top',
        }"
      >
        <pageHeader
          v-if="showCatalogList.indexOf(1) > -1"
          :showPageList="loadPageList"
        ></pageHeader>
        <chapterOne
          v-if="showCatalogList.indexOf(2) > -1"
          :showPageList="loadPageList"
        ></chapterOne>
        <chapterTwo
          v-if="showCatalogList.indexOf(3) > -1"
          :showPageList="loadPageList"
        >
        </chapterTwo>
        <!-- <chapterThree
        v-if="showCatalogList.indexOf(4) > -1"
          :showPageList="loadPageList"
        ></chapterThree>
        <chapterFour
        v-if="showCatalogList.indexOf(5) > -1"
          :showPageList="loadPageList"
        ></chapterFour> -->
       
    }">
      <pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList"></pageHeader>
      <chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"></chapterOne>
      <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"></chapterTwo>
      <chapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"></chapterThree>
      <chapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"></chapterFour>
      <chapterFive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList"></chapterFive>
      </div>
      <!-- 音频小窗播放组件 -->
      <miniAudio
      :path="audioPath"
      :currentTime="currentTime"
      @closeMiniAudio="closeMiniAudio"
      ref="audioPlayer"
    ></miniAudio>
    <miniAudio :path="audioPath" :currentTime="currentTime" @closeMiniAudio="closeMiniAudio" ref="audioPlayer">
    </miniAudio>
    </div>
  </template>
  
@@ -48,8 +25,9 @@
  import pageHeader from "./header.vue";
  import chapterOne from "./chapter001.vue";
  import chapterTwo from "./chapter002.vue";
  // import chapterThree from "./chapter003.vue";
  // import chapterFour from "./chapter004.vue";
import chapterThree from "./chapter003.vue";
import chapterFour from "./chapter004.vue";
import chapterFive from "./chapter005.vue";
  import NoteIcon from "@/assets/images/biji.png";
  import miniAudio from "@/components/miniAudio/index.vue";
  import _ from "lodash";
@@ -60,7 +38,7 @@
  export default {
    data() {
      return {
        catalogLength: 3, // 总章节数
      catalogLength: 6, // 总章节数
        showCatalogList: [], // 显示的章节
        loadThreshold: 300, // 触发加载阈值
        throttleThreshold: 100, // 节流阈值
@@ -734,8 +712,9 @@
          pageHeader,
          chapterOne,
          chapterTwo,
          // chapterThree,
          // chapterFour,
        chapterThree,
        chapterFour,
        chapterFive
   
        };
        // 遍历所有章节文件
@@ -880,6 +859,22 @@
        }
      }
    },
    // 点击音频播放，关闭其他音频
    closeAudio(path) {
      let allVideo = (
        this.container ? this.container : document
      ).querySelectorAll(".audio");
      allVideo = Array.from(allVideo);
      if (allVideo.length) {
        for (let index = 0; index < allVideo.length; index++) {
          const item = allVideo[index];
          if (item.currentSrc != path) {
            item.pause()
          }
        }
      }
      this.closeMiniAudio()
    },
    // 关闭mini video
    closeMiniAudio() {
      this.audioPath = "";
@@ -889,9 +884,10 @@
      pageHeader,
      chapterOne,
      chapterTwo,
      miniAudio
      // chapterThree,
      // chapterFour,
    miniAudio,
    chapterThree,
    chapterFour,
    chapterFive
      
    },
  };
@@ -902,6 +898,7 @@
    width: 100%;
    height: 100%;
    overflow: auto;

    .page-content {
      max-width: 816px;
      min-width: 375px;
@@ -910,4 +907,3 @@
    }
  }
  </style>