Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

YM

2024-06-07 cc7bbbd9b6a859235c9985cc09836effc1157fe8

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

New file
@@ -0,0 +1,243 @@
<template>
  <div class="chapter" num="6">
    <div class="page-box" page="20" style="min-height: auto">
      <div v-if="showPageList.indexOf(20) > -1">
        <img class="img-0" alt="" src="../../assets/images/dy5.jpg" />
        <img
          src="../../assets/images/10-2.gif"
          alt=""
          style="width: 54%"
          class="cover-gif"
        />
      </div>
    </div>
    <div class="page-box" page="21">
      <div v-if="showPageList.indexOf(21) > -1" class="pg-mh fl fl-cl">
        <img
          src="../../assets/images/pageContentHeader.jpg"
          alt=""
          class="w100 mb-40"
        />
        <div class="padding-96">
          <ul class="fl fl-cl al-cn img-state" style="margin-top: 100px">
            <li style="width: 45%">
              <img
                src="../../assets/images/crane.png"
                alt=""
                class="w100"
                :style="{ opacity: (10 - num) / 10 }"
              />
            </li>
            <li style="width: 35%">
              <img
                src="../../assets/images/rise.png"
                alt=""
                class="w100"
                :style="{ opacity: num / 10 }"
              />
            </li>
          </ul>
          <p class="img">“西塞山前白鹭飞”动作</p>
        </div>
        <ul class="pb-box">
          <li class="ml-40">
            <img src="../../assets/images/icon/tree.jpg" />
            <span class="dl-ib"> 18 </span>
          </li>
          <li>
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
      </div>
    </div>
    <div class="page-box" page="22">
      <div v-if="showPageList.indexOf(22) > -1">
        <div>
          <img
            src="../../assets/images/chapter-five-header.png"
            class="w100"
          />
        </div>
        <div class="padding-96">
          <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>
          <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>
          <p class="block1 w70">
            <span class="ls fz-26">——大波浪手</span>
          </p>
          <h3 id="c002">空间与方向</h3>
          <p class="block2">高、中、低空间</p>
          <p class="block2">1、2、3、7、8点方向</p>
          <h2 class="lefth2" id="b002">
            <img class="img-gn" alt="" src="../../assets/images/xsyty.jpg" />
          </h2>
          <ul class="fl fl-cl al-cn audio-box">
            <li class="fl al-cn">
              <span class="wh-nr auido-text mr-8">男童音</span>
              <audio :src="auidoPathOne" controls></audio>
            </li>
            <li class="fl al-cn mt-20">
              <span class="wh-nr auido-text mr-8"> 女童音 </span>
              <audio :src="auidoPathTwo" controls></audio>
            </li>
          </ul>
          <h3 id="c015">渔歌子</h3>
          <p class="block2 fm-son">〔唐〕张志和</p>
          <p class="block2 m16-0">西塞山前白鹭飞，</p>
          <p class="block2 m16-0">桃花流水鳜鱼肥。</p>
        </div>
        <ul>
          <li class="fl ju-end mr-40">
            <div>
              <span class="dl-ib"> 19 </span>
              <img src="../../assets/images/icon/tree.jpg" />
            </div>
          </li>
          <li>
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
      </div>
    </div>
    <div class="page-box" page="23">
      <div v-if="showPageList.indexOf(23) > -1" class="pg-mh">
        <img
          src="../../assets/images/pageContentHeader.jpg"
          alt=""
          class="w100 mb-40"
        />
        <div class="padding-96">
          <p class="block2 m16-0">青箬笠，绿蓑衣，</p>
          <p class="block2 m16-0">斜风细雨不须归。</p>
          <video
            :src="videoPathOne"
            webkit-playsinline="true"
            x-webkit-airplay="true"
            playsinline="true"
            x5-video-orientation="h5"
            x5-video-player-fullscreen="true"
            x5-playsinline=""
            controls
            class="w100"
            style="margin:38px 0"
          ></video>
          <h2 class="lefth2" id="b003">
            <img class="img-gn" alt="" src="../../assets/images/czysj.jpg" />
          </h2>
          <div class="bj1">
            <p class="block">
              <img
                class="inline"
                alt=""
                src="../../assets/images/dn.png"
              />运用所学舞蹈元素，设立白鹭飞翔的两个不同场景。
            </p>
            <p class="block">
              <img
                class="inline"
                alt=""
                src="../../assets/images/dn.png"
              />学生自愿分组，每组自行设置与该诗情感相关的主题，在教师的引导下进行创编，并富有情感地展示出来。
            </p>
          </div>
          <h2 class="lefth2" id="b004">
            <img class="img-gn1" alt="" src="../../assets/images/tz.jpg" />
          </h2>
          <div class="bj2">
            <p class="block">
              根据本单元所学的舞蹈元素以及古诗寓意，发挥想象，创编新的单一舞蹈动作或造型吧。
            </p>
          </div>
        </div>
        <ul>
          <li class="ml-40">
            <img src="../../assets/images/icon/tree.jpg" />
            <span class="dl-ib"> 20 </span>
          </li>
          <li>
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getResourcePath } from "@/assets/methods/resources";
export default {
  name: "chapterFive",
  props: {
    showPageList: {
      type: Array,
    },
  },
  mounted() {
    this.getVidoePath();
    this.addNum();
  },
  data() {
    return {
      videoPathOne: "",
      auidoPathOne: "",
      auidoPathTwo: "",
      num: 0,
    };
  },
  unmounted() {
    if (this.addTimer) {
      clearInterval(this.addTimer);
    }
    if (this.cutTimer) {
      clearInterval(this.cutTimer);
    }
  },
  methods: {
    async getVidoePath() {
      this.videoPathOne = await getResourcePath(
        "97758c885b8668f42c9df0b3ff030672"
      );
      this.auidoPathOne = await getResourcePath(
        "aed4d7b398283b35df0ca46f7c0bbdd4"
      );
      this.auidoPathTwo = await getResourcePath(
        "ec8b7f69df81b1d6230968ad2313132c"
      );
    },
    addNum() {
      this.addTimer = setInterval(() => {
        if (this.num < 10) {
          this.num++;
        } else {
          clearInterval(this.addTimer);
          this.cutNum();
        }
      }, 200);
    },
    cutNum() {
      this.cutTimer = setInterval(() => {
        if (this.num > 0) {
          this.num--;
        } else {
          clearInterval(this.cutTimer);
          this.addNum();
        }
      }, 200);
    },
  },
};
</script>

<style lang="less" scoped>
.cover-gif {
  position: absolute;
  top: 32%;
  left: 22%;
}
</style>