<template>
  <swiper
    class="swiper"
    circular
    :indicator-dots="true"
    :autoplay="false"
    :interval="2000"
    :duration="500"
    indicator-active-color="#00DCEE"
  >
    <swiper-item v-for="(item, index) in list" :key="index">
      <view class="image-box">
        <image :src="`/static/img/launch/${item.imgUrl}`"></image>
        <view class="title">
          {{ item.title }}
        </view>
        <view v-if="index === 3" class="btn-start" @click="start()">
          立即启用
        </view>
      </view>
    </swiper-item>
  </swiper>
</template>
<script setup lang="ts">
const list = [
  {
    title: "智能回收   智慧未来！",
    imgUrl: "1.png",
  },
  {
    title: "高效管理   安全快捷！",
    imgUrl: "2.png",
  },
  {
    title: "全新系统   崭新界面！",
    imgUrl: "3.png",
  },
  {
    title: "全城握手   致富从这里开始!",
    imgUrl: "4.png",
  },
];
const start = () => {
  uni.navigateTo({
    url: "/pages/login/index", // 要跳转到的页面路径
  });
};
</script>
<style lang="scss" scoped>
.swiper {
  width: 100%;
  height: 80vh;
  margin-top: 10vh;
  .image-box {
    text-align: center;
    cursor: pointer;
  }
  .title {
    font-size: 40rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #00d2e3;
    margin-top: 90rpx;
  }
  .btn-start {
    height: 88rpx;
    background: #00dcee;
    border-radius: 44rpx;
    line-height: 88rpx;
    font-size: 37rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ffffff;
    width: 80%;
    margin: 0px auto;
    margin-top: 50rpx;
    cursor: pointer;
  }
}
</style>
