合并代码

闫增涛

2024-06-11 b6714063e5c7b3d140d4b8de19549ef93c35766b

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

@@ -0,0 +1,200 @@
<template>
  <div class="chapter" num="2">
    <div class="page-box" page="4" style="min-height: auto">
      <div v-if="showPageList.indexOf(4) > -1">
        <img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
        <img src="../../assets/images/01.gif" alt="" style="width: 53%;" class="cover-img">
        <audio></audio>
      </div>
    </div>
    <div class="page-box" page="5">
      <div v-if="showPageList.indexOf(5) > -1" class="pg-mh fl fl-cl">
        <img
          src="../../assets/images/pageContentHeader.jpg"
          alt=""
          class="w100 mb-40"
        />
        <div class="padding-96">
          <p class="center">
            <img class="img-a" alt="" src="../../assets/images/01-2.gif" />
          </p>
          <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>
          <p class="block2 fz-26">配合步伐</p>
          <p class="block1 w70"><span class="ls fz-26">——上步晃手</span></p>
        </div>
        <ul class="pb-box">
          <li class="ml-40">
            <img src="../../assets/images/icon/tree.jpg" />
            <span class="dl-ib"> 2 </span>
          </li>
          <li>
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
      </div>
    </div>
    <div class="page-box" page="6">
      <div v-if="showPageList.indexOf(6) > -1">
        <div>
          <img src="../../assets/images/chapter-one-header.png" class="w100" />
        </div>
        <div class="padding-96">
          <h3 id="c002">空间与方向</h3>
          <p class="block2">高、中空间</p>
          <p class="block2">1、2、4、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="c003">黄鹤楼送孟浩然之广陵</h3>
          <p class="block2 fm-son ">〔唐〕李白</p>
          <p class="block2 m16-0">故人西辞黄鹤楼，</p>
          <p class="block2 m16-0">烟花三月下扬州。</p>
          <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
            controlslist="nodownload"
            class="w100"
            style="margin-top: 40px;"
          ></video>
        </div>
        <ul>
          <li class="fl ju-end mr-40">
            <div>
              <span class="dl-ib"> 3 </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="7">
      <div v-if="showPageList.indexOf(7) > -1" class="pg-mh">
        <img
          src="../../assets/images/pageContentHeader.jpg"
          alt=""
          class="w100 mb-40"
        />
        <div class="padding-96">
          <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 class="pb-box">
          <li class="ml-40">
            <img src="../../assets/images/icon/tree.jpg" />
            <span class="dl-ib"> 4 </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: "chapterOne",
  props: {
    showPageList: {
      type: Array,
    },
  },
  mounted() {
    this.getVidoePath();
  },
  data() {
    return {
      videoPathOne: "",
      auidoPathOne:"",
      auidoPathTwo:"",
    
    };
  },
  methods: {
   async getVidoePath() {
      this.videoPathOne = await getResourcePath("db8040667457cc6fc9b0209009acb316");
      this.auidoPathOne = await getResourcePath("2c5f6c69b0f9f7a3c03e473cb8c977f5");
      this.auidoPathTwo = await getResourcePath("e93c0fdde08be5a4386c8c863892a287");
    },
  },
};
</script>

<style lang="less" scoped>
.w70 {
  width: 78%;
}
.fw-400 {
  font-weight: 400 !important;
}
.fz-26 {
  font-size: 26px !important;
}
.cover-img {
  position: absolute;
  top: 33%;
  left: 23%;
}
.division-line {
  width: 2px;
  height: 100%;
  background-color: red;
}
</style>