|
|
|
|
@ -1,154 +1,270 @@ |
|
|
|
|
<template> |
|
|
|
|
<view> |
|
|
|
|
<view class="width100 height100p backcorf06"> |
|
|
|
|
<view class="width100 height120" style="background-color: #3267f6;"> |
|
|
|
|
<view class="alijusstart paddleft10 paddtright10" style="background-color: #2d5de5;height: 30px;"> |
|
|
|
|
<image src="../../../static/img/tongz.png" style="height: 20px;" class="icon45"></image> |
|
|
|
|
<view class="right-left-scroll margle"> |
|
|
|
|
<view class="content font12 fontspec" |
|
|
|
|
:style="{'animation': `noticeAnimation ${time}s linear 1s infinite`}"> |
|
|
|
|
{{notice}} |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="block"> |
|
|
|
|
<view class="content height60"> |
|
|
|
|
<input type="number" class="my flleft font18 fcorfff" maxlength="11" |
|
|
|
|
<input type="number" class="my flleft font20 fcorfff" maxlength="11" |
|
|
|
|
placeholder-style="color:#ffffff;" placeholder="请输入充值号码" v-model="inputPhone" /> |
|
|
|
|
</view> |
|
|
|
|
<view class="line1 width100 backcorfff"></view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<!-- <view class="mart5"> |
|
|
|
|
<QSTabs ref="tabs" :tabs="tabs" animationMode="line2" :current="current" @change="change" |
|
|
|
|
activeColor="#089bf5" lineColor="#089bf5" minWidth="374"> |
|
|
|
|
</QSTabs> |
|
|
|
|
</view> --> |
|
|
|
|
<view class="width90 font16 fcor333 fontwig6 mart20"> |
|
|
|
|
选择金额 |
|
|
|
|
</view> |
|
|
|
|
<view class="list"> |
|
|
|
|
<view class="box" :class="{'on':item.id == inputAmountId}" v-for="(item,index) in amountList" :key="index" |
|
|
|
|
@click="select(item)"> |
|
|
|
|
<view class="heTitle">{{item.rechargePrice}}元</view> |
|
|
|
|
<view class="font13 fcoreb5 fontwig6" v-if="item.status != 2">{{item.payPrice}}元</view> |
|
|
|
|
<view class="font13 fcor999" v-if="item.status == 2">已售空</view> |
|
|
|
|
<view class="backcorlf5 height70"></view> |
|
|
|
|
<view class="width90 border-r backcorfff" style="margin-top: -60px;"> |
|
|
|
|
<view class="swiperHead"> |
|
|
|
|
<!--组件--> |
|
|
|
|
<swiperNavBar :scrollIntoView="scrollIntoView" :swiperTabList='tabs' :swiperTabIdx='swiperTabIdx' |
|
|
|
|
:currentSwiperWidth='currentSwiperWidth' :currentSwiperHeight='currentSwiperHeight' |
|
|
|
|
:swiperCurrentSize='swiperCurrentSize' :swiperColor='swiperColor' |
|
|
|
|
:swiperCurrentColor='swiperCurrentColor' :currentSwiperLineShow="currentSwiperLineShow" |
|
|
|
|
:currentSwiperLineActiveWidth="currentSwiperLineActiveWidth" |
|
|
|
|
:currentSwiperLineActiveHeight="currentSwiperLineActiveHeight" |
|
|
|
|
:currentSwiperLineActiveBg="currentSwiperLineActiveBg" |
|
|
|
|
:currentSwiperLineAnimatie="currentSwiperLineAnimatie" v-if=" tabs.length > 0 " |
|
|
|
|
@change="CurrentTab"> |
|
|
|
|
</swiperNavBar> |
|
|
|
|
<!--组件--> |
|
|
|
|
</view> |
|
|
|
|
<!--内容--> |
|
|
|
|
<view class="swiperCont border-r"> |
|
|
|
|
<swiper class="swiper border-r" :style="{ height:mainHeight + 'px' }" :current="swiperTabIdx" |
|
|
|
|
@change="SwiperChange"> |
|
|
|
|
<swiper-item class="swiperItem border-r" v-for="(item,index) in tabs" :key='index'> |
|
|
|
|
<!-- <view class="width90 font14 fcor333 fontwig6 mart5"> |
|
|
|
|
话费特惠充值 |
|
|
|
|
</view> --> |
|
|
|
|
<view v-if="amountList == ''" class="mart10 fotct font14 fcor666"> |
|
|
|
|
<image mode="widthFix" style="width: 40vw;" :src="imagewxUrl+imgadres"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="list" v-else> |
|
|
|
|
<view class="box border-r" :class="{'on':item.id == inputAmountId}" |
|
|
|
|
v-for="(item,index) in amountList" :key="index" @click="select(item)"> |
|
|
|
|
<view class="heTitle font16 fontwig6 paddtop5">{{item.rechargePrice}}元</view> |
|
|
|
|
<view class="font13 contcil" :class="{'on':item.id == inputAmountId}" |
|
|
|
|
v-if="item.status != 2">售{{item.payPrice}}元</view> |
|
|
|
|
<view class="font12 contcil" :class="{'on':item.id == inputAmountId}" |
|
|
|
|
v-if="item.status == 2">已售空</view> |
|
|
|
|
<view class="width100 font12 height25l boxchil" |
|
|
|
|
:class="{'on':item.id == inputAmountId}" style="">{{explainReceiptTime}} |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</swiper-item> |
|
|
|
|
</swiper> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="width90 height50 backcor008 font18 fcorfff fotct border-r" @click="addOrderPay()"> |
|
|
|
|
<text v-if="inputAmount">¥</text> |
|
|
|
|
{{inputAmount}} |
|
|
|
|
立即充值 |
|
|
|
|
</view> |
|
|
|
|
<view class="width100 height40"></view> |
|
|
|
|
</view> |
|
|
|
|
<view class="mart5 width90 font18 fcor333 fontwig6"> |
|
|
|
|
充值说明： |
|
|
|
|
</view> |
|
|
|
|
<!-- <view class="width90 mart20" v-if="current == 0"> |
|
|
|
|
<image mode="widthFix" :src="imagewxUrl+image2"></image> |
|
|
|
|
</view> --> |
|
|
|
|
<view class="width90 mart20"> |
|
|
|
|
<image mode="widthFix" :src="imagewxUrl+image1"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="height100p"></view> |
|
|
|
|
<view class="bombtn width94 font16"> |
|
|
|
|
<view class="width50 flleft payem">应付: {{inputAmount}}元</view> |
|
|
|
|
<view class="width50 flright paybtn" @click="addOrderPay">立即购买</view> |
|
|
|
|
<view class="width90 mart20"> |
|
|
|
|
<rich-text :nodes="textcont"></rich-text> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<wybPopup ref="popup" type="center" height="850" width="600" bgColor="" radius="6" :showCloseIcon="true"> |
|
|
|
|
<image class="popImg" :src="imageUrl+imgadres1"></image> |
|
|
|
|
</wybPopup> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
let app = getApp(); |
|
|
|
|
import QSTabs from '@/components/QS-tabs/QS-tabs.vue'; |
|
|
|
|
import swiperNavBar from '@/components/swiperNavBar.vue'; |
|
|
|
|
import wybPopup from '@/components/wyb-popup/wyb-popup.vue'; |
|
|
|
|
import { |
|
|
|
|
getListOutRechargePrice, |
|
|
|
|
addOrderPay |
|
|
|
|
} from '../../../Utils/Api.js'; |
|
|
|
|
import QSTabs from '../../../components/QS-tabs/QS-tabs.vue'; |
|
|
|
|
addOrderPay, |
|
|
|
|
findSecConfigByType, |
|
|
|
|
getCmsContent |
|
|
|
|
} from '@/Utils/Api.js'; |
|
|
|
|
export default { |
|
|
|
|
components: { |
|
|
|
|
QSTabs |
|
|
|
|
QSTabs, |
|
|
|
|
swiperNavBar, |
|
|
|
|
wybPopup |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
typeId: '', |
|
|
|
|
inputAmountId: '', |
|
|
|
|
inputAmount: '', |
|
|
|
|
orderPrice: '', |
|
|
|
|
inputPhone: '', |
|
|
|
|
amoutType: '', |
|
|
|
|
codesVlues: '', |
|
|
|
|
amountList: [], |
|
|
|
|
price: '', |
|
|
|
|
amoutstatus: '', |
|
|
|
|
tabs: ["5个工作日", "6小时到账"], //切换操作 |
|
|
|
|
tabs: [], //切换操作 |
|
|
|
|
current: 0, //默认 |
|
|
|
|
swiperCurrent: 2, |
|
|
|
|
imagewxUrl: app.globalData.imageWxImg, |
|
|
|
|
image1:'telephone1.png', |
|
|
|
|
image2:'telephone2.png' |
|
|
|
|
swiperCurrent: 2, |
|
|
|
|
imageUrl: app.globalData.imgUrl, |
|
|
|
|
imagewxUrl: app.globalData.imageWxImg, |
|
|
|
|
imgadres: 'noorder.png', |
|
|
|
|
imgadres1: '', |
|
|
|
|
image1: 'telephone1.png', |
|
|
|
|
image2: 'telephone2.png', |
|
|
|
|
notice: '', //警告 |
|
|
|
|
textcont: '', // 富文本 |
|
|
|
|
explainReceiptTime: '', //时间到账 |
|
|
|
|
time: 20, |
|
|
|
|
|
|
|
|
|
//导航 |
|
|
|
|
scrollIntoView: 0, //设置哪个方向可滚动，则在哪个方向滚动到该元素 |
|
|
|
|
swiperTabList: [], //导航列表 |
|
|
|
|
swiperTabIdx: 0, |
|
|
|
|
swiperCurrentSize: '30rpx', //导航的字体大小 |
|
|
|
|
swiperColor: '#333333', //导航栏字体未选中前颜色 |
|
|
|
|
swiperCurrentColor: '#1D63FF', //选中当前导航栏字体颜色 |
|
|
|
|
currentSwiperWidth: '23%', //当前导航的宽度 % upx rpx px （导航超出可左右滑动 ） |
|
|
|
|
currentSwiperHeight: 100, //当前导航的高度度 rpx px |
|
|
|
|
mainHeight: 240, //全屏或者局部滑动设置的高度 |
|
|
|
|
currentSwiperLineShow: true, //是否显示导航栏的线条 （线条距离标题太近的话可自行修改.swiperLine的css） |
|
|
|
|
currentSwiperLineActiveBg: '#1D63FF', //当前选中的导航栏线条颜色 |
|
|
|
|
currentSwiperLineActiveWidth: '30rpx', //当前选中的导航栏线条的宽度 upx rpx px |
|
|
|
|
currentSwiperLineActiveHeight: '6rpx', //当前选中的导航栏线条的高度度 upx rpx px |
|
|
|
|
currentSwiperLineAnimatie: 300, //当前选中的导航栏线条过渡效果 |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
onLoad(options) { |
|
|
|
|
this.typeId = options.id; |
|
|
|
|
if (this.typeId == 1) { |
|
|
|
|
uni.setNavigationBarTitle({ |
|
|
|
|
title: '中国移动' |
|
|
|
|
}) |
|
|
|
|
this.amoutType = 2; |
|
|
|
|
this.getListOutRechargePrice(2); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
if (this.typeId == 2) { |
|
|
|
|
uni.setNavigationBarTitle({ |
|
|
|
|
title: '中国电信' |
|
|
|
|
}) |
|
|
|
|
this.amoutType = 1; |
|
|
|
|
this.getListOutRechargePrice(1); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
if (this.typeId == 3) { |
|
|
|
|
uni.setNavigationBarTitle({ |
|
|
|
|
title: '中国联通' |
|
|
|
|
}) |
|
|
|
|
this.amoutType = 3; |
|
|
|
|
this.getListOutRechargePrice(3); |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
this.getCmsAactibity(); |
|
|
|
|
this.getListOutRechargePrice(); |
|
|
|
|
}, |
|
|
|
|
onShow() { |
|
|
|
|
this.findSecConfigByType(); |
|
|
|
|
this.findSecConfigByTypewap(); |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
// let scroll_width = 0; |
|
|
|
|
// const query = uni.createSelectorQuery().in(this); |
|
|
|
|
// query.select('.right-left-scroll').boundingClientRect(data => { |
|
|
|
|
// scroll_width = (data.width).toFixed(2); |
|
|
|
|
// }).exec(); |
|
|
|
|
|
|
|
|
|
// query.select('.right-left-scroll .content').boundingClientRect(data => { |
|
|
|
|
// if (data.width - scroll_width > 0) { |
|
|
|
|
// this.time = (9 * data.width / scroll_width).toFixed(2); |
|
|
|
|
// } |
|
|
|
|
// }).exec(); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
//查询弹窗 |
|
|
|
|
getCmsAactibity() { |
|
|
|
|
let code; |
|
|
|
|
// #ifdef H5 |
|
|
|
|
code = '2' |
|
|
|
|
// #endif |
|
|
|
|
// #ifdef MP |
|
|
|
|
code = '1' |
|
|
|
|
// #endif |
|
|
|
|
let params = { |
|
|
|
|
companyId: app.globalData.companyId, |
|
|
|
|
platform: code, |
|
|
|
|
categoryCode: 'CMS_RECHARGE_POPOVER' |
|
|
|
|
} |
|
|
|
|
getCmsContent(params).then(res => { |
|
|
|
|
if (res.return_code == '000000' && res.return_data.childCategory.length != 0) { |
|
|
|
|
//弹窗首页广告 |
|
|
|
|
this.imgadres1 = res.return_data.childCategory[0].imgData; |
|
|
|
|
this.showPopup(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
//显示弹出 |
|
|
|
|
showPopup() { |
|
|
|
|
this.$refs.popup.show(); |
|
|
|
|
}, |
|
|
|
|
// 充值通知 |
|
|
|
|
findSecConfigByType() { |
|
|
|
|
let datas = { |
|
|
|
|
codeType: 'EXPLAIN_NOTIFICATIONS' |
|
|
|
|
} |
|
|
|
|
findSecConfigByType(datas).then(res => { |
|
|
|
|
if (res.return_code == '000000') { |
|
|
|
|
this.notice = res.return_data.codeValue; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
//充值警告 |
|
|
|
|
findSecConfigByTypewap() { |
|
|
|
|
let datas = { |
|
|
|
|
codeType: 'EXPLAIN_WRAP ' |
|
|
|
|
} |
|
|
|
|
findSecConfigByType(datas).then(res => { |
|
|
|
|
if (res.return_code == '000000') { |
|
|
|
|
this.textcont = res.return_data.codeValue; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
select(amoutinfos) { |
|
|
|
|
this.inputAmount = amoutinfos.payPrice; |
|
|
|
|
this.orderPrice = amoutinfos.rechargePrice; |
|
|
|
|
this.price = amoutinfos.rechargePrice; |
|
|
|
|
this.inputAmountId = amoutinfos.id; |
|
|
|
|
this.amoutstatus = amoutinfos.status; |
|
|
|
|
}, |
|
|
|
|
//筛选 |
|
|
|
|
change(index) { |
|
|
|
|
this.$refs.tabs.setFinishCurrent(index); |
|
|
|
|
this.current = index; |
|
|
|
|
this.inputAmount = ''; |
|
|
|
|
this.amoutstatus = ''; |
|
|
|
|
if (index == 0) { |
|
|
|
|
this.swiperCurrent = 2; |
|
|
|
|
this.getListOutRechargePrice(this.amoutType); |
|
|
|
|
} else { |
|
|
|
|
this.swiperCurrent = 1; |
|
|
|
|
this.getListOutRechargePrice(this.amoutType); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
/** |
|
|
|
|
* 查询价格 |
|
|
|
|
*/ |
|
|
|
|
getListOutRechargePrice(item) { |
|
|
|
|
getListOutRechargePrice() { |
|
|
|
|
uni.showLoading({ |
|
|
|
|
title: '加载中...' |
|
|
|
|
}) |
|
|
|
|
let showType; |
|
|
|
|
// #ifdef H5 |
|
|
|
|
showType = 2; |
|
|
|
|
// #endif |
|
|
|
|
// #ifdef MP |
|
|
|
|
showType = 1; |
|
|
|
|
// #endif |
|
|
|
|
let params = { |
|
|
|
|
operatorType: item, |
|
|
|
|
"companyId": app.globalData.companyId, |
|
|
|
|
platformId: 3 |
|
|
|
|
// rechargeType: this.swiperCurrent |
|
|
|
|
platformId: showType |
|
|
|
|
} |
|
|
|
|
getListOutRechargePrice(params).then(res => { |
|
|
|
|
uni.hideLoading() |
|
|
|
|
if (res.return_code == '000000' && res.return_data) { |
|
|
|
|
this.amountList = res.return_data; |
|
|
|
|
this.tabs = res.return_data; |
|
|
|
|
this.amountList = res.return_data[0].priceList; |
|
|
|
|
this.explainReceiptTime = res.return_data[0].explain_receipt_time; |
|
|
|
|
this.amoutType = res.return_data[0].id; |
|
|
|
|
} else { |
|
|
|
|
this.amountList = []; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
//tab点击事件 自行完善需要的代码 |
|
|
|
|
CurrentTab: function(index) { |
|
|
|
|
this.swiperTabIdx = index; |
|
|
|
|
this.scrollIntoView = Math.max(0, index - 1); |
|
|
|
|
this.explainReceiptTime = this.tabs[this.swiperTabIdx].explain_receipt_time; |
|
|
|
|
this.amountList = this.tabs[this.swiperTabIdx].priceList; |
|
|
|
|
this.amoutType = this.tabs[this.swiperTabIdx].id; |
|
|
|
|
}, |
|
|
|
|
//滑动事件 自行完善需要的代码 |
|
|
|
|
SwiperChange: function(e) { |
|
|
|
|
this.swiperTabIdx = e.detail.current; |
|
|
|
|
this.scrollIntoView = Math.max(0, e.detail.current - 1); |
|
|
|
|
this.explainReceiptTime = this.tabs[this.swiperTabIdx].explain_receipt_time; |
|
|
|
|
this.amountList = this.tabs[this.swiperTabIdx].priceList; |
|
|
|
|
this.amoutType = this.tabs[this.swiperTabIdx].id; |
|
|
|
|
}, |
|
|
|
|
/** |
|
|
|
|
* 提交订单 |
|
|
|
|
*/ |
|
|
|
|
addOrderPay() { |
|
|
|
|
addOrderPay() { |
|
|
|
|
let that = this; |
|
|
|
|
if (that.amoutstatus == 2) { |
|
|
|
|
uni.showToast({ |
|
|
|
|
@ -161,6 +277,7 @@ |
|
|
|
|
if (that.inputPhone == '') { |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: '请输入充值号码', |
|
|
|
|
duration: 2000, |
|
|
|
|
icon: "none" |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
@ -168,6 +285,7 @@ |
|
|
|
|
if (that.inputPhone.length != 11) { |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: '请输入正确充值号码', |
|
|
|
|
duration: 2000, |
|
|
|
|
icon: "none" |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
@ -175,9 +293,10 @@ |
|
|
|
|
if (that.inputAmount == '') { |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: '请选择价格', |
|
|
|
|
duration: 2000, |
|
|
|
|
icon: "none" |
|
|
|
|
}); |
|
|
|
|
return; |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: '提交订单...', |
|
|
|
|
@ -185,7 +304,7 @@ |
|
|
|
|
duration: 2000, |
|
|
|
|
success() { |
|
|
|
|
uni.navigateTo({ |
|
|
|
|
url: '../unionComfirmation/unionComfirmation?orderPrice=' + that.orderPrice + |
|
|
|
|
url: '../unionComfirmation/unionComfirmation?orderPrice=' + that.price + |
|
|
|
|
'&payPrice=' + that.inputAmount + '&rechargeContent=' + that.inputPhone + |
|
|
|
|
'&rechargeModel=' + that.amoutType + |
|
|
|
|
'&objectId=' + that.inputAmountId + '&rechargeType=' + that.swiperCurrent |
|
|
|
|
@ -199,9 +318,68 @@ |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
|
page { |
|
|
|
|
background-color: #f5f5f5; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.popImg { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 430px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.swiperHead { |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.swiperHead scroll-view { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: row; |
|
|
|
|
flex-wrap: nowrap; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.swiperTab { |
|
|
|
|
display: inline-flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.swiperCont { |
|
|
|
|
width: 100%; |
|
|
|
|
padding-top: 5px; |
|
|
|
|
padding-bottom: 20px; |
|
|
|
|
background-color: #ffffff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* #ifdef H5 */ |
|
|
|
|
.swiperHead { |
|
|
|
|
top: 44px; |
|
|
|
|
z-index: 10; |
|
|
|
|
width: 100%; |
|
|
|
|
background: #FFFFFF; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* #endif */ |
|
|
|
|
|
|
|
|
|
.swiper { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 500rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.swiperItem { |
|
|
|
|
overflow: auto; |
|
|
|
|
background: #ffffff; |
|
|
|
|
color: #333333; |
|
|
|
|
font-size: 30upx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.block { |
|
|
|
|
width: 94%; |
|
|
|
|
padding: 60upx 3%; |
|
|
|
|
padding: 15px 3%; |
|
|
|
|
|
|
|
|
|
.my { |
|
|
|
|
width: 80%; |
|
|
|
|
@ -224,55 +402,63 @@ |
|
|
|
|
padding: 20upx 0; |
|
|
|
|
|
|
|
|
|
.box { |
|
|
|
|
width: 30%; |
|
|
|
|
width: 29%; |
|
|
|
|
margin-left: 1%; |
|
|
|
|
margin-right: 2%; |
|
|
|
|
margin-top: 20upx; |
|
|
|
|
margin-bottom: 20upx; |
|
|
|
|
float: left; |
|
|
|
|
height: 120upx; |
|
|
|
|
height: 150upx; |
|
|
|
|
// line-height: 120upx; |
|
|
|
|
display: inline-grid; |
|
|
|
|
// display: inline-grid; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
text-align: center; |
|
|
|
|
box-shadow: 0upx 0upx 4upx #666666; |
|
|
|
|
border: 1px solid #f1f1f1; |
|
|
|
|
font-size: 36upx; |
|
|
|
|
color: #089bf5; |
|
|
|
|
color: #333333; |
|
|
|
|
|
|
|
|
|
&.on { |
|
|
|
|
background-color: #089bf5; |
|
|
|
|
color: #ffffff; |
|
|
|
|
background-color: #ecf5fe; |
|
|
|
|
border: 1px solid #089bf5; |
|
|
|
|
color: #089bf5; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.heTitle { |
|
|
|
|
width: 100%; |
|
|
|
|
font-size: 15px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.bombtn { |
|
|
|
|
position: fixed; |
|
|
|
|
height: 45px; |
|
|
|
|
bottom: 20px; |
|
|
|
|
border-radius: 6px; |
|
|
|
|
|
|
|
|
|
.payem { |
|
|
|
|
height: 45px; |
|
|
|
|
line-height: 45px; |
|
|
|
|
text-align: center; |
|
|
|
|
background-color: #007AFF; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
border-radius: 6px 0 0 6px; |
|
|
|
|
.boxchil { |
|
|
|
|
border-radius: 0 0 5px 5px; |
|
|
|
|
background-color: #f0f0f0; |
|
|
|
|
margin-top: 6px; |
|
|
|
|
color: #999999; |
|
|
|
|
|
|
|
|
|
&.on { |
|
|
|
|
background-color: #089bf5; |
|
|
|
|
color: #ffffff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.paybtn { |
|
|
|
|
height: 45px; |
|
|
|
|
line-height: 45px; |
|
|
|
|
text-align: center; |
|
|
|
|
background-color: #F8A628; |
|
|
|
|
border-radius: 0 6px 6px 0; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
.contcil { |
|
|
|
|
color: #999999; |
|
|
|
|
|
|
|
|
|
&.on { |
|
|
|
|
// background-color: #089bf5; |
|
|
|
|
color: #089bf5; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.right-left-scroll { |
|
|
|
|
white-space: nowrap; |
|
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
|
.content { |
|
|
|
|
display: inline-block; |
|
|
|
|
color: #c1b569; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
杨杰
