vue3+swiper实现层叠式轮播

最新推荐文章于 2024-08-16 11:35:31 发布

lbchenxy

最新推荐文章于 2024-08-16 11:35:31 发布

阅读量2.9k

点赞数 3

文章标签：前端 swiper

本文链接：https://blog.csdn.net/lbchenxy/article/details/116452119

版权

此博客展示了多个重要的业务支撑系统，包括XXXXXXBBOSS集团客户业务支撑系统、XXXXXX网状网系统等，详述了这些系统在集团客户业务支撑、数据业务运营中的作用，如跨区业务受理、通信交易和数据同步等功能。

摘要由CSDN通过智能技术生成

样式
在这里插入图片描述
代码

<div class="service-case">
<swiper
        :autoplay="swiper_option1.autoplay"
        :loop="swiper_option1.loop"
        :speed="swiper_option1.speed"
        :slidesPerView="swiper_option1.slidesPerView"
        :loopedSlides="swiper_option1.loopedSlides"
        :centeredSlides="swiper_option1.centeredSlides"
        :watchSlidesProgress="swiper_option1.watchSlidesProgress"
        @setTransition="setTransition"
        @progress="progress"
      >
        <swiper-slide>
          <div class="title">1.XXXXBBOSS集团客户业务支撑系统</div>
          <div class="item">
            XXXXXXXX一级集团客户业务支撑系统（简称一级BBOSS系统）是XXXXXXXXXXXXXXXX
            IT
            支撑系统中的重要组成部分。XXXXXXXX系统作为全网集客业务支撑系统，连接31省公司、各业务平台、总部各职能部门和系统，主要完成对全网集团客户业务的客户、产品、受理、调度、开通、计费、账务、
            结算全方位和全过程的支撑，实现了跨区集团客户业务的一点受理和一点支付。
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="title">2.XXXXXXXX系统</div>
          <div class="item">
            XXXXXXXX网系统是支持XXXXXXXX全网数据业务运营的信息系统。网状网负责连接总部系统、31个省BOSS系统和全网业务平台；实现BOSS与BOSS，BOSS与全网业务平台、全网业务平台与全网业务平台之间的交易通信、数据同步。
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="title">3.XXXXXXXX集团客户业务支撑系统</div>
          <div class="item">
            XXXXXXXX一级集团客户业务支撑系统（简称一级BBOSS系统）是XXXXXXXX两级
            IT
            支撑系统中的重要组成部分。XXXXXXXX系统作为全网集客业务支撑系统，连接31省公司、各业务平台、总部各职能部门和系统，主要完成对全网集团客户业务的客户、产品、受理、调度、开通、计费、账务、
            结算全方位和全过程的支撑，实现了跨区集团客户业务的一点受理和一点支付。
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="title">4.XXXXXXXX网状网系统</div>
          <div class="item">
            XXXXXXXX系统是支持中国移XXXXXXXX数据业务运营的信息系统。网状网负责连接总部系统、31个省BOSS系统和全网业务平台；实现BOSS与BOSS，BOSS与全网业务平台、全网业务平台与全网业务平台之间的交易通信、数据同步。
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="title">5.XXXXXXXXXXXXXXXX业务支撑系统</div>
          <div class="item">
           XXXXXXXX一级集团客户业务支撑系统（简称一级BBOSS系统）是XXXXXXXX两级
            IT
            支撑系统中的重要组成部分。XXXXXXXX系统作为全网集客业务支撑系统，连接31省公司、各业务平台、总部各职能部门和系统，主要完成对全网集团客户业务的客户、产品、受理、调度、开通、计费、账务、
            结算全方位和全过程的支撑，实现了跨区集团客户业务的一点受理和一点支付。
          </div>
        </swiper-slide>
      </swiper>
      </div>
      const swiper_option1 = reactive({
      // autoplay: {
      //   delay: 5000,
      //   disabledOnInteraction: false,
      // },
      autoplay: false,
      loop: true,
      // speed: 1000,
      watchSlidesProgress: true,
      slidesPerView: "auto",
      centeredSlides: true,
      loopedSlides: 5,
    });
    const setTransition = (swiper, transition) => {
      for (var i = 0; i < swiper.slides.length; i++) {
        var slide = swiper.slides.eq(i);
        slide.transition(transition);
      }
    };
    const progress = (progress) => {
      for (var i = 0; i < progress.slides.length; i++) {
        var slide = progress.slides.eq(i);
        var slideProgress = progress.slides[i].progress;
        var modify = 1;
        if (Math.abs(slideProgress) > 1) {
          modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
        }
        // console.log(slideProgress, modify);
        var translate = slideProgress * modify * 260 + "px";
        var scale = 1 - Math.abs(slideProgress) / 5;
        var zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
        slide.transform("translateX(" + translate + ") scale(" + scale + ")");
        slide.css("zIndex", zIndex);
        slide.css("opacity", 1);
        if (Math.abs(slideProgress) > 3) {
          slide.css("opacity", 0);
        }
      }
    };
<style lang="scss">
.service-case {
	position: relative;
  width: 1200px;
	margin: 0 auto
}

.service-case .swiper-container {
	padding-bottom: 60px;
}

.service-case  .swiper-slide {
	width: 520px;
	background: #fff;
	box-shadow: 0 8px 30px #ddd;
  .title{
    margin: 3em 0em;
    font-weight: bold;
  }
  .item{
    font-size: 0.9em;
    color: #b3b4b5;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
    margin: 3em 3em 5em 3em;
  }
}
.service-case  .swiper-slide img{
	display:block;
}
.service-case  .swiper-slide p {
	line-height: 98px;
	padding-top: 0;
	text-align: center;
	color: #636363;
	font-size: 1.1em;
	margin: 0;
}

.service-case .swiper-pagination {
	width: 100%;
	bottom: 20px;
}
</style>