VAVABUY/pages/setting/compoments/messageList.vue

<template>
  <view>
    <view class="box" v-for="item, index in 1" :key="index">
      <view class="time">2025-09-11 12:05</view>
      <view class="desc">恭喜你，成功下单某某，赠送您50优惠券，可在某某查收。</view>
      <view class="conpon_box">
        <view class="conpon_box_left">
          <view class="amount">
            <text>￥</text>50
          </view>
          <view class="conpon_box_left_cont">
            <view class="type">
              <trans _t="运费券" />
            </view>
            <view class="status">满100可用</view>
          </view>
        </view>
        <view class="conpon_box_right">
          <view class="conpon_box_right_box">
            <view>
              <trans _t="领"></trans>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  }
})
</script>

<style lang="less" scoped>
@import url('@/style.less');

.circle(@size, @bg) {
  .flex_center();
  width: @size;
  height: @size;
  background: @bg;
  border-radius: 50%;
}

.box {
  margin: 0 auto;
  padding-bottom: 48rpx;

  .time {
    .size(24rpx);
    text-align: center;
    color: var(--text-02);
  }

  .desc {
    width: 100%;
    padding: 26rpx 34rpx;
    margin: 12rpx 0 16rpx 0;
    border-radius: 20rpx;
    background-color: var(--bor-color);
    box-sizing: border-box;
    .size(24rpx);
    color: var(--text);
    line-height: 44rpx;
  }

  .conpon_box {
    display: flex;
    width: 100%;
    border-radius: 20rpx;
    background: linear-gradient(180deg, #E6734C 0%, #EB3A68 100%);
    padding: 20rpx;
    box-sizing: border-box;

    &_left {
      display: flex;
      flex: 1;
      height: 200rpx;
      background: url('@/static/user/conpon_bg.png');
      background-size: 100% 100%;
      box-sizing: border-box;

      .amount {
        .size(96rpx);
        font-weight: bold;
        color: var(--red);
        line-height: 200rpx;
        margin-left: 40rpx;

        text {
          .size(28rpx);
          margin-right: 8rpx
        }
      }

      &_cont {
        .hor(space-between);
        flex-direction: column;
        padding: 30rpx 0 48rpx 30rpx;
        color: #E94F5D;
        font-weight: 500;

        .type {
          .size(32rpx);
        }

        .status {
          .size(28rpx);
        }
      }
    }

    &_right {
      .circle(200rpx, transparent);

      &_box {
        .circle(140rpx, #F8EDC9);

        view {
          .circle(120rpx, linear-gradient(180deg, #F5DFB1 0%, #E39355 100%));
          border: 0.5px solid #CC9245;
          box-sizing: border-box;

          text {
            .size(60rpx);
            font-weight: bold;
            background: linear-gradient(180deg, #E85B57 0%, #E94F5D 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
          }

        }
      }
    }
  }
}
</style>