<template>
	<view class="vnfee">
		<view class="vnf-tit">
			<view class="vntit">请选择入网套餐</view>
			<view class="vntips">请了解套餐内容后，根据实际需要自行选择入网套餐</view>
		</view>
		<!-- 套餐类型 -->
		<view class="cardlist">
			<!-- 单月购买 -->
			<block>
				<view class="card-item">
					<text class="cdname">单月购买</text>
					<view class="cdprice">
						<text class="price-unit">¥</text>
						<text class="price-num">48.8</text>
					</view>
				</view>
			</block>
			<!-- 续费月卡 -->
			<block>
				<view class="card-item">
					<text class="cdname">续费月卡</text>
					<view class="cdprice">
						<text class="price-unit">¥</text>
						<text class="price-num">48.8</text>
					</view>
				</view>
			</block>
			<!-- 续费年卡 -->
			<block>
				<view class="card-item active">
					<text class="cdname fire">续费年卡</text>
					<view class="cdprice">
						<text class="price-unit">¥</text>
						<text class="price-num">368.8</text>
					</view>
				</view>
			</block>
		</view>
		<!-- card 说明 -->
		<view class="carddesc">
			<view class="cdline">平均每月：30.8 元</view>
			<view class="cdline">套餐类型：次年到期自动续费（可提前申请取消）</view>
			<view class="cdline">套餐有效期：12个月 + 6个月（新用户开通成功即加送6个月）</view>
			<view class="cdline">最高可更换绑定设备：3台（同一时间只允许1台设备登录）</view>
			<view class="cdline">最高可绑定登录账号：3个</view>
		</view>
		<view class="cdcross"></view>
		
		
	</view>
</template>

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

<style lang="scss" scoped>
.vnf-tit{
	width: 100%;
	padding-left: 36rpx;
	margin-top: 46rpx;
	
	.vntit{
		font-size: 46rpx;
		line-height: 1.6;
	}
	.vntips{
		padding: 10rpx;
		font-size: 22rpx;
		color: #999;
	}
}
// 套餐
.cardlist{
	margin-top: 46rpx;
	
	
	.card-item{
		border: 2rpx solid #FEBD45;
		width: 30%;
		margin-left: 3%;
		float: left;
		height: 260rpx;
		text-align: center;
		border-radius: 4%;
		
		.cdname{
			font-size: 32rpx;
			line-height: 1.8;
			font-weight: 600;
			padding: 12rpx 0 12rpx;
			margin-top: 26rpx;
			display: block;
			
			&.fire{
				background: url('../../static/fire.svg') no-repeat left center;
			}
		}
		
		.cdprice{
			margin-top: 20rpx;
			font-weight: 600;
			color: #C5884C;
			
			.price-unit{
				font-size: 36rpx;
				padding-right: 12rpx;
			}
			
			.price-num{
				font-size: 52rpx;
			}
		}
		
		&.first{
			margin-left: 0 !important;
		}
		
		&:hover{
			background-color: #FEBD45;
		}
	}

}

//套餐说明
.carddesc{
	clear: both;
	margin-top: 36rpx;
	padding-top: 32rpx;
	padding-left: 32rpx;
	
	.cdline{
		line-height: 36rpx;
		font-size: 26rpx;
		padding: 10rpx;
	}
	
	.cdcross{
		height: 2rpx;
		width: 100%;
		background-color: #999;
	}
}
</style>
