JP-ChargeTeam51/pages/discountCard/productDetails.vue

<template>
	<view>
		<ujp-navbar title="自营站充电服务费6折卡"></ujp-navbar>
		<view class="header">
			<view class="cover">
				<img src="../../assets/img/productImg.png" alt="">
			</view>
			<view class="text1">
				51充电联盟自营站
			</view>
			<view class="text1">
				充电服务费6折卡
			</view>
			<view class="tag">
				<view class="icon">
					<u-icon name="checkmark-circle-fill" color="#fff"></u-icon>
				</view>
				<view class="tag-text">
					全省200+充电枪
				</view>
			</view>
			<view class="tag">
				<view class="icon">
					<u-icon name="checkmark-circle-fill" color="#fff"></u-icon>
				</view>
				<view class="tag-text">
					平台注册会员及新能源车主可用
				</view>
			</view>
			<view class="usable-range">
				*仅平台自营站可用
			</view>
		</view>

		<view class="main">
			<view class="infos">
				<view class="title">
					51充电联盟自营站充电服务费6折卡
				</view>
				<view class="price">
					￥12.9元
				</view>
				<!-- 使用范围 -->
				<view class="usable-range">
					<view class="item">
						<u-icon name="checkmark-circle"></u-icon>
						仅可优惠充电服务费
					</view>
					<view class="item">
						<u-icon name="checkmark-circle"></u-icon>
						新能源车主可用
					</view>
					<view class="item">
						<u-icon name="checkmark-circle"></u-icon>
						仅平台自营站可用
					</view>
				</view>

			</view>
			<!-- 规格 -->
			<view class="specification">
				<view class="title">
					规格
				</view>
				<view class="value">
					选择商品规格<u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>
			</view>
			<!-- 适用站点 -->
			<view class="applicable-site">
				适用站点：平台自营站
			</view>
			<!-- 服务费 -->
			<view class="service-charge">
				<view class="box">
					<view class="discount">
						自营站充电服务费6折
					</view>
				</view>
				<view class="price">
					<view class="item">
						<text>12.9</text>元
					</view>
					<view class="item">
						<text>12.9</text>元
					</view>
				</view>
				<view class="hint1">
					<view class="item">
						<p>累计338度内可用</p>
						<p>有效期30天</p>
					</view>
					<view class="item">
						<p>累计338度内可用</p>
						<p>有效期30天</p>
					</view>
				</view>
			</view>
			<!-- 价格对比 -->
			<view class="price-comparison">
				<view class="headline">
					<view class="station">
						中崴国际充电站
					</view>
					<view class="time">
						（23:00-07:00）
					</view>
				</view>
				<!-- 折扣价 -->
				<view class="discount-price">
					<view class="tag">
						服务费6折价
					</view>
					<view class="price">
						0.66<text>元/度（含服务费0.30元）</text>
					</view>
				</view>
				<!-- 原价 -->
				<view class="original-cost">
					<view class="tag">
						原价
					</view>
					<view class="price">
						0.85元/度（含服务费0.49元）
					</view>
				</view>
				<u-line color="#f2f2f2" margin="40rpx 0"></u-line>
				<view class="example">
					以该站夜间大工业用电价格为例，购买6折卡后，<text style="color: #E60012 ;">每月可省约67.6元</text>（338度*0.2元/度）
				</view>
			</view>
			<!-- 提示2 -->
			<view class="hint2">
				*预估省钱金额计算不含购卡金额，月充电超出度数上限，可续购本商品。
			</view>
			<u-line color="#F2F2F2" margin="80rpx 0"></u-line>
			<!-- 相关问题 -->
			<view class="related-issues">
				<view class="headline">
					关于自营站充电服务费6折卡
				</view>
				<view class="item">
					<view class="question">
						Q：购买服务费6折卡可以在哪些充电站享受优惠？优惠范围是什么？
					</view>
					<view class="answer">
						A：平台自营站均可使用，其它充电站点暂不支持。服务费6折卡可享受额度范围内的充电服务费6折；但不包含电费、停车费、占位费等其他费用。
					</view>
				</view>
				<view class="item">
					<view class="question">
						Q：什么是额度上限和有效期内可用？


					</view>
					<view class="answer">
						A：在产品有效期内，使用服务费6折卡累计抵扣度数达到规定电量额度上限后，本单超出充电额度部分仍然以6折优惠计算，后续订单将不再继续享受服务费6折优惠。产品有效期到期后，即使累计使用度数没有达到额度上限，后续订单也不再继续享受服务费6折优惠。
					</view>
				</view>
				<view class="item">
					<view class="question">
						Q：我有多张不同的充电卡和优惠券，可以和服务费6折卡同时使用吗？
					</view>
					<view class="answer">
						A：同一笔订单中，暂不支持服务费6折卡与其它充电卡(服务费包月会员或其它折扣卡)一起使用；6折卡可以与账户余额或优惠券一起使用。
					</view>
				</view>
				<view class="item">
					<view class="question">
						Q：服务费6折卡的度数上限和有效期可以累计吗？

					</view>
					<view class="answer">
						A：不可以。当现有服务费6折卡达抵扣上限或剩余有效期为0天时，用户可以续购服务费6折卡。
					</view>
				</view>
				<view class="item">
					<view class="question">
						Q：启动充电后或结束充电拔枪后购买的服务费6折卡，可以使用吗？

					</view>
					<view class="answer-form">
						<view class="title">
							是否可以使用服务费6折卡
						</view>
						<view class="before">
							<view class="b-top">
								拔枪前购买
							</view>
							<view class="b-bottom">
								本单结算可以使用
							</view>
						</view>
						<view class="later">
							<view class="l-top">
								拔枪后购买
							</view>
							<view class="l-bottom">
								本单不可用，下一单结算可以使用
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 产品细则 -->
			<view class="product-rules">
				<view class="headline">
					充电服务费6折卡产品细则
				</view>
				<!-- 产品介绍 -->
				<view class="item">
					<view class="title">
						产品介绍：
					</view>
					<view class="content">
						<p> - 购卡的用户在平台自营站享受有效期内充电服务费6折的权益，该产品不可转赠。
						</p>
						<p>- 该产品有两种不同规格，单一账户不可重复购买，度数及有效期不可累加。
						</p>
						<p>- 购买成功后，可在51充电联盟公众号 - 汽车充电 - 我的中查看。</p>
					</view>
				</view>
				<!-- 服务说明 -->
				<view class="item">
					<view class="title">
						服务说明：
					</view>
					<view class="content">
						<p>- 购买自营站充电服务费6折卡可享平台自营站服务费6折权益，该产品不可转赠。</p>
						<p>- 该产品针对充电服务费享受折扣，不包含电费、停车费、占位费等其他费用。</p>
						<p>- 自营站充电服务费6折卡购买后即刻生效，充电拔枪前购买成功支持本单可用，拔枪后完成购买仅下一单可用。</p>
						<p>- 338度自营站充电服务费6折卡（限338度，有效期30天）和1000度自营站充电服务费6折卡（限1000度，有效期90天）均为同一种产品，是充电服务费6折卡的两种不同规格。</p>
					</view>
				</view>
			<!-- 适用对象 -->
			<view class="item">
				<view class="title">
					适用对象：
				</view>
				<view class="content">
					<p>- 新能源车主可购买，购买该卡的手机号所绑定的51充电联盟为使用该卡的唯一账号。</p>
					<p>- 该产品建议符合以下场景购买：①未拥有“充电服务费折扣卡”的车主；②已购买“充电服务费折扣卡”且改卡已过期的车主。</p>
				</view>
			</view>
			<!-- 适用充电站 -->
			<view class="item">
				<view class="title">
					适用充电站：
				</view>
				<view class="content">
					<p>- 自营站充电服务费6折卡，平台车主可在平台自营站使用，其他充电站点不支持使用。</p>
			
				</view>
			</view>
			<!-- 叠加规则 -->
			<view class="item">
				<view class="title">
					叠加规则：
				</view>
				<view class="content">
					<p>- 该卡与其他折扣类电卡(如：服务费包月会员等)针对同一订单不可叠加使用。</p>
					<p>- 该卡与账户余额和优惠券可叠加使用</p>
				</view>
			</view>
			<!-- 开票说明 -->
						<view class="item">
							<view class="title">
								开票说明：
							</view>
							<view class="content">
								<p>- 如需开具发票，请前往51充电联盟公众号 - 汽车充电 - 我的 - 我的发票中申请。</p>
			
							</view>
						</view>
			</view>

			
			
			
		</view>
<!-- 自营站 -->
			<view class="self-station">
				<view class="headline">
					查看你所在城市的自营站
				</view>
				<view class="map">
					<img src="../../assets/img/map.png" alt="">
					<view class="station-detail">
						<view class="title">
							<view class="title-l">
								你附近<text style="color:#FF6923;">{{' '}}5公里{{' '}} </text>内的充电站
							</view>
							<view class="title-r">
								更多<u-icon name="arrow-right" color="#999999"></u-icon>
							</view>
						</view>
						<view class="station-amount">
							<view class="item">
								<view class="number">
									5
								</view>
								<view class="name">
									平台自营站
								</view>
							</view>
							<view class="item">
								<view class="number">
									2
								</view>
								<view class="name">
									平台自营超充站
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
	<!-- 拒绝交易说明 -->
	<view class="explain">
		<view class="headline">
			自营站充电服务费6折卡拒绝交易说明
		</view>
		<view class="title">
			购卡人/持卡人存在以下情形的，51充电联盟有权拒绝交易、暂停或终止对购卡人/持卡人的服务，所有损失应由购卡人/持卡人自行承担：
		</view>
		<view class="answer">
			<p>	1、发卡人、售卡企业根据国家适用法律、法规核实购卡人/持卡人身份及自营站充电服务费6折卡交易信息等情况，遭拒绝的;</p>
		    <p>		2、冒用他人身份或使用伪造、变造身份证明文件购买或使用自营站充电服务费6折卡的；</p>
			 <p>3、在发卡人公布的售卡或充值渠道之外购买自营站充电服务费6折卡的；</p>
			 <p>4、在购买或使用自营站充电服务费6折卡时存在欺诈行为；</p>
			 <p>5、违反本章程购买或使用自营站充电服务费6折卡；</p>
			 <p>6、使用伪造、变造的自营站充电服务费6折卡；或有其他损害发卡人、售卡企业或其他购卡人/持卡人的合法权益的情形。</p>
		</view>
	</view>
	<!-- 政策变更说明 -->
	<view class="explain">
		<view class="headline">
			自营站充电服务费6折卡政策变更说明
		</view>
		<view class="answer">
			如本自营充电服务费6折卡方案发生任何变更、调整、终止的，51充电联盟有权提前进行公示，届时请以51充电联盟更新并发布的最新版本为准。
		</view>
	</view>
	<!-- 价格说明 -->
	<view class="price-explain">
		<view class="title">
			<view class="title-l">
				价格说明
			</view>
			<view class="title-r">
				收起<u-icon name="arrow-up" color="#999999"></u-icon>
			</view>
		</view>
		<view class="explain-item">
			<view class="item-title">
				划线价格
			</view>
			<view class="item-value">
				划线的价格是商品的专柜价、吊牌价、正品零售价、指导价.曾经展示过的销售价等，仅供你参考。
			</view>
		</view>
		<view class="explain-item">
			<view class="item-title">
				未划线价格
			</view>
			<view class="item-value">
				未划线的价格是商品的销售标价，具体的成交价格因使用优惠券、积分等发生变化，最终以订单结算价格为准。
			</view>
		</view>
		<p>此说明仅当出现价格比较时有效。若这件商品针对划线价格进行了特殊说明，以特殊说明为准。</p>
	</view>
	<!-- 底部 -->
	<view class="bottom">
		<view class="option">
			<view class="icon">
				<u-icon name="server-fill" size="40"></u-icon>
			</view>
			<view class="text">
				联系客服
			</view>
		</view>
		<view class="option">
			<view class="icon">
				<u-icon name="order" size="40"></u-icon>
			</view>
			<view class="text">
				我的订单
			</view>
		</view>
		<view class="button" @click="show = true">
			立即购买
		</view>
	</view>
	<!-- 弹出层 -->
	<view >
		<u-popup v-model="show" mode="bottom" :closeable='true'>
					
					<view class="popup">
						<!-- 商品信息 -->
						<view class="class-infos">
							<view class="picture">
								<img src="../../assets/img/productPic.png" alt="">
							</view>
							<view class="infos">
								<view class="class-name">
									自营站充电服务费6折卡
								</view>
								<view class="price">
									12.9元
								</view>
								<view class="price-detail" >
									已选：可用338度（有效期30天）
								</view>
							</view>
						</view>
                          <!-- 规格 -->
						  <view class="specification">
						  	<view class="title">
						  		规格
						  	</view>
							<view class="specification-options">
								<view class="options-item item-checked">
									可用338度（有效期30天）
								</view>
								<view class="options-item">
									可用1000度（有效期90天）
								</view>
							</view>
						  </view>
						  <!-- 数量 -->
						  <view class="amount">
						  	<view class="title">
						  		数量（单笔订单限购1件）
						  	</view>
							<u-number-box v-model="value" max="1"></u-number-box>
						  </view>
					</view>
					<view class="bottom" style="box-shadow: none;">
						<view class="option">
							<view class="icon">
								<u-icon name="server-fill" size="40"></u-icon>
							</view>
							<view class="text">
								联系客服
							</view>
						</view>
						<view class="option">
							<view class="icon">
								<u-icon name="order" size="40"></u-icon>
							</view>
							<view class="text">
								我的订单
							</view>
						</view>
						<view class="button">
							立即购买
						</view>
					</view>
	  </u-popup>
	  	
	</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
                   show:false,
				   value: 1
			}
		},
		methods: {

		}
	}
</script>
<style>
	page {
		background-color: #fff;
		padding-bottom: 200px;
	}
</style>
<style lang="scss" scoped>
	.header {
		height: 200px;
		background: linear-gradient(30deg, rgba(59, 182, 254, 1) 13.4%, rgba(0, 185, 98, 1) 85.87%);
		position: relative;
		padding: 48rpx;

		.cover {
			width: 160rpx;
			height: 330rpx;
			position: absolute;
			right: 32rpx;
			bottom: 0;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.text1 {
			color: rgba(255, 255, 255, 1);
			font-size: 64rpx;
			font-family: 'YouSheBiaoTiHei';
		}

		.tag {
			display: flex;
			align-items: center;
			color: #fff;
			margin-bottom: 16rpx;

			.icon {
				margin-right: 8rpx;
			}
		}

		.usable-range {
			margin-top: 30rpx;
			color: rgba(49, 36, 102, 1);
			font-size: 24rpx;
		}
	}

	.main {
		padding: 24rpx 40rpx;

		.infos {
			color: rgba(51, 51, 51, 1);
			font-size: 40rpx;

			.title,
			.price {
				font-weight: bold;
			}

			.price {
				margin: 16rpx 0 32rpx;
			}
		}

		// 使用范围
		.usable-range {
			background-color: rgba(246, 246, 246, 1);
			padding: 16rpx 24rpx 24rpx;
			font-size: 24rpx;
			display: flex;
			flex-wrap: wrap;
			border-radius: 4px;

			.item {
				width: 50%;
				margin-top: 8rpx;
				color: rgba(51, 51, 51, 1);

				/deep/.u-icon--right {
					margin-right: 4rpx;
				}
			}
		}

		// 规格
		.specification {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 48rpx;

			.title {
				color: rgba(119, 119, 119, 1);
				font-size: 32rpx;
			}

			.value {
				color: rgba(16, 16, 16, 1);
				font-size: 32rpx;

				/deep/.uicon-arrow-right {
					margin-left: 8rpx;
				}
			}
		}

		// 适用站点
		.applicable-site {
			text-align: center;
			margin: 80rpx 0;
			color: rgba(51, 51, 51, 1);
			font-size: 36rpx;
			font-weight: bold;
		}

		// 服务费
		.service-charge {
			border-radius: 12px;
			border: 1px solid rgba(0, 185, 98, 1);
			padding: 80rpx 40rpx 56rpx;
			position: relative;

			.box {
				width: 400rpx;
				height: 64rpx;
				position: absolute;
				top: -32rpx;
				right: 0;
				left: 0;
				margin: 0 auto;

				.discount {
					margin: 0 auto;
					height: 32px;
					line-height: 32px;
					background-color: rgba(0, 185, 98, 1);
					text-align: center;
					box-shadow: 0px 0px 0px 16px rgba(255, 255, 255, 1);
					color: #fff;
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.price {
				display: flex;
				justify-content: space-between;

				.item {
					width: 272rpx;
					height: 128rpx;
					line-height: 128rpx;
					border-radius: 8px;
					background: linear-gradient(180deg, rgba(77, 196, 140, 1) 0%, rgba(122, 212, 170, 1) 24%, rgba(255, 255, 255, 1) 81%);
					text-align: center;
					border: 1px solid rgba(77, 196, 140, 1);
					color: rgba(16, 16, 16, 1);

					text {
						font-size: 64rpx;
					}
				}
			}

			.hint1 {
				display: flex;
				justify-content: space-between;
				text-align: center;
				margin-top: 20rpx;
				color: rgba(51, 51, 51, 1);
				font-size: 24rpx;

				.item {
					width: 272rpx;
				}
			}
		}

		// 价格对比
		.price-comparison {
			padding: 24rpx;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
			margin-top: 48rpx;

			.headline {
				display: flex;
				align-items: center;
				font-weight: bold;
				font-size: 36rpx;

				.station {
					color: rgba(16, 16, 16, 1);

				}

				.time {
					color: #999999;

				}
			}

			// 折扣价
			.discount-price {
				display: flex;
				align-items: center;
				margin-top: 24rpx;

				.tag {
					width: 176rpx;
					height: 48rpx;
					line-height: 48rpx;
					background-color: rgba(214, 251, 234, 1);
					color: rgba(0, 185, 98, 1);
					font-size: 24rpx;
					text-align: center;
				}

				.price {
					color: rgba(0, 0, 0, 1);
					font-size: 44rpx;
					margin-left: 16rpx;

					text {
						color: rgba(153, 153, 153, 1);
						font-size: 28rpx;
						margin-left: 8rpx;
					}
				}
			}

			// 原价
			.original-cost {
				display: flex;
				align-items: center;
				margin-top: 16rpx;

				.tag {
					width: 88rpx;
					height: 48rpx;
					line-height: 48rpx;
					background-color: rgba(242, 242, 242, 1);
					color: rgba(153, 153, 153, 1);
					font-size: 24rpx;
					text-align: center;
					text-decoration: line-through;
				}

				.price {
					color: rgba(153, 153, 153, 1);
					font-size: 28rpx;
					margin-left: 16rpx;
					text-decoration: line-through;

				}
			}

			.example {
				color: rgba(16, 16, 16, 1);
				line-height: 48rpx;
			}
		}

		.hint2 {
			color: rgba(153, 153, 153, 1);
			font-size: 24rpx;
			line-height: 34rpx;
			margin-top: 32rpx;
		}

		// 相关问题
		.related-issues {
			.headline {
				color: rgba(16, 16, 16, 1);
				font-size: 44rpx;
				font-family: 'YouSheBiaoTiHei';
				text-align: center;
			}

			.question {
				color: rgba(51, 51, 51, 1);
				line-height: 40rpx;
				font-weight: bold;
				margin-top: 32rpx;
			}

			.answer {
				color: #333333;
				margin-top: 16rpx;
				line-height: 40rpx;
			}

			.answer-form {
				display: flex;
				border: 1px solid #cccccc;
				height: 150rpx;
				font-size: 22rpx;
				margin-top: 16rpx;

				.title {
					padding: 0 16rpx;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #333333;
					line-height: 40rpx;

				}

				.before,
				.later {
					min-width: 234rpx;

					.b-top,
					.l-top {
						color: #333333;
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 0 16rpx;
					}

					.b-top {
						border: 1px solid #cccccc;
						border-top: none;
					}

					.l-top {
						border-bottom: 1px solid #cccccc;
					}

					.b-bottom,
					.l-bottom {
						height: 94rpx;
						color: #777777;
						text-align: center;
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 0 16rpx;
					}

					.b-bottom {
						border-left: 1px solid #cccccc;
						border-right: 1px solid #cccccc;
						padding: 0 16rpx;
					}

					.l-bottom {
						line-height: 44rpx;
					}
				}
			}
		}

		// 产品细则
		.product-rules {
			margin-top: 80rpx;

			.headline {
				color: rgba(16, 16, 16, 1);
				font-size: 44rpx;
				font-family: 'YouSheBiaoTiHei';
				text-align: center;
			}

			.item {
				.title {
					color: #111111;
					font-weight: bold;
					margin-bottom: 16rpx;
					margin-top: 32rpx;
				}

				.content {
					color: #333333;

					p {
						margin-bottom: 24rpx;
						line-height: 40rpx;
						font-size: 24rpx
					}
				}
			}
		}
	
	}
	
	// 自营站
	.self-station{
			 margin-top: 80rpx;
			 .headline{
				 color: rgba(16, 16, 16, 1);
				 font-size: 44rpx;
				 font-family: 'YouSheBiaoTiHei';
				 text-align: center;
			 }
			 .map{
				 margin-top: 32rpx;
				 position: relative;
				 img{
					 width: 100%;
					 height: 100%;
				 }
				 .station-detail{
					 
					 padding: 60rpx;
					 border-radius: 8px;
					 background-color: rgba(255, 255, 255, 1);
					 position: absolute;
					 bottom:40rpx;
					 left: 40rpx;
					 right: 40rpx;
					 .title{
						 display: flex;
						 align-items: center;
						 justify-content: space-between;
					 }
					 .station-amount{
						 display: flex;
						 justify-content: space-between;
						 align-items: center;
						 text-align: center;
						 margin-top: 40rpx;
						 .number{
							 color: rgba(16, 16, 16, 1);
							 font-size: 64rpx;
						 }
						 .name{
							 color: rgba(153, 153, 153, 1);
							 margin-top: 8rpx;
						 }
					 }
				 }
				 
			 }
	}
// 拒绝交易说明
.explain{
	padding:0 30rpx;
	margin-top: 80rpx;
	line-height: 48rpx;
	.headline{
		color: rgba(16, 16, 16, 1);
		font-size: 44rpx;
		font-family: 'YouSheBiaoTiHei';
		text-align: center;
		margin-bottom: 32rpx;
	}
	.title{
		color: #111111;
		font-weight: bold;
		padding: 0 10rpx;
		
	}
	.answer{
		color: #333333;
		padding: 0 10rpx;
		margin-top: 16rpx;
	}
}

// 价格说明
.price-explain{
	padding: 0 40rpx;
	margin-top: 80rpx;
	color: rgba(153, 153, 153, 1);
	font-size: 24rpx;
	line-height: 34rpx;
	.title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 32rpx;
		/deep/.uicon-arrow-up{
			margin-left: 8rpx;
			
		}
		.title-l{
			color: rgba(51, 51, 51, 1);
		}
		.title-r{
			color: rgba(119, 119, 119, 1);
		}
	}
	.explain-item{
		margin-bottom: 40rpx;
		.item-title{
			margin-bottom: 16rpx;
		}
	}
}

// 底部
.bottom{
	padding: 30rpx 40rpx;
	background-color: rgba(255, 255, 255, 1);
	box-shadow: 0px -6px 6px 0px rgba(0, 0, 0, 0.05);
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	z-index: 999;
	.option{
		color:#101010;
		margin-right: 32rpx;
		.icon{
			text-align: center;
		}
		.text{
			font-size: 24rpx;
			margin-top: 8rpx;
		}
	}
	.button{
		width: 400rpx;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 50px;
		background: linear-gradient(90.52deg, rgba(59,182,254,1) 1.82%,rgba(0,185,98,1) 52.22%);
		color: rgba(255, 255, 255, 1);
		font-size: 36rpx;
		text-align: center;
		margin-left: auto;
	}
}
.popup{
	padding: 32rpx;
	height:500px;
	padding-bottom:50rpx;
	border-radius: 12px;
	.class-infos{
		display: flex;
		align-items: center;
		.picture{
			width: 152rpx;
			height: 152rpx;
			border-radius: 4px;
			overflow: hidden;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.infos{
			margin-left: 24rpx;
			.class-name{
				color: rgba(51, 51, 51, 1);
				font-size: 40rpx;
				
			}
			.price{
				color: rgba(16, 16, 16, 1);
				font-size: 32rpx;
				margin-top: 12rpx;
				
			}
			.price-detail{
				color: rgba(16, 16, 16, 1);
				font-size: 28rpx;
				margin-top: 12rpx;
				
			}
		}
	}
	// 规格
	.specification{
		margin-top: 80rpx;
		.title{
			color: rgba(119, 119, 119, 1);
		}
		.specification-options{
			margin-top: 24rpx;
			.options-item{
				width: 442rpx;
				
				height: 64rpx;
				line-height: 64rpx;
				border-radius: 50px;
				background-color: rgba(239, 244, 242, 1);
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
				text-align: center;
				margin-bottom: 24rpx;
			}
			.item-checked{
				background-color: rgba(0, 185, 98, 1);
				color: rgba(255, 255, 255, 1);
			}
		}
	}
	// 数量
	.amount{
		margin-top: 80rpx;
		.title{
			color: rgba(119, 119, 119, 1);
			margin-bottom: 24rpx;
		}
	}
	
	
	
	
}
/deep/.u-drawer-content{
	border-radius: 12px;
}
</style>