rtim/pages/points/components/makeMoney.vue

<template>
  <view class="make-money-container">
    <!-- 顶部渐变背景 -->
    <view class="top-bg"></view>

    <!-- Banner -->
    <view class="banner-wrap">
      <image class="banner-image" src="@/static/image/points/icon_msg.png" mode="aspectFill"></image>
    </view>

    <!-- 菜单导航 -->
    <view class="nav-menu">
     <!-- <view class="nav-item">
        <image class="nav-icon" src="@/static/image/points/icon_pt_task.png" mode="aspectFit"></image>
        <text class="nav-text">平台任务</text>
      </view>
      <view class="nav-item">
        <image class="nav-icon" src="@/static/image/points/icon_cash_task.png" mode="aspectFit"></image>
        <text class="nav-text">现金任务</text>
      </view>
      <view class="nav-item">
        <image class="nav-icon" src="@/static/image/points/icon_invite_task.png" mode="aspectFit"></image>
        <text class="nav-text">邀请赚钱</text>
      </view> -->
      <view class="nav-item" v-for="(item,index) in tasktit" :key="index" @click="nav(item.path)">
        <image class="nav-icon" :src="item.icon" mode="aspectFit"></image>
        <text class="nav-text">{{item.title}}</text>
      </view>
    </view>

    <!-- 任务列表区域 -->
    <view class="task-section">
      <view class="section-header">
        <text class="section-title">现金任务</text>
        <view class="more-wrap" @click="nav('/pages/points/cashTask')">
          <text class="more-text">查看更多</text>
          <u-icon name="arrow-right" color="#999" size="14"></u-icon>
        </view>
      </view>

      <view class="task-list">
        <!-- 任务项 1 -->
        <view class="task-item" @click="nav('/pages/points/taskDetails')">
          <image class="task-img" src="@/static/image/points/icon_my_task.png" mode="aspectFit"></image>
          <view class="task-info">
            <view class="task-title">新人必做任务易上手</view>
            <view class="task-tags">
              <text class="tag">无需经验</text>
              <text class="tag">时间自由</text>
            </view>
            <view class="task-bottom">
              <text class="task-stat">128人已赚<text class="divider">|</text>剩余10单</text>
              <view class="task-reward-wrap">
                <text class="task-reward">+2.35</text>
                <text class="task-reward-unit">元</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 任务项 2 -->
        <view class="task-item">
          <image class="task-img" src="@/static/image/points/icon_msg.png" mode="aspectFit"></image>
          <view class="task-info">
            <view class="task-title">下载指定软件</view>
            <view class="task-tags">
              <text class="tag">无需经验</text>
              <text class="tag">时间自由</text>
            </view>
            <view class="task-bottom">
              <text class="task-stat">128人已赚<text class="divider">|</text>剩余10单</text>
              <view class="task-reward-wrap">
                <text class="task-reward">+2.35</text>
                <text class="task-reward-unit">元</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 任务项 3 -->
        <view class="task-item">
          <image class="task-img" src="@/static/image/points/icon_msg.png" mode="aspectFit"></image>
          <view class="task-info">
            <view class="task-title">加微信群</view>
            <view class="task-tags">
              <text class="tag">无需经验</text>
              <text class="tag">时间自由</text>
            </view>
            <view class="task-bottom">
              <text class="task-stat">128人已赚<text class="divider">|</text>剩余10单</text>
              <view class="task-reward-wrap">
                <text class="task-reward">+2.35</text>
                <text class="task-reward-unit">元</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 任务项 4 -->
        <view class="task-item">
          <image class="task-img" src="@/static/image/points/icon_msg.png" mode="aspectFit"></image>
          <view class="task-info">
            <view class="task-title">下载指定软件</view>
            <view class="task-tags">
              <text class="tag">无需经验</text>
              <text class="tag">时间自由</text>
            </view>
            <view class="task-bottom">
              <text class="task-stat">128人已赚<text class="divider">|</text>剩余10单</text>
              <view class="task-reward-wrap">
                <text class="task-reward">+2.35</text>
                <text class="task-reward-unit">元</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "makeMoney",
  data() {
    return {
		tasktit:[
			{
				title:'平台任务',
				icon:'/static/image/points/icon_pt_task.png',
				path:'/pages/points/platformTask'
			},
			{
				title:'现金任务',
				icon:'/static/image/points/icon_cash_task.png',
				path:'/pages/points/cashTask'
			},
			{
				title:'邀请赚钱',
				icon:'/static/image/points/icon_invite_task.png',
				path:'/pages/points/InviteEarnMoney'
			},
			{
				title:'我的任务',
				icon:'/static/image/points/icon_my_task.png',
				path:'/pages/points/myTask'
			}
		]
	};
  },
  methods: {
	  nav(url){
		  uni.navigateTo({
		  	url:url
		  })
	  }
  }
};
</script>

<style lang="scss" scoped>
.make-money-container {
  min-height: 100vh;
  position: relative;
  padding-bottom: 40rpx;
}

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

.banner-wrap {
  position: relative;
  z-index: 1;
  padding: 20rpx 30rpx 0;
}

.banner-image {
  width: 100%;
  height: 240rpx;
  background-color: #fff;
  border-radius: 20rpx;
}

.nav-menu {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-around;
  padding: 40rpx 20rpx;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-icon {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 12rpx;
}

.nav-text {
  font-size: 26rpx;
  color: #333;
  margin-top: 10rpx;
}

.task-section {
  position: relative;
  z-index: 1;
  background-color: #fff;
  border-radius: 24rpx;
  margin: 0 30rpx;
  padding: 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
}

.more-wrap {
  display: flex;
  align-items: center;
}

.more-text {
  font-size: 24rpx;
  color: #999;
  margin-right: 4rpx;
}

.task-list {
  display: flex;
  flex-direction: column;
}

.task-item {
  display: flex;
  padding: 30rpx 0;
  border-bottom: 1px solid #F5F6F8;
}

.task-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.task-img {
  width: 140rpx;
  height: 140rpx;
  border-radius: 20rpx;
  flex-shrink: 0;
}

.task-info {
  flex: 1;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.task-title {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
  line-height: 1.4;
}

.task-tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 12rpx;
}

.tag {
  font-size: 20rpx;
  color: #647294;
  background-color: #F5F7FA;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  margin-right: 12rpx;
  margin-bottom: 8rpx;
}

.task-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.task-stat {
  font-size: 22rpx;
  color: #999;
}

.divider {
  margin: 0 16rpx;
  color: #E5E6EB;
}

.task-reward-wrap {
  display: flex;
  align-items: baseline;
}

.task-reward {
  font-size: 32rpx;
  color: #FF5A1F;
  font-weight: bold;
}

.task-reward-unit {
  font-size: 24rpx;
  color: #FF5A1F;
  font-weight: normal;
}
</style>