|
|
@@ -1,136 +1,163 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <ujp-navbar title="包月卡购买"></ujp-navbar>
|
|
|
- <!-- 卡片 -->
|
|
|
- <view class="monthly-card-bgc">
|
|
|
- <view class="monthly-card">
|
|
|
- <view class="main">
|
|
|
- <view class="title-1">
|
|
|
- 充电服务费包月卡
|
|
|
- </view>
|
|
|
- <view class="title-2">
|
|
|
- 到期时间：{{userCard&&ispay?userCard.endTime:'未购买'}}<br />
|
|
|
- 有效期内，合约充电站使用度数无上限
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <img class="cover" src="../../assets/img/cover@3.png" alt="">
|
|
|
+ <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="carNone" v-if="cardList.length == 0">
|
|
|
+ <img src="static/img/暂无数据-缺省页.png" alt="">
|
|
|
+ <p class="oldTextjp2" style="color: #bfdfd5;" oldstyle="font-size: 18px; ">暂无月卡上架</p>
|
|
|
</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="slogan-1">
|
|
|
- 充电服务费包月卡
|
|
|
- </view>
|
|
|
- <view class="slogan-2">
|
|
|
- 单次购买、整月受益!
|
|
|
- </view>
|
|
|
- <!-- <view class="slogan-3" style="color: #ead9b4;" >
|
|
|
- 限时活动结束时间2022年8月8日0点结束
|
|
|
- </view> -->
|
|
|
- <!-- 营运车辆 -->
|
|
|
- <template v-for="(item,i) in cardList" >
|
|
|
- <view class="operating" :class="{
|
|
|
- 'operating-coach':item.monthlyRentCard.id==cardId,
|
|
|
- 'non-operational-car':item.monthlyRentCard.id!=cardId,
|
|
|
- }"
|
|
|
+ <view
|
|
|
+ v-for="(item,i) in cardList" :key="i"
|
|
|
|
|
|
- @click="cardId=item.monthlyRentCard.id,detail=item.monthlyRentCard"
|
|
|
- :key="i">
|
|
|
- <view class="type">
|
|
|
- <view class="title">
|
|
|
- <text class="img">
|
|
|
- <img v-if="item.monthlyRentCard.id==cardId" src="../../assets/img/antFill-crown@3x.png" alt="">
|
|
|
- <img v-else src="../../assets/img/antFill-crown2.svg" alt="">
|
|
|
-
|
|
|
- </text>{{item.monthlyRentCard.name}}
|
|
|
+ :style="'background-image: url('+item.monthlyRentCard.image+') ;'"
|
|
|
+ class="card-1" >
|
|
|
+ <view class="tag" v-if="item.monthlyRentCard.isVip">{{item.monthlyRentCard.platformText}}车主</view>
|
|
|
+ <view class="tag" v-else-if="item.monthlyRentCard.remark">{{item.monthlyRentCard.remark}}</view>
|
|
|
+ <view class="price">
|
|
|
+ <view class="current-price" v-if="item.monthlyRentCard.discount">
|
|
|
+ {{item.monthlyRentCard.price/100*item.monthlyRentCard.discountRate}}<text>元/月</text>
|
|
|
</view>
|
|
|
- <view class="hint">
|
|
|
- {{item.monthlyRentCard.remark}}
|
|
|
+ <view class="current-price" v-else>
|
|
|
+ {{item.monthlyRentCard.price}}<text>元/月</text>
|
|
|
</view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="price">
|
|
|
-
|
|
|
- <text class="num">{{item.monthlyRentCard.price.toFixed(2)}}</text>
|
|
|
- <text class="unit">元</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
-
|
|
|
-
|
|
|
-<view class="slogan-3">
|
|
|
- <view v-html="ykgz"></view>
|
|
|
-
|
|
|
+ <view class="original-cost" v-if="item.monthlyRentCard.discount">
|
|
|
+ 原价 {{item.monthlyRentCard.price}}元/月
|
|
|
+ </view>
|
|
|
+ <view class="original-cost" v-if="item.monthlyRentCard.isVip">
|
|
|
+ 原价 {{item.monthlyRentCard.oldPrice}}元/月
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="radio-box">
|
|
|
|
|
|
- <view class="slogan-4"
|
|
|
- v-if="cardId||ispay"
|
|
|
- @click="gotoUrl('pages/monthlyCardActivity/monthlyCardList?cardId='+(ispay?userCard.rentCardId:cardId))">
|
|
|
- 查看本活动适用站点
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <u-checkbox-group >
|
|
|
+ <u-checkbox @change="checkboxChange($event,item.monthlyRentCard)" v-model="item.monthlyRentCard.checked" active-color="#446D94" shape="circle" size="48"></u-checkbox>
|
|
|
+ </u-checkbox-group>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
- <u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
|
|
|
- <u-modal v-model="showModel" :show-cancel-button="true" @cancel="getUserInfo()" @confirm="confirm"
|
|
|
- confirm-text="支付成功？" title="扫码支付">
|
|
|
- <view style="
|
|
|
- text-align: center;
|
|
|
- ">
|
|
|
- <img id="qrcode2" :src="qrCodeImg">
|
|
|
- </view>
|
|
|
- <view style="
|
|
|
- text-align: center;
|
|
|
- ">请使用支付宝扫码</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
|
|
|
- </u-modal>
|
|
|
+ </view>
|
|
|
+ <u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
|
|
|
+ <u-modal v-model="showModel" :show-cancel-button="true" @cancel="getUserInfo()" @confirm="confirm"
|
|
|
+ confirm-text="支付成功？" title="扫码支付">
|
|
|
+ <view style="
|
|
|
+ text-align: center;
|
|
|
+ ">
|
|
|
+ <img id="qrcode2" :src="qrCodeImg">
|
|
|
+ </view>
|
|
|
+ <view style="
|
|
|
+ text-align: center;
|
|
|
+ ">请使用支付宝扫码</view>
|
|
|
+
|
|
|
+ </u-modal>
|
|
|
+
|
|
|
+ <u-modal v-model="show1" @confirm="gotoGz" cancel-text="暂不关注" confirm-text="前往关注" confirm-color="#53b56b"
|
|
|
+ :show-cancel-button="true" ref="uModal2" :asyncClose="true">
|
|
|
+ <view style="padding: 15px;">请先关注<span style=" color: #53b56b;">{{projectName}}</span>公众号，购买月卡</view>
|
|
|
+
|
|
|
+
|
|
|
+ </u-modal>
|
|
|
+
|
|
|
+
|
|
|
+ <u-modal v-model="infoSet1" @confirm="infoSet1=false,gotoUrl('pages/user/dataSet')" cancel-text="取消"
|
|
|
+ confirm-text="完善个人信息" confirm-color="#53b56b" :show-cancel-button="true" ref="uModal2" :asyncClose="true">
|
|
|
+ <view style="padding: 15px;">购买月卡需要完善以下2点<br />
|
|
|
+ 1.填写真实姓名<br />
|
|
|
+ 2.填写车牌号<br />
|
|
|
+ </view>
|
|
|
+ </u-modal>
|
|
|
<img id="qrcode" style="display: none;">
|
|
|
- <!-- 立即开通 -->
|
|
|
- <view class="bottom" v-if="ispay">
|
|
|
- <button class="dredge">已购买</button>
|
|
|
- </view>
|
|
|
- <view class="bottom" v-else-if="!endCardBool">
|
|
|
- <button class="dredge">已下架</button>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="bottom" v-else-if="!show2" @click="gotoGz">
|
|
|
- <button class="dredge">关注公众号</button>
|
|
|
- </view>
|
|
|
- <view class="bottom" v-else-if="!infoSet" @click="gotoUrl('pages/user/dataSet')">
|
|
|
- <button class="dredge">完善个人信息</button>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
|
|
|
+ <!-- 按钮 -->
|
|
|
+ <view class="button">
|
|
|
+ <button class="btn " v-if="ispay" > {{userCard&&ispay?userCard.endTime:''}}到期
|
|
|
+ </button>
|
|
|
+ <button class="btn " v-else-if="!endCardBool" >已下架
|
|
|
+ </button>
|
|
|
+ <button class="btn " v-else-if="!show2" @click="gotoGz">关注公众号
|
|
|
+ </button>
|
|
|
+ <button class="btn " v-else-if="!infoSet" @click="gotoUrl('pages/user/dataSet')" >完善个人信息
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <button class="btn " v-else-if="!cardList.length" @click="putShelf" >已下架
|
|
|
+ </button>
|
|
|
+ <button class="btn " @click="show = true" v-else-if="detail.isVip">
|
|
|
+
|
|
|
+ <text style="font-size: 14px;">￥</text>
|
|
|
+
|
|
|
+ <span >{{detail.price}}</span>
|
|
|
+
|
|
|
+ <text class="price">{{detail.oldPrice}}</text> 开通1个月会员
|
|
|
+
|
|
|
+ <view class="position">
|
|
|
+ <view id="talkbubble">{{detail.platformText}}车主</view>
|
|
|
+ </view>
|
|
|
+ </button>
|
|
|
+ <button class="btn " @click="show = true" v-else>
|
|
|
+
|
|
|
+ <text style="font-size: 14px;">￥</text>
|
|
|
+ <span v-if="detail.discount" >
|
|
|
+ {{detail.price/100*detail.discountRate}}</span>
|
|
|
+ <span v-else >{{detail.price}}</span>
|
|
|
+
|
|
|
+ <text v-if="detail.discount" class="price">{{detail.price}}</text> 开通1个月会员
|
|
|
+
|
|
|
+ <view class="position" v-if="detail.remark">
|
|
|
+ <view id="talkbubble">{{detail.remark}}</view>
|
|
|
+ </view>
|
|
|
+ </button>
|
|
|
|
|
|
- <!-- 立即开通 -->
|
|
|
- <view class="bottom" v-else-if="!ispay">
|
|
|
- <button class="dredge" v-if="detail.putShelf&&!detail.isVip" @click="show = true">立即开通
|
|
|
- ￥{{detail.price.toFixed(2)}}/月</button>
|
|
|
- <button class="dredge" v-if="detail.putShelf&&detail.isVip" @click="show = true">{{detail.platformText}}车主特惠
|
|
|
- ￥{{detail.price.toFixed(2)}}/月<span
|
|
|
- style="font-size: 12px; text-decoration: line-through;">￥{{detail.oldPrice.toFixed(2)}}</span></button>
|
|
|
|
|
|
- <button class="dredge" v-if="!cardList.length" @click="putShelf"> 已下架</button>
|
|
|
|
|
|
- <p>开通表示阅读并同意
|
|
|
- <text class="agreement" @click="gotoUrl('pages/article/details?code=FWFZKXY')">《服务费折扣协议》</text>
|
|
|
- </p>
|
|
|
+ <view class="hint">
|
|
|
+ 开通表示阅读并同意<span @click="gotoUrl('pages/article/details?code=FWFZKXY')" style="text-decoration:underline">《服务费折扣协议》</span>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
-
|
|
|
-
|
|
|
- <u-modal v-model="show1" @confirm="gotoGz" cancel-text="暂不关注" confirm-text="前往关注" confirm-color="#53b56b"
|
|
|
- :show-cancel-button="true" ref="uModal2" :asyncClose="true">
|
|
|
- <view style="padding: 15px;">请先关注<span style=" color: #53b56b;">{{projectName}}</span>公众号，购买月卡</view>
|
|
|
-
|
|
|
-
|
|
|
- </u-modal>
|
|
|
-
|
|
|
-
|
|
|
- <u-modal v-model="infoSet1" @confirm="infoSet1=false,gotoUrl('pages/user/dataSet')" cancel-text="取消"
|
|
|
- confirm-text="完善个人信息" confirm-color="#53b56b" :show-cancel-button="true" ref="uModal2" :asyncClose="true">
|
|
|
- <view style="padding: 15px;">购买月卡需要完善以下2点<br />
|
|
|
- 1.填写真实姓名<br />
|
|
|
- 2.填写车牌号<br />
|
|
|
+ <!-- 须知 -->
|
|
|
+ <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>
|
|
|
- </u-modal>
|
|
|
+ <view class="text">
|
|
|
+ <view class="num">
|
|
|
+ 04
|
|
|
+ </view>
|
|
|
+ <view class="">
|
|
|
+ 本卡一经售出，不支持任何形式的退换。
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -152,10 +179,12 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ description: '盟主能量包本期限时优惠活动将于9月16日结束。',
|
|
|
+ checked: "false",
|
|
|
cardId: '',
|
|
|
qrCodeImg: "",
|
|
|
- showModel: false,
|
|
|
- cardList:[],
|
|
|
+ showModel: false,
|
|
|
+ cardList: [],
|
|
|
projectName: "",
|
|
|
list: [{
|
|
|
text: '微信',
|
|
|
@@ -188,10 +217,11 @@
|
|
|
onShow() {
|
|
|
this.checkSubscribe();
|
|
|
},
|
|
|
- computed: {
|
|
|
+ computed: {
|
|
|
+
|
|
|
endCardBool() {
|
|
|
- if(!this.cardList.length){
|
|
|
- return false;
|
|
|
+ if (!this.cardList.length) {
|
|
|
+ return false;
|
|
|
}
|
|
|
var date = new Date().getTime()
|
|
|
if (!this.detail.endTime) {
|
|
|
@@ -206,7 +236,21 @@
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- methods: {
|
|
|
+ methods: {
|
|
|
+ checkboxChange(e,monthlyRentCard) {
|
|
|
+
|
|
|
+ this.detail=monthlyRentCard;
|
|
|
+ this.cardId=monthlyRentCard.id
|
|
|
+
|
|
|
+ for(var i in this.cardList){
|
|
|
+ var obj=this.cardList[i].monthlyRentCard;
|
|
|
+ if(this.cardId==obj.id){
|
|
|
+
|
|
|
+ }else{
|
|
|
+ obj.checked=false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
gotoGz() {
|
|
|
this.carhelp.setGzDate()
|
|
|
var url = "https://mp.weixin.qq.com/s/mCHz1nNvg0xAICiBeIyKRQ";
|
|
|
@@ -223,7 +267,7 @@
|
|
|
|
|
|
} else {
|
|
|
//this.getInfo();
|
|
|
-
|
|
|
+
|
|
|
this.getCardList();
|
|
|
this.show2 = true;
|
|
|
//this.carhelp.setGzDate()
|
|
|
@@ -238,7 +282,7 @@
|
|
|
|
|
|
},
|
|
|
userCardBool(userCard) {
|
|
|
-
|
|
|
+
|
|
|
|
|
|
if (userCard) {
|
|
|
var date = new Date().getTime()
|
|
|
@@ -249,31 +293,32 @@
|
|
|
}
|
|
|
return false
|
|
|
},
|
|
|
- getCardList(){
|
|
|
- uni.showLoading({
|
|
|
- title: "加载中",
|
|
|
- mask: true,
|
|
|
- })
|
|
|
- API.cardList({
|
|
|
-
|
|
|
- }).then((response) => {
|
|
|
-
|
|
|
-
|
|
|
- this.cardList=response.data.cardList;
|
|
|
- if(this.cardList.length){
|
|
|
- this.detail = this.cardList[0].monthlyRentCard
|
|
|
- this.cardId=this.detail.id;
|
|
|
-
|
|
|
- }
|
|
|
- this.getUserInfo()
|
|
|
- console.log(this.cardList)
|
|
|
- //cardId: this.cardId
|
|
|
- uni.hideLoading()
|
|
|
- }).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error
|
|
|
- })
|
|
|
- })
|
|
|
+ getCardList() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.cardList({
|
|
|
+
|
|
|
+ }).then((response) => {
|
|
|
+
|
|
|
+
|
|
|
+ this.cardList = response.data.cardList;
|
|
|
+ if (this.cardList.length) {
|
|
|
+ this.detail = this.cardList[0].monthlyRentCard
|
|
|
+ this.cardId = this.detail.id;
|
|
|
+ this.cardList[0].monthlyRentCard.checked=true
|
|
|
+
|
|
|
+ }
|
|
|
+ this.getUserInfo()
|
|
|
+
|
|
|
+ //cardId: this.cardId
|
|
|
+ uni.hideLoading()
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+ })
|
|
|
},
|
|
|
getUserInfo() {
|
|
|
uni.showLoading({
|
|
|
@@ -295,11 +340,11 @@
|
|
|
this.infoSet = true;
|
|
|
|
|
|
} else {
|
|
|
- this.infoSet = false;
|
|
|
- if(this.endCardBool){
|
|
|
- this.infoSet1 = true;
|
|
|
+ this.infoSet = false;
|
|
|
+ if (this.endCardBool) {
|
|
|
+ this.infoSet1 = true;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
|
|
|
var userCard = res.data.userCard;
|
|
|
@@ -340,7 +385,7 @@
|
|
|
API.cardDetail({
|
|
|
cardId: this.cardId
|
|
|
}).then((response) => {
|
|
|
- console.log(response)
|
|
|
+
|
|
|
this.detail = response.data.monthlyRentCard
|
|
|
uni.hideLoading()
|
|
|
}).catch(error => {
|
|
|
@@ -379,7 +424,12 @@
|
|
|
uni.showLoading({
|
|
|
title: "加载中",
|
|
|
mask: true,
|
|
|
- })
|
|
|
+ })
|
|
|
+ var listcanvas=document.getElementsByTagName('canvas')
|
|
|
+
|
|
|
+ if(listcanvas.length>0){
|
|
|
+ document.getElementById("qrcode").removeChild(document.getElementsByTagName('canvas')[0]);
|
|
|
+ }
|
|
|
Pay.alpay(this.submitForm).then((response) => {
|
|
|
|
|
|
let qrcode = new QRCode('qrcode', {
|
|
|
@@ -441,209 +491,218 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- page {
|
|
|
- background-color: #2a2c31;
|
|
|
- padding-bottom: 200px;
|
|
|
- }
|
|
|
-
|
|
|
- .monthly-card-bgc {
|
|
|
- padding: 20px;
|
|
|
- background-color: #101010;
|
|
|
- height: 150px;
|
|
|
- position: relative;
|
|
|
+ /deep/.u-alert-desc {
|
|
|
+ color: #ff7300;
|
|
|
}
|
|
|
|
|
|
// 卡片
|
|
|
- .monthly-card {
|
|
|
-
|
|
|
- border-radius: 16px;
|
|
|
- height: 150px;
|
|
|
- background: linear-gradient(#F2E6CA, #C9A87B);
|
|
|
+ .main {
|
|
|
+ background-color: #404A5E;
|
|
|
+ padding: 40rpx 40rpx 30px 40rpx;
|
|
|
|
|
|
+ .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;
|
|
|
|
|
|
- .main {
|
|
|
- padding: 24px 0 24px 24px;
|
|
|
- height: 100%;
|
|
|
- background: url(@/assets/img/card@3.png);
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: 30% 10%;
|
|
|
- background-size: cover;
|
|
|
- color: rgba(255, 255, 255, 100);
|
|
|
- border-radius: 6px;
|
|
|
|
|
|
- .title-1 {
|
|
|
- line-height: 28px;
|
|
|
+ }
|
|
|
|
|
|
- font-size: 56rpx;
|
|
|
- margin-bottom: 8px;
|
|
|
+ @media screen and (max-width:320px) {
|
|
|
+ .tag {
|
|
|
+ padding: 0 4rpx;
|
|
|
}
|
|
|
|
|
|
- .title-2 {
|
|
|
- line-height: 24px;
|
|
|
+ .price {
|
|
|
+ position: absolute;
|
|
|
+ top: 24rpx !important;
|
|
|
+ right: 8rpx !important;
|
|
|
+ }
|
|
|
|
|
|
- font-size: 34rpx;
|
|
|
+ .current-price {
|
|
|
+ font-size: 36rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .cover {
|
|
|
- width: 100%;
|
|
|
+ .price {
|
|
|
+ top: 24rpx;
|
|
|
+ right: 32rpx;
|
|
|
position: absolute;
|
|
|
- bottom: -30px;
|
|
|
- left: 0px;
|
|
|
- right: 0;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .slogan-1 {
|
|
|
- margin-top: 40px;
|
|
|
- height: 36px;
|
|
|
- color: rgba(234, 217, 180, 100);
|
|
|
- font-size: 48rpx;
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 4px;
|
|
|
- }
|
|
|
+ .current-price {
|
|
|
+ font-size: 64rpx;
|
|
|
+ color: #101010;
|
|
|
+ text-align: right;
|
|
|
|
|
|
- .slogan-2 {
|
|
|
- height: 36px;
|
|
|
- color: rgba(234, 217, 180, 100);
|
|
|
- font-size: 56rpx;
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 12px;
|
|
|
- }
|
|
|
+ text {
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
|
- .slogan-3 {
|
|
|
- text-align: initial;
|
|
|
- padding: 0 40px;
|
|
|
- line-height: 24px;
|
|
|
- color: #CCCCCC;
|
|
|
- font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ .original-cost {
|
|
|
+ color: rgba(75, 65, 50, 100);
|
|
|
+ text-decoration: line-through;
|
|
|
|
|
|
- .slogan-4 {
|
|
|
- margin-top: 10px;
|
|
|
- text-decoration: underline;
|
|
|
- height: 20px;
|
|
|
- color: #9F9C99;
|
|
|
- font-size: 32rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-iconfont {
|
|
|
+ font-size: 36rpx !important;
|
|
|
|
|
|
- .operating{
|
|
|
-
|
|
|
- border: 1px solid rgba(100, 90, 77, 100);
|
|
|
- padding: 30rpx;
|
|
|
- margin: 32rpx 40rpx 0;
|
|
|
- //background: linear-gradient(to right, #bc9663, #79674d);
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- color: #fff;
|
|
|
- border-radius: 12px;
|
|
|
-
|
|
|
- .title {
|
|
|
- color: rgba(255, 255, 255, 100);
|
|
|
- font-size: 18px;
|
|
|
- line-height: 20px;
|
|
|
-
|
|
|
- .img {
|
|
|
- display: inline-block;
|
|
|
- background-color: #fff;
|
|
|
- width: 40rpx;
|
|
|
- height: 40rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- line-height: 36rpx;
|
|
|
- margin-right: 8rpx;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 24rpx;
|
|
|
- height: 24rpx;
|
|
|
- margin-left: 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .hint {
|
|
|
- color: rgba(255, 255, 255, 100);
|
|
|
- font-size: 12px;
|
|
|
- line-height: 24px;
|
|
|
- margin-top: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .price {
|
|
|
- color: rgba(255, 255, 255, 100);
|
|
|
-
|
|
|
- margin: auto 0;
|
|
|
-
|
|
|
- .num {
|
|
|
- font-size:56rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .unit {
|
|
|
- font-size: 32rpx;
|
|
|
- margin-left: 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- // 营运车辆,非营业车辆
|
|
|
- .operating-coach {
|
|
|
-
|
|
|
- background: linear-gradient(to right, #bc9663, #79674d);
|
|
|
-
|
|
|
- .title {
|
|
|
-
|
|
|
- .img {
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
- .price {
|
|
|
- color: rgba(255, 255, 255, 100);
|
|
|
|
|
|
+
|
|
|
+ .card-1 {
|
|
|
+ margin-top: 32rpx;
|
|
|
+ position: relative;
|
|
|
+ background-size: cover;
|
|
|
+ height: 300rpx;
|
|
|
+
|
|
|
+ /deep/.u-checkbox__icon-wrap {
|
|
|
+
|
|
|
+ background-color: #607d8b;
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .radio-box {
|
|
|
+ margin-top: 78rpx;
|
|
|
+ float: right;
|
|
|
+ margin-right: -30rpx;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
-.non-operational-car{
|
|
|
-
|
|
|
- .title {
|
|
|
- .img {
|
|
|
-
|
|
|
- background:linear-gradient(#f2e6ca,#c9a87b) ;
|
|
|
+ .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;
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .price {
|
|
|
- color: rgba(211, 189, 158, 100);
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
- // 立即开通
|
|
|
- .bottom {
|
|
|
+ // 按钮
|
|
|
+ .button {
|
|
|
+ margin-top: -20rpx;
|
|
|
+ border-radius: 16px 16px 0px 0px;
|
|
|
+ background-color: rgba(255, 255, 255, 100);
|
|
|
+ padding: 20px 20px 16px 20px;
|
|
|
|
|
|
- position: fixed;
|
|
|
- background-color: #2a2c31;
|
|
|
- bottom: 0px;
|
|
|
- padding-bottom: 40px;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
+ uni-button:after {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
|
|
|
- .dredge {
|
|
|
- // width: 72.2%;
|
|
|
- margin: 0 20px;
|
|
|
+ .btn {
|
|
|
+ border: none !important;
|
|
|
+ background: linear-gradient(#E1D0A5, #E4BE84);
|
|
|
+ box-shadow: 0px 4px 10px 0px rgba(207, 175, 118, 40);
|
|
|
border-radius: 50px;
|
|
|
- font-size: 36rpx;
|
|
|
- background: linear-gradient(to right, #C9A87B, #F2E6CA);
|
|
|
- margin-bottom: 12px;
|
|
|
+ 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;
|
|
|
}
|
|
|
|
|
|
- p {
|
|
|
- height: 20px;
|
|
|
- color: rgba(226, 222, 217, 100);
|
|
|
- font-size: 14px;
|
|
|
+ .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;
|
|
|
}
|
|
|
|
|
|
- .agreement {
|
|
|
- color: #897a69;
|
|
|
+ #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;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+ .carNone{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ margin-top: -60px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
zhengkaixin