update:图片倒影

lujunjie

2021-03-18 95880b5485e0cc57bb624a6fbbb04899a03acde0

update:图片倒影

 src/assets/home/core_value/11.jpg

 src/assets/home/core_value/12.jpg

 src/assets/home/core_value/13.jpg

 src/assets/home/core_value/14.jpg

 src/assets/home/core_value/15.jpg

 src/assets/home/core_value/16.jpg

 src/views/home/components/ArtSubject.vue

@@ -7,7 +7,7 @@
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" :class="className[i]" :key="banner" v-for="(banner, i) in banners" @click="switchover(i)">              
            <img :src="banner">
            <img :src="banner" class="shadow">
          </div>
        </div>
        <div class="swiper-pagination" slot="pagination">
@@ -30,12 +30,12 @@
    return {
      activeIndex: 2, // 最上层图片索引
      banners: [ // 需要显示的图片
        require('@/assets/home/core_value/1.png'),
        require('@/assets/home/core_value/2.png'),
        require('@/assets/home/core_value/3.png'),
        require('@/assets/home/core_value/4.png'),
        require('@/assets/home/core_value/5.png'),
        require('@/assets/home/core_value/6.png')
        require('@/assets/home/core_value/11.jpg'),
        require('@/assets/home/core_value/12.jpg'),
        require('@/assets/home/core_value/13.jpg'),
        require('@/assets/home/core_value/14.jpg'),
        require('@/assets/home/core_value/15.jpg'),
        require('@/assets/home/core_value/16.jpg')
      ],
      className: ['ele-0', 'ele-1', 'ele-2', 'ele-3', 'ele-4', 'ele-5']
    }
@@ -105,6 +105,10 @@
              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;