<script setup>
import Swiper from '@/components/Swiper/index.vue'

import {ref, onMounted} from 'vue'
const currentPage = ref(1)
onMounted(() => {})
</script>

<template>
  <div class="page">
    <div class="banner">
      <div class="banner-link"><span>进入演示系统</span></div>
    </div>
    <div class="swiper">
      <Swiper
        id="home_swiper"
        title="产品体系"
        v-model="currentPage"
        :data="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
        :page-size="4"
        :show-pagination="true"
        :auto-play="true"
      >
        <template #default="{item, index, isActive}">
          <div class="my-card" :class="{active: isActive}">
            <h2>{{ item }}</h2>
          </div>
        </template>
      </Swiper>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page {
  .banner {
    width: 100%;
    height: 800px;
    position: relative;
    background-image: url('/static/images/main/banner.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    &-link {
      width: 174px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      position: absolute;
      top: 721px;
      left: 873px;
      border: 1px solid #1fe1ff;
      border-radius: 6px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s ease;
      &:hover {
        transform: scale(1.05);
      }
      span {
        font-family: 'PingFang SC';
        font-weight: 600;
        font-size: 20px;
        letter-spacing: 0.06em;
        color: $white;
      }
    }
  }

  .swiper {
    width: 100%;
    height: 800px;
    .my-card {
      background: #d9d9d9;
      height: 100%;
    }
  }
}
</style>
