<template>
  <view class="background">
    <!-- Swiper 轮播图 -->
    <swiper
        class="swiper-container"
        autoplay="3000"
        circular
        :current="current"
        @change="onSwiperChange"
    >
      <swiper-item v-for="(image, index) in images" :key="index">
        <image :src="image" class="swiper-image"></image>
      </swiper-item>
    </swiper>

    <!-- 动态切换的轮播点 -->
    <image :src="dotImages[current]" class="dot"></image>

    <!-- 按钮效果 -->
    <image class="button" @click="click" src="/static/information/purpose/pictures/button.png"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      images: [
        '/static/information/purpose/pictures/picture1.png',
        '/static/information/purpose/pictures/picture2.png',
        '/static/information/purpose/pictures/picture3.png',
        '/static/information/purpose/pictures/picture4.png',
        '/static/information/purpose/pictures/picture5.png',
      ], // Swiper 轮播图片
      dotImages: [
        '/static/information/purpose/pictures/dot1.png',
        '/static/information/purpose/pictures/dot2.png',
        '/static/information/purpose/pictures/dot3.png',
        '/static/information/purpose/pictures/dot4.png',
        '/static/information/purpose/pictures/dot5.png',
      ], // 轮播点图片
      current: 0, // 当前显示的图片索引
    };
  },
  methods: {
    click() {
      uni.navigateTo({
        url: '/pages/transition/page8/page8', // 跳转到进入主页前的过渡界面
      });
    },
    onSwiperChange(e) {
      this.current = e.detail.current;
    }
  }
};
</script>

<style lang="scss">
.background {
  background-image: url("/static/information/purpose/pictures/background.png");
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

.swiper-container {
  width: 100%;
  height: 80%; /* 根据需要调整轮播图高度 */
  bottom: 10%;
}

.swiper-image {
  width: 80%;
  height: 70%;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover; /* 保持图片比例 */
}

.dot {
  position: absolute;
  width: 22%;
  height: 3%;
  bottom: 15%;
}

.button {
  position: absolute;
  width: 90%;
  height: 13%;
  bottom: 1%;
  left: 50%;
  transform: translateX(-50%);
}
</style>
