<template>
    <view class="content">
        <view class="item row">
            <view class="price">
                <view class="primary">
                    <price-format :subscript-size="40" :first-size="70" :second-size="70" :price="18"></price-format>
                </view>
                <view class="full">满20元可用</view>
            </view>
            <view class="dashed"> </view>
            <view class="flex1 u-m-l-40 row-between">
                <view>
                    <view class="title">优惠券</view>
                    <view class="u-m-t-20 full">有效期3天</view>
               </view>
               <view class="exchange">立即兑换</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {

    }
</script>

<style lang="scss" scoped>
.content {
    margin: 24rpx 24rpx 0;
    padding-bottom: 12rpx;
}

.item {
	position: relative;
    width: 100%;
    height: 176rpx;
    background-color: #fff;
    border-radius: 20rpx;
    margin-bottom: 24rpx;
    box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0,0,0,0.04);
    padding: 24rpx;
}
.item::before,
.item::after {
	content: "";
	position: absolute;
	left: 210rpx;
	width: 20rpx;
	height: 20rpx;
	background: #F6F6F6;
	border-radius: 50%;
	z-index: 2;
}
.item::before {
	top: -10rpx;
}
.item::after {
	bottom: -10rpx;
}

.price {
    width: 194rpx;
    text-align: center;
}

.full {
    color: rgba(0,0,0,0.4);
}

.dashed {
    border-right: 2px dashed #254062;
    height: 176rpx;
}

.title {
    font-size: 40rpx;
    font-weight: 600;
}
.exchange {
    width: 159rpx;
    height: 56rpx;
    line-height: 56rpx;
    background: #FD414B;
    border-radius: 28rpx;
    color: #fff;
    text-align: center;
}
</style>