闫增涛
2024-05-29 3465a4b37d56e4a737309ebb7f2965dfcb2090a0
src/books/childHealth/view/content/components/chapter001.vue
@@ -40,7 +40,7 @@
        </p>
        <h6 class="Conclusion-title2">
            <img
          <img
            data-imgurl="../../../assets/images/icon/gjc.png"
            class="img-gn"
            alt=""
@@ -56,14 +56,18 @@
            class="mb-20 open-image"
          /> -->
          <span id="open-image" @click="openImage">
            <img src="../../../assets/images/chapterOne/0014-1.jpg" data-imgurl="/books/book/img/0014-1.56a5dd0f.jpg" class="w100 mt-20">
            <img
              src="../../../assets/images/chapterOne/0014-1.jpg"
              data-imgurl="/books/book/img/0014-1.56a5dd0f.jpg"
              class="w100 mt-20"
            />
          </span>
        </p>
      </div>
    </div>
    <!-- 2 -->
    <div class="page-box" page="10">
      <div v-if="showPageList.indexOf(10) > -1">
    <div class="page-box" page="10"  :show="showPageList.indexOf(10) > -1">
      <div v-show="showPageList.indexOf(10) > -1">
        <div class="header-box">
          <div class="header-border-box"></div>
          <div class="header-num-box">
@@ -356,8 +360,6 @@
              v-if="testOne && questionData"
              ref="examinationOne"
              :cardList="questionData[10]"
              :chapter="1"
              :page="2"
            />
          </div>
          <h2 class="module_block" id="b001" style="margin: 0">
@@ -429,8 +431,8 @@
      </div>
    </div>
    <!-- 3 -->
    <div class="page-box" page="11">
      <div v-if="showPageList.indexOf(11) > -1">
    <div class="page-box" page="11" :show="showPageList.indexOf(11) > -1">
      <div v-show="showPageList.indexOf(11) > -1">
        <div class="page-header-box">
          <span class="page-header-text"
            >专题一&nbsp;学前儿童生理发展特点与保健</span
@@ -468,15 +470,39 @@
            </div>
            <div class="bottom-right" style="width: 35%">
              <div class="mt-40">
                <div class="banshi">
                <div class="banshi openImgBox">
                  <div class="swiper-container">
                    <div class="swiper-wrapper">
                      <div
                        v-for="(item, index) in bonesList"
                        :key="index"
                        class="swiper-slide"
                        :style="`background-image:url(${item})`"
                      ></div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../../assets/images/chapterOne/bones1.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../../assets/images/chapterOne/bones2.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../../assets/images/chapterOne/bones3.png"
                          />
                        </div>
                      </div>
                    </div>
                    <div class="swiper-pagination"></div>
                    <div class="swiper-button-next"></div>
@@ -1001,7 +1027,7 @@
            </div>
            <div class="right" style="width: 60%">
              <video
                :src="pathFive"
                :src="getResourcePath('163c06871b763954952d1cd74373c618')"
                poster="../../../assets/images/chapterOne/people-video-img.jpg"
                webkit-playsinline="true"
                x-webkit-airplay="true"
@@ -4597,19 +4623,18 @@
<script>
import examinations from "@/components/examinations/index.vue";
import getResourcePath from "@/assets/methods/resources";
import Swiper from "swiper/bundle";
import "swiper/swiper-bundle.css";
export default {
  name: "chapter-one",
  components: { examinations },
  props: {
    showPageList: {
      type: Array,
      default: [],
      default: []
    },
    questionData: {
      type: Object,
    },
      type: Object
    }
  },
  data() {
    return {
@@ -4621,19 +4646,15 @@
      jointImg: require("../../../assets/images/chapterOne/0017-1.jpg"),
      footImg: require("../../../assets/images/chapterOne/0017-2.jpg"),
      sitImg: require("../../../assets/images/chapterOne/0018-1.jpg"),
      bonesList: [
        require("../../../assets/images/chapterOne/bones1.png"),
        require("../../../assets/images/chapterOne/bones2.png"),
        require("../../../assets/images/chapterOne/bones3.png"),
      ],
      bonesList: [],
      footList: [
        require("../../../assets/images/chapterOne/foot-01.png"),
        require("../../../assets/images/chapterOne/foot-02.png"),
        require("../../../assets/images/chapterOne/foot-02.png")
      ],
      posureList: [
        require("../../../assets/images/chapterOne/posture-01.png"),
        require("../../../assets/images/chapterOne/posture-02.png"),
        require("../../../assets/images/chapterOne/posture-03.png"),
        require("../../../assets/images/chapterOne/posture-03.png")
      ],
      resourceState: "",
      type: "option",
@@ -4660,7 +4681,7 @@
      eyesImg: require("../../../assets/images/chapterOne/0046-2.jpg"),
      ersImg: require("../../../assets/images/chapterOne/0048-1.jpg"),
      erImg: require("../../../assets/images/chapterOne/0048-2.jpg"),
      img:require("@/books/childHealth/assets/images/chapterOne/0014-1.jpg"),
      img: require("@/books/childHealth/assets/images/chapterOne/0014-1.jpg"),
      productLinkPath: "",
      learnTbaleOne: true,
      videoOne: true,
@@ -4704,7 +4725,7 @@
          qSix: "",
          qSeven: "",
          qEight: "",
          qNine: "",
          qNine: ""
        },
        learnTableTwo: {
          qOne: "",
@@ -4715,7 +4736,7 @@
          qSix: "",
          qSeven: "",
          qEight: "",
          qNine: "",
          qNine: ""
        },
        learnTableThree: {
          qOne: "",
@@ -4726,7 +4747,7 @@
          qSix: "",
          qSeven: "",
          qEight: "",
          qNine: "",
          qNine: ""
        },
        learnTableFour: {
          qOne: "",
@@ -4737,7 +4758,7 @@
          qSix: "",
          qSeven: "",
          qEight: "",
          qNine: "",
          qNine: ""
        },
        learnTableFive: {
          qOne: "",
@@ -4748,14 +4769,14 @@
          qSix: "",
          qSeven: "",
          qEight: "",
          qNine: "",
          qNine: ""
        },
        learnTableSix: {
          qOne: "",
          qTwo: "",
          qThree: "",
          qFour: "",
          qFive: "",
          qFive: ""
        },
        learnTableSeven: {
          qOne: "",
@@ -4764,7 +4785,7 @@
          qFour: "",
          qFive: "",
          qSix: "",
          qSeven: "",
          qSeven: ""
        },
        learnTableEnight: {
          qOne: "",
@@ -4775,7 +4796,7 @@
          qSix: "",
          qSeven: "",
          qEight: "",
          qNine: "",
          qNine: ""
        },
        learnTableNine: {
          qOne: "",
@@ -4785,36 +4806,36 @@
          qFive: "",
          qSix: "",
          qSeven: "",
          qEight: "",
          qEight: ""
        },
        question: {
          judge: {
            qOne: "",
            qTwo: "",
            qThree: "",
            qFour: "",
            qFour: ""
          },
          fill: {
            qOne: {
              one: "",
              two: "",
              two: ""
            },
            qTwo: {
              oen: "",
              two: "",
              two: ""
            },
            qThree: {
              one: "",
              two: "",
              two: ""
            },
            qFour: {
              one: "",
              two: "",
              two: ""
            },
            qFive: {
              one: "",
              two: "",
            },
              two: ""
            }
          },
          short: {
            qOne: "",
@@ -4823,15 +4844,15 @@
            qFour: "",
            qFive: "",
            qSix: "",
            qSeven: "",
          },
        },
            qSeven: ""
          }
        }
      },
      swiper: null,
      swiper: null
    };
  },
  async mounted() {
    this.getSwiper();
    this.getResourcePath = getResourcePath;
    this.getVideoPath();
    const localData = localStorage.getItem("chapterOneData");
    if (localData) {
@@ -4854,6 +4875,13 @@
      clearInterval(window.timerOne);
    }
    localStorage.setItem("chapterOneData", JSON.stringify(this.chapterOneData));
  },
  watch: {
    showPageList: {
      handler(newVal, oldVal) {
        console.log(newVal, "章节接收内容");
      }
    }
  },
  methods: {
    changeResources(type) {
@@ -4902,45 +4930,18 @@
    },
    saveChapterOneData() {
      // 记录第一张输入数据
      console.log("20miao");
      this.saveTime = 20;
      console.log(this.chapterOneData);
      localStorage.setItem(
        "chapterOneData",
        JSON.stringify(this.chapterOneData)
      );
    },
    getSwiper() {
      this.swiper = new Swiper(".swiper-container", {
        loop: true, // 无缝
        autoplay: {
          //自动开始
          delay: 3000, //时间间隔
          disableOnInteraction: false, //*手动操作轮播图后不会暂停*
        },
        paginationClickable: true,
        slidesPerView: 1, // 一组三个
        spaceBetween: 30, // 间隔
        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
        observer: true,
        observeParents: true,
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
          clickable: true, // 分页器可以点击
        },
      });
    },
    openImage() {
      let container = document.getElementById("open-image");
      let viewr = new Viewer(container, {
        inline: false, // 是否以内联方式显示预览
        url:'data-imgurl',
        url: "data-imgurl",
        toolbar: {
          zoomIn: 1, // 是否显示放大按钮
          zoomOut: 1, // 是否显示缩小按钮
@@ -4952,11 +4953,11 @@
          rotateLeft: 0, // 是否显示向左旋转按钮
          rotateRight: 0, // 是否显示向右旋转按钮
          flipHorizontal: 0, // 是否显示水平翻转按钮
          flipVertical: 0, // 是否显示垂直翻转按钮
        },
          flipVertical: 0 // 是否显示垂直翻转按钮
        }
      });
    },
  },
    }
  }
};
</script>
@@ -5041,18 +5042,10 @@
  justify-content: space-evenly;
}
//
.banshi {
  margin-top: 40px;
  width: 100%;
  height: 250px;
  margin: 0 auto;
  .swiper-slide {
    position: relative;
    width: 100%;
    height: 250px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
  }
}
</style>