JP-ChargeTeam51/pages/monthlyCardActivity/monthlyCardBuy2.vue

<template>
	<view>
		<ujp-navbar title="选购服务费月卡"></ujp-navbar>
		<!-- 提示 -->
<template>
	<u-alert-tips type="warning" :title="title" :description="description" :show-icon="true"></u-alert-tips>
</template>
<!-- 卡片 -->
<view class="main">
	<view class="card-1">
		<view class="tag">新客福利</view>
		<view class="price">
			<view class="current-price">
				59.9<text>元/月</text>
			</view>
			<view class="radio-box">
				
				<u-checkbox-group>
					<u-checkbox v-model="checked" active-color="#446D94"  shape="circle" size="48"></u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
	
			
		
		
	</view>
	<view class="card-2">
		<view class="tag">限时5折</view>
		<view class="price">
			<view class="current-price">
				99<text>元/月</text>
			</view>
			<view class="original-cost">
				原价 198元/月
			</view>
			<view class="radio-box">
				<u-checkbox-group>
					<u-checkbox v-model="checked" active-color="#B29467"  shape="circle" size="48"></u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		
		
	</view>
	
</view>
<!-- 按钮 -->
<view class="button">
	<button class="btn"  ><text style="font-size: 14px;">￥</text>59.9  开通1个月会员</button>
	<button   class="btn btn-2"><text style="font-size: 14px;">￥</text>99 <text class="price">198</text>  开通1个月会员
	
	<view class="position">
		<view id="talkbubble">限时5折</view>	
	</view>
	</button>
	
	
	
  <view class="hint">
  	开通表示阅读并同意《服务费折扣协议》
  </view>
</view>
		<!-- 须知 -->
		<view class="notice">
			<u-divider fontSize="36" border-color="#bbc039" color="#101010">购卡须知</u-divider>
			<view class="text">
				<view class="num">
					01
				</view> 
				<view class="">
					服务费月卡默认与购卡人账户进行关联，所涉权益仅可绑定单个车牌，即账户、月卡、车牌三者关联形成一个权益主体
				</view>
				</view>
			<view class="text">
				<view class="num">
					02
				</view>
				<view class="">
					服务费月卡有效期内，持卡人在指定充电站为绑定车辆充电，可享受充电服务费全免。持卡人给非绑定车辆充电，将正常收取充电服务费。。
				</view></view>
			<view class="text">
				<view class="num">
					03 
				</view>
				<view class="">
					如车牌等信息填写错误，请致电售后客服进行处理。本卡一经售出，不支持任何形式的退换。
				</view>
				</view>
			<view class="text">
				<view class="num">
					04
				</view>
				<view class="">
					本卡一经售出，不支持任何形式的退换。
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
							description: '盟主能量包本期限时优惠活动将于9月16日结束。',
							checked:"false"
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-alert-desc{
		color: #ff7300;
	}
	// 卡片
	.main{
		background-color: #404A5E ;
		padding: 20px 20px 30px 20px;
		.tag{
			position: absolute;
			background-color: rgba(255, 61, 0, 100);
			color: #ffffff;
			font-size: 12px;
			text-align: center;
			line-height: 20px;
		    padding: 0 6px;
			left: 284rpx;
			top: 44rpx;
			
			
		}
		@media screen and (max-width:320px){
			.tag{
				padding: 0 4rpx;
			}
			.price{
				position: absolute;
				top:24rpx !important; 
				right: 8rpx !important;
			}
		    .current-price{
		        font-size: 36rpx;
		    }
		}
		.price{
			top:24rpx;
			right: 32rpx;
			position: absolute;
		}
		.current-price{
			font-size: 64rpx;
			color: #101010;
			text-align: right;
			
			text{
				font-size: 28rpx;
				
			}
		}
		.original-cost{
			color: rgba(75, 65, 50, 100);
			text-decoration: line-through;
			 
		}
		/deep/.u-iconfont{
			font-size: 36rpx !important;
			
		}
		
		
		
		.card-1{
			background: url(@/assets/img/card_normal.png) no-repeat ;
			position: relative;
			background-size:cover;
			height: 300rpx;
			/deep/.u-checkbox__icon-wrap{
				background-color: #446D94 ;
			}
			.radio-box{
				margin-top: 112rpx;
				float: right;
				margin-right: -30rpx;
			}
		}
		.card-2{
			position: relative;
			background: url(@/assets/img/card_operate.png) no-repeat   ;
			background-size:cover;
			height: 300rpx;
			margin-top: 32rpx;
			/deep/.u-checkbox__icon-wrap{
				background-color: #B29467 ;
			}
			.radio-box{
				margin-top: 78rpx;
				float: right;
				margin-right: -30rpx;
				
			}
		}
	}

// 按钮
.button{
	margin-top: -20rpx;
	border-radius: 16px 16px 0px 0px;
	background-color: rgba(255, 255, 255, 100);
	padding: 20px 20px 16px 20px;
	uni-button:after{
		border: none;
	}
	.btn{
		border: none !important;
		background:linear-gradient(#E1D0A5,#E4BE84);
		box-shadow: 0px 4px 10px 0px rgba(207, 175, 118, 40);
		border-radius: 50px;
		color: #101010;
	    font-size: 18px !important;
		line-height: 44px;
		height: 44px;
		overflow: inherit !important;
	    .price{
			text-decoration: line-through;
			margin: auto 4px;
			font-size: 12px
		}
	}
	.hint{
		color: rgba(159, 157, 154, 100);
		line-height: 20px;
		text-align: center;
		margin-top: 8px;
	}
	.btn-2{
		position: relative;
	}
	.position{
		position: absolute;
		top: -16px;
		left: 24%;
		z-index: 999;
	}
	#talkbubble {
		position: absolute;
		top: 0;
		left: 0;
	  width: 60px; 
	  line-height: 20px;
	  font-size: 12px;
	  color: #fff;
	  background: red;
	  position: relative;
	  border-radius: 10px;
	  text-align: center;
	}
	#talkbubble:before {
	  content: "";
	  position: absolute;
	  top: 100%; 
	  right: 45%;
	  border-top:5px solid red;
	  border-right:5px solid transparent;
	  border-left: 5px solid transparent;
	}
	}
	// 须知
	.notice{
		background-color: #fff;
		margin-top: 12px;
		padding: 20px 20px 72px 30px;
		/deep/.u-divider{
			margin-bottom: 16px !important;
		}
		.text{
			color: #666666;
			margin-bottom: 12px;
			line-height: 24px;
			display: flex;
			.num{
				margin-right:8px;
			}
		}
	}
</style>