<template>
	<view class="content">
		<view class="couponList">
			<view class="couponTop">
				<image class="couponPic" mode="scaleToFill" src="../../static/banner@3x.png"></image>
				<view class="info">
					<text class="h3">5折优惠券<text class="iconfont icon-info"></text></text>
					<text class="p">2021.02.10-2021.03.08 14:00</text>
				</view>
				<view class="font_red"><text>￥</text>12</view>
			</view>
			<view class="couponBot">
				<view class="p">时光印记孕妈妈摄影机构</view>
				<navigator url="../couponDetail/couponDetail"><view class="useBtn">立即使用</view></navigator>
				<view class="halfCircle_l"></view>
				<view class="halfCircle_r"></view>
			</view>
		</view>
		<view class="couponList">
			<view class="couponTop">
				<image class="couponPic" mode="scaleToFill" src="../../static/banner@3x.png"></image>
				<view class="info">
					<text class="h3">5折优惠券<text class="iconfont icon-info"></text></text>
					<text class="p">2021.02.10-2021.03.08 14:00</text>
				</view>
				<view class="font_red"><text>￥</text>12</view>
			</view>
			<view class="couponBot">
				<view class="p">时光印记孕妈妈摄影机构</view>
				<navigator url="../couponDetail/couponDetail"><view class="useBtn">立即使用</view></navigator>
				<view class="halfCircle_l"></view>
				<view class="halfCircle_r"></view>
			</view>
		</view>
		<view class="couponList">
			<view class="couponTop">
				<image class="couponPic" mode="scaleToFill" src="../../static/banner@3x.png"></image>
				<view class="info">
					<text class="h3">5折优惠券<text class="iconfont icon-info"></text></text>
					<text class="p">2021.02.10-2021.03.08 14:00</text>
				</view>
				<view class="font_red"><text>￥</text>12</view>
			</view>
			<view class="couponBot">
				<view class="p">时光印记孕妈妈摄影机构</view>
				<navigator url="../couponDetail/couponDetail"><view class="useBtn">立即使用</view></navigator>
				<view class="halfCircle_l"></view>
				<view class="halfCircle_r"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>
<style>
	page{background-color: #F6F6F6;}
</style>
<style lang="scss" scoped>
	.couponList{
		width:690rpx;
		margin:20rpx auto 0 auto;
		background: #fff;
		box-sizing: border-box;
		border-radius:20rpx;
		.couponTop{
			width:100%;
			display:flex;
			justify-content: flex-start;
			align-items: center;
			align-content: center;
			position: relative;
			padding:30rpx;
			box-sizing: border-box;
			.couponPic{
				width:80rpx;
				height:80rpx;
				border-radius: 8rpx;
				margin-right:24rpx;
			}
			.info{
				position: relative;
				.h3{
					display: block;font-size: 32rpx;font-weight: 500;color: #333333;
					.iconfont{font-size:35rpx;color:#B5BDC8;margin-left: 10rpx;}
				}
				.p{display: block;font-size: 26rpx;font-weight: 400;color: #999999;margin-top:12rpx;}
			}
			.font_red{
				position: absolute;right:30rpx;top:30rpx;font-size: 40rpx;font-weight: 500;letter-spacing: 2rpx;
				text{font-size: 28rpx;color: #FF578A;font-weight: normal;}
			}
		}
		.couponBot{
			display: flex;
			justify-content: space-between;
			align-items: center;
			align-content: center;
			border-top:1rpx dashed #DEDEDE;
			padding:30rpx;
			position: relative;
			box-sizing: border-box;
			.p{font-size: 28rpx;font-weight: 400;color: #999999;}
			.useBtn{width: 164rpx;height: 56rpx;background: #FF578A;border-radius: 28rpx;font-size: 28rpx;font-weight: 500;color:#fff;text-align: center;line-height:56rpx;}
			.halfCircle_l{width:14rpx;height:28rpx;background:#F6F6F6;border-radius:0 14rpx 14rpx 0;position: absolute;left:0;top:-15rpx;}
			.halfCircle_r{width:14rpx;height:28rpx;background:#F6F6F6;border-radius:14rpx 0 0 14rpx;position: absolute;right:0;top:-15rpx;}
		
		}
		
	}

</style>
