chelvc-custom/src/PageMine/coupon.vue

<template>
  <view class='container'>
    <view class='coupon-box'>
      <view class='coupon-item'>
        <view class='item-left'>
          <view class='left-price'>满500减100元</view>
          <view class='left-time'>2023-03-01~2024-05-30</view>
        </view>
        <view class='item-right'>
          <view class='rebates'>
            <span class='rebates-numb'>2</span>折
          </view>
          <view class='rebates-text'>折扣</view>
          <button class='btn' @click='handlerToUse'>去使用</button>
          <view class='circle-box'>
            <view class='circle' v-for="item of 6"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default{
    data(){
      return{

      }
    },
    methods:{
      handlerToUse(){
        uni.showToast({
          title:'使用',
          icon:"none"
        })
      }
    }
  }
</script>

<style lang='scss' scope>
  page{
    background-color:#F9F9F9;
  }
  .container{
    min-height:100vh;
    .coupon-box{
      padding:24rpx 32rpx;
      box-sizing: border-box;
      width: 100%;
      .coupon-item{
        width: 100%;
        height: 263rpx;
        background-color: #fff;
        border-radius: 16rpx;
        display: flex;
        justify-content: space-between;
        box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.08);
        .item-left{
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          width: 64%;
          text-align: center;
          .left-price{
            color:#0C1223;
            font-size: 36rpx;
            font-weight: bold;
          }
          .left-time{
            color:#999999;
            font-size: 24rpx;
          }
        }
        .item-right{
          position: relative;
          width: 35.27%;
          height: 100%;
          background-color: #ED4444;
          border-radius: 0 16rpx 16rpx 0;
          text-align: center;
          color:#fff;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          .rebates{
            font-size: 32rpx;
            .rebates-numb{
              font-size: 68rpx;
              font-weight: bold;
            }
          }
          .rebates-text{
            font-size: 24rpx;
          }
          .btn{
            height:54rpx;
            border-radius:30rpx;
            background-color: #fff;
            text-align: center;
            line-height: 54rpx;
            font-weight: bold;
            color:#E2433F;
            font-size: 28rpx;
          }

          .circle-box{
            position: absolute;
            left: -7%;
            height: 263rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            .circle{
              width: 30rpx;
              height: 30rpx;
              border-radius:50%;
              background-color: #fff;
            }
          }
        }
      }
    }
  }
</style>