yizhizan-h5/pages/my/jobApplicant/startPage.vue

<template>
  <view class="start-page">
    <view class="start-content">
      <swiper
        class="custom-swiper"
        autoplay
        circular
        :current="currentIndex"
        @change="onSwiperChange"
      >
        <swiper-item v-for="(item, index) in 3" :key="index">
          <view class="content">
            <image
              src="../../../static/images/jobApplicant/wumen.svg"
              class="wumen-img"
              mode="scaleToFill"
            />
            <view class="txt-box">
              <view class="start-logo">
                <image
                  src="../../../static/images/jobApplicant/logo-column.svg"
                  mode="scaleToFill"
                />
              </view>
              <view class="start-title">让你的逐梦之路更简单</view>
              <view class="start-desc"
                >星光不负逐梦人 <br />
                愿你在亿职赞找到心仪的工作</view
              >
            </view>
          </view></swiper-item
        >
      </swiper>

      <!-- 自定义指示器 -->
      <view class="custom-indicator">
        <view
          v-for="(item, index) in 3"
          :key="index"
          class="indicator-dot"
          :class="{ active: currentIndex === index }"
          @click="switchBanner(index)"
        ></view>
      </view>
    </view>
    <view class="start-btn">开启探索之旅</view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      currentIndex: 0,
    };
  },
  methods: {
    // 轮播图切换事件
    onSwiperChange(e) {
      this.currentIndex = e.detail.current;
    },

    // 切换轮播图
    switchBanner(index) {
      this.currentIndex = index;
    },

    // 点击轮播图
    handleBannerClick(item) {
      if (item.link) {
        uni.navigateTo({
          url: item.link,
        });
      }
    },

    // 暂停自动播放
    pauseAutoplay() {
      this.autoplay = false;
    },

    // 开始自动播放
    startAutoplay() {
      this.autoplay = true;
    },
  },
  onShow() {
    // 页面显示时恢复自动播放
    this.startAutoplay();
  },
  onHide() {
    // 页面隐藏时暂停自动播放
    this.pauseAutoplay();
  },
};
</script>
<style lang="scss" scoped>
.start-page {
  background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 20rpx 24rpx;
  box-sizing: border-box;
  .start-content {
    padding: 28rpx;
    box-sizing: border-box;
    padding-top: 5vh;
    box-sizing: border-box;
    flex: 1;
    .content {
      position: relative;
      margin-top: 780rpx;
      .wumen-img {
        width: 614rpx;
        height: 780rpx;
        position: absolute;
        left: 0;
        right: 0;
        top: -760rpx;
        margin: auto;
        z-index: 1;
      }
      .txt-box {
        position: relative;
        background-color: #fff;
        border-radius: 64rpx;
        padding: 64rpx 48rpx;
        box-sizing: border-box;
        z-index: 20;
        .start-logo {
          margin: auto;
          width: 240rpx;
          height: 66rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .start-title {
          color: #016bf6;
          font-family: DM Sans;
          font-size: 48rpx;
          font-weight: 700;
          line-height: 32px;
          letter-spacing: 0%;
          text-align: center;
          padding: 48rpx 0;
          box-sizing: border-box;
        }
        .start-desc {
          color: #9ca4ab;
          font-family: DM Sans;
          font-size: 28rpx;
          font-weight: 400;
          line-height: 44rpx;
          letter-spacing: 0%;
          text-align: center;
        }
      }
    }
  }
  .start-btn {
    flex-shrink: 0;
    color: #016bf6;
    font-family: DM Sans;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 48rpx;
    letter-spacing: 0%;
    text-align: center;
    background-color: #fff;
    border-radius: 100rpx;
    padding: 16rpx 32rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 52rpx;
  }
  .custom-swiper {
    height: 100%;
  }
  .custom-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -60rpx;
    gap: 16rpx;
    position: relative;
    z-index: 3;
    .indicator-dot {
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      background: #fff;
      transition: all 0.3s ease;

      &.active {
        width: 64rpx;
        border-radius: 20rpx;
        background: #fff;
      }
    }
  }
}
</style>