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

unknown

2024-06-03 9f30214341d224c31efef740e4a4f99a928d1422

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

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

 src/books/artAndDance/assets/images/chapter-two-header.png

 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;
@@ -369,6 +369,9 @@
  .m0 {
    margin: 0;
  }
  .mt-40 {
    margin-top: 40px !important;
  }
  .mb-20 {
    margin-bottom: 20px;
  }

 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,170 @@
<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-two-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>
          <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"
          ></video>
          <h2 class="lefth2 mt-40" 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>
          <h2 class="lefth2 mt-40" id="b008">
            <img class="img-gn1" alt="" src="../../assets/images/tz.jpg" />
          </h2>
          <div class="bj2">
              <p class="block">
                根据本单元所学的舞蹈元素以及成语寓意，发挥想象，创编出新的单一舞蹈动作或造型吧。
              </p>
            </div>
          <!-- <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>
import getResourcePath from "@/assets/methods/resources";
export default {
  name: "chapterTwo",
  props: {
    showPageList: {
      type: Array,
    },
  },
  mounted() {
    this.getVidoePath();
  },
  data() {
    return {
      videoPathOne: "",
    };
  },
  methods: {
    getVidoePath() {
      this.videoPathOne = getResourcePath("f6aaaed901868114d948031615250bed");
    },
  },
};
</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>

 src/books/childHealth/view/content/index.vue

@@ -15,6 +15,8 @@
        v-if="showCatalogList.indexOf(1) > -1"
        :showPageList="loadPageList"
      ></pageHeader>
      <!-- <button @click="setZoom1">测试放大</button> -->
      <!-- <button @click="setZoom2">测试缩小</button> -->
      <chapterOne
        v-if="showCatalogList.indexOf(2) > -1"
        :showPageList="loadPageList"
@@ -157,6 +159,14 @@
          this.initViewer();
        }, 200);
      }
    },
    pageZoom: {
      handler(newVal, oldVal) {
        const scrollBox = (
          this.container ? this.container : document
        ).querySelector(".page-main");
        scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
      }
    }
  },
  mounted() {
@@ -192,7 +202,7 @@
        // 跳转检索结果位置
        jumpSearchItem: (data) => {
          this.searchItemLocation(data);
        },
        }
      });
    }

@@ -218,37 +228,51 @@

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

      // const pageDom = (this.container ? this.container : document)
      //   .querySelector("#app")
      //   .querySelectorAll(".page-box");
      // 检索
      // console.log(this.searchTextByPage("保护内脏器官"), "searchTextByPage");
      // 检索跳转
      // this.searchItemLocation({
      //   catalog: 2,
      //   page: 10,
      //   txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ",
      //   txtIndex: 57
      // });
    // const pageDom = (this.container ? this.container : document)
    //   .querySelector("#app")
    //   .querySelectorAll(".page-box");
    // 检索
    // console.log(this.searchTextByPage("保护内脏器官"), "searchTextByPage");
    // 检索跳转
    // this.searchItemLocation({
    //   catalog: 2,
    //   page: 10,
    //   txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ",
    //   txtIndex: 57
    // });
    // }, 5000);
  },
  methods: {
    // setZoom1() {
    //   let scale = this.$store.state.qiankun.scale + 10;
    //   const scrollBox = (
    //     this.container ? this.container : document
    //   ).querySelector(".page-main");
    //   this.$store.commit("setZoom", scale);
    // },
    // setZoom2() {
    //   let scale = this.$store.state.qiankun.scale - 10;
    //   const scrollBox = (
    //     this.container ? this.container : document
    //   ).querySelector(".page-main");
    //   this.$store.commit("setZoom", scale);
    // },
    // 滚动监听
    scrollFun(event) {
      // 判断向上滚动还是向下滚动
@@ -633,7 +657,9 @@
                }
                for (let i = 0; i < allPageTextNodes.length; i++) {
                  const textDom = allPageTextNodes[i];
                  let txtIndex = textDom.textContent.indexOf(this.highlightData.txt);
                  let txtIndex = textDom.textContent.indexOf(
                    this.highlightData.txt
                  );
                  if (txtIndex > -1) {
                    textDom.parentNode.style.transition =
                      "background-color 0.8s";
@@ -697,40 +723,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() {

 src/store/index.js

@@ -9,24 +9,21 @@
  actions: {
  },
  mutations: {
    setTestList(state,value) {
      state.testList = value
    },
    setQiankun(state,value) {
      state.qiankun = value
    },
    setQuestionData(state,value) {
      state.questionData = value
    },
    setRootCmsItemId(state,value) {
      state.rootCmsItemId = value
    setZoom(state,value) {
      state.qiankun.scale = value
    }
  },
  state: {
    
    // 状态数据定义
    num:1,
    testList:[],
    qiankun: {},
    qiankun: {
      scale: 100,
    },
    questionData:{},
    rootCmsItemId:''
  },