zcb_APP/pages/index/index.vue

<template>
  <view class="content">
    <view class="top_bg pdx-32">
      <view class="w h-88 mgt-88" @click="$navTo('/pages/index/search')">
        <view class="input_box flex ai_center jc_between">
          <view class="text-32 text-400 text-C0C0C0">任务标题、用户ID</view>
          <image
            class="w-48 h-48"
            src="/static/image/index/search_icon.png"
            mode="scaleToFill"
          />
        </view>
      </view>
    </view>

    <view class="banner">
      <u-swiper
        :list="bannerList"
        @change="(e) => (currentNum = e.current)"
        :autoplay="true"
        :circular="true"
        indicatorStyle="right: 30rpx"
      >
        <view slot="indicator" class="indicator">
          <view v-for="(item, index) in bannerList.length" :key="item">
            <view v-if="currentNum === index" class="indicator_check"></view>
            <view v-else class="indicator_no_check"></view>
          </view>
        </view>
      </u-swiper>
    </view>

    <view
      class="w h-88 pdx-32 flex jc_between ai_center mgt-24"
      @click="$navTo('/pages/index/notice')"
    >
      <view class="flex ai_center">
        <image
          class="w-48 h-48"
          src="/static/image/index/affiche_icon.png"
          mode="scaleToFill"
        />
        <view class="mgl-24 text-32 text-500 text-070602">这是一条公告</view>
      </view>
      <view class="text-28 text-400 text-7E7E7E">2025.1.1</view>
    </view>
    <view class="affiche"></view>

    <view class="w h-196 pdx-32 flex mgt-24 jc_between ai_center text-24">
      <view
        class="flex fd_c ai_center"
        v-for="item in menu"
        :key="item.name"
        @click="$navTo(item.pagePath)"
      >
        <image class="w-96 h-96" :src="item.icon" mode="scaleToFill" />
        <view class="mgt-16 text-26 text-400 text-303030">{{ item.name }}</view>
      </view>
    </view>

    <view
      class="w h-224 pdx-32 text-white mgt-16"
      @click="$navTo('/pages/index/newcomerTasks')"
    >
      <image
        class="w h radio-24"
        src="/static/image/index/newbie_tasks.png"
        mode="scaleToFill"
      />
    </view>

    <view class="w flex1 pdx-32 mgt-16">
      <view class="h-72 text-32 text-500 text-070602 flex ai_center">
        推荐悬赏
      </view>
      <view class="w flex1">
        <scroll-view scroll-y class="scroll">
          <view v-for="item in 10" :key="item" class="bounty">
            <BountyItem class="mgb-10"></BountyItem>
          </view>
          <view class="loading">上拉加载更多 ></view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import BountyItem from "components/bountyItem.vue";
export default {
  components: { BountyItem },
  data() {
    return {
      title: "首页",
      menu: [
        {
          icon: "/static/image/index/new_hand_icon.png",
          name: "新手入门",
          pagePath: "/pages/index/gettingStarted",
        },
        {
          icon: "/static/image/index/hot_bounty_icon.png",
          name: "热门悬赏",
          pagePath: "/pages/index/popularBounty",
        },
        {
          icon: "/static/image/index/newest_bounty_icon.png",
          name: "最新悬赏",
          pagePath: "/pages/index/newestBounty",
        },
        {
          icon: "/static/image/index/quick_check_icon.png",
          name: "急速快审",
          pagePath: "/pages/index/quickCheck",
        },
        {
          icon: "/static/image/index/invite_earnmoney_icon.png",
          name: "邀请赚钱",
          pagePath: "/pages/index/inviteEarnMoney",
        },
      ],
      currentNum: 0,
      bannerList: [
        "/static/image/index/newbie_tasks.png",
        "/static/image/index/newbie_tasks.png",
        "/static/image/index/newbie_tasks.png",
      ],
    };
  },
  onLoad() {},
  methods: {},
};
</script>

<style lang="scss" scope>
.content {
  //   height: calc(100vh - 120rpx);
  /* background-color: red; */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */

  .top_bg {
    width: 100%;
    height: 358rpx;
    flex-shrink: 0;
    /* background: linear-gradient(181deg, #ffffff00 39.21%, #fff 99.52%),
      linear-gradient(107deg, #fe6505 0%, #ff883d 106.14%); */
    background: linear-gradient(to bottom, #fe6505, #ffffff);

    .input_box {
      width: 100%;
      height: 88rpx;
      background-color: #fff;
      padding: 0 32rpx;
      border-radius: 40rpx;
    }
  }

  .banner {
    margin-top: -158rpx;
    padding: 0 32rpx;
    width: 100%;
    height: 272rpx;
  }
}
.affiche {
  width: 100%;
  height: 2rpx;
  background: linear-gradient(
    90deg,
    #fe650500 0%,
    #fe65051a 46.15%,
    #fe650500 100%
  );
}
.scroll {
  flex: 1;
  //   height: calc(100vh - 1250rpx);
  //   height: 1010rpx;
  overflow: hidden;
}

.loading {
  text-align: center;
  margin-top: 50rpx;
  padding-bottom: 86rpx;
  font-size: 20rpx;
  font-weight: 400;
  color: #c0c0c0;
}

.indicator {
  /*  @include flex(row);
  justify-content: center;

  &__dot {
    height: 6px;
    width: 6px;
    border-radius: 100px;
    background-color: rgba(255, 255, 255, 0.35);
    margin: 0 5px;
    transition: background-color 0.3s;

    &--active {
      background-color: #ffffff;
    }
  } */
}

.indicator {
  display: flex;

  .indicator_check {
    width: 32rpx;
    height: 8rpx;
    flex-shrink: 0;
    border-radius: 48rpx;
    background: #fff;
    margin: 0 2rpx;
  }

  .indicator_no_check {
    width: 16rpx;
    height: 8rpx;
    flex-shrink: 0;
    border-radius: 48rpx;
    background: #ffffff80;
    margin: 0 2rpx;
  }
}
</style>