舞蹈艺术意见单修改完成

zhongshujie

2024-09-05 5f52ef1659fee6858532c6a9731bd352d2f6fe6f

舞蹈艺术意见单修改完成

 src/App.vue

@@ -67,7 +67,7 @@
        process.env.VUE_APP_RESOURCE_CTX +
        (process.env.VUE_APP_ENV == "product"
          ? process.env.VUE_APP_BOOK_ID
          : "mathBook")
          : "artAndDance")
      );
      // 测试试读30页
      // this.activeBook.tryPageCount = 10;

 src/books/artAndDance/assets/images/fengdi.png

 src/books/artAndDance/assets/main.less

@@ -206,6 +206,7 @@
  }

  .img-0 {
    display: flex;
    width: 100%;
  }
  .imz {
@@ -423,6 +424,9 @@
    font-family: "FangSong", "PMingLiU", serif;
    font-weight: bold;
  }
  .front{
    text-align: left !important;
  }
}

/* 媒体查询做基础响应式布局 */

 src/books/artAndDance/view/components/chapter001.vue

@@ -20,7 +20,7 @@
          <h2 class="lefth2" id="b001">
            <img class="img-gn" alt="" src="../../assets/images/rhybx.jpg" />
          </h2>
          <h3 id="c001" class="fw-400 fz-26 mb-20">元素</h3>
          <h3 id="c001" class="fz-26 mb-20">元素</h3>
          <p class="block2 fw-400 fz-26">单手挥别</p>
          <p class="block1 w70"><span class="ls fz-26">——单晃手</span></p>
          <p class="block2 fz-26">双手挥别</p>
@@ -33,7 +33,7 @@
            <img src="../../assets/images/icon/tree.jpg" />
            <span class="dl-ib"> 2 </span>
          </li>
          <li>
          <li class="fl">
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
@@ -64,7 +64,7 @@
            </li>
          </ul>
          <h3 id="c003">黄鹤楼送孟浩然之广陵</h3>
          <p class="block2 fm-son ">〔唐〕李白</p>
          <p class="block2 fm-son " style="margin-right: 7.5%;">〔唐〕李白</p>
          <p class="block2 m16-0">故人西辞黄鹤楼，</p>
          <p class="block2 m16-0">烟花三月下扬州。</p>
          <p class="block2 m16-0">孤帆远影碧空尽，</p>
@@ -90,7 +90,7 @@
              <img src="../../assets/images/icon/tree.jpg" />
            </div>
          </li>
          <li>
          <li class="fl">
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
@@ -137,7 +137,7 @@
            <img src="../../assets/images/icon/tree.jpg" />
            <span class="dl-ib"> 4 </span>
          </li>
          <li>
          <li class="fl">
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>

 src/books/artAndDance/view/components/chapter002.vue

@@ -17,18 +17,17 @@
          <p class="center">
            <img class="img-b" alt="" src="../../assets/images/04-2.gif" />
          </p>
          <!-- <ul class="fl al-cn ju-bt img-state " style="margin-top: 100px;">
          <ul class="fl al-cn ju-bt img-state " style="min-height: 370px" >
            <li style="width: 45%;">
              <img src="../../assets/images/05.gif" alt="" class="w100" :style="{opacity:num / 10}">
              <img @click="clickImg" title="点击此处查看图片" src="../../assets/images/05.gif" alt="" class="w100" style="cursor:pointer" >
            </li>
            <li style="width: 35%;">
              <img src="../../assets/images/girl.png" alt="" class="w100" :style="{opacity: (-num) / 10}">
            <li style="width: 35%;" v-if="appearsImg">
              <img src="../../assets/images/girl.png" alt="" class="w100" >
            </li>
          </ul> -->
          <p class="center">
          </ul>
          <!-- <p class="center">
            <img :src="num >= 0 ? shape : girl" alt=""  :style="{opacity:num >= 0 ? num / 10 : (-num) / 10 , width:num >= 0 ? '80%' : '34%'}">
          </p>
          
          </p> -->
          <p class="img">“羊角式”舞姿</p>
        </div>
        <ul class="pb-box">
@@ -36,7 +35,7 @@
            <img src="../../assets/images/icon/tree.jpg" />
            <span class="dl-ib"> 6 </span>
          </li>
          <li>
          <li class="fl">
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
@@ -90,7 +89,7 @@
              <img src="../../assets/images/icon/tree.jpg" />
            </div>
          </li>
          <li>
          <li class="fl">
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
@@ -157,7 +156,7 @@
            <img src="../../assets/images/icon/tree.jpg" />
            <span class="dl-ib"> 8 </span>
          </li>
          <li>
          <li class="fl">
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
@@ -195,6 +194,7 @@
      cutTimer:null,
      auidoPathOne:"",
      auidoPathTwo:"",
      appearsImg: false,
      shape:require("../../assets/images/05.gif"),
      girl:require("../../assets/images/girl.png")
    };
@@ -225,6 +225,9 @@
        }
      },200)
    },
    clickImg(){
      this.appearsImg = !this.appearsImg
    },
  },
};
</script>

 src/books/artAndDance/view/components/chapter003.vue

@@ -63,8 +63,8 @@
              <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
            </li>
          </ul>
          <h3 id="c009">小儿垂钓</h3>
          <p class="block2 fm-son">〔唐〕胡令能</p>
          <h3 id="c009" style="margin-right: 4.5%;">小儿垂钓</h3>
          <p class="block2 fm-son" style="margin-right: 7.5%;">〔唐〕胡令能</p>
          <p class="block2 m16-0">蓬头稚子学垂纶，</p>
          <p class="block2 m16-0">侧坐莓苔草映身。</p>
          <p class="block2 m16-0">路人借问遥招手，</p>

 src/books/artAndDance/view/components/chapter004.vue

@@ -69,8 +69,8 @@
              <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" ></audio>
            </li>
          </ul>
          <h3 id="c012">寻隐者不遇</h3>
          <p class="block2 fm-son">〔唐〕贾岛</p>
          <h3 id="c012" style="margin-right: 6%;">寻隐者不遇</h3>
          <p class="block2 fm-son" style="margin-right: 8%;">〔唐〕贾岛</p>
          <p class="block2 m16-0">松下问童子，言师采药去。</p>
          <p class="block2 m16-0">只在此山中，云深不知处。</p>
          <video

 src/books/artAndDance/view/components/chapter005.vue

@@ -86,8 +86,8 @@
              ></audio>
            </li>
          </ul>
          <h3 id="c015">渔歌子</h3>
          <p class="block2 fm-son">〔唐〕张志和</p>
          <h3 id="c015" style="margin-right: 3%;" >渔歌子</h3>
          <p class="block2 fm-son" style="margin-right: 7%;">〔唐〕张志和</p>
          <p class="block2 m16-0">西塞山前白鹭飞，</p>
          <p class="block2 m16-0">桃花流水鳜鱼肥。</p>
        </div>

 src/books/artAndDance/view/components/chapter006.vue

@@ -311,9 +311,11 @@
        </ul>
      </div>
    </div>
    <!-- <div class="page-box" page="30">
        <paint ></paint>
    </div> -->
    <div class="page-box mt-20" page="30">
      <div v-if="showPageList.indexOf(30) > -1">
        <img class="img-0" alt="" src="../../assets/images/fengdi.png" />
      </div>
    </div>
  </div>
</template>


 src/books/artAndDance/view/components/header.vue

@@ -20,12 +20,12 @@
            <div class="bodystyle" style="margin-bottom: 100px">
              <h1 id="a003" class="front">编委会</h1>
              <hr />
              <p>顾　　问：<span class="kaiti">彭吉象　吕艺生</span></p>
              <p>主　　编：<span class="kaiti">王杰</span></p>
              <p>副 主 编：<span class="kaiti">于晓雪　徐梦婕</span></p>
              <p class="kaiti">顾　　问：<span class="kaiti">彭吉象　吕艺生</span></p>
              <p class="kaiti">主　　编：<span class="kaiti">王杰</span></p>
              <p class="kaiti">副&ensp;主&ensp;编：<span class="kaiti">于晓雪　徐梦婕</span></p>
              <ul class="fl">
                <li>
                  <p class="wh-nr">编写委员：</p>
                  <p class="wh-nr kaiti">编写委员：</p>
                </li>
                <li class="fl fl-cl">
                  <span class="kaiti">邢高熙　王　玲　王　锦　崔春杰</span>
@@ -33,16 +33,16 @@
                  <span class="kaiti">柯　咏　张艺瑶　尚小雪　周　狄</span>
                </li>
              </ul>
              <p>美术绘画：<span class="kaiti">张家荣</span></p>
              <p>主讲教师：<span class="kaiti">张悦　　高晓梅</span></p>
              <p class="kaiti">美术绘画：<span class="kaiti">张家荣</span></p>
              <p class="kaiti">主讲教师：<span class="kaiti">张悦　　高晓梅</span></p>
              <ul class="fl">
                <li>
                  <p class="wh-nr">表 演 者：</p>
                  <p class="wh-nr kaiti">表&ensp;演&ensp;者：</p>
                </li>
                <li class="fl fl-cl">
                  <span class="kaiti">董恩汐　姚星朵　周清竹　朱婉漠</span>
                  <span class="kaiti">戴嘉墨　高子淇　舒博瑞　曹恩淇</span>
                  <span class="kaiti">刘子璐　郑清妍</span>
                  <span class="kaiti" style="z-index: 10;">刘子璐　郑清妍</span>
                </li>
              </ul>
              <p></p>

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

@@ -3,50 +3,22 @@
    <div id="searchDomBox" style="display: none">
      <div id="searchContent"></div>
    </div>
    <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"
      >
    <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>
      <chapterFive
        v-if="showCatalogList.indexOf(6) > -1"
        :showPageList="loadPageList"
      ></chapterFive>
      <chapterSix
        v-if="showCatalogList.indexOf(7) > -1"
        :showPageList="loadPageList"
      ></chapterSix>
      <chapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList"></chapterThree>
      <chapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList"></chapterFour>
      <chapterFive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList"></chapterFive>
      <chapterSix v-if="showCatalogList.indexOf(7) > -1" :showPageList="loadPageList"></chapterSix>
    </div>
    <miniAudio
      :path="audioPath"
      :currentTime="currentTime"
      @closeMiniAudio="closeMiniAudio"
      ref="audioPlayer"
    ></miniAudio>
    <miniAudio :path="audioPath" :currentTime="currentTime" @closeMiniAudio="closeMiniAudio" ref="audioPlayer">
    </miniAudio>
  </div>
</template>

@@ -192,19 +164,19 @@
    // 测试页面跳转
    // setTimeout(() => {
    //   this.gotoPage(6, 30);
      //   setTimeout(() => {
      //     this.renderSign("Highlight", {
      //       id: "2ACA9359",
      //       txt: "题一学习主题一 运动",
      //       page: "10",
      //       type: "Highlight",
      //       color: "#F5E12A"
      //     });
      // setTimeout(() => {
      //   this.delSign({
      //     ids: ["2ACA9359"]
      //   });
      // }, 2000);
    //   setTimeout(() => {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",
    //       txt: "题一学习主题一 运动",
    //       page: "10",
    //       type: "Highlight",
    //       color: "#F5E12A"
    //     });
    // setTimeout(() => {
    //   this.delSign({
    //     ids: ["2ACA9359"]
    //   });
    // }, 2000);
    // }, 500);

    // const pageDom = (this.container ? this.container : document)
@@ -238,6 +210,7 @@
    // },
    // 滚动监听
    scrollFun(event) {
      this.handleVideoPicture()
      // 判断向上滚动还是向下滚动
      if (event.target.scrollTop > this.previousScrollTop) {
        this.getAduio();
@@ -478,8 +451,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
        if (themeColor) {
          domItem.style.color = themeColor;
        }
@@ -496,8 +469,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
        if (themeColor) {
          domItem.style.backgroundColor = themeColor;
        }
@@ -514,8 +487,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
        if (themeColor) {
          domItem.style.borderColor = themeColor;
        }
@@ -846,7 +819,7 @@
      // 记录高亮信息
      this.highlightData = data;
      // 跳转
      this.gotoPage(data.catalog, data.page, () => {});
      this.gotoPage(data.catalog, data.page, () => { });
    },
    // 页面向下滚动，音频小窗播放功能
    getAduio() {
@@ -935,6 +908,24 @@
        });
      }
    },
    // 视频小窗
    handleVideoPicture() {
      let doms = (
        this.container ? this.container : document
      ).querySelectorAll(".video");
      doms = Array.from(doms)
      if (!doms.length) return false
      const playVudio = doms
        .reverse()
        .find((item) => item.paused == false);
      if (playVudio) {
        const bottomGap = playVudio.getBoundingClientRect().bottom;
        const topGap = playVudio.getBoundingClientRect().top;
        if (bottomGap < 0 || topGap > window.innerHeight) {
          playVudio.requestPictureInPicture();
        }
      }
    }
  },
  components: {
    pageHeader,
@@ -954,6 +945,7 @@
  width: 100%;
  height: 100%;
  overflow: auto;

  .page-content {
    max-width: 816px;
    min-width: 375px;

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

@@ -72,7 +72,7 @@
          <p class="center text">
            <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
              x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
              controlslist="nodownload" class="w100 video "
              controlslist="nodownload" class="w100 video"
              style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
          </p>
          <p class="center videoname">

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

@@ -3,20 +3,46 @@
    <div id="searchDomBox" style="display: none">
      <div id="searchContent"></div>
    </div>
    <div class="page-content" :style="{
      fontSize: fontSize ? fontSize + 'px' : '19px',
      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>
      <chapterFive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList"></chapterFive>
    <div
      class="page-content"
      :style="{
        fontSize: fontSize ? fontSize + 'px' : '19px',
        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>
      <chapterFive
        v-if="showCatalogList.indexOf(6) > -1"
        :showPageList="loadPageList"
      ></chapterFive>
    </div>
    <!-- 音频小窗播放组件 -->
    <miniAudio :path="audioPath" :currentTime="currentTime" @closeMiniAudio="closeMiniAudio" ref="audioPlayer">
    <miniAudio
      :path="audioPath"
      :currentTime="currentTime"
      @closeMiniAudio="closeMiniAudio"
      ref="audioPlayer"
    >
    </miniAudio>
  </div>
</template>
@@ -207,6 +233,7 @@
    // },
    // 滚动监听
    scrollFun(event) {
      this.handleVideoPicture()
      // 判断向上滚动还是向下滚动
      if (event.target.scrollTop > this.previousScrollTop) {
        this.getAduio();
@@ -312,7 +339,10 @@
          this.container ? this.container : document
        ).querySelector(`[page="${data.page}"]`);
        // 创建 createTreeWalker 迭代器，用于遍历文本节点，保存到一个数组
        const treeWalker = document.createTreeWalker(pageDom, NodeFilter.SHOW_TEXT);
        const treeWalker = document.createTreeWalker(
          pageDom,
          NodeFilter.SHOW_TEXT
        );
        const allTextNodes = [];
        let currentNode = treeWalker.nextNode();
        while (currentNode) {
@@ -444,8 +474,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
        if (themeColor) {
          domItem.style.color = themeColor;
        }
@@ -462,8 +492,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
        if (themeColor) {
          domItem.style.backgroundColor = themeColor;
        }
@@ -480,8 +510,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
        if (themeColor) {
          domItem.style.borderColor = themeColor;
        }
@@ -577,7 +607,10 @@
              // 高亮行
              setTimeout(() => {
                // 获取页面所有text节点
                const pageTextList = document.createTreeWalker(target, NodeFilter.SHOW_TEXT);
                const pageTextList = document.createTreeWalker(
                  target,
                  NodeFilter.SHOW_TEXT
                );
                // 匹配关键字
                const allPageTextNodes = [];
                let currentNode = pageTextList.nextNode();
@@ -728,7 +761,7 @@
          propsData: {
            showPageList: [],
            questionData: {},
            isSearch: true
            isSearch: true,
          },
        });
        pageExample.$mount(
@@ -760,7 +793,7 @@
              propsData: {
                showPageList: [pageNum],
                questionData: {},
                isSearch: true
                isSearch: true,
              },
            });
            pageExample.$mount(
@@ -774,7 +807,10 @@
              .querySelector(`[page="${pageNum}"]`);
            if (thisPageDom) {
              // 获取页面所有text节点
              const pageTextList = document.createTreeWalker(thisPageDom, NodeFilter.SHOW_TEXT);
              const pageTextList = document.createTreeWalker(
                thisPageDom,
                NodeFilter.SHOW_TEXT
              );
              // 匹配关键字
              const allPageTextNodes = [];
              let currentNode = pageTextList.nextNode();
@@ -813,7 +849,7 @@
      // 记录高亮信息
      this.highlightData = data;
      // 跳转
      this.gotoPage(data.catalog, data.page, () => { });
      this.gotoPage(data.catalog, data.page, () => {});
    },
    // 页面向下滚动，音频小窗播放功能
    getAduio() {
@@ -867,17 +903,16 @@
      ).querySelectorAll(".audio");
      for (let index = 0; index < allAudio.length; index++) {
        const item = allAudio[index];
        item.addEventListener('play',() => {
        item.addEventListener("play", () => {
          const audioList = Array.from(allAudio);
            for (let cindex = 0; cindex < audioList.length; cindex++) {
          for (let cindex = 0; cindex < audioList.length; cindex++) {
            const citem = audioList[cindex];
            if(citem.currentSrc != item.src) {
              citem.pause()
              
            if (citem.currentSrc != item.src) {
              citem.pause();
            }
          }
          this.closeMiniAudio()
        })
          this.closeMiniAudio();
        });
      }
    },
    // 关闭mini video
@@ -891,18 +926,34 @@
      ).querySelectorAll(".video");
      for (let index = 0; index < allVideo.length; index++) {
        const item = allVideo[index];
        item.addEventListener('playing',(item) => {
          const path  = item.srcElement.src
        item.addEventListener("playing", (item) => {
          const path = item.srcElement.src;
          const videoList = Array.from(allVideo);
          for (let cindex = 0; cindex < videoList.length; cindex++) {
            const citem = videoList[cindex];
            if(citem.currentSrc != path && path) {
              citem.pause()
            if (citem.currentSrc != path && path) {
              citem.pause();
            }
          }
        })
        });
      }
    }
    },
    // 视频小窗
    handleVideoPicture() {
      let doms = (this.container ? this.container : document).querySelectorAll(
        ".video"
      );
      doms = Array.from(doms);
      if (!doms.length) return false;
      const playVudio = doms.reverse().find((item) => item.paused == false);
      if (playVudio) {
        const bottomGap = playVudio.getBoundingClientRect().bottom;
        const topGap = playVudio.getBoundingClientRect().top;
        if (bottomGap < 0 || topGap > window.innerHeight) {
          playVudio.requestPictureInPicture();
        }
      }
    },
  },
  components: {
    pageHeader,
@@ -929,4 +980,4 @@
    padding-bottom: 100px;
  }
}
</style>
</style>