998 lines
24 KiB
Vue
998 lines
24 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar title=" " :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
|
||
title-size='36' height='36' id="navbar" :custom-back="btnfanhui">
|
||
</u-navbar>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uFXXFw4LzhA0m6n8Ui4F" class="bj" mode=""></image>
|
||
<view class="jilu" @click="btnjilu">
|
||
记录
|
||
</view>
|
||
<view class="caozuo">
|
||
<image class="czbj" src="https://api.ccttiot.com/smartmeter/img/static/u2FepRO7UQ0k1b5nceB3" mode=""></image>
|
||
<view class="topname">
|
||
深度酒吧
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="bangding">
|
||
<view class="lt">
|
||
<view class="zhuozi">
|
||
绑定桌号：<text v-if="yonghuobj.boothNo">{{yonghuobj.boothNo}}</text> <text v-else>未绑定</text>
|
||
</view>
|
||
<view class="sm">
|
||
绑定桌号，即可解锁对应桌台的爆灯器
|
||
</view>
|
||
</view>
|
||
<view v-if="yonghuobj.boothNo" class="rt" @click="jbflag = true">
|
||
解绑/换绑 <image src="https://api.ccttiot.com/smartmeter/img/static/uYIshjyTMzRFKve7Ensk" mode=""></image>
|
||
</view>
|
||
<view v-else class="rt" @click="smflag = true">
|
||
去绑定 <image src="https://api.ccttiot.com/smartmeter/img/static/uYIshjyTMzRFKve7Ensk" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="shengyu">
|
||
剩余爆灯次数
|
||
</view>
|
||
<view v-if="yonghuobj.boothNo" @click="btnbaodeng" class="cishu" style="width: 254rpx;height: 254rpx;color: #fff;margin: auto;margin-top: 20rpx;display: flex;align-items: center;justify-content: center;position: relative;">
|
||
{{shengyuobj.number == null ? '0' : shengyuobj.number}}
|
||
<image style="position: absolute;top: 0;left: 0;width: 254rpx;height: 254rpx;z-index: -1;" src="https://api.ccttiot.com/smartmeter/img/static/u6fSBspPfzWYaBRVucc5" mode=""></image>
|
||
</view>
|
||
<view v-if="yonghuobj.boothNo" @click="btnbaodeng" class="" style="width: 100%;text-align: center;margin-top: 30rpx;">
|
||
{{countdown > 0 ? `请等待${countdown}秒` : '点击爆灯'}}
|
||
</view>
|
||
<view class="cishu" v-else>
|
||
{{shengyuobj.number == null ? '0' : shengyuobj.number}}
|
||
</view>
|
||
<view class="chongzhi" @click="czflag = true">
|
||
充值
|
||
</view>
|
||
</view>
|
||
<!-- 解除绑定弹窗 -->
|
||
<view class="delbd" v-if="jbflag">
|
||
<image class="cha" @click="jbflag = false" src="https://api.ccttiot.com/smartmeter/img/static/uVJumKNddHRlp0EmzTx7" mode=""></image>
|
||
<view class="zhuohao">
|
||
<view class="taihao">
|
||
绑定桌号
|
||
</view>
|
||
<view class="d15">
|
||
{{yonghuobj.boothNo}}
|
||
</view>
|
||
</view>
|
||
<view class="jcbd" @click="btnjiebang">
|
||
解除绑定 <image src="https://api.ccttiot.com/smartmeter/img/static/uVJumKNddHRlp0EmzTx7" mode=""></image>
|
||
</view>
|
||
<view class="ghbd" @click="btngenghuan">
|
||
更换桌号 <image src="https://api.ccttiot.com/smartmeter/img/static/usK85jkGXw491hI1ItJo" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="mask" v-if="jbflag"></view>
|
||
<!-- 充值弹窗 -->
|
||
<view class="cztc" v-if="czflag">
|
||
<image class="cha" @click="czflag = false" src="https://api.ccttiot.com/smartmeter/img/static/uVJumKNddHRlp0EmzTx7" mode=""></image>
|
||
<view class="top">
|
||
请先充值爆灯次数
|
||
</view>
|
||
<view class="sy">
|
||
剩余：{{shengyuobj.number == null ? '0' : shengyuobj.number}}次
|
||
</view>
|
||
<view class="list">
|
||
<view :class="['list_item',tabindex == index ? 'active' : '']" v-for="(item,index) in taocanlist" :key="item.suitId" @click="btnitem(index,item)">
|
||
{{item.lightingNums == null ? '--' : item.lightingNums}} <text>次</text>
|
||
</view>
|
||
</view>
|
||
<view class="zfaniu" @click="btnzf">
|
||
立即支付（￥{{price}}元）
|
||
</view>
|
||
</view>
|
||
<view class="mask" v-if="czflag"></view>
|
||
<!-- 扫码绑定弹窗 -->
|
||
<view class="ewmbd" v-if="smflag">
|
||
<image class="cha" @click="smflag = false" src="https://api.ccttiot.com/smartmeter/img/static/uVJumKNddHRlp0EmzTx7" mode=""></image>
|
||
<view class="top">
|
||
请扫描桌号二维码
|
||
</view>
|
||
<view class="toptwo">
|
||
进行绑定
|
||
</view>
|
||
<view class="hong">
|
||
绑定后即可使用对应桌台爆灯器
|
||
</view>
|
||
<view class="ewm">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uqZ6aQmUd79pHO6nSksa" mode=""></image>
|
||
</view>
|
||
<view class="saoma" @click="btnsaoma">
|
||
扫码绑定
|
||
</view>
|
||
</view>
|
||
<view class="mask" v-if="smflag"></view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
var xBlufi = require("@/components/blufi/xBlufi.js")
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "",
|
||
},
|
||
jbflag:false,
|
||
tabindex:0,
|
||
czflag:false,
|
||
smflag:false,
|
||
kazuoid:"",
|
||
taocanlist:[],
|
||
price:'',
|
||
suitId:'',
|
||
cishu:'',
|
||
user:{},
|
||
shengyuobj:{},
|
||
yonghuobj:{},
|
||
countdown: 0, // 倒计时秒数
|
||
countdownTimer: null, // 倒计时定时器
|
||
ver_dataflag: 1,
|
||
mac: '',
|
||
deviceid: '',
|
||
devicename: '',
|
||
devicesarr: [],
|
||
findDeviceTimer: null,
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
if(option.q){
|
||
const getQueryParam = (url, paramName) => {
|
||
const regex = new RegExp(`[?&]${paramName}=([^&]*)`)
|
||
const results = regex.exec(url)
|
||
return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
|
||
}
|
||
const sceneValue = option.q
|
||
const decodedValue = decodeURIComponent(sceneValue)
|
||
this.kazuoid = getQueryParam(decodedValue, 'k')
|
||
if (!this.kazuoid) {
|
||
uni.showToast({
|
||
title: '无效的二维码',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
uni.showLoading({
|
||
title: '绑定中...',
|
||
mask: true
|
||
})
|
||
this.$u.put(`/app/booth/${this.kazuoid}/bindUser`).then(res =>{
|
||
uni.hideLoading()
|
||
if(res.code == 200){
|
||
this.smflag = false
|
||
setTimeout(()=>{
|
||
this.getkazuo()
|
||
this.getcishu()
|
||
},500)
|
||
uni.showToast({
|
||
title: '绑定成功',
|
||
icon: 'success',
|
||
duration:2000
|
||
})
|
||
}else{
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration:2000
|
||
})
|
||
}
|
||
}).catch(() => {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '绑定失败，请重试',
|
||
icon: 'none',
|
||
duration:2000
|
||
})
|
||
})
|
||
}
|
||
},
|
||
onShow() {
|
||
xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent)
|
||
this.getinfo()
|
||
this.getkazuo()
|
||
this.gettaocan()
|
||
},
|
||
methods: {
|
||
// 点击返回到首页
|
||
btnfanhui(){
|
||
uni.setStorageSync('type',1)
|
||
uni.switchTab({
|
||
url:'/pages/index/index'
|
||
})
|
||
},
|
||
// 点击更换桌号
|
||
btngenghuan(){
|
||
let that = this
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要换绑桌号吗？',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
console.log('用户点击确定')
|
||
uni.scanCode({
|
||
onlyFromCamera: true,
|
||
scanType: ['qrCode'],
|
||
success: res => {
|
||
const getQueryParam = (url, paramName) => {
|
||
const regex = new RegExp(`[?&]${paramName}=([^&]*)`)
|
||
const results = regex.exec(url)
|
||
return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
|
||
}
|
||
const sceneValue = res.result
|
||
const decodedValue = decodeURIComponent(sceneValue)
|
||
that.kazuoid = getQueryParam(decodedValue, 'k')
|
||
if (!that.kazuoid) {
|
||
uni.showToast({
|
||
title: '无效的二维码',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
uni.showLoading({
|
||
title: '更换绑定中...',
|
||
mask: true
|
||
})
|
||
that.$u.put(`/app/booth/userChangeBind?usingBoothNo=${that.yonghuobj.boothNo}&changeBoothNo=${that.kazuoid}`).then(res =>{
|
||
uni.hideLoading()
|
||
if(res.code == 200){
|
||
that.smflag = false
|
||
setTimeout(()=>{
|
||
that.jbflag = false
|
||
that.getcishu()
|
||
that.getkazuo()
|
||
},500)
|
||
uni.showToast({
|
||
title: '更换绑定成功',
|
||
icon: 'success',
|
||
duration:2000
|
||
})
|
||
}else{
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration:2000
|
||
})
|
||
}
|
||
}).catch(() => {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '换绑失败，请重试',
|
||
icon: 'none',
|
||
duration:2000
|
||
})
|
||
})
|
||
},
|
||
fail: err => {
|
||
uni.showToast({
|
||
title: '扫描失败，请重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消')
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 点击解绑桌号
|
||
btnjiebang(){
|
||
let that = this
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要解绑吗？',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
console.log('用户点击确定')
|
||
that.$u.put(`/app/booth/${that.yonghuobj.boothNo}/unbind`).then(res =>{
|
||
uni.hideLoading()
|
||
if(res.code == 200){
|
||
that.smflag = false
|
||
setTimeout(()=>{
|
||
that.jbflag = false
|
||
that.yonghuobj = {}
|
||
that.getkazuo()
|
||
that.getcishu()
|
||
},500)
|
||
uni.showToast({
|
||
title: '解绑成功',
|
||
icon: 'success',
|
||
duration:2000
|
||
})
|
||
}else{
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration:2000
|
||
})
|
||
}
|
||
}).catch(() => {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '解绑失败，请重试',
|
||
icon: 'none',
|
||
duration:2000
|
||
})
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消')
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 判断离线连接蓝牙
|
||
findDevice() {
|
||
const matchedDevice = this.devicesarr.find(device => device.name.slice(-12) === this.mac.slice(-12))
|
||
if (matchedDevice) {
|
||
xBlufi.notifyStartDiscoverBle({
|
||
'isStart': false
|
||
})
|
||
xBlufi.notifyConnectBle({
|
||
isStart: true,
|
||
deviceId: matchedDevice.deviceId,
|
||
name: matchedDevice.name
|
||
})
|
||
this.deviceid = matchedDevice.deviceId
|
||
this.devicename = matchedDevice.name
|
||
} else {
|
||
this.findDeviceTimer = setTimeout(this.findDevice.bind(this), 1000)
|
||
}
|
||
},
|
||
// 获取附近蓝牙设备列表
|
||
funListenDeviceMsgEvent: function(options) {
|
||
switch (options.type) {
|
||
case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED:
|
||
if (!options.result) {
|
||
this.ver_dataflag = 1
|
||
this.findDevice()
|
||
}
|
||
break;
|
||
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
|
||
if (options.result) {
|
||
this.devicesarr = options.data
|
||
}
|
||
break;
|
||
case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
|
||
if (options.result == true) {
|
||
xBlufi.notifyInitBleEsp32({
|
||
deviceId: this.deviceid
|
||
})
|
||
this.deviceid = options.data.deviceId
|
||
this.name = this.name
|
||
setTimeout(() => {
|
||
this.ver_dataflag = 3
|
||
uni.hideLoading()
|
||
}, 2000)
|
||
} else {
|
||
uni.hideLoading()
|
||
this.findDevice()
|
||
}
|
||
break;
|
||
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
|
||
if (!options.result) {
|
||
// uni.showToast({
|
||
// title: '请开启蓝牙',
|
||
// icon: 'none',
|
||
// duration: 2000
|
||
// })
|
||
return
|
||
}
|
||
break;
|
||
}
|
||
},
|
||
// 点击立即支付
|
||
btnzf(){
|
||
this.$u.get(`/app/channel/list?appId=${this.$store.state.appid}`).then((res) => {
|
||
if (res.code == 200) {
|
||
let data = {
|
||
suitId:this.suitId,
|
||
appId:this.$store.state.appid,
|
||
channelId:res.data[0].channelId,
|
||
payAmount:this.price,
|
||
number:this.cishu
|
||
}
|
||
this.$u.post(`/app/order`,data).then(resp =>{
|
||
if(resp.code == 200){
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
timeStamp: resp.data.payParams.timeStamp,
|
||
nonceStr: resp.data.payParams.nonceStr,
|
||
package: resp.data.payParams.packageVal,
|
||
signType: resp.data.payParams.signType,
|
||
paySign: resp.data.payParams.paySign,
|
||
success: (respc) => {
|
||
console.log(respc, '支付成功')
|
||
this.$u.put(`/app/pay/refreshPayResult?no=${resp.data.pay.no}`).then((res) => { //刷新支付结果
|
||
this.czflag = false
|
||
this.getcishu()
|
||
})
|
||
},
|
||
fail(err) {
|
||
setTimeout(() => {
|
||
uni.hideLoading()
|
||
}, 1000)
|
||
console.log('取消或者支付失败')
|
||
}
|
||
})
|
||
}else{
|
||
uni.showToast({
|
||
title: resp.msg,
|
||
icon: 'none',
|
||
duration:2000
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 开始倒计时
|
||
startCountdown() {
|
||
this.countdown = 10
|
||
this.countdownTimer = setInterval(() => {
|
||
if (this.countdown > 0) {
|
||
this.countdown--
|
||
} else {
|
||
clearInterval(this.countdownTimer)
|
||
this.countdownTimer = null
|
||
}
|
||
}, 1000)
|
||
},
|
||
// 点击爆灯请求
|
||
btnbaodeng(){
|
||
if (this.shengyuobj.number == 0) {
|
||
uni.showToast({
|
||
title: `您当前没有爆灯次数，请先充值`,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
if (this.countdown > 0) {
|
||
uni.showToast({
|
||
title: `请等待${this.countdown}秒后再次点击`,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
if(this.yonghuobj.devices[0]){
|
||
if(this.yonghuobj.devices[0].onlineStatus == 0){
|
||
if(this.ver_dataflag == 3){
|
||
xBlufi.notifySendCustomData({
|
||
customData: "11time10@"
|
||
})
|
||
uni.showToast({
|
||
title: "爆灯成功",
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
this.getcishu()
|
||
this.startCountdown()
|
||
}else{
|
||
this.findDevice()
|
||
uni.showLoading({
|
||
title: '设备连接中...',
|
||
mask: true
|
||
})
|
||
}
|
||
}else{
|
||
this.$u.put(`/app/booth/${this.yonghuobj.boothId}/lighting`).then(res =>{
|
||
if(res.code == 200){
|
||
uni.showToast({
|
||
title: "爆灯成功",
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
this.getcishu()
|
||
this.startCountdown()
|
||
}else{
|
||
console.log(res.msg);
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}else{
|
||
console.log('木东西');
|
||
uni.showToast({
|
||
title: "该桌号暂无设备",
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
},
|
||
|
||
// 用户请求剩余次数
|
||
getcishu(){
|
||
this.$u.get(`/app/lightingNum/userLightingNum?storeId=8&userId=${this.user.userId}`).then(res =>{
|
||
if(res.code == 200){
|
||
this.shengyuobj = res.data
|
||
}
|
||
})
|
||
},
|
||
// 请求用户信息
|
||
getinfo(){
|
||
this.$u.get(`/getInfo`).then(res =>{
|
||
if(res.code == 200){
|
||
this.user = res.user
|
||
this.getcishu()
|
||
}
|
||
})
|
||
},
|
||
// 查询用户绑定卡座信息
|
||
getkazuo(){
|
||
this.$u.get(`/app/booth/getBindInfo`).then(res =>{
|
||
if(res.code == 200){
|
||
this.yonghuobj = res.data
|
||
console.log(res.data);
|
||
if(res.data.devices[0].onlineStatus == 0){
|
||
console.log('离线');
|
||
this.mac = res.data.devices[0].mac
|
||
if(this.ver_dataflag != 3){
|
||
this.findDevice()
|
||
}
|
||
}else if(res.data.devices[0].onlineStatus == 1){
|
||
console.log('在线');
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 请求充值套餐列表
|
||
gettaocan(){
|
||
this.$u.get(`/app/suit/list?pageNum=1&pageSize=999&storeId=8`).then(res =>{
|
||
if(res.code == 200){
|
||
this.taocanlist = res.rows
|
||
this.price = res.rows[0].rechargeAmount
|
||
this.suitId = res.rows[0].suitId
|
||
this.cishu = res.rows[0].lightingNums
|
||
}
|
||
})
|
||
},
|
||
// 点击切换高亮
|
||
btnitem(index,item){
|
||
this.tabindex = index
|
||
this.price = item.rechargeAmount
|
||
this.suitId = item.suitId
|
||
this.cishu = item.lightingNums
|
||
},
|
||
// 点击跳转到记录
|
||
btnjilu(){
|
||
uni.navigateTo({
|
||
url:'/pages/myorder/returned/index'
|
||
})
|
||
},
|
||
// 扫码绑定
|
||
btnsaoma(){
|
||
uni.scanCode({
|
||
onlyFromCamera: true,
|
||
scanType: ['qrCode'],
|
||
success: res => {
|
||
const getQueryParam = (url, paramName) => {
|
||
const regex = new RegExp(`[?&]${paramName}=([^&]*)`)
|
||
const results = regex.exec(url)
|
||
return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
|
||
}
|
||
const sceneValue = res.result
|
||
const decodedValue = decodeURIComponent(sceneValue)
|
||
this.kazuoid = getQueryParam(decodedValue, 'k')
|
||
if (!this.kazuoid) {
|
||
uni.showToast({
|
||
title: '无效的二维码',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
uni.showLoading({
|
||
title: '绑定中...',
|
||
mask: true
|
||
})
|
||
this.$u.put(`/app/booth/${this.kazuoid}/bindUser`).then(res =>{
|
||
uni.hideLoading()
|
||
if(res.code == 200){
|
||
this.smflag = false
|
||
setTimeout(()=>{
|
||
this.getkazuo()
|
||
this.getcishu()
|
||
},500)
|
||
uni.showToast({
|
||
title: '绑定成功',
|
||
icon: 'success',
|
||
duration:2000
|
||
})
|
||
}else{
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration:2000
|
||
})
|
||
}
|
||
}).catch(() => {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '绑定失败，请重试',
|
||
icon: 'none',
|
||
duration:2000
|
||
})
|
||
})
|
||
},
|
||
fail: err => {
|
||
uni.showToast({
|
||
title: '扫描失败，请重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.active{
|
||
background-color: #FF1818;
|
||
color: #fff !important;
|
||
text{
|
||
border: 1px solid #fff;
|
||
}
|
||
}
|
||
.ewmbd{
|
||
width: 750rpx;
|
||
height: 932rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 30rpx 30rpx 0 0;
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
z-index: 9;
|
||
.hong{
|
||
font-size: 26rpx;
|
||
color: #F72B2B;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 42rpx;
|
||
}
|
||
.top{
|
||
font-weight: 600;
|
||
font-size: 48rpx;
|
||
color: #3D3D3D;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 106rpx;
|
||
}
|
||
.toptwo{
|
||
font-weight: 600;
|
||
font-size: 48rpx;
|
||
color: #3D3D3D;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
.saoma{
|
||
width: 238rpx;
|
||
height: 68rpx;
|
||
background: #010000;
|
||
border-radius: 47rpx 47rpx 47rpx 47rpx;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
margin: auto;
|
||
margin-top: 112rpx;
|
||
padding-top: 16rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.ewm{
|
||
width: 246rpx;
|
||
height: 246rpx;
|
||
margin: auto;
|
||
margin-top: 90rpx;
|
||
image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.cha{
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
position: absolute;
|
||
right: 26rpx;
|
||
top: -100rpx;
|
||
}
|
||
}
|
||
.mask{
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: rgba(0, 0, 0, .3);
|
||
position: fixed;
|
||
z-index: 8;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
.cztc{
|
||
width: 646rpx;
|
||
max-height: 858rpx;
|
||
padding-bottom: 40rpx;
|
||
box-sizing: border-box;
|
||
background: #FFFFFF;
|
||
position: fixed;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
top: 418rpx;
|
||
border-radius: 20rpx;
|
||
z-index: 9;
|
||
.zfaniu{
|
||
width: 518rpx;
|
||
height: 76rpx;
|
||
background: #FF1818;
|
||
border-radius: 38rpx 38rpx 38rpx 38rpx;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
line-height: 76rpx;
|
||
margin: auto;
|
||
margin-top: 52rpx;
|
||
}
|
||
.list{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
width: 100%;
|
||
padding: 0 54rpx;
|
||
box-sizing: border-box;
|
||
.list_item{
|
||
width: 252rpx;
|
||
height: 118rpx;
|
||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
border: 2rpx solid #FF1818;
|
||
text-align: center;
|
||
margin-top: 36rpx;
|
||
font-weight: 700;
|
||
font-size: 72rpx;
|
||
color: #FF1818;
|
||
position: relative;
|
||
padding-top: 10rpx;
|
||
box-sizing: border-box;
|
||
text{
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
display: inline-block;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
background-color: #FF1818;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
right:67rpx;
|
||
top: 56rpx;
|
||
}
|
||
}
|
||
}
|
||
.sy{
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 40rpx;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
.top{
|
||
font-size: 40rpx;
|
||
color: #3D3D3D;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 62rpx;
|
||
}
|
||
.cha{
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
position: absolute;
|
||
right: 0;
|
||
top: -100rpx;
|
||
}
|
||
}
|
||
.delbd{
|
||
width: 646rpx;
|
||
height: 512rpx;
|
||
background: #FFFFFF;
|
||
position: fixed;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
top: 696rpx;
|
||
z-index: 9;
|
||
border-radius: 20rpx;
|
||
.cha{
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
position: absolute;
|
||
right: 0;
|
||
top: -100rpx;
|
||
}
|
||
.taihao{
|
||
font-size: 40rpx;
|
||
color: #3D3D3D;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 62rpx;
|
||
}
|
||
.d15{
|
||
font-size: 68rpx;
|
||
color: #3D3D3D;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 14rpx;
|
||
}
|
||
.ghbd{
|
||
width: 242rpx;
|
||
height: 60rpx;
|
||
border-radius: 47rpx 47rpx 47rpx 47rpx;
|
||
border: 2rpx solid #000000;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
color: #010000;
|
||
align-items: center;
|
||
padding-left: 44rpx;
|
||
padding-right: 8rpx;
|
||
box-sizing: border-box;
|
||
margin: auto;
|
||
margin-top: 26rpx;
|
||
image{
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
}
|
||
}
|
||
.jcbd{
|
||
width: 242rpx;
|
||
height: 60rpx;
|
||
background: #010000;
|
||
border-radius: 47rpx 47rpx 47rpx 47rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
align-items: center;
|
||
padding-left: 44rpx;
|
||
padding-right: 8rpx;
|
||
box-sizing: border-box;
|
||
margin: auto;
|
||
margin-top: 72rpx;
|
||
image{
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
}
|
||
}
|
||
}
|
||
.caozuo{
|
||
width: 700rpx;
|
||
margin: auto;
|
||
margin-top: 366rpx;
|
||
position: relative;
|
||
padding: 0 62rpx;
|
||
box-sizing: border-box;
|
||
.chongzhi{
|
||
width: 154rpx;
|
||
height: 52rpx;
|
||
background: #F72B2B;
|
||
border-radius: 26rpx 26rpx 26rpx 26rpx;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
line-height: 52rpx;
|
||
margin: auto;
|
||
margin-top: 84rpx;
|
||
}
|
||
.cishu{
|
||
font-size: 144rpx;
|
||
color: #3D3D3D;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 84rpx;
|
||
}
|
||
.shengyu{
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 32rpx;
|
||
}
|
||
.bangding{
|
||
margin-top: 36rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 34rpx;
|
||
.lt{
|
||
.zhuozi{
|
||
font-weight: 600;
|
||
font-size: 34rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
.sm{
|
||
font-size: 20rpx;
|
||
color: #7C7C7C;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
.rt{
|
||
padding-right: 6rpx;
|
||
width: 178rpx;
|
||
height: 46rpx;
|
||
background: #D8D8D8;
|
||
border-radius: 23rpx 23rpx 23rpx 23rpx;
|
||
font-size: 24rpx;
|
||
color: #010000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-left: 24rpx;
|
||
box-sizing: border-box;
|
||
image{
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
}
|
||
}
|
||
}
|
||
.topname{
|
||
width: 100%;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
font-size: 44rpx;
|
||
color: #3D3D3D;
|
||
padding-top: 94rpx;
|
||
box-sizing: border-box;
|
||
padding-bottom: 62rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.line{
|
||
width: 578rpx;
|
||
height: 6rpx;
|
||
border: 1rpx dashed #B8B8B8;
|
||
margin-top: 6rpx;
|
||
}
|
||
.czbj{
|
||
width: 700rpx;
|
||
height: 1026rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
z-index: -1;
|
||
}
|
||
}
|
||
.jilu{
|
||
width: 140rpx;
|
||
height: 62rpx;
|
||
background: #010000;
|
||
font-weight: 600;
|
||
font-size: 30rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
border-radius: 50rpx 0 0 50rpx;
|
||
position: fixed;
|
||
right: 0;
|
||
top: 350rpx;
|
||
padding-top: 10rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.bj{
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: -1;
|
||
}
|
||
|
||
</style> |