合并

闫增涛

2024-05-31 38e66dbf57bf649228c7600b99586d44b018fc59

合并

 src/books/artAndDance/assets/images/01.gif

 src/books/artAndDance/assets/main.less

@@ -64,8 +64,8 @@

  .img {
    text-align: center;
    font-size: 0.8em;
    color: #5d78bb;
    font-size:18px;
    color: #000;
    margin-left: 0%;
    margin-right: 0%;
    text-indent: 0em;

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

@@ -1,5 +1,5 @@
<template>
  <div class="chapter" num="1">
  <div class="chapter" num="2">
    <div class="page-box" page="4">
      <div v-if="showPageList.indexOf(4) > -1">
        <img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
@@ -88,7 +88,7 @@
      </div>
    </div>
    <div class="page-box" page="7">
      <div v-if="showPageList.indexOf(5) > -1" class="pg-mh">
      <div v-if="showPageList.indexOf(7) > -1" class="pg-mh">
        <img
          src="../../assets/images/pageContentHeader.jpg"
          alt=""
@@ -124,7 +124,7 @@
        <ul class="pb-box">
          <li class="ml-40">
            <img src="../../assets/images/icon/tree.jpg" />
            <span class="dl-ib"> 2 </span>
            <span class="dl-ib"> 4 </span>
          </li>
          <li>
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />

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

New file
@@ -0,0 +1,144 @@
<template>
  <div class="chapter" num="3">
    <div class="page-box" page="8">
      <div v-if="showPageList.indexOf(8) > -1">
        <img class="img-0" alt="" src="../../assets/images/dy2.jpg" />
      </div>
    </div>
    <div class="page-box" page="9">
      <div v-if="showPageList.indexOf(9) > -1" class="pg-mh">
        <img
          src="../../assets/images/pageContentHeader.jpg"
          alt=""
          class="w100 mb-40"
        />
        <div class="padding-96">
          <p class="center">
            <img class="img-b" alt="" src="../../assets/images/image10-1.jpg" />
          </p>
          <p class="center">
            <img class="img-a" alt="" src="../../assets/images/image10-2.jpg" />
          </p>
          <p class="img">“羊角式”舞姿</p>
        </div>
        <ul class="pb-box">
          <li class="ml-40">
            <img src="../../assets/images/icon/tree.jpg" />
            <span class="dl-ib"> 6 </span>
          </li>
          <li>
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
      </div>
    </div>
    <div class="page-box" page="10">
      <div v-if="showPageList.indexOf(10) > -1" class="pg-mh">
        <div>
          <img src="../../assets/images/chapter-one-header.png" class="w100" />
        </div>
        <div class="padding-96">
          <h2 class="lefth2" id="b005">
            <img class="img-gn" alt="" src="../../assets/images/rhybx.jpg" />
          </h2>
          <h3 id="c004">元素</h3>
          <p class="block2">单指立于头顶模仿羊角</p>
          <p class="block1"><span class="ls">——羊角式</span></p>
          <p class="block2">双膝跪于地面</p>
          <p class="block1"><span class="ls">——双跪坐</span></p>
          <p class="block2">左右脚交替踏地</p>
          <p class="block1"><span class="ls">——原地小碎步、移动小碎步</span></p>
          <p class="block2">腰部拧转</p>
          <p class="block1"><span class="ls">——旁腰、拧腰</span></p>
          <h3 id="c005">空间与方向</h3>
          <p class="block2">高、中、低空间</p>
          <p class="block2">1-8点方向</p>
          <h2 class="lefth2" id="b006">
            <img class="img-gn" alt="" src="../../assets/images/xsyty.jpg" />
          </h2>
          <h3 id="c006">亡羊补牢</h3>
          <p class="block2">席一元</p>
          <p class="block2">羊啊羊啊咩咩叫，有只小羊不见了。</p>
          <p class="block2">墙啊墙啊垒高高，墙上有个大窟窿。</p>
        </div>
        <ul>
          <li class="fl ju-end mr-40">
            <div>
              <span class="dl-ib"> 7 </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="11">
      <div v-if="showPageList.indexOf(10) > -1" class="pg-mh">
        <img
          src="../../assets/images/pageContentHeader.jpg"
          alt=""
          class="w100 mb-40"
        />
        <div class="padding-96">
          <p class="block2">羊啊羊啊咩咩叫，羊儿全都吓坏了。</p>
          <p class="block2">窟窿窟窿黑洞洞，快快补上才安心。</p>
          <p class="center">
            <!-- <img class="img-g" alt="" src="../../assets/images/i0012-1.jpg" /> -->
          </p>
          <h2 class="lefth2" id="b007">
            <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 class="bj2">
              <p class="block">
                根据本单元所学的舞蹈元素以及成语寓意，发挥想象，创编出新的单一舞蹈动作或造型吧。
              </p>
            </div>
          </div>
          <h2 class="lefth2" id="b008">
            <img class="img-gn1" alt="" src="../../assets/images/tz.jpg" />
          </h2>
          <p class="center"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></p>
        </div>
        <ul class="pb-box">
          <li class="ml-40">
            <img src="../../assets/images/icon/tree.jpg" />
            <span class="dl-ib"> 8 </span>
          </li>
          <li>
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "chapterTwo",
  props: {
    showPageList: {
      type: Array,
    },
  },
};
</script>

<style lang="scss" scoped></style>

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

@@ -17,6 +17,11 @@
        v-if="showCatalogList.indexOf(2) > -1"
        :showPageList="loadPageList"
      ></chapterOne>
      <chapterTwo
        v-if="showCatalogList.indexOf(3) > -1"
        :showPageList="loadPageList"
      >
      </chapterTwo>
    </div>
  </div>
</template>
@@ -24,6 +29,7 @@
<script>
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
import chapterTwo from "./chapter002.vue";
import NoteIcon from "@/assets/images/biji.png";
import _ from "lodash";
import Swiper from "swiper/bundle";
@@ -33,7 +39,7 @@
export default {
  data() {
    return {
      catalogLength: 2, // 总章节数
      catalogLength: 3, // 总章节数
      showCatalogList: [], // 显示的章节
      loadThreshold: 300, // 触发加载阈值
      throttleThreshold: 100, // 节流阈值
@@ -565,40 +571,40 @@
      for (let i = 0; i < pptDoms.length; i++) {
        const dom = pptDoms[i];
        new Swiper(dom, {
        loop: false, // 无缝
        autoplay: false,
        paginationClickable: true,
        slidesPerView: 1, // 一组三个
        spaceBetween: 30, // 间隔
        // 如果需要前进后退按钮
        navigation: {
          nextEl: (this.container ? this.container : document).querySelector(
            ".swiper-button-next"
          ),
          prevEl: (this.container ? this.container : document).querySelector(
            ".swiper-button-prev"
          ),
        },
        // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
        observer: true,
        observeParents: true,
        on: {
          init:(value) => {
            let currentPage = value.activeIndex + 1; // 获取当前页（从1开始计数）
            let totalPages = value.slides.length; // 获取总页数
            var paginationInfoEl = dom.querySelector('.pageBox');
            if(paginationInfoEl)
              paginationInfoEl.textContent = currentPage + '/' + totalPages;
          loop: false, // 无缝
          autoplay: false,
          paginationClickable: true,
          slidesPerView: 1, // 一组三个
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: (this.container ? this.container : document).querySelector(
              ".swiper-button-next"
            ),
            prevEl: (this.container ? this.container : document).querySelector(
              ".swiper-button-prev"
            ),
          },
          slideChange:(value) => {
            let currentPage = value.activeIndex + 1; // 获取当前页（从1开始计数）
            let totalPages = value.slides.length; // 获取总页数
            var paginationInfoEl = dom.querySelector('.pageBox');
            if(paginationInfoEl)
              paginationInfoEl.textContent = currentPage + '/' + totalPages;
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
          observeParents: true,
          on: {
            init: (value) => {
              let currentPage = value.activeIndex + 1; // 获取当前页（从1开始计数）
              let totalPages = value.slides.length; // 获取总页数
              var paginationInfoEl = dom.querySelector(".pageBox");
              if (paginationInfoEl)
                paginationInfoEl.textContent = currentPage + "/" + totalPages;
            },
            slideChange: (value) => {
              let currentPage = value.activeIndex + 1; // 获取当前页（从1开始计数）
              let totalPages = value.slides.length; // 获取总页数
              var paginationInfoEl = dom.querySelector(".pageBox");
              if (paginationInfoEl)
                paginationInfoEl.textContent = currentPage + "/" + totalPages;
            },
          },
        },
      });
        });
      }
    },
    initViewer() {
@@ -622,7 +628,7 @@
      console.log("生僻字", event, word);
      if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) {
        this.$store.state.qiankun.chooseWords({
          type:"word",
          type: "word",
          word,
          x: event.pageX,
          y: event.pageY,
@@ -634,6 +640,7 @@
  components: {
    pageHeader,
    chapterOne,
    chapterTwo,
  },
};
</script>