tuniao-ui/vipPage/life/guide/guide.vue

<template>
  <view class="template-guide">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar>
    <view class="top-backgroup">
      <image src='https://resource.tuniaokj.com/images/swiper/fullbg3.jpg' mode='heightFix' class='backgroud-image'></image>
    </view>
    <swiper class="card-swiper" :circular="true"
      :autoplay="true" duration="500" interval="5000" @change="cardSwiper"> 
      <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
        <view class="swiper-item image-banner">
          <image :src="item.url" mode="heightFix" v-if="item.type=='image'" ></image>
        </view>
        <view class="swiper-item-text tn-text-center">
          <view class="tn-text-xxl tn-text-bold">{{item.text}}</view>
          <view class="tn-text-xl tn-text-bold tn-padding-top-xs">{{item.name}}</view>
        </view>
    
      </swiper-item>
    </swiper>
    
    <view class="indication">
        <block v-for="(item,index) in swiperList" :key="index">
            <view class="spot" :class="cardCur==index?'active':''"></view>
        </block>
    </view>
    
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  export default {
    name: 'TemplateGuide',
    mixins: [template_page_mixin],
    data(){
      return {
        cardCur: 0,
        swiperList: [{
          id: 0,
          type: 'image',
          name: '总有你想不到的创意',
          text: '海量分享',
          url: 'https://resource.tuniaokj.com/images/swiper/c4d1.png',
        }, {
          id: 1,
          type: 'image',
          name: '寻找一起成长的小伙伴',
          text: '愉快玩耍',
          url: 'https://resource.tuniaokj.com/images/swiper/c4d2.png',
        }, {
          id: 2,
          type: 'image',
          name: '更多彩蛋等你探索',
          text: '酷炫多彩',
          url: 'https://resource.tuniaokj.com/images/swiper/c4d3.png',
        }, {
          id: 3,
          type: 'image',
          name: '商业合作请联系作者',
          text: '免费开源',
          url: 'https://resource.tuniaokj.com/images/swiper/c4d4.png',
        }],
      }
    },
    methods: {
      // cardSwiper
      cardSwiper(e) {
        this.cardCur = e.detail.current
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/static/css/templatePage/custom_nav_bar.scss';
    /* 顶部背景图 start */
    .top-backgroup {
      position: fixed;
      height: 100vh;
      z-index: -1;
    
      .backgroud-image {
        width: 100%;
        height: 100vh;
        // z-index: -1;
      }
    }
  
  .card-swiper {
    height: 100vh !important;
  }
    
  .card-swiper swiper-item {
    width: 750rpx !important;
    left: 0rpx;
    box-sizing: border-box;
    overflow: initial;
  }
    
  .card-swiper swiper-item .swiper-item {
    margin-top: 20vh;
    width: 100%;
    display: block;
    height: 100vh;
    border-radius: 0rpx;
    transform: translate(180rpx, 0rpx) scale(0.8);
    transition: all 0.2s ease-in 0s;
    overflow: hidden;
    opacity: 1;
  }
    
  .card-swiper swiper-item.cur .swiper-item {
    transform: translate(180rpx, 0rpx) scale(1, 1);
    transition: all 0.2s ease-in 0s;
    opacity: 1;
  }
  
  .card-swiper swiper-item .swiper-item-text {
    margin-top: -50vh;
    width: 100%;
    // height: 100%;
    display: block;
    border-radius: 10rpx;
    transform: scale(0.7, 0.7);
    transition: all 0.4s ease 0s;
    overflow: hidden;
    opacity: 1;
  }
    
  .card-swiper swiper-item.cur .swiper-item-text {
    padding-left: 30rpx;
    transform: scale(1);
    transition: all 0.4s ease 0s;
    opacity: 1;
  }
  
  .image-banner{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .image-banner image{
    width: 100%;
  }
  
  /* 轮播指示点 start*/
  .indication{
    z-index: 9999;
    width: 100%;
    height: 36rpx;
    position: fixed;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
  }
  
  .spot{
    background-color: #E6E6E6;
    width: 10rpx;
    height: 10rpx;
    border-radius: 20rpx;
    margin: 0 8rpx !important;
    left: 0rpx;
    top: -180rpx;
    position: relative;
  }
  
  .spot.active{
    width: 40rpx;
    background-color: #FFA726;
  }
</style>