|
|
@@ -0,0 +1,1094 @@
|
|
|
+<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>
|
