<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/product.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>
