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

<template>
  <view class="start-page">
	  <image class="circle" src="../../../static/images/jobApplicant/Circle.svg" mode="aspectFill"></image>
    <view class="start-content">
      <swiper
        class="custom-swiper"
        autoplay
        :current="currentIndex"
        @change="onSwiperChange"
      >
        <swiper-item v-for="(item, index) in ads" :key="index">
			<view v-if="currentIndex<ads.length-1" @click="goLogin" class="skip">Skip</view>
          <view class="content">
            <image
              :src="item.cover"
              class="wumen-img"
              mode="aspectFill"
            />
            <view class="txt-box">
              <view class="start-logo">
                <image
                  src="../../../static/images/jobApplicant/logo-column.svg"
                  mode="scaleToFill"
                />
              </view>
              <view class="start-title">{{item.title}}</view>
              <view class="start-desc"
                >{{item.desc}} <br />
                {{item.desc1}}</view
              >
            </view>
          </view></swiper-item
        >
      </swiper>

      <!-- 自定义指示器 -->
      <view class="custom-indicator">
        <view
          v-for="(item, index) in ads"
          :key="index"
          class="indicator-dot"
          :class="{ active: currentIndex === index }"
          @click="switchBanner(index)"
        ></view>
      </view>
    </view>
    <view class="start-btn" @click="goLogin">开启探索之旅</view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      currentIndex: 0,
	  ads:[
		  {
			cover:'../../../static/images/jobApplicant/wumen.svg',
			title:'让你的逐梦之路更简单',
			desc:'星光不负逐梦人',
			desc1:'愿你在亿职赞找到心仪的工作',
		  },
		  {
		  			cover:'../../../static/images/jobApplicant/wumen1.svg',
		  			title:'垂直跨境岗 精准配才强',
		  			desc:'跨境人才直通车',
					desc1:'招聘求职零弯路',
		  },
		  {
		  			cover:'../../../static/images/jobApplicant/wumen2.svg',
		  			title:'人才秒配 跨境不等待',
		  			desc:'跨境电商',
					desc1:'垂直人才精准链接平台人',
		  }
	  ]
    };
  },
  methods: {
    // 轮播图切换事件
    onSwiperChange(e) {
      this.currentIndex = e.detail.current;
    },

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

    // 点击轮播图
    handleBannerClick(item) {
      if (item.link) {
        uni.navigateTo({
          url: item.link,
        });
      }
    },
    goLogin() {
      // uni.navigateTo({
      //   url: "/pages/my/jobApplicant/login",
      // });
      uni.navigateTo({
        url: "/pages/public/login",
      });
    },
    // 暂停自动播放
    pauseAutoplay() {
      this.autoplay = false;
    },

    // 开始自动播放
    startAutoplay() {
      this.autoplay = true;
    },
  },
  onShow() {
    // 页面显示时恢复自动播放
    this.startAutoplay();
  },
  onHide() {
    // 页面隐藏时暂停自动播放
    this.pauseAutoplay();
  },
};
</script>
<style lang="scss" scoped>
	.skip{
		color: #fff;
		text-align: right;
		position: absolute;
		right: 4%;
		top: 4%;
	}
	.circle{
		width: 100vw;
		height:100vw;
		top:-16vw;
		left:-15vw;
		position:absolute;
		z-index: 0;
		transform: rotate(160deg) scale(2.5);
	}
.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;
    height: 100vh;
    box-sizing: border-box;
	// background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
	// position: fixed;
	// top: 0;
	// left: 0;
	// width: 100%;
	// height: 100%;
	// height: calc(100vh + constant(safe-area-inset-bottom));
	// height: calc(100vh + env(safe-area-inset-bottom));
  //   display: flex;
  //   flex-direction: column;
  //   padding: 20rpx 24rpx;
  //   box-sizing: border-box;
  //   overflow: hidden;
  //   z-index: 0;
  .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>