<template>
	<view class="page">
		<view class="navbox">
			<view class="navitem" data-id="1" >
				礼卷领取
			</view>
			<view class="navitem" data-id="2">
				我的礼卷
			</view>
		</view>
		<view class="boxa">
			<view class="aitem">
				<view class="left">
					<view class="name">满90减50优惠券</view>
					<view class="time">有效期至2019-10-10 19:30:30</view>
				</view>
				<view class="btn">领取</view>
			</view>
			<view class="aitem">
				<view class="left">
					<view class="name">满90减50优惠券</view>
					<view class="time">有效期至2019-10-10 19:30:30</view>
				</view>
				<view class="btn activeA">已领取</view>
			</view>
		</view>
		<view class="boxb">
			<view class="xnavbox">
				<view class="xnavitem xactive">
					待使用
				</view>
				<view class="xnavitem">
					已使用
				</view>
				<view class="xnavitem">
					已过期
				</view>
			</view>
			<view class="container">
				<view class="bitem">
					<view class="top">
						<view class="price">￥1</view>
						<view class="right">
							<view class="bname">
								<text>抵用卷</text>
								<text>待使用</text>
							</view>
							<view class="tips">满6元可用</view>
						</view>
					</view>
					<view class="btime">
						有效期至：2019-10-10 19:30:30
					</view>
				</view>
				<view class="bitem borderactive">
					<view class="top">
						<view class="price wordacticve">￥1</view>
						<view class="right">
							<view class="bname">
								<text class="wordacticve">抵用卷</text>
								<text>待使用</text>
							</view>
							<view class="tips wordacticve">满6元可用</view>
						</view>
					</view>
					<view class="btime wordacticve">
						有效期至：2019-10-10 19:30:30
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	page{
		background: #F7F7F7;
	}
	.navbox{
		height: 88rpx;
		background: #fff;
		display: flex;
	}
	.navitem{
		width: 50%;
		height: 100%;
		font-size:32rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(35,35,35,1);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.boxa{
		margin-top: 16rpx;
		background: #fff;
		overflow: hidden;
		padding: 0 36rpx;
		box-sizing: border-box;
	}
	.aitem{
		height: 150rpx;
		border-bottom: 1px solid #FEFEFE;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.left{
		width: 340rpx;
	}
	.left .name{
		font-size:32rpx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		color:rgba(35,35,35,1);
	}
	.left .time{
		font-size:24rpx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		color:rgba(91,94,100,1);
		margin-top: 8rpx;
	}
	.btn{
		width:160rpx;
		height:64rpx;
		border-radius:8rpx;
		border:1px solid rgba(255,148,23,1);
		font-size:24rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(255,148,23,1);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.activeA{
		color: #BDC4CE;
		border-color: #BDC4CE;
	}
	.boxb{
		padding: 0 32rpx;
		box-sizing: border-box;
	}
	.xnavbox{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 16rpx;
	}
	.xnavitem{
		width:212rpx;
		height:62rpx;
		font-size:28rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(61,69,76,1);
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
	}
	.xactive{
		background: #C29445;
		color: #fff;
	}
	.container{
		margin-top: 12rpx;
	}
	.bitem{
		margin-top: 16rpx;
		border-left: 8rpx solid #C29445;
		padding: 40rpx 32rpx 20rpx;
		box-sizing: border-box;
		background: #fff;
	}
	.top{
		height: 156rpx;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		align-items: center;
	}
	.price{
		font-size:72rpx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		color:rgba(194,148,69,1);
		margin-right: 32rpx;
	}
	.right{
		width: 100%;
	}
	.bname{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size:28rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(91,94,100,1);
	}
	.bname text:first-child{
		font-size:36rpx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:600;
		color:rgba(6,18,32,1);
	}
	.tips{
		font-size:32rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(61,68,76,1);
		margin-top: 16rpx;
	}
	.btime{
		font-size:28rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(61,69,76,1);
		margin-top: 40rpx;
	}
	.borderactive{
		border-color: #BDC4CE;
	}
	.wordacticve{
		font-weight:500 !important;
		color:rgba(189,196,206,1) !important;
	}
</style>