<template>
    <Swipe
    class="my_swipe"
    :autoplay="3000"
    indicator-color="#9d9d9d"
    :stop-propagation="false"
    :show-indicators="false"
    @change="onChange"
  >
    <SwipeItem v-for="(item, index) in activeList" :key="item.activityId" class="swipe_item">
      <div class="activity-container">
        <StairNewUserBanner
          :banner-data="item"
          @jumpPage="jumpToActivePage"
        />
      </div>
    </SwipeItem>
  </Swipe>
</template> 

<script setup>
import { ref } from 'vue'
import { Swipe, SwipeItem } from 'vant';
import { activeArray } from '../../mockData/activeList.js'
import StairNewUserBanner from './components/StairNewUserBanner.vue'

const activeList = ref(activeArray)
const activeIndex = ref(0)

const jumpToActivePage = ()=>{
  console.log('linda-点击');
}

const onChange = (index) => {
  activeIndex.value = index
}
</script>

<style lang="less">
body {
  background-color: #fef4c9;
}
</style>

<style lang="less" scoped>
.my_swipe {
  margin: 13px auto 0 auto;
  width:355px;
  border-radius: 12px;

  :deep(.van-swipe__indicators) {
    bottom: 2px;
  }

  .swipe_item {
    width: 355px !important;
    .head_img {
      width: 355px;
      height: 61px;
    }
  }

  .activity-container {
    width: 355px;
    height: 166px;
  }
}
</style>
