zcb_APP/components/bountyItem.vue

<template>
  <view class="bounty">
    <view class="head">
      <image class="image" src="/static/image/index/default_avatar.png" mode="scaleToFill" />
    </view>
    <view class="middle"></view>

    <view class="main">
      <view class="top_title">
        <view class="bounty_title">
          <view class="text-32 text-500 text-070602 text">
            这是一条悬赏任务悬赏任务
          </view>
          <view class="flex ai_center tips">
            <view class="tip_item top_color">顶</view>
            <view class="tip_item quick_color">快审</view>
            <view class="tip_item hot_color">热</view>
            <view class="tip_item new_color">新</view>
          </view>
        </view>
        <view class="price text-32 text-600 text-DD3D3D">+3.02元</view>
      </view>
      <view class="flex jc_between mgt-16">
        <view class="flex ai_center text-24 text-400 text-7E7E7E">
          <view>671已赚</view>
          <view class="line"></view>
          <view>剩余21个</view>
        </view>
        <view class="text-24 text-400 text-7E7E7E">支持设备：苹果</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  onLoad() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.bounty {
  width: 100%;
  height: 160rpx;
  display: flex;
  align-items: center;
  border-bottom: 2rpx solid #F7F7F7;

  .head {
    display: flex;

    .image {
      width: 96rpx;
      height: 96rpx;
      border-radius: 50%;
    }
  }
  .middle {
    width: 8rpx;
    height: 100%;
  }

  .main {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .top_title {
      display: flex;
      align-items: center;

      .bounty_title {
        flex: 1;
        display: flex;
        align-items: center;
        .text {
          flex: 1;
          width: 0;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .tips {
          width: 210rpx;
          display: flex;
          justify-content: space-between;

          .tip_item {
            display: flex;
            padding: 4rpx 8rpx;
            justify-content: center;
            align-items: center;
            border-radius: 0 6rpx 6rpx 6rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #fff;
          }
        }
      }

      .price {
        margin-left: 30rpx;
        text-align: end;
      }
    }
  }
}

.line {
  height: 80%;
  width: 1rpx;
  margin: 0 16rpx;
  background-color: #dadada;
}

.top_color {
  border: 1rpx solid #ffce31;
  background: #ffce31;
}
.quick_color {
  border: 1rpx solid #6b6df7;
  background: #6b6df7;
}
.hot_color {
  border: 1rpx solid #e02e24;
  background: #e02e24;
}
.new_color {
  border: 1rpx solid #fe6505;
  background: #fe6505;
}
</style>