<template>
  <div class="swiper-section">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="(item, index) in swiperItems"
          :key="index"
        >
          <div class="slide-content">
            <img :src="item.image" :alt="item.title" class="swiper-lazy" />
            <div class="slide-info">
              <h3>{{ item.title }}</h3>
              <p>{{ item.description }}</p>
            </div>
          </div>
        </div>
      </div>

      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.css";

export default {
  name: "SwiperComponent",
  data() {
    return {
      swiperItems: [
        {
          image: "https://pic.yupi.icu/5563/202311091857319.jpg",
          title: "精选图书推荐",
          description: "发现更多优质读物",
        },
        {
          image: "https://pic.yupi.icu/5563/202311091857306.jpg",
          title: "特色主题书单",
          description: "探索不同领域的知识",
        },
        {
          image: "https://pic.yupi.icu/5563/202311091857330.jpg",
          title: "新书速递",
          description: "第一时间了解新书资讯",
        },
      ],
    };
  },
  mounted() {
    this.initSwiper();
  },
  methods: {
    initSwiper() {
      new Swiper(".swiper-container", {
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
        effect: "slide", // 改为滑动效果
        speed: 800,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.swiper-section {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  padding: 20px 0;
}

.swiper-container {
  width: 1200px;
  height: 500px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.swiper-slide {
  position: relative;

  .slide-content {
    position: relative;
    width: 100%;
    height: 100%;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s;
    }

    .slide-info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 30px;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
      color: #fff;

      h3 {
        font-size: 28px;
        margin-bottom: 10px;
        font-weight: 600;
      }

      p {
        font-size: 16px;
        opacity: 0.9;
      }
    }
  }

  &:hover {
    img {
      transform: scale(1.05);
    }
  }
}

.swiper-button-prev,
.swiper-button-next {
  background-color: rgba(255, 255, 255, 0.3);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: all 0.3s;

  &:hover {
    background-color: rgba(255, 255, 255, 0.5);
  }
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.7);
  opacity: 0.7;

  &-active {
    background: #fff;
    opacity: 1;
  }
}

.swiper-lazy-preloader {
  border-color: #409eff;
}
</style>
