轮播图和图片查看

YM

2024-05-29 4a876a152948cd153c4f8a4a86b49aee377bb9ac

轮播图和图片查看

 package.json

@@ -17,6 +17,7 @@
    "qiankun": "^2.10.16",
    "spark-md5": "^3.0.2",
    "swiper": "^6.8.1",
    "viewerjs": "^1.11.6",
    "vue": "^2.6.14",
    "vuex": "^3.6.2"
  },

 public/index.html

@@ -8,8 +8,6 @@
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.0/viewer.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.10.0/viewer.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.1/css/swiper.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.1/js/swiper.js"></script>
    <title>数字教材</title>

 src/App.vue

@@ -109,4 +109,27 @@
  border-bottom: 2px solid;
  cursor: pointer;
}

/* swiper */
.swiper-container{
  width: 100%;
  height: 100%;
}

.imgBox{
  position: relative;
}

.imgBox img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
</style>

 src/books/childHealth/view/content/components/chapter001.vue

@@ -56,7 +56,11 @@
            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>
@@ -468,15 +472,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 class="swiper-slide">
                      <div
                        v-for="(item, index) in bonesList"
                        :key="index"
                        class="swiper-slide"
                        :style="`background-image:url(${item})`"
                      ></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>
@@ -4597,19 +4625,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 +4648,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",
@@ -4704,7 +4727,7 @@
          qSix: "",
          qSeven: "",
          qEight: "",
          qNine: "",
          qNine: ""
        },
        learnTableTwo: {
          qOne: "",
@@ -4715,7 +4738,7 @@
          qSix: "",
          qSeven: "",
          qEight: "",
          qNine: "",
          qNine: ""
        },
        learnTableThree: {
          qOne: "",
@@ -4726,7 +4749,7 @@
          qSix: "",
          qSeven: "",
          qEight: "",
          qNine: "",
          qNine: ""
        },
        learnTableFour: {
          qOne: "",
@@ -4737,7 +4760,7 @@
          qSix: "",
          qSeven: "",
          qEight: "",
          qNine: "",
          qNine: ""
        },
        learnTableFive: {
          qOne: "",
@@ -4748,14 +4771,14 @@
          qSix: "",
          qSeven: "",
          qEight: "",
          qNine: "",
          qNine: ""
        },
        learnTableSix: {
          qOne: "",
          qTwo: "",
          qThree: "",
          qFour: "",
          qFive: "",
          qFive: ""
        },
        learnTableSeven: {
          qOne: "",
@@ -4764,7 +4787,7 @@
          qFour: "",
          qFive: "",
          qSix: "",
          qSeven: "",
          qSeven: ""
        },
        learnTableEnight: {
          qOne: "",
@@ -4775,7 +4798,7 @@
          qSix: "",
          qSeven: "",
          qEight: "",
          qNine: "",
          qNine: ""
        },
        learnTableNine: {
          qOne: "",
@@ -4785,36 +4808,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 +4846,14 @@
            qFour: "",
            qFive: "",
            qSix: "",
            qSeven: "",
            qSeven: ""
          }
        }
          },
        },
      },
      swiper: null,
      swiper: null
    };
  },
  async mounted() {
    this.getSwiper();
    this.getVideoPath();
    const localData = localStorage.getItem("chapterOneData");
    if (localData) {
@@ -4910,37 +4932,12 @@
        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 +4949,11 @@
          rotateLeft: 0, // 是否显示向左旋转按钮
          rotateRight: 0, // 是否显示向右旋转按钮
          flipHorizontal: 0, // 是否显示水平翻转按钮
          flipVertical: 0, // 是否显示垂直翻转按钮
        },
          flipVertical: 0 // 是否显示垂直翻转按钮
        }
      });
    },
  },
    }
  }
};
</script>

@@ -5041,18 +5038,10 @@
  justify-content: space-evenly;
}

//
.banshi {
  margin-top: 40px;
  width: 100%;
  margin: 0 auto;
  .swiper-slide {
    position: relative;
    width: 100%;
    height: 250px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
  }
  margin: 0 auto;
}
</style>

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

@@ -98,6 +98,10 @@
import _ from "lodash";
import getQuestionList from "@/assets/methods/examination";
import testData from "../../assets/examinationList";
import Swiper from "swiper/bundle";
import "swiper/swiper-bundle.css";
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
export default {
  data() {
    return {
@@ -138,6 +142,14 @@
          this.initObservation();
          this.initThemeColor();
        }, 500);
      }
    },
    loadPageList: {
      handler(newVal, oldVal) {
        setTimeout(() => {
          this.initSwiper();
          this.initViewer();
        }, 200);
      }
    }
  },
@@ -189,8 +201,8 @@
    }, 500);

    // 测试页面跳转
    // setTimeout(() => {
    //   this.gotoPage(5, 100);
    setTimeout(() => {
      this.gotoPage(1, 11);
    //   setTimeout(() => {
    //     this.renderSign("Note", {
    //       id: "2ACA9359",
@@ -205,7 +217,7 @@
    //       });
    //     }, 2000);
    //   }, 1000);
    // }, 3000);
    }, 1000);
  },
  methods: {
    // 滚动监听
@@ -475,18 +487,18 @@
            "chapter"
          );
          const catalog = catalogDom.getAttribute("num");
          console.log(page, "page", catalog, "catalog",);
          let text = null
          if(target.querySelector('p')) {
            console.log(target.querySelector('p').textContent.substring(0, 20));
            text = target.querySelector('p').textContent.substring(0, 20)
          console.log(page, "page", catalog, "catalog");
          let text = null;
          if (target.querySelector("p")) {
            console.log(target.querySelector("p").textContent.substring(0, 20));
            text = target.querySelector("p").textContent.substring(0, 20);
          }
          // 返回页码和章节信息
          if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange)
            this.$store.state.qiankun.pageChange({
              page: page,
              catalog: catalog,
              text,
              text
            });
          // const sections = Array.from(document.querySelectorAll(".section"));
          //sections：获取所有具有 .section 类名的元素，并转换为数组。
@@ -539,6 +551,51 @@
        }
      });
    },
    initSwiper() {
      const doms = (
        this.container ? this.container : document
      ).querySelectorAll(".swiper-container");
      for (let i = 0; i < doms.length; i++) {
        const dom = doms[i];
        new Swiper(dom, {
          loop: false, // 无缝
          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 // 分页器可以点击
          }
        });
      }
    },
    initViewer() {
      const doms = (
        this.container ? this.container : document
      ).querySelectorAll(".openImgBox");
      for (let i = 0; i < doms.length; i++) {
        const dom = doms[i];
        new Viewer(dom, {
          navbar: true, // 显示导航栏
          toolbar: true, // 显示工具栏
          title: true // 显示标题
        });
      }
    }
  },
  components: {
    pageHeader,

 yarn.lock

Diff too large