轮播图和图片查看

YM

2024-05-29 4a876a152948cd153c4f8a4a86b49aee377bb9ac

 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,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
                        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>
@@ -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",
@@ -4660,7 +4683,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 +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%;
  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>