studytour-front/pages_order/coupon/couponList/couponCard.vue

<template>
  <view class="flex card">
    <view class="flex price">
      ¥<view class="highlight">{{ data.discountAmount }}</view>
    </view>
    <view class="flex flex-column info">
      <view class="title">{{ data.title }}</view>
      <view class="desc">{{ `有效期至 ${$dayjs(data.validDate).format('YYYY-MM-DD')}` }}</view>
      <button class="btn" @click="jumpToCategory">去使用</button>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      },
      value: {
        type: String,
        default: null,
      }
    },
    data() {
      return {
      }
    },
    methods: {
      jumpToCategory() {
  			this.$utils.navigateTo(`/pages/index/category`)
      },
    },
  }
</script>

<style scoped lang="scss">

  .card {
    column-gap: 24rpx;
    padding: 8rpx;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 1.4;
    background: #FFFFFF;
    border-radius: 24rpx;
  }

  .price {
    width: 164rpx;
    height: 224rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #FF4800;
    background: #FFF2F2;
    border-radius: 16rpx;

    .highlight {
      font-size: 48rpx;
    }
  }

  .info {
    flex: 1;
    align-items: flex-start;
    row-gap: 16rpx;
    height: 224rpx;
    padding-left: 24rpx;
    border-left: 2rpx dashed #DADADA;

    .title {
      font-size: 32rpx;
      font-weight: 500;
      color: #181818;
    }

    .desc {
      font-size: 28rpx;
      color: #9B9B9B;
    }

    .btn {
      padding: 6rpx 34rpx;
      font-family: PingFang SC;
      font-size: 30rpx;
      font-weight: 500;
      line-height: 1.4;
      color: #FFFFFF;
      background: linear-gradient(to right, #21FEEC, #019AF9);
      border: 2rpx solid #00A9FF;
      border-radius: 28rpx;
    }
  }

</style>