From a92bf232a8e4881d4bf9993949676b9c3526b017 Mon Sep 17 00:00:00 2001
From: landjj321 <landjj321@126.com>
Date: Tue, 23 Mar 2021 23:31:01 +0800
Subject: [PATCH] 倒影轮播图
---
src/views/home/components/ArtSubject.vue | 251 ++++++++++++++++++++-----------------------------
1 files changed, 104 insertions(+), 147 deletions(-)
diff --git a/src/views/home/components/ArtSubject.vue b/src/views/home/components/ArtSubject.vue
index 90d9be5..4ea90ad 100644
--- a/src/views/home/components/ArtSubject.vue
+++ b/src/views/home/components/ArtSubject.vue
@@ -2,28 +2,30 @@
<div class="art-subject">
<div class="bg">
<img class="title" src="@/assets/home/art_subject/title.png">
- </div>
- <div class="swiper-content">
- <div class="swiper">
+
+ <div class="swiper-container swiper-container-art">
<div class="swiper-wrapper">
- <div class="swiper-slide" :class="className[i]" :key="banner" v-for="(banner, i) in banners" @click="switchover(i)">
+ <div
+ v-for="(banner, i) in banners"
+ :key="banner"
+ class="swiper-slide"
+ :class="className[i]+1"
+ @click="switchover(i)"
+ >
<img :src="banner" class="shadow">
</div>
</div>
- <div class="swiper-pagination" slot="pagination">
- <span class="dot" :class="{'active': activeIndex===0}" @click="switchover(0)"></span>
- <span class="dot" :class="{'active': activeIndex===1}" @click="switchover(1)"></span>
- <span class="dot" :class="{'active': activeIndex===2}" @click="switchover(2)"></span>
- <span class="dot" :class="{'active': activeIndex===3}" @click="switchover(3)"></span>
- <span class="dot" :class="{'active': activeIndex===4}" @click="switchover(4)"></span>
- <span class="dot" :class="{'active': activeIndex===5}" @click="switchover(5)"></span>
- </div>
+ <!-- Add Pagination -->
+ <!-- <div class="swiper-pagination" />-->
</div>
</div>
</div>
</template>
<script>
+import Swiper from 'swiper/swiper-bundle.js'
+import 'swiper/swiper-bundle.css'
+
export default {
name: 'ArtSubject',
data() {
@@ -40,158 +42,113 @@
className: ['ele-0', 'ele-1', 'ele-2', 'ele-3', 'ele-4', 'ele-5']
}
},
+ mounted() {
+ new Swiper('.swiper-container-art', {
+ autoplay: {
+ delay: 1000
+ },
+ slidesPerView: 5,
+ spaceBetween: 45,
+ centeredSlides: true,
+ centeredSlidesBounds: true,
+ loop: true,
+ pagination: {
+ el: '.swiper-pagination',
+ clickable: true
+ }
+ });
+ },
methods: {
switchover(index) {
- let removeItemCount = index - this.activeIndex
+ let removeItemCount = index - this.activeIndex
if (!removeItemCount) {
- // 如果在最优位置，则不动
+ // 如果在最优位置，则不动
return
}
if (removeItemCount < 0) {
- removeItemCount = removeItemCount + 6
+ removeItemCount = removeItemCount + 6
}
- const className = Object.assign([],this.className)
+ const className = Object.assign([], this.className)
let result = []
- result = className.splice(6 - removeItemCount)
- result = result.concat(className)
- this.className = result
- this.activeIndex = index
- },
+ result = className.splice(6 - removeItemCount)
+ result = result.concat(className)
+ this.className = result
+ this.activeIndex = index
+ }
}
}
</script>
-
<style lang="scss" scoped>
- @import "~@/styles/variables.scss";
- .art-subject {
+@import "~@/styles/variables.scss";
+
+.art-subject {
+ width: 100%;
+ height: 33.5rem;
+ position: relative;
+ text-align: center;
+
+ .bg {
width: 100%;
height: 33.5rem;
- position: relative;
- text-align: center;
- .bg {
- width: 100%;
- height: 33.5rem;
- background-image: url("../../../assets/home/art_subject/bg.png");
- background-size: 100% 100%;
- .title {
- width: 523px;
- height: 70px;
- margin-top: 42px;
+ background-image: url("../../../assets/home/art_subject/bg.png");
+ background-size: 100% 100%;
+
+ .title {
+ width: 523px;
+ height: 70px;
+ margin-top: 42px;
+ }
+
+ .swiper-container {
+ width: 1200px;
+ .swiper-wrapper {
+ height: 422px;
+ width: 1200px;
+ position: relative;
+ top: -50px;
+ //transform: translateX(0px) rotateY(-20px);
+
+ .swiper-slide {
+
+ width: 466px;
+ height: 422px;
+ //transition: transform 300ms, top 300ms, left 300ms, right 300ms, margin-top 300ms, margin-left 300ms, margin-right 300ms;
+
+ img {
+ width: 366px;
+ height: 188px;
+ }
+
+ .shadow {
+ -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.8))
+ }
+ }
+
+ .swiper-slide {
+ text-align: center;
+ font-size: 18px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition: 300ms;
+ transform: scale(0.8);
+ }
+
+ .swiper-slide-active, .swiper-slide-duplicate-active {
+ transform: scale(1);
+ z-index: 200;
+ }
+
+ .swiper-slide-next,.swiper-slide-prev{
+ transform: scale(0.9);
+ z-index:100;
+ }
}
}
- .swiper-content {
- position: absolute;
- left: 0;
- top: 0;
- height: 100%;
- width: 100%;
- text-align: center;
- .swiper {
- display: inline-block;
- height: 100%;
- width: $appWidth;
- .swiper-wrapper {
- height: 100%;
- width: 100%;
- position: relative;
- .swiper-slide {
- position: absolute;
- width: 466px;
- height: 238px;
- transition: transform 300ms, top 300ms, left 300ms, right 300ms, margin-top 300ms, margin-left 300ms, margin-right 300ms;
- img {
- width: 100%;
- height: 100%;
- }
- .shadow{
- -webkit-box-reflect:below 0 linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.8))
- }
- }
- .ele-0 {
- z-index: 5;
- top: 245px;
- left: 0;
- right: auto;
- margin-top: -60px;
- margin-left: -98px;
- margin-right: 0;
- transform: scale(0.6);
- }
- .ele-1 {
- z-index: 6;
- top: 223px;
- left: 125px;
- right: auto;
- margin-top: -30px;
- margin-left: -30px;
- margin-right: 0;
- transform: scale(0.8);
- }
- .ele-2 {
- z-index: 7;
- top: 194px;
- left: 367px;
- right: auto;
- margin-top: 0;
- margin-left: 0;
- margin-right: 0;
- transform: scale(1);
- }
- .ele-3 {
- z-index: 6;
- top: 223px;
- left: 576px;
- right: auto;
- margin-top: -30px;
- margin-left: 0;
- margin-right: 0;
- transform: scale(0.8);
- }
- .ele-4 {
- z-index: 5;
- top: 245px;
- left: 752px;
- right: auto;
- margin-top: -60px;
- margin-left: 0;
- margin-right: 0;
- transform: scale(0.6);
- }
- .ele-5 {
- z-index: 4;
- top: 270px;
- left: auto;
- right: 0;
- margin-top: -90px;
- margin-left: auto;
- margin-right: -158px;
- transform: scale(0.4);
- }
- }
- .swiper-pagination {
- position: absolute;
- bottom: 18px;
- height: 0.8rem;
- width: $appWidth;
- margin-top: 1.6rem;
- text-align: center;
- .dot {
- display: inline-block;
- margin: 0 3px;
- width: 8px;
- height: 8px;
- border-radius: 4px;
- background-color: #BABBBB;
- cursor: pointer;
- &.active {
- background-color: #808080;
- }
- }
- }
- }
- }
}
-</style>
\ No newline at end of file
+
+}
+</style>
--
Gitblit v1.8.0