<script setup>
import {ref, onMounted} from 'vue'
import Swiper from '@/components/swiper/index.vue'
import Banner from '@/components/Banner/index.vue'

const currentPage = ref(1)

onMounted(() => {})
</script>

<template>
  <div class="page">
    <Banner class="banner" img="banner/services.png" />
    <Swiper
      id="one"
      title="智能加载服务"
      v-model="currentPage"
      :data="[1, 2, 3, 4]"
      :page-size="2"
      :show-pagination="false"
      :auto-play="false"
    >
      <template #default="{item, index, isActive}">
        <div class="my-card" :class="{active: isActive}">
          <h2>{{ item }}</h2>
        </div>
      </template>
    </Swiper>
    <Swiper
      id="two"
      title="智能加载服务"
      v-model="currentPage"
      :data="[1, 2, 3, 4]"
      :page-size="2"
      :show-pagination="false"
      :auto-play="false"
    >
      <template #default="{item, index, isActive}">
        <div class="my-card" :class="{active: isActive}">
          <h2>{{ item }}</h2>
        </div>
      </template>
    </Swiper>
    <Swiper
      id="three"
      title="智能加载服务"
      v-model="currentPage"
      :data="[1, 2, 3, 4]"
      :page-size="2"
      :show-pagination="false"
      :auto-play="false"
    >
      <template #default="{item, index, isActive}">
        <div class="my-card" :class="{active: isActive}">
          <h2>{{ item }}</h2>
        </div>
      </template>
    </Swiper>
  </div>
</template>

<style lang="scss" scoped>
.my-card {
  background: #d9d9d9;
  height: 100%;
}
</style>
