dev/dcp-web-gate/src_old/views/ecology.vue

<template>
    <div>
        <div class="box">
            <div class="Navigation">
                <div class="swiper-container" ><!-- 这边的两个方法是鼠标移入和移出 -->
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(item,index) in arr" :key="index">
                            <img :src="item.img_url" alt="" >
                        </div>
                    </div>
                    <!-- 指示点 -->
                    <div class="swiper-pagination"></div><!--分页器。如果放置在swiper-container外面，需要自定义样式。-->
                </div>
            </div> 
          </div>
    </div>
  </template>
  
  <script>
    import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
    import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'
  export default {
    // name: "ecology",
    name: "ecology",
    data () {
      return {
        swiper:'',
            index:'',
            arr:[
                {img_url:require('@/assets/logo.png')},
                {img_url:require('@/assets/logo.png')},
                {img_url:require('@/assets/logo.png')},
                {img_url:require('@/assets/logo.png')},
                {img_url:require('@/assets/logo.png')}
            ]
      }
    },
    mounted() {
       this.initData()
    },
    methods:{
        initData(){
            // this.swiper = new Swiper(".swiper-container", {
            //     autoplay: {//自动轮播
            //         disableOnInteraction: false,//当设置为false时，用户操作之后（swipes,arrow以及pagination 点击）autoplay不会被禁掉，用户操作之后每次都会重新启动autoplay。
            //     },
            //     pagination: {//指示点
            //         el: '.swiper-pagination',
            //     },
            //     grabCursor : true,//鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
            //     loop: true,
            //     // 如果需要前进后退按钮
            //     navigation: {
            //         nextEl: '.swiper-button-next',
            //         prevEl: '.swiper-button-prev',
            //     },
            // });
            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 4,
                spaceBetween: 0,
                centeredSlides: true,
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
            });
        },
        comtainer_enter(){
            this.swiper.autoplay.stop();
            setTimeout(this.comtainer_leave,2000 );//两秒加上默认的三秒
        },
        comtainer_leave () {
            this.swiper.autoplay.start();
        }
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
    body {
        margin: 0;
    }
    .box {
        width: 100%;
        height: 300px;
        font-size: 15px;
        font-family: 'PingFangSC-Regular','Avenir', Helvetica, Arial, sans-serif;
        position: relative;
    }
    .Navigation {
        width: 80%;
        height: 400px;
        position: absolute;
        left: 50%;
        transform: translate(-50%,0);
        top: 0;
        background-color: rgba(69,113,155,0.2);
    }
    /* .swiper-container {
        width: 800px;
        height: 100px;
        margin: 20px auto;
    } */
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  transition: 300ms;
	  transform: scale(0.8);
    }
	.swiper-slide-active,.swiper-slide-duplicate-active{
      transform: scale(1);
	}
</style>