嵌入式优化

闫增涛

2024-05-31 574ab216e6d4c9e9865801e3ccc0fa032b28b475

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

@@ -830,11 +830,19 @@
                >
              </p>
            </div>
            <ul class="w100 fl fw-wr">
              <li>
            <p>get selected as ...被选为……</p>
            <p>(a) variety of ...各种各样的……</p>
            <p>come across 偶遇；碰到</p>
              </li>
              <li>
            <p>be curious about ...对……感到好奇</p>
            <p>along the way 沿途</p>
              </li>
            </ul>
            
            
            <div class="bj-note">
              <p class="m0"><b class="fz-18">Notes:</b></p>
              <p class="m0">
@@ -1664,7 +1672,7 @@
            </div>
            <div class="resource-primary-border" style="padding: 8px">
              <div class="banshi openImgBox">
                <div class="swiper-container swiper-ppt">
                <div class="swiper-container swiper_ppt">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <div class="imgBox" style="width: 100%; height: 100%">
@@ -1804,9 +1812,9 @@
                  </div>
                  <div class="swiper-button-next"></div>
                  <div class="swiper-button-prev"></div>
                   <!-- 显示当前页和总页数的元素 -->  
                  <div class="pagination-info"></div> 
                </div>
                <!-- 显示当前页和总页数的元素 -->
                <div class="pageBox">{{ pageNum }} / {{ total }}</div>
              </div>
            </div>
          </div>
@@ -2298,13 +2306,24 @@

<script>
import getResourcePath from "@/assets/methods/resources";

import Swiper from "swiper/bundle";
import "swiper/swiper-bundle.css";
export default {
  name: "chapter-one",
  props:{
    showPageList:{
      type:Array
      type: Array,
    },
  },
  watch: {
    showPageList: {
      handler(newVal, oldVal) {
        if (newVal.indexOf(14) > -1) {
          console.log("页码", newVal, oldVal);
          this.setSwiper();
    }
      },
    },
  },
  data() {
    return {
@@ -2316,6 +2335,8 @@
      showAnswerFive: false,
      showImg: false,
      showQuestionAnswer: false,
      pageNum: "1",
      total: "27",
      questionData: {
        warnUp: {
          one: {
@@ -2480,7 +2501,7 @@
      localStorage.setItem("english-testOne", JSON.stringify(this.testData));
    },
    changeTestData() {
      localStorage.removeItem("english-testOne")
      localStorage.removeItem("english-testOne");
      this.testData = {
        check:[],
        tx: {
@@ -2524,7 +2545,7 @@
          four: "",
          five: "",
        },
      }
      };
    },
    setBookQuestion() {
      localStorage.setItem(
@@ -2594,11 +2615,11 @@
      this.dropdownData = dropdownDatas;
    },
    changeDropdown() {
      localStorage.removeItem("english-dropdown-one")
      localStorage.removeItem("english-dropdown-one");
      for(let key in this.dropdownData) {
        const item =  this.dropdownData[key]
        item.value = ""
        item.isRight = null
        const item = this.dropdownData[key];
        item.value = "";
        item.isRight = null;
      }
    },
    setDropdownData() {
@@ -2609,7 +2630,52 @@
    },
    saveData() {
      console.log(this.testData);
    }
    },
    setSwiper() {
      const that = this;
      const dom = document.querySelector(".swiper_ppt");
      console.log("dom", dom);
      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: {
          slideChange: function (value) {
            console.log("ppt页码", value);
            let currentPage = value.activeIndex + 1; // 获取当前页（从1开始计数）
            let totalPages = value.slides.length; // 获取总页数
            // this.changePage(currentPage)
            that.pageNum = currentPage;
            this.total = totalPages;
            console.log(this.pageNum, this.total);
          },
          // slideChangeTran sitionStart:function (value) {
          //   // 每当滑块改变时触发，更新当前页和总页数的显示
          //   let currentPage = value.activeIndex + 1; // 获取当前页（从1开始计数）
          //   let totalPages = value.slides.length; // 获取总页数
          //   var paginationInfoEl = document.querySelector('.pagination-info');
          //   paginationInfoEl.textContent = currentPage + '/' + totalPages;
          // }
        },
      });
    },
    changePage(value) {
      this.pageNum = value;
    },
  },
};
</script>
@@ -2646,7 +2712,7 @@
  font-size: 14px;
  border-width: 1px;
  min-width: 80px;
  min-height: 28px;
  height: 30px;
  background-color: #fff;
  &:hover {
    background-color: #0bab87;
@@ -2654,11 +2720,19 @@
  }
}
.banshi {
  position: relative;
  margin-top: 40px;
  width: 100%;
  height: 350px;
  margin: 0 auto;
}
.pageBox {
  z-index: 9999999999;
  color: #999;
  position: absolute;
  left: 48%;
  bottom: 0px;
}
select {
  height: 24px;
}