|
|
@@ -0,0 +1,861 @@
|
|
|
+<template>
|
|
|
+ <div class="postage">
|
|
|
+ <div class="placeholder"></div>
|
|
|
+ <!-- 选择油卡 -->
|
|
|
+ <div class="tabs" v-if="tabsData.length">
|
|
|
+ <div class="tabs-title">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in tabsData"
|
|
|
+ :key="item.id"
|
|
|
+ v-on:click="handlerClickTabItem(index)"
|
|
|
+ :data-activeindex="index"
|
|
|
+ :data-cardtype="item.card_type"
|
|
|
+ class="tabs-title-item"
|
|
|
+ :class="[currentIndex == index ? 'active' : '']"
|
|
|
+ >
|
|
|
+ <img class="tabs-title-item__icon" :src="item.icon" />
|
|
|
+ <span class="tabs-title-item__text">{{ item.title }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="bindMobileBox">
|
|
|
+ <div class="progressBar">
|
|
|
+ <div class="dotBox dotBox1">
|
|
|
+ <div class="dot"></div>
|
|
|
+ </div>
|
|
|
+ <div class="dotBox dotBox2">
|
|
|
+ <div class="dot"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bindMobileLabel">手机号码</div>
|
|
|
+ <div class="bindMobile">
|
|
|
+ <input
|
|
|
+ type="number"
|
|
|
+ maxlength="11"
|
|
|
+ v-model="inputMobile"
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ style="color: #000"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <!-- <view class="bindMobile" wx:if="{{member_mobile != ''}}">{{member_mobile}}</view> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="tabContent">
|
|
|
+ <div
|
|
|
+ class="tabs-content"
|
|
|
+ v-for="(item, index) in tabsData"
|
|
|
+ :key="index"
|
|
|
+ :style="{ display: currentIndex !== index ? 'none' : 'block' }"
|
|
|
+ >
|
|
|
+ <div class="tabs-content__tips">
|
|
|
+ <span class="tabs-content__tips-text">{{ item.tips }}</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="card-no vux-1px-b"
|
|
|
+ @click="handlerAddCard"
|
|
|
+ :data-cardtype="item.card_type"
|
|
|
+ >
|
|
|
+ <div v-if="item.card_type === 'sinopec'">
|
|
|
+ {{ sinopec.card_no || "请输入以1开头的19位中石化加油卡号" }}
|
|
|
+ </div>
|
|
|
+ <div v-if="item.card_type === 'petrochina'">
|
|
|
+ {{ petrochina.card_no || "请输入以9开头的16位中石油加油卡号" }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ <img src="../../assets/info.png" class="infoIcon" />
|
|
|
+ <div class="label">请仔细核对卡号，避免造成不必要的损失</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--充值金额 -->
|
|
|
+ <div class="rechargeGear">
|
|
|
+ <div class="rechargeGear-title">充值面额</div>
|
|
|
+ <div class="rechargeGear-content">
|
|
|
+ <div
|
|
|
+ class="rechargeGear-content__item"
|
|
|
+ :class="[rechargeGearActiveIndex == index ? 'active' : '']"
|
|
|
+ v-for="(item, index) in goods"
|
|
|
+ :key="index"
|
|
|
+ @click="handlerClickRechargeGear"
|
|
|
+ :data-activeindex="index"
|
|
|
+ :data-currentvalue="item.goods_id"
|
|
|
+ >
|
|
|
+ <div class="faceValue">{{ item.goods_spec }}</div>
|
|
|
+ <div class="price">{{ item.price_des }} {{ item.accu_price }} 元</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="payInfo" @click="onCheckedPayInfo">
|
|
|
+ <img
|
|
|
+ v-if="!payInfoChecked"
|
|
|
+ src="../../assets/check.png"
|
|
|
+ class="payInfoIcon"
|
|
|
+ />
|
|
|
+ <img v-else src="../../assets/checked.png" class="payInfoIcon" />
|
|
|
+ <div class="label">
|
|
|
+ 已阅读并同意<span class="explain" @click="onShowPayInfoModal"
|
|
|
+ >《充值代缴服务说明》</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="info info-2" v-if="inviter_tip">
|
|
|
+ <img src="../../assets/info.png" class="infoIcon" />
|
|
|
+ <div class="labelInviter">{{ inviter_tip }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="rechargeGear-footer">
|
|
|
+ <!-- <div
|
|
|
+ class="btn-rechargeNow btn-rechargeNow___share"
|
|
|
+ v-if="show_invite"
|
|
|
+ @click="onShowShareDialog"
|
|
|
+ >
|
|
|
+ <span>邀请好友助力</span>
|
|
|
+ </div> -->
|
|
|
+ <div class="btn-rechargeNow btn-rechargeNow___share">
|
|
|
+ <span>分享给好友</span>
|
|
|
+ </div>
|
|
|
+ <div class="btn-rechargeNow" @click="handlerRecharge">
|
|
|
+ <span>充值</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="footerInfo">
|
|
|
+ <div class="title">充值说明</div>
|
|
|
+ <div class="clause">1.充值优惠来自充值平台补贴；</div>
|
|
|
+ <div class="clause">
|
|
|
+ 2.充值后1-10分钟左右到账，中石油或者中石化公众号将发充值成功信息至加油卡捆绑微信；
|
|
|
+ </div>
|
|
|
+ <div class="clause">
|
|
|
+ 3.本服务为全国加油卡代充服务、故<span>不提供充值发票</span>；
|
|
|
+ </div>
|
|
|
+ <div class="clause">
|
|
|
+ 4.支付成功后，需收到充值成功通知短信后，方可到<span>加油站圈存</span>后加油使用；
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ fGoodsRequesting: false,
|
|
|
+ currentIndex: 0, //页签索引
|
|
|
+ rechargeGearActiveIndex: 0, //挡位项目索引
|
|
|
+ tips: "", //顶部tips
|
|
|
+ inviter_tip: "",
|
|
|
+ show_invite: true,
|
|
|
+ goods_inviter_tips: new Map(),
|
|
|
+
|
|
|
+ goods: [
|
|
|
+ {
|
|
|
+ goods_id: 6227,
|
|
|
+ goods_commonid: 3449,
|
|
|
+ goods_mobile_name: "\u52a0\u6cb9\u5145\u503c\u5361",
|
|
|
+ goods_spec: "100\u5143",
|
|
|
+ goods_jingle: "",
|
|
|
+ store_id: 6,
|
|
|
+ brand_id: 0,
|
|
|
+ brand_name: "",
|
|
|
+ brand_country: "",
|
|
|
+ brand_country_logo: "",
|
|
|
+ brand_author_desc: "",
|
|
|
+ gc_id: 122438004,
|
|
|
+ goods_price: "99.50",
|
|
|
+ goods_marketprice: "200.00",
|
|
|
+ goods_promotion_price: "99.50",
|
|
|
+ goods_lowest_price: "100.00",
|
|
|
+ goods_image_url:
|
|
|
+ "https://www.xyzshops.cn/data/upload/shop/store/goods/6/6_06491990111960845_1280.jpg",
|
|
|
+ goods_state: 1,
|
|
|
+ goods_salenum: 78,
|
|
|
+ goods_storage: 212,
|
|
|
+ goods_collect: 0,
|
|
|
+ is_new: false,
|
|
|
+ have_gift: false,
|
|
|
+ gifts: [],
|
|
|
+ have_combo: false,
|
|
|
+ combos: [],
|
|
|
+ have_recommend: false,
|
|
|
+ have_bundle: false,
|
|
|
+ bundles: [],
|
|
|
+ act_id: 0,
|
|
|
+ act_type: 0,
|
|
|
+ bonus_price: "99.50",
|
|
|
+ discount_gap: 0,
|
|
|
+ gap_show: false,
|
|
|
+ gap_desc: "",
|
|
|
+ price_des: "\u4f18\u60e0\u4ef7",
|
|
|
+ accu_price: 96,
|
|
|
+ earn_bonus:
|
|
|
+ "xmmz://p.lrlz.com/block/special?title=\u627e\u7ea2\u5305&special_id=304&isSpecial=true",
|
|
|
+ favored: false,
|
|
|
+ anoticed: false,
|
|
|
+ is_opgoods: false,
|
|
|
+ opgoods_open: "",
|
|
|
+ opgoods_desc: "",
|
|
|
+ opgoods_shortdesc: "",
|
|
|
+ is_fcode: false,
|
|
|
+ has_fcode: false,
|
|
|
+ fcode_desc: "\u4f60\u6ca1\u6709\u8be5\u5546\u54c1\u7684F\u7801",
|
|
|
+ fcode_open:
|
|
|
+ "xmmz://p.lrlz.com/block/special?title=F\u7801\u4e13\u533a&special_id=283&isSpecial=true",
|
|
|
+ goods_url: "https://www.xyzshops.cn/mshop/goods_detail?goods_id=6227",
|
|
|
+ goods_miniurl: "pages/details/details?goods_id=6227",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ goods_id: 6218,
|
|
|
+ goods_commonid: 3449,
|
|
|
+ goods_mobile_name: "\u52a0\u6cb9\u5145\u503c\u5361",
|
|
|
+ goods_spec: "200\u5143",
|
|
|
+ goods_jingle: "",
|
|
|
+ store_id: 6,
|
|
|
+ brand_id: 0,
|
|
|
+ brand_name: "",
|
|
|
+ brand_country: "",
|
|
|
+ brand_country_logo: "",
|
|
|
+ brand_author_desc: "",
|
|
|
+ gc_id: 122438004,
|
|
|
+ goods_price: "199.00",
|
|
|
+ goods_marketprice: "200.00",
|
|
|
+ goods_promotion_price: "199.00",
|
|
|
+ goods_lowest_price: "200.00",
|
|
|
+ goods_image_url:
|
|
|
+ "https://www.xyzshops.cn/data/upload/shop/store/goods/6/6_06491990111960845_1280.jpg",
|
|
|
+ goods_state: 1,
|
|
|
+ goods_salenum: 65,
|
|
|
+ goods_storage: 159,
|
|
|
+ goods_collect: 0,
|
|
|
+ is_new: false,
|
|
|
+ have_gift: false,
|
|
|
+ gifts: [],
|
|
|
+ have_combo: false,
|
|
|
+ combos: [],
|
|
|
+ have_recommend: false,
|
|
|
+ have_bundle: false,
|
|
|
+ bundles: [],
|
|
|
+ act_id: 0,
|
|
|
+ act_type: 0,
|
|
|
+ bonus_price: "199.00",
|
|
|
+ discount_gap: 0,
|
|
|
+ gap_show: false,
|
|
|
+ gap_desc: "",
|
|
|
+ price_des: "\u4f18\u60e0\u4ef7",
|
|
|
+ accu_price: 192,
|
|
|
+ earn_bonus:
|
|
|
+ "xmmz://p.lrlz.com/block/special?title=\u627e\u7ea2\u5305&special_id=304&isSpecial=true",
|
|
|
+ favored: false,
|
|
|
+ anoticed: false,
|
|
|
+ is_opgoods: false,
|
|
|
+ opgoods_open: "",
|
|
|
+ opgoods_desc: "",
|
|
|
+ opgoods_shortdesc: "",
|
|
|
+ is_fcode: false,
|
|
|
+ has_fcode: false,
|
|
|
+ fcode_desc: "\u4f60\u6ca1\u6709\u8be5\u5546\u54c1\u7684F\u7801",
|
|
|
+ fcode_open:
|
|
|
+ "xmmz://p.lrlz.com/block/special?title=F\u7801\u4e13\u533a&special_id=283&isSpecial=true",
|
|
|
+ goods_url: "https://www.xyzshops.cn/mshop/goods_detail?goods_id=6218",
|
|
|
+ goods_miniurl: "pages/details/details?goods_id=6218",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ goods_id: 6219,
|
|
|
+ goods_commonid: 3449,
|
|
|
+ goods_mobile_name: "\u52a0\u6cb9\u5145\u503c\u5361",
|
|
|
+ goods_spec: "500\u5143",
|
|
|
+ goods_jingle: "",
|
|
|
+ store_id: 6,
|
|
|
+ brand_id: 0,
|
|
|
+ brand_name: "",
|
|
|
+ brand_country: "",
|
|
|
+ brand_country_logo: "",
|
|
|
+ brand_author_desc: "",
|
|
|
+ gc_id: 122438004,
|
|
|
+ goods_price: "497.50",
|
|
|
+ goods_marketprice: "200.00",
|
|
|
+ goods_promotion_price: "497.50",
|
|
|
+ goods_lowest_price: "500.00",
|
|
|
+ goods_image_url:
|
|
|
+ "https://www.xyzshops.cn/data/upload/shop/store/goods/6/6_06491990111960845_1280.jpg",
|
|
|
+ goods_state: 1,
|
|
|
+ goods_salenum: 518,
|
|
|
+ goods_storage: 0,
|
|
|
+ goods_collect: 0,
|
|
|
+ is_new: false,
|
|
|
+ have_gift: false,
|
|
|
+ gifts: [],
|
|
|
+ have_combo: false,
|
|
|
+ combos: [],
|
|
|
+ have_recommend: false,
|
|
|
+ have_bundle: false,
|
|
|
+ bundles: [],
|
|
|
+ act_id: 0,
|
|
|
+ act_type: 0,
|
|
|
+ bonus_price: "497.50",
|
|
|
+ discount_gap: 0,
|
|
|
+ gap_show: false,
|
|
|
+ gap_desc: "",
|
|
|
+ price_des: "\u4f18\u60e0\u4ef7",
|
|
|
+ accu_price: 480,
|
|
|
+ earn_bonus:
|
|
|
+ "xmmz://p.lrlz.com/block/special?title=\u627e\u7ea2\u5305&special_id=304&isSpecial=true",
|
|
|
+ favored: false,
|
|
|
+ anoticed: false,
|
|
|
+ is_opgoods: false,
|
|
|
+ opgoods_open: "",
|
|
|
+ opgoods_desc: "",
|
|
|
+ opgoods_shortdesc: "",
|
|
|
+ is_fcode: false,
|
|
|
+ has_fcode: false,
|
|
|
+ fcode_desc: "\u4f60\u6ca1\u6709\u8be5\u5546\u54c1\u7684F\u7801",
|
|
|
+ fcode_open:
|
|
|
+ "xmmz://p.lrlz.com/block/special?title=F\u7801\u4e13\u533a&special_id=283&isSpecial=true",
|
|
|
+ goods_url: "https://www.xyzshops.cn/mshop/goods_detail?goods_id=6219",
|
|
|
+ goods_miniurl: "pages/details/details?goods_id=6219",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ goods_id: 6220,
|
|
|
+ goods_commonid: 3449,
|
|
|
+ goods_mobile_name: "\u52a0\u6cb9\u5145\u503c\u5361",
|
|
|
+ goods_spec: "1000\u5143",
|
|
|
+ goods_jingle: "",
|
|
|
+ store_id: 6,
|
|
|
+ brand_id: 0,
|
|
|
+ brand_name: "",
|
|
|
+ brand_country: "",
|
|
|
+ brand_country_logo: "",
|
|
|
+ brand_author_desc: "",
|
|
|
+ gc_id: 122438004,
|
|
|
+ goods_price: "995.00",
|
|
|
+ goods_marketprice: "200.00",
|
|
|
+ goods_promotion_price: "995.00",
|
|
|
+ goods_lowest_price: "1000.00",
|
|
|
+ goods_image_url:
|
|
|
+ "https://www.xyzshops.cn/data/upload/shop/store/goods/6/6_06491990111960845_1280.jpg",
|
|
|
+ goods_state: 1,
|
|
|
+ goods_salenum: 534,
|
|
|
+ goods_storage: 0,
|
|
|
+ goods_collect: 0,
|
|
|
+ is_new: false,
|
|
|
+ have_gift: false,
|
|
|
+ gifts: [],
|
|
|
+ have_combo: false,
|
|
|
+ combos: [],
|
|
|
+ have_recommend: false,
|
|
|
+ have_bundle: false,
|
|
|
+ bundles: [],
|
|
|
+ act_id: 0,
|
|
|
+ act_type: 0,
|
|
|
+ bonus_price: "995.00",
|
|
|
+ discount_gap: 0,
|
|
|
+ gap_show: false,
|
|
|
+ gap_desc: "",
|
|
|
+ price_des: "\u4f18\u60e0\u4ef7",
|
|
|
+ accu_price: 960,
|
|
|
+ earn_bonus:
|
|
|
+ "xmmz://p.lrlz.com/block/special?title=\u627e\u7ea2\u5305&special_id=304&isSpecial=true",
|
|
|
+ favored: false,
|
|
|
+ anoticed: false,
|
|
|
+ is_opgoods: false,
|
|
|
+ opgoods_open: "",
|
|
|
+ opgoods_desc: "",
|
|
|
+ opgoods_shortdesc: "",
|
|
|
+ is_fcode: false,
|
|
|
+ has_fcode: false,
|
|
|
+ fcode_desc: "\u4f60\u6ca1\u6709\u8be5\u5546\u54c1\u7684F\u7801",
|
|
|
+ fcode_open:
|
|
|
+ "xmmz://p.lrlz.com/block/special?title=F\u7801\u4e13\u533a&special_id=283&isSpecial=true",
|
|
|
+ goods_url: "https://www.xyzshops.cn/mshop/goods_detail?goods_id=6220",
|
|
|
+ goods_miniurl: "pages/details/details?goods_id=6220",
|
|
|
+ },
|
|
|
+ ], //挡位数据
|
|
|
+ goods_id: "", //当前选中挡位的goods_id
|
|
|
+
|
|
|
+ sinopec: { card_no: "", card_type: "sinopec" },
|
|
|
+ petrochina: { card_no: "", card_type: "petrochina" },
|
|
|
+ phone: { card_no: "", card_type: "phone" },
|
|
|
+
|
|
|
+ member_mobile: "",
|
|
|
+ inputMobile: "123123123123123",
|
|
|
+
|
|
|
+ tabsData: [
|
|
|
+ {
|
|
|
+ id: 0,
|
|
|
+ icon: require("../../assets/sinopec.png"),
|
|
|
+ title: "中国石化",
|
|
|
+ tips: "选择油卡",
|
|
|
+ card_type: "sinopec",
|
|
|
+ card_no: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ icon: require("../../assets/petrochina.png"),
|
|
|
+ title: "中国石油",
|
|
|
+ tips: "选择油卡",
|
|
|
+ card_type: "petrochina",
|
|
|
+ card_no: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ fromSource: "",
|
|
|
+ payInfoChecked: true,
|
|
|
+ showShareDialog: false,
|
|
|
+ shareGoodsId: 0,
|
|
|
+ showtermsOfServiceDialog: false,
|
|
|
+ special_id: 0, //订单成功，弹出的专题页面
|
|
|
+ msgList: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ methods: {
|
|
|
+ handlerClickTabItem(index) {
|
|
|
+ this.currentIndex = index;
|
|
|
+ },
|
|
|
+ onAuthenPhone() {},
|
|
|
+ onChangeMobile() {},
|
|
|
+ handlerAddCard() {},
|
|
|
+ handlerClickRechargeGear() {},
|
|
|
+ onCheckedPayInfo() {},
|
|
|
+ onShowPayInfoModal() {},
|
|
|
+ onShowShareDialog() {},
|
|
|
+ handlerRecharge() {},
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+#router_view {
|
|
|
+ background: #f7f7f7;
|
|
|
+}
|
|
|
+.postage {
|
|
|
+ background: #f7f7f7;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.postage::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 165px;
|
|
|
+ z-index: -1;
|
|
|
+}
|
|
|
+.placeholder {
|
|
|
+ height: 40px;
|
|
|
+}
|
|
|
+.tips {
|
|
|
+ padding: 15px 20px;
|
|
|
+ width: 92%;
|
|
|
+ margin: 0 auto;
|
|
|
+ background-color: #ffd900;
|
|
|
+ color: #786700;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 26px;
|
|
|
+}
|
|
|
+.tabs {
|
|
|
+ width: 92%;
|
|
|
+ margin: 10px auto;
|
|
|
+ border-radius: 20px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.rechargeGear {
|
|
|
+ width: 92%;
|
|
|
+ margin: 20px auto;
|
|
|
+ border-radius: 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+.tabs-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 90px;
|
|
|
+ line-height: 90px;
|
|
|
+ /* border-top-left-radius: 10px;
|
|
|
+ border-top-right-radius: 10px; */
|
|
|
+ margin-bottom: 1px;
|
|
|
+}
|
|
|
+.tabs-title-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+.tabs-title-item__icon {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.tabs-title-item__text {
|
|
|
+}
|
|
|
+
|
|
|
+.tabs-title-item.active {
|
|
|
+ position: relative;
|
|
|
+ color: #fe7124;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+/* .tabs-title-item.active::before{
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 15%;
|
|
|
+ right: 10%;
|
|
|
+ height: 6px;
|
|
|
+ background-color: #fe7124;
|
|
|
+} */
|
|
|
+
|
|
|
+.tabs-content__tips {
|
|
|
+ display: flex;
|
|
|
+ height: 80px;
|
|
|
+ align-items: center;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.tabs-content__tips-text {
|
|
|
+ font-size: 26px;
|
|
|
+}
|
|
|
+
|
|
|
+.tabs-content__tips-add {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ margin-left: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+.tabs-content,
|
|
|
+.rechargeGear-footer {
|
|
|
+ padding: 30px 30px 0 70px;
|
|
|
+ border-bottom-left-radius: 10px;
|
|
|
+ border-bottom-right-radius: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.rechargeGear-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-rechargeNow {
|
|
|
+ width: 328px;
|
|
|
+ height: 70px;
|
|
|
+ line-height: 70px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #fe7124;
|
|
|
+ background: linear-gradient(right, #ff7a21 0%, #feb25a 100%);
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 16px;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-rechargeNow___share {
|
|
|
+ background: #fff;
|
|
|
+ color: #ee7530;
|
|
|
+ border: 1px solid #ee7530;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-rechargeNow:active {
|
|
|
+ opacity: 0.8;
|
|
|
+}
|
|
|
+
|
|
|
+.rechargeNow-tips {
|
|
|
+ text-align: left;
|
|
|
+ font-size: 26px;
|
|
|
+ line-height: 1.8;
|
|
|
+}
|
|
|
+
|
|
|
+.rechargeNow-tips view {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.rechargeNow-tips view:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+/* 充值挡位 */
|
|
|
+.rechargeGear-title {
|
|
|
+ height: 84px;
|
|
|
+ line-height: 84px;
|
|
|
+ /* background-color: #fff; */
|
|
|
+ color: #1e242e;
|
|
|
+ padding-left: 30px;
|
|
|
+ border-top-left-radius: 10px;
|
|
|
+ border-top-right-radius: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.rechargeGear-content {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ /* background-color: #fff; */
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.rechargeGear-content__item {
|
|
|
+ width: 30%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 20px 0;
|
|
|
+ border: 2px solid #ddd;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #333;
|
|
|
+ background-color: #fff;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ font-weight: bolder;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.rechargeGear-content__item.active {
|
|
|
+ background-color: rgba(238, 117, 48, 0.08);
|
|
|
+ color: #ee7530;
|
|
|
+ border: 2px solid #ee7530;
|
|
|
+}
|
|
|
+
|
|
|
+.faceValue {
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.price {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 300;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+
|
|
|
+.card-no {
|
|
|
+ height: 70px;
|
|
|
+ line-height: 70px;
|
|
|
+ font-size: 28px;
|
|
|
+ color: #2b2b2b;
|
|
|
+}
|
|
|
+
|
|
|
+.bindMobileBox {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ height: 176px;
|
|
|
+ padding-left: 70px;
|
|
|
+ padding-top: 36px;
|
|
|
+ box-sizing: border-content;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.progressBar {
|
|
|
+ position: absolute;
|
|
|
+ top: 70px;
|
|
|
+ left: 35px;
|
|
|
+ width: 1px;
|
|
|
+ height: 220px;
|
|
|
+ background: #ee7530;
|
|
|
+}
|
|
|
+
|
|
|
+.dotBox {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: rgba(238, 117, 48, 0.2);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ z-index: 10;
|
|
|
+}
|
|
|
+
|
|
|
+.dotBox1 {
|
|
|
+ top: -5px;
|
|
|
+}
|
|
|
+
|
|
|
+.dotBox2 {
|
|
|
+ bottom: -5px;
|
|
|
+}
|
|
|
+
|
|
|
+.dotBox .dot {
|
|
|
+ width: 7px;
|
|
|
+ height: 7px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #ee7530;
|
|
|
+}
|
|
|
+
|
|
|
+/* .bindMobileBox .line {
|
|
|
+ position: absolute;
|
|
|
+ left: 35px;
|
|
|
+ top: 60px;
|
|
|
+ width: 1px;
|
|
|
+ height: ;
|
|
|
+} */
|
|
|
+
|
|
|
+.bindMobileLabel {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ font-size: 28px;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.bindMobile {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 40px;
|
|
|
+ font-size: 28px;
|
|
|
+ color: #ccc;
|
|
|
+ border-bottom: 1px solid #eff0f1;
|
|
|
+}
|
|
|
+.bindMobile input{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border: none;
|
|
|
+ outline:medium;
|
|
|
+ font-size: 28px;
|
|
|
+}
|
|
|
+
|
|
|
+.tabContent {
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 80px;
|
|
|
+ line-height: 80px;
|
|
|
+ padding-left: 70px;
|
|
|
+}
|
|
|
+
|
|
|
+.info-2 {
|
|
|
+ width: 650px;
|
|
|
+ height: 80px;
|
|
|
+ line-height: 80px;
|
|
|
+ margin: 30px auto;
|
|
|
+ padding: 0 20px;
|
|
|
+ color: #e60021;
|
|
|
+ background-color: rgb(246, 224, 227);
|
|
|
+}
|
|
|
+
|
|
|
+.infoIcon {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin-right: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.info .label {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #ee7530;
|
|
|
+}
|
|
|
+
|
|
|
+.info .labelInviter {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #ee3030;
|
|
|
+}
|
|
|
+
|
|
|
+.payInfo {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #999;
|
|
|
+ font-size: 28px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.payInfoIcon {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ padding-left: 30px;
|
|
|
+ margin-right: 13px;
|
|
|
+}
|
|
|
+
|
|
|
+.explain {
|
|
|
+ color: rgb(65, 118, 220);
|
|
|
+}
|
|
|
+
|
|
|
+.footerInfo {
|
|
|
+ width: 660px;
|
|
|
+ margin: 0 auto;
|
|
|
+ font-size: 28px;
|
|
|
+ color: #848799;
|
|
|
+}
|
|
|
+
|
|
|
+.footerInfo .clause {
|
|
|
+ line-height: 64px;
|
|
|
+}
|
|
|
+
|
|
|
+.footerInfo .title {
|
|
|
+ width: 150px;
|
|
|
+ position: relative;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 60px;
|
|
|
+ margin-bottom: 32px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28px;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+
|
|
|
+.footerInfo .title::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: -240px;
|
|
|
+ top: 50%;
|
|
|
+ height: 1px;
|
|
|
+ width: 240px;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ background: linear-gradient(to right, #fff 0%, #999 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.footerInfo .title::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ right: -240px;
|
|
|
+ top: 50%;
|
|
|
+ height: 1px;
|
|
|
+ width: 240px;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ background: linear-gradient(to left, #fff 0%, #999 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.footerInfo text {
|
|
|
+ color: #ee7530;
|
|
|
+}
|
|
|
+
|
|
|
+.swiper_container {
|
|
|
+ height: 50px;
|
|
|
+ width: 100%;
|
|
|
+ left: 0;
|
|
|
+ top: 0px;
|
|
|
+ position: absolute;
|
|
|
+ padding-left: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #fff2f2;
|
|
|
+}
|
|
|
+
|
|
|
+.swiper_item {
|
|
|
+ font-size: 24px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ color: #d23941;
|
|
|
+}
|
|
|
+
|
|
|
+.important {
|
|
|
+ color: #d23941;
|
|
|
+}
|
|
|
+
|
|
|
+.placeholder {
|
|
|
+ height: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.icon-phone {
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+}
|
|
|
+.clause span{
|
|
|
+ color:#EE7530
|
|
|
+}
|
|
|
+</style>
|
