zcb_APP/pages/my/index.vue

<template>
  <view class="content pdx-32">
    <view class="top_bg">
      <view class="head" @click="$navTo('/pages/personalProfile/index')">
        <view class="flex fd_c">
          <view class="text-36 text-070202 text-500">用户名称用户名称</view>
          <image class="vip_icon" src="/static/logo.png"></image>
        </view>
        <image class="image" src="/static/logo.png"></image>
      </view>

      <view class="info">
        <view class="info_item">
          <view class="text-40 text-400 text-070202">1322</view>
          <view class="text-24 text-500 text-C8C9C6 mgt-8">我的接单</view>
        </view>
        <view class="line"></view>
        <view class="info_item">
          <view class="text-40 text-400 text-070202">322</view>
          <view class="text-24 text-500 text-C8C9C6 mgt-8">我的悬赏</view>
        </view>
        <view class="line"></view>
        <view class="info_item">
          <view class="text-40 text-400 text-070202">32</view>
          <view class="text-24 text-500 text-C8C9C6 mgt-8">开通会员</view>
        </view>
        <view class="line"></view>
        <view class="info_item">
          <view class="text-40 text-400 text-070202">22</view>
          <view class="text-24 text-500 text-C8C9C6 mgt-8">邀请好友</view>
        </view>
      </view>
    </view>

    <view class="earn">
      <view class="earn_item flex">
        <view>
          <view class="text-24 text-500 text-7E7E7E">累计收益</view>
          <view class="text-44 text-400 text-070202 mgt-18">999.99</view>
        </view>
        <view class="btn">去提现</view>
      </view>
      <view class="earn_item mgl-24">
        <view class="text-24 text-500 text-7E7E7E">悬赏余额</view>
        <view class="text-44 text-400 text-070202 mgt-18">999.99</view>
      </view>
    </view>

    <image class="radio-16 h-128 w mgt-24" src="/static/logo.png"></image>
    <image class="radio-16 h-144 w mgt-24" src="/static/logo.png"></image>

    <view class="w mgt-24 pdb-30">
      <view
        class="w h-96 flex jc_between ai_center mgt-8 menu_item"
        v-for="item in menuList"
        :key="item.name"
        @click="$navTo(item.pagePath)"
      >
        <view class="flex ai_center p-rel">
          <image class="w-48 h-48" :src="item.icon" mode="scaleToFill" />
          <view class="mgl-20 text-28 text-400 text-303030">
            {{ item.name }}
          </view>
          <view v-if="item.name === '我的消息'" class="badge">99+</view>
        </view>
        <image class="w-48 h-48" src="/static/logo.png" mode="scaleToFill" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "我的",
      tagList: [
        {
          icon: "/static/logo.png",
          name: "我的接单",
          pagePath: "/pages/myTakeOrder/index",
        },
        {
          icon: "/static/logo.png",
          name: "我的悬赏",
          pagePath: "/pages/myBounty/index",
        },
        {
          icon: "/static/logo.png",
          name: "开通会员",
          pagePath: "/pages/activateVIP/index",
        },
        {
          icon: "/static/logo.png",
          name: "邀请好友",
          pagePath: "/pages/inviteFriends/index",
        },
      ],
      menuList: [
        {
          icon: "/static/logo.png",
          name: "我的工具包",
          pagePath: "/pages/myTools/index",
        },
        {
          icon: "/static/logo.png",
          name: "我的消息",
          pagePath: "/pages/myMessage/index",
        },
        {
          icon: "/static/logo.png",
          name: "维权",
          pagePath: "/pages/safeguardRights/index",
        },
        {
          icon: "/static/logo.png",
          name: "收益统计",
          pagePath: "/pages/statisticsEarnings/index",
        },
        {
          icon: "/static/logo.png",
          name: "我的店铺",
          pagePath: "/pages/myShop/index",
        },
        {
          icon: "/static/logo.png",
          name: "系统设置",
          pagePath: "/pages/setting/index",
        },
      ],
    };
  },
  onLoad() {},
  methods: {},
};
</script>

<style lang="scss" scope>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.top_bg {
  width: 100vw;
  height: 568rpx;
  flex-shrink: 0;
//   background: linear-gradient(to bottom, #ffd8bf, #ffffff);
  background:  linear-gradient(180deg, #ffd8bf 10%, #fff 65%);

  .head {
    margin-top: 134rpx;
    padding: 0 32rpx;
    height: 144rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .vip_icon {
      margin-top: 16rpx;
      width: 112rpx;
      height: 44rpx;
    }
    .image {
      width: 144rpx;
      height: 144rpx;
      border-radius: 50%;
    }
  }

  .info {
    margin-top: 40rpx;
    padding: 0 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .info_item {
      height: 128rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .line {
      height: 40rpx;
      width: 2rpx;
      background: #efedec;
    }
  }
}

.earn {
  margin-top: -122rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;

  .earn_item {
    padding: 16rpx 16rpx 20rpx 24rpx;
    flex: 1;
    height: 148rpx;
    flex-shrink: 0;
    border-radius: 16rpx;
    background: #fff;
    box-shadow: 0 0 56rpx 0 #0000001a;
  }

  .btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120rpx;
    height: 48rpx;
    flex-shrink: 0;
    border-radius: 24rpx;
    background: #fe6505;
    box-shadow: 0 8rpx 16rpx 0 #fe650533;
    color: #ffffff;
    text-align: center;
    font-family: "Source Han Sans CN";
    font-size: 24rpx;
    font-weight: 400;
  }
}

.menu_item {
  border-bottom: 2rpx solid #f2f2f7;
}

.badge {
  display: inline-flex;
  height: 40rpx;
  padding: 4rpx 12rpx;
  justify-content: center;
  align-items: center;
  border-radius: 64rpx;
  background: #e02e24;
  color: #ffffff;
  text-align: center;
  font-family: "Source Han Sans CN";
  font-size: 20rpx;
  font-weight: 500;

  position: absolute;
  left: 188rpx;
  top: -20rpx;
}
</style>