yizhizan-h5/pages/my/ruleCenter.vue

<template>
  <view class="rule-center">
    <view class="detail-bg"></view>
    <nav-bar title="亿职赞规则中心"></nav-bar>
    <view class="rule-content">
      <view class="rule-title">规则中心</view>
      <image
        src="@/static/images/my/guizezhongxin.png"
        class="rule-image"
        mode="scaleToFill"
      />

      <!-- 自定义轮播图 -->
      <view class="banner-box">
        <view class="banner-container">
          <!-- 轮播图主体 -->
          <swiper
            class="custom-swiper"
            :current="currentIndex"
            :autoplay="autoplay"
            :interval="interval"
            :duration="duration"
            circular
            @change="onSwiperChange"
          >
            <swiper-item v-for="(item, index) in bannerList" :key="index">
              <view class="banner-item" @click="handleBannerClick(item)">
                <view class="banner-content">
                  <image
                    src="@/static/images/my/icon/paopao.svg"
                    mode="aspectFill"
                    class="paopao paopao-one"
                  />
                  <image
                    src="@/static/images/my/icon/paopao.svg"
                    mode="aspectFill"
                    class="paopao paopao-two"
                  />
                  <image
                    src="@/static/images/my/icon/paopao.svg"
                    mode="aspectFill"
                    class="paopao paopao-three"
                  />
                  <view class="banner-txt">
                    <view class="banner-title">{{ item.title }}</view>
                    <view class="banner-subtitle">{{ item.subtitle }}</view>
                  </view>
                  <view class="banner-btn">去看看</view>
                </view>
              </view>
            </swiper-item>
          </swiper>

          <!-- 自定义指示器 -->
          <view class="custom-indicator">
            <view
              v-for="(item, index) in bannerList"
              :key="index"
              class="indicator-dot"
              :class="{ active: currentIndex === index }"
              @click="switchBanner(index)"
            ></view>
          </view>
        </view>
      </view>
      <view class="rule-txt-box">
        <view class="rule-text">
          <view class="rule-text-title">平台总则</view>
          <view class="rule-text-desc">亿职赞规则公约</view>
        </view>
        <view class="rule-txt-icon">
          <image src="@/static/images/my/icon/pingtaizongze.svg" mode="scaleToFill" />
        </view>
      </view>
      <view class="notice">
        <view class="notice-item">平台公告</view>
        <view class="notice-item">诚信求职共建真实求职环境</view>
        <view class="notice-item">求职文明公约</view>
        <view class="notice-item">关于冒用平台名义发布虚假信息的通告</view>
      </view>
    </view>
  </view>
</template>

<script>
import navBar from "@/components/nav-bar/index.vue";

export default {
  data() {
    return {
      currentIndex: 0,
      autoplay: true,
      interval: 3000,
      duration: 500,
      bannerList: [
        {
          title: "招聘文明公约",
          subtitle: "平等尊重 生态共建",
          //   image: require('@/static/images/banner/banner1.jpg'),
          link: "/pages/rules/convention",
        },
        {
          title: "用户服务协议",
          subtitle: "诚信合作 互利共赢",
          //   image: require('@/static/images/banner/banner2.jpg'),
          link: "/pages/rules/agreement",
        },
        {
          title: "隐私保护政策",
          subtitle: "安全可靠 数据保障",
          //   image: require('@/static/images/banner/banner3.jpg'),
          link: "/pages/rules/privacy",
        },
      ],
    };
  },
  components: {
    navBar,
  },
  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>
.rule-center {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: #f7f7f7;

  .detail-bg {
    height: 744rpx;
    width: 100%;
    background: linear-gradient(180deg, rgba(255, 102, 0, 1), rgba(255, 102, 0, 0) 100%);
    position: absolute;
    left: 0;
    top: 0;
  }

  .rule-content {
    position: relative;
    z-index: 2;
    padding: 40rpx;
    box-sizing: border-box;

    .rule-title {
      color: #fff;
      font-size: 50rpx;
      font-weight: 600;
      font-family: DM Sans;
      margin-bottom: 30rpx;
    }

    .rule-image {
      width: 144rpx;
      height: 144rpx;
      position: absolute;
      right: 44rpx;
      top: -24rpx;
    }
  }

  .banner-box {
    width: 100%;
    height: 172rpx;
    margin-top: 40rpx;
  }
  .rule-txt-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 56rpx 46rpx;
    box-sizing: border-box;
    border-radius: 12rpx;
    background: rgba(255, 255, 255, 1);
    margin-top: 20rpx;
    border: 1rpx solid rgba(227, 231, 236, 1);
    .rule-text {
      .rule-text-title {
        color: rgba(51, 51, 51, 1);
        font-family: DM Sans;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 32rpx;
        letter-spacing: 0px;
      }
      .rule-text-desc {
        color: rgba(153, 153, 153, 1);
        font-family: DM Sans;
        font-size: 20rpx;
        font-weight: 400;
        line-height: 26rpx;
      }
    }
    .rule-txt-icon {
      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
  .notice {
    display: flex;
    flex-direction: column;
    gap: 24rpx;
    box-sizing: border-box;
    border: 1rpx solid rgba(227, 231, 236, 1);
    border-radius: 12rpx;
    background: #fdfdfd;
    padding: 32rpx;
    padding-bottom: 42rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
    .notice-item {
      color: rgba(29, 33, 41, 1);
      font-family: DM Sans;
      font-size: 24rpx;
      font-weight: 600;
      line-height: 32rpx;
      text-align: left;
    }
  }
  .banner-container {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .custom-swiper {
    width: 100%;
    height: 172rpx !important;
    overflow: hidden;
    border-radius: 12rpx;
    background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
  }

  .banner-item {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 12rpx;
    overflow: hidden;

    .banner-bg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }

    .banner-content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      padding: 40rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .paopao {
        position: absolute;
        width: 306rpx;
        height: 306rpx;
        z-index: -1;
      }
      .paopao-one {
        left: 86rpx;
      }
      .paopao-two {
        top: 60rpx;
        right: 124rpx;
      }
      .paopao-three {
        right: -84rpx;
        top: -108rpx;
      }
    }
    .banner-txt {
    }
    .banner-btn {
      padding: 7rpx 40rpx;
      box-sizing: border-box;
      color: rgba(1, 107, 246, 1);
      font-family: DM Sans;
      font-size: 16rpx;
      font-weight: 400;
      line-height: 20rpx;
      letter-spacing: 0%;
      text-align: center;
      background-color: #fff;
      border-radius: 100rpx;
    }
    .banner-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #ffffff;
      margin-bottom: 12rpx;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
    }

    .banner-subtitle {
      font-size: 26rpx;
      color: #ffffff;
      opacity: 0.9;
      margin-bottom: 30rpx;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
    }
  }

  .custom-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -20rpx;
    gap: 16rpx;

    .indicator-dot {
      width: 6rpx;
      height: 6rpx;
      border-radius: 50%;
      background: #fff;
      transition: all 0.3s ease;

      &.active {
        width: 19rpx;
        border-radius: 10rpx;
        background: linear-gradient(90deg, #ff6600, #ff9900);
      }
    }
  }
}
</style>