From 4a876a152948cd153c4f8a4a86b49aee377bb9ac Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期三, 29 五月 2024 15:07:21 +0800
Subject: [PATCH] 轮播图和图片查看
---
src/books/childHealth/view/content/components/chapter001.vue | 155 ++++++++++++++++++++++++---------------------------
1 files changed, 72 insertions(+), 83 deletions(-)
diff --git a/src/books/childHealth/view/content/components/chapter001.vue b/src/books/childHealth/view/content/components/chapter001.vue
index 8c1493d..1521c43 100644
--- a/src/books/childHealth/view/content/components/chapter001.vue
+++ b/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>
--
Gitblit v1.9.1