couponCenter_mpapp/src/components/spendAndSaveCoupon.vue

<script lang="ts" setup>

</script>

<template>
    <view class="spend-and-save-coupon">
        <view class="coupon-content">
            <view class="coupon-amount">
                <view class="coupon-amount-text">
                    50
                </view>
                <view class="coupon-amount-icon">
                    ￥
                </view>
            </view>
            <view class="coupon-desc">
                满699元可用
            </view>
        </view>
        <view class="coupon-btn">
            去发券
        </view>
    </view>
</template>

<style lang="scss" scoped>
.spend-and-save-coupon {
    width: 210rpx;
    height: 205rpx;
    background: url('@img/index/coupon1.png') no-repeat right top;
    background-size: cover;
    position: relative;

    .coupon-content {
        position: absolute;
        top: 35%;
        left: 51%;
        transform: translate(-50%, -50%);
        width: 162rpx;
        height: 158rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 27rpx;

        .coupon-amount {
            position: relative;

            .coupon-amount-text {
                font-weight: 500;
                font-size: 66rpx;
                color: #ff4f3b;
            }

            .coupon-amount-icon {
                position: absolute;
                width: 24rpx;
                height: 24rpx;
                background-color: #ffffff;
                border-radius: 50%;
                bottom: 0;
                right: 0;
                transform: translate(55%, -20%);
                font-weight: 500;
                font-size: 20rpx;
                color: #ff1a00;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .coupon-desc {
            font-weight: 400;
            font-size: 22rpx;
            color: #ff1a00;
        }
    }

    .coupon-btn {
        position: absolute;
        font-weight: 500;
        font-size: 22rpx;
        color: #f26e5f;
        bottom: 2rpx;
        left: 50%;
        transform: translate(-54%, -55%);
    }
}
</style>