<template>
    <view class="content">
        <view class="item row-between"  v-for="(item, index) in 10" :key="index">
            <view class="coupon2">
                <view class="coupon-top2">
                    <text>优惠券专享</text>
                </view>
                <view class="unit">
                    <view>5</view>
                    <view>元</view>
                    <view class="u-m-l-10 u-m-r-10">x</view>
                    <view>6</view>
                    <view>张</view>
                </view>
                <view class="coupon-tips2">
                    满11元可用
                </view>
            </view>
            <view class="u-m-l-18 flex1 row-between">
                <view>
                    <view class="xl bold-600">30元神券包</view>
                    <view class="surprise">惊喜折扣减12元</view>
                    <view class="row u-m-t-38">
                        <view class="primary">
							<price-format :subscript-size="26" :first-size="40" :second-size="40" :price="18" :weight="600"></price-format>
                        </view>
                        <view class="text-858386 u-m-l-8">
							<price-format :subscript-size="22" :first-size="22" :second-size="22" :price="30" :weight="400"></price-format>
                        </view>
                    </view>
                </view>
                <view class="buy" style="align-self: flex-end;">购买</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                checked: false
            }
        }
    }
</script>

<style lang="scss" scoped>
.bold-600 {
    font-weight: 600;
}

.text-858386 {
    color: #858386;
}

.content {
    margin: 24rpx 24rpx 0;
    padding-bottom: 12rpx;
}

.item {
    width: 100%;
    background-color: #fff;
    border-radius: 20rpx;
    margin-bottom: 24rpx;
    box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0,0,0,0.04);
    padding: 24rpx;
}

.coupon2 {
	margin-right: 20rpx;
	position: relative;
	width: 258rpx;
	height: 161rpx;
	background: #FFF5F3;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}

.curved-rect {
	width: 258rpx;
	height: 64rpx;
}

.coupon-top2 {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 136rpx;
	height: 30rpx;
	background: #FFEBE3;
	text-align: center;
	border-bottom-left-radius: 24rpx;
	border-bottom-right-radius: 24rpx;
	color: #F1BFB6;
	font-size: 22rpx;
	line-height: 27rpx;
}

.unit {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 40rpx;
	color: #F90004;
	font-weight: 600;
	padding-top: 40rpx;
	text-align: center;
}

.coupon-tips2 {
	background-image: url('/static/coupon_bg.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	height: 66rpx;
	text-align: center;
	padding-top: 20rpx;
	color: #fff;
}

.surprise {
    width: 159rpx;
    height: 31rpx;
    line-height: 31rpx;
    padding: 0 6rpx;
    background-color: #FCEEED;
    border-radius: 8rpx;
    color: #EB441A;
    text-align: center;
    font-size: 20rpx;
}

.buy {
    width: 159rpx;
    height: 56rpx;
    line-height: 56rpx;
    background: #FD414B;
    border-radius: 28rpx;
    color: #fff;
    text-align: center;
}
</style>