倒影轮播图

landjj321

2021-03-23 a92bf232a8e4881d4bf9993949676b9c3526b017

倒影轮播图

 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>

}
</style>

 src/views/home/components/CoreValue.vue

@@ -1,13 +1,13 @@
<template>
  <div class="core-value">
    <div class="bg">
      <img class="copper-man" src="@/assets/home/core_value/copper_man.gif">
      <img class="copper-man" src="@/assets/home/core_value/copper_man.gif" alt="">
    </div>
    <div class="content">
      <div class="swiper-container">
      <div class="swiper-container swiper-container-core">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,idx) in banners" :key="idx">
            <img :src="item">
          <div v-for="(item,idx) in banners" :key="idx" class="swiper-slide">
            <img :src="item" alt="">
          </div>
        </div>
   
@@ -36,11 +36,11 @@
    }
  },
  mounted() {
    var swiper = new Swiper('.swiper-container', {
    new Swiper('.swiper-container-core', {
      autoplay: {
        delay: 1000
      },
      loop:true,
      loop: true,
      effect: 'coverflow',
      grabCursor: true,
      centeredSlides: true,
@@ -79,7 +79,6 @@
    img.copper-man {
      position: absolute;
      height: 100%;
      top: 0rem;
      left: -27rem;
      z-index: 100;
    }
@@ -106,8 +105,6 @@
        justify-content: center;
        align-items:center;
        border-radius: 5px;



        img{
          width: 100%;