From 3768c08a1b81aafce9fa188586b9728b33a6b2cc Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期三, 29 五月 2024 21:55:50 +0800 Subject: [PATCH] 轮播 --- src/App.vue | 41 +++++++++++++++++++++++++++++++++++++---- 1 files changed, 37 insertions(+), 4 deletions(-) diff --git a/src/App.vue b/src/App.vue index bbda760..ae6f4ce 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,6 +4,9 @@ <lifeCare v-if="activeBook.name == 'lifeCare'"></lifeCare> <embedded v-if="activeBook.name == 'embedded'"></embedded> <english v-if="activeBook.name == 'english'"></english> + <sportsAndHealth + v-if="activeBook.name == 'sportsAndHealth'" + ></sportsAndHealth> </div> </template> @@ -12,6 +15,7 @@ import lifeCare from "./books/lifeCare/index.vue"; import embedded from "./books/embedded/view/index.vue"; import english from "./books/English/view/index.vue"; +import sportsAndHealth from "./books/sportsAndHealth"; export default { name: "App", @@ -19,7 +23,8 @@ childHealth, lifeCare, embedded, - english + english, + sportsAndHealth }, data() { return { @@ -111,16 +116,44 @@ } /* swiper */ -.swiper-container{ +.swiper-container { width: 100%; height: 100%; } -.imgBox{ +.swiper-pagination-bullet-active { + background-color: #0093ff; +} + +.swiper-button-prev, +.swiper-button-next { + width: 27px; + height: 44px; + margin-top: -22px; + z-index: 10; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + color: #0093ff; +} + +.swiper-button-prev:after, +.swiper-button-next:after { + font-family: swiper-icons; + font-size: 30px; + text-transform: none !important; + letter-spacing: 0; + text-transform: none; + font-variant: initial; + line-height: 1; +} + +.imgBox { position: relative; } -.imgBox img{ +.imgBox img { max-width: 100%; max-height: 100%; width: auto; -- Gitblit v1.9.1