zhzshszg/src/components/swCard/index.vue

<template>
  <div class="swiper-container">
    <swiper
      ref="listSwiper"
      class="swiper-wrapper swiper-wrapper-n"
      :options="swiperOption"
    >
      <swiper-slide
        class="swiper-slide"
        v-for="(item, index) in cards"
        :key="index"
      >
        <div
          class="card"
          @click="
            $router.push({
              name: 'Scene',
              query: { id: item.id },
              params: { link: item.link },
            })
          "
        >
          <img class="logo" src="../../assets/images/card-img.png" />
          <div class="txt">{{item.name}}</div>
          <div class="maskss"></div>
        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </swiper>
  </div>
</template>
<script>
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

export default {
  computed: {
    swiper() {
      return this.$refs.listSwiper.$swiper;
    },
    swiperOption() {
      // let that = this
      let getIndex = (range, length, current) => {
        let next =
          current + range > length ? current + range - length : current + range;
        let prev =
          current - range < 0 ? current - range + length : current - range;

        return {
          prev,
          next,
        };
      };

      let setClass = (range, length, current, that, cls) => {
        let { prev, next } = getIndex(range, length, current);
        let p = that.slides.eq(prev);
        let n = that.slides.eq(next);
        let cur = that.slides.eq(current);

        p.find(".maskss").removeClass("mask mask1 mask2");
        n.find(".maskss").removeClass("mask mask1 mask2");
        cur.find(".maskss").removeClass("mask mask1 mask2");

        p.find(".maskss").addClass(cls);
        n.find(".maskss").addClass(cls);
      };
      return {
        watchSlidesProgress: true,
        slidesPerView: "auto",
        centeredSlides: true,
        initialSlide: 2,
        // loop: true,
        // loopedSlides: 9,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true //允许分页点击跳转
        },
        on: {
          click: function () {
            if (this.clickedIndex >= 0) {
              this.slideTo(this.clickedIndex, 500, () => {
                this.lazy.load();
              });
            }
          },
          transitionEnd: function () {
            let length = this.slides.length;
            for (let i = 0; i < length; i++) {
              var slide = this.slides.eq(i);
              let classNames = slide[0].className;
              if (classNames.indexOf("active") > -1) {
                setClass(1, length, i, this, "mask");
                setClass(2, length, i, this, "mask1");
                setClass(3, length, i, this, "mask2");
              }
            }
          },
          progress: function () {
            for (let i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i);
              var slideProgress = this.slides[i].progress;
              var modify = 1;
              if (Math.abs(slideProgress) > 1) {
                modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
              }
              let translate = slideProgress * modify * 140 + "px";
              let scale = 1 - Math.abs(slideProgress) / 5;
              let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));

              // let opacity = 1 - Math.min(Math.abs(slideProgress / 2), 1);

              slide.transform(
                "translateX(" + translate + ") scale(" + scale + ")"
              );
              slide.css({
                zIndex: zIndex,
                opacity: 1,
                "pointer-events": "auto",
              });

              if (Math.abs(slideProgress) > 3) {
                slide.css({
                  // "opacity":0,
                  "pointer-events": "none",
                });
              }
            }
          },
          setTransition: function (transition) {
            for (var i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i);
              slide.transition(transition);
            }
          },
        },
      };
    },
  },
  props: ["list"],
  data() {
    let cards = [
      {
        img: 1,
        id: 8,
        link: "http://www.4dmodel.com/SuperTwo/index.html?m=1017",
        name: "万山海战遗址",
      },
      {
        img: 2,
        id: 3,
        link: "http://www.4dmodel.com/SuperTwo582/vtour/tour.html",
        name: "杨匏安陈列馆",
      },
      {
        img: 1,
        id: 4,
        link: "http://www.4dmodel.com/SuperTwo/index.html?m=1016",
        name: "林伟民与中国早期工人运动史迹陈列馆",
      },
      {
        img: 2,
        id: 9,
        link: "http://www.4dmodel.com/SuperTwo/index.html?m=1018",
        name: "中共小濠冲党史教育基地",
      },
      {
        img: 1,
        id: 5,
        link: "http://www.4dmodel.com/SuperTwo/index.html?m=997",
        name: "苏兆征故居陈列馆",
      },
      {
        img: 2,
        id: 7,
        link: "http://www.4dmodel.com/SuperTwo/index.html?m=1015",
        name: "市退役军人事务局",
      }
    ];
    return {
      cards,
    };
  },
  methods: {
    goto(url) {
      window.open(url, "_blank");
    },
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  directives: {
    swiper: directive,
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.swiper-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.swiper-wrapper {
  margin-top: 10px;
  padding: 20px 0;
}

.swiper-slide {
  width: 384px;
  cursor: pointer;
  font-size: 0;
  position: relative;
}
.swiper-slide .card {
	width: 100%;
	height: 500px;
	background:url('../../assets/images/card-bg.png') center center no-repeat;
}

.swiper-slide img {
  width: 100%;
  height: 75%;
  padding: 5px;
}
.swiper-slide .maskss {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
.swiper-slide .mask {
  background: #804d28;
  opacity: 0.5;
}

.swiper-slide .mask1 {
  background: #6e4029;
  opacity: 0.65;
}

.swiper-slide .mask2 {
  background: #4b2b13;
  opacity: 0.65;
}
/deep/ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom:0;
}
.swiper-slide .txt {
  position:absolute;
  bottom:10%;
  text-align:center; 
  width:100%;
  font-size: 32px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 32px;
  color: #FCD67B;
  opacity: 1;
  padding: 0 5px;
}
@media screen and (max-width: 1600px) {
  .swiper-slide {
    width: 350px;
  }
}
</style>