smartswrtch-app/page_components/bindszthr.vue

1212 lines
29 KiB
Vue
Raw Normal View History

2024-09-25 18:30:46 +08:00
<template>
<view class="page">
<u-navbar title="设备设置" :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
title-size='36' height='50'></u-navbar>
<view class="card">
<!-- <view class="li" @click="btnwifi">
<view class="tit">
WiFi配网
</view>
<view class="info">
<view class="txt">
{{listobj.wifi == null ? '' : listobj.wifi}}
</view>
<view class="iconfont icon-xiangyou1"></view>
</view>
</view> -->
<view class="toptit">
套餐模版配置
</view>
<view class="shebeiname">
2024-09-29 19:32:37 +08:00
<!-- <view class="icon_img">
2024-11-08 18:01:35 +08:00
<image src="https://api.ccttiot.com/smartmeter/img/static/ueeiLjBHkm48X5WRSxbz" mode="aspectFit"></image>
2024-09-25 18:30:46 +08:00
<view class="">套餐模版</view>
2024-09-29 19:32:37 +08:00
</view> -->
2024-09-25 18:30:46 +08:00
<view class="shebeitit">
能更方便快速的配置设备套餐
</view>
</view>
2024-09-29 19:32:37 +08:00
<!-- <view @click="btntc" style="width: 100%;height: 100rpx;line-height: 100rpx;display: flex;justify-content: space-between;border-radius: 20rpx;padding-left: 30rpx;padding-right: 30rpx;box-sizing: border-box;background-color: #fff;margin-top: 20rpx;">
2024-09-25 18:30:46 +08:00
<view class="">
新建套餐
</view>
<view style="padding-top: 6rpx;" class="iconfont icon-xiangyou1"></view>
2024-09-29 19:32:37 +08:00
</view> -->
2024-09-25 18:30:46 +08:00
<view class="buttit">
<view class="xztclist" style="margin-bottom: 30rpx;font-size: 36rpx;">
2024-11-08 18:01:35 +08:00
<image src="https://api.ccttiot.com/smartmeter/img/static/uQKZrXJmLFnd9kscyk9S" mode="aspectFit"></image> <text>选择套餐列表</text>
2024-09-25 18:30:46 +08:00
</view>
<view class="taocanlist" v-if="list.length > 0">
<view v-for="(item,index) in list" :key="index" :class="['tc_list', { active: isActive.includes(item.suitId) }]" @click="toindex(item.suitId)">
2024-09-29 19:32:37 +08:00
<text style="font-weight: 600;font-size: 29rpx">{{item.name}}</text>
<view class="">
<text style="margin-top: 10rpx;" v-if="item.feeType == 1">计时收费</text>
<text style="margin-top: 10rpx;" v-if="item.feeType == 2">按量收费</text>
<text style="margin-top: 10rpx;" v-if="item.feeType == 3">分时段按量收费</text>
<text style="margin-top: 10rpx;" v-if="item.feeType == 4">分时段按时收费</text>
(<text style="margin-top: 10rpx;" v-if="item.feeMode == 1">单次收费</text>
<text style="margin-top: 10rpx;" v-if="item.feeMode == 2">智能收费</text>)
<text style="width: 20rpx;"></text>
<text style="margin-top: 10rpx;" v-if="item.feeType == 3 || item.feeType == 4">押金{{item.price}}</text>
<text style="margin-top: 10rpx;" v-if="item.timeUnit == 2 && item.feeType != 3 && item.feeType != 4">{{item.value}} {{item.price}}</text>
<text style="margin-top: 10rpx;" v-if="item.timeUnit == 3 && item.feeType != 3 && item.feeType != 4">{{item.value}} {{item.price}}</text>
<text style="margin-top: 10rpx;" v-if="item.timeUnit == 4 && item.feeType != 3 && item.feeType != 4">{{item.value}} {{item.price}}</text>
</view>
<view class="">
备注{{item.description == null ? '--' : item.description}}
</view>
2024-09-25 18:30:46 +08:00
</view>
</view>
<view class="" style="text-align: center;" v-else>
2024-11-08 18:01:35 +08:00
<image style="width: 276rpx;height: 134rpx;margin-top: 140rpx;" src="https://api.ccttiot.com/smartmeter/img/static/u9LzRQG6pMldWZdT4mhW" mode="aspectFit"></image>
2024-09-25 18:30:46 +08:00
<view class="" style="color: #ccc;margin-top: 20rpx;">暂无套餐请先添加</view>
</view>
</view>
2024-09-29 19:32:37 +08:00
<view class="btnanniu">
<view @click="btntc" style="width: 36%;font-size: 36rpx;height: 100rpx;line-height: 100rpx;border-radius: 10rpx;box-sizing: border-box;color: #8883F0;border: 1px solid #8883F0;text-align: center;">
<view class="">
新建套餐
</view>
</view>
<view class="btnxyb" @click="btnxia">
完成设置(3/3)
</view>
2024-09-25 18:30:46 +08:00
</view>
</view>
<view v-if="btnmsk" style="width: 100%;height: 100vh;position: fixed;top: 0;left: 0;background-color: #000;opacity: .1;z-index: 999;"></view>
2024-09-29 19:32:37 +08:00
<!-- 新用户弹窗提示 -->
<view class="xints" v-if="xintsflag">
2024-11-08 18:01:35 +08:00
<image src="https://api.ccttiot.com/smartmeter/img/static/uQ7YMvgkBSfZc28IA5Fm" mode="aspectFit"></image>
2024-09-29 19:32:37 +08:00
<view class="wxts">
商户反洗钱协议
</view>
<view class="huany">
欢迎来到创想物联
</view>
<scroll-view scroll-y="true" @scrolltolower="onScrollToLower" class="scrolls">
<view v-html="contwz"></view>
</scroll-view>
<view class="yiyues" v-if="countdown == 0" @click="btnzx">
同意
</view>
<view class="yiyue" v-else>
已阅 {{countdown}}
</view>
</view>
<view class="" v-if="xintsflag" style="width: 100%;height: 100vh;position: fixed;top: 0;left: 0;background-color: #000;opacity: .5;z-index: 1;"></view>
2024-09-25 18:30:46 +08:00
</view>
</template>
<script>
var xBlufi = require("@/page_components/blufi/xBlufi.js")
export default {
data() {
return {
2024-09-29 19:32:37 +08:00
xintsflag:false,
2024-09-25 18:30:46 +08:00
btnmsk:false,
qrResult:'',
bluetoothflag: false,
shibaiflag: false,
bgc: {
backgroundColor: "#8883f0",
},
showloading: false,
showfz: false,
show: false,
showshop: false,
id: '',
xgname: '',
deviceInfo: {},
groupList: {},
showpopup: false,
remake: '',
price: '',
showpeice: false,
showremake: false,
showmc: false,
pagenum: 1,
wateringList: [],
pagesize: 10,
isLoading: false,
noMoreData: false,
total: 0,
storeId: '',
devicesList: [],
setMode: null,
mac: '',
name: '',
deviceId: '',
isMch: false,
taocan: '',
token: '',
userImgs: '',
url: '',
tclist:[],
list:[],
2024-09-29 19:32:37 +08:00
isActive: [],
countdown: 10, // 初始倒计时时间
intervalId: null,
2024-10-16 13:32:50 +08:00
contwz:'',
2024-11-05 18:03:35 +08:00
sn:'',
arrlists:[]
2024-09-25 18:30:46 +08:00
}
},
onLoad(option) {
let id = option.id
this.id = id
2024-10-16 13:32:50 +08:00
this.sn = option.sn
2024-09-25 18:30:46 +08:00
},
onShow() {
this.wateringList = []
this.setMode == null
this.taocan = ''
// this.getQiniuToken()
// this.getgroup()
// this.gettanc()
this.getlistobj(this.id)
this.getao()
this.getlist()
2024-09-29 19:32:37 +08:00
this.getxieyi()
2024-09-25 18:30:46 +08:00
},
onUnload: function() {
2024-09-29 19:32:37 +08:00
if (this.intervalId) {
clearInterval(this.intervalId);
}
2024-09-25 18:30:46 +08:00
xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
wx.closeBLEConnection({
deviceId: this.deviceId,
})
},
// 分享到好友(会话)
onShareAppMessage: function() {
return {
title: '创想物联',
path: '/pages/shouye/index'
}
},
// 分享到朋友圈
onShareTimeline: function() {
return {
title: '创想物联',
query: '',
path: '/pages/shouye/index'
}
},
methods: {
2024-09-29 19:32:37 +08:00
// 滚动到底部
onScrollToLower() {
this.startCountdown()
},
startCountdown() {
if(this.intervalId){
}else{
this.intervalId = setInterval(() => {
if (this.countdown > 0) {
this.countdown--;
} else {
clearInterval(this.intervalId); // 清除定时器
}
}, 1000); // 每秒执行一次
}
},
getxieyi(){
this.$u.get(`/app/article/licence/mch`).then(res => {
if(res.code == 200){
this.contwz = res.data.content
}
})
},
getuser(){
this.$u.get("/app/user/userInfo").then((res) => {
if (res.code == 200) {
if(res.data.readMchLicence == false){
this.xintsflag = true
}else{
this.xintsflag = false
}
}
})
},
btnzx(){
this.$u.put(`/app/user/readMchLicence`).then((res) => {
if (res.code == 200) {
uni.reLaunch({
url:'/pages/index/index'
})
// this.getuser()
// this.xintsflag = false
}
})
},
2024-09-25 18:30:46 +08:00
toindex(suitId){
const index = this.isActive.indexOf(suitId);
if (index !== -1) {
// 如果存在,则删除它
this.isActive.splice(index, 1);
console.log('删除', this.isActive);
} else {
// 如果不存在,则添加到数组末尾
this.isActive.push(suitId);
console.log('添加', this.isActive);
}
},
getlist() {
let data = {
pageNum: 1,
pageSize: 99
}
this.$u.get(`/app/suit/tempList`, data).then((res) => {
if (res.code == 200) {
this.getao()
this.list = res.rows
// this.list = this.list.map(item => ({
// ...item,
// tcidlist: this.tcidlist
// }))
}
});
},
getao() {
this.$u.get(`/app/suit/listByDeviceId/${this.id}`).then(res => {
if (res.code == 200) {
this.tclist = res.data
if (res.data.length <= 1) {
res.data.forEach(item => {
this.taocan += item.name
})
} else {
res.data.forEach(item => {
this.taocan += item.name + ','
})
}
}
})
},
btntc() {
uni.navigateTo({
url: '/page_fenbao/statulist/taocanlist/addtaocan/index?id=' + this.id
})
},
btnlyqx() {
this.shibaiflag = false
this.bluetoothflag = false
},
getlistobj(id) {
this.$u.get("/app/device/" + id).then((res) => {
if (res.code == 200) {
this.listobj = res.data
2024-11-05 18:03:35 +08:00
this.arrlists.push(res.data)
uni.setStorageSync('tcidlist', this.arrlists)
2024-09-25 18:30:46 +08:00
}
})
},
2024-11-21 17:40:48 +08:00
// 点击进行下一步
2024-09-25 18:30:46 +08:00
btnxia(){
if(this.isActive.length == 0){
2024-09-29 19:32:37 +08:00
// uni.showModal({
// title: '提示',
// content: '还未绑定套餐,请先绑定或创建套餐',
// success: function(res) {
// if (res.confirm) {
// this.btnmsk = false
// // uni.switchTab({
// // url:'/pages/index/index'
// // })
// }
// }
// })
uni.showToast({
title: '还未绑定套餐,请先绑定或新建套餐',
icon: 'none',
duration: 3000,
2024-09-25 18:30:46 +08:00
})
}else{
2024-09-29 19:32:37 +08:00
this.$u.get("/app/user/userInfo").then((res) => {
if (res.code == 200) {
if(res.data.readMchLicence == false){
this.xintsflag = true
// this.startCountdown()
}else{
this.xintsflag = false
this.$u.delete(`/app/suit/delByDevice/${this.deviceId}`).then(res => {})
let numArr = this.isActive.map(item => parseInt(item, 10))
let data = {
deviceId: this.id,
suitIds: numArr
}
this.$u.put(`/app/device`, data).then((res) => {
if (res.code == 200) {
uni.showToast({
title: res.msg,
icon: 'success',
duration: 1000,
})
this.getao()
2024-10-16 13:32:50 +08:00
let data = {
deviceNo: this.sn
}
2024-09-29 19:32:37 +08:00
setTimeout(() => {
this.btnmsk = false
uni.reLaunch({
2024-11-18 14:36:17 +08:00
url:'/pages/shouye/index'
})
2024-09-29 19:32:37 +08:00
}, 1000)
}else{
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1000,
})
this.btnmsk = false
}
})
}
}
})
2024-09-25 18:30:46 +08:00
}
},
// 点击wifi进行配网
btnwifi() {
this.shibaiflag = false
this.bluetoothflag = true
// console.log(this.deviceId,'idididididdidii');
if (this.setMode == null) {
xBlufi.initXBlufi(1)
xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent);
xBlufi.notifyStartDiscoverBle({
'isStart': true
})
// 停止蓝牙搜索
setTimeout(() => {
xBlufi.notifyStartDiscoverBle({
'isStart': false
})
xBlufi.notifyConnectBle({
isStart: true,
deviceId: this.deviceId,
name: this.name
})
xBlufi.notifyInitBleEsp32({
deviceId: this.deviceId
})
let name = ''
let index = this.name.indexOf('-');
if (index !== -1) {
name = this.name.slice(index + 1);
}
let data = {
storeId: this.storeId,
mac: this.mac
}
this.$u.put('/app/device/bind', data).then((res) => {
if (res.code == 200) {
uni.hideLoading();
this.shibaiflag = false
this.bluetoothflag = false
uni.removeStorageSync('mac');
let systemInfo = uni.getSystemInfoSync();
if (systemInfo.platform == 'android') {
// 当前设备是 Android
uni.navigateTo({
url: '/page_components/wifilist/index?deviceId=' + this
.deviceId + '&name=' + this.name
})
} else if (systemInfo.platform == 'ios') {
// 当前设备是 iOS
uni.navigateTo({
url: '/page_fenbao/device/wifivideo?deviceId=' + this
.deviceId + '&name=' + this.name
})
}
} else if (res.msg == '设备编号和mac不能同时为空') {
this.shibaiflag = true
this.bluetoothflag = false
// uni.showToast({
// title: '连接失败',
// icon: 'none',
// duration: 2000
// });
} else {
// uni.showToast({
// title: res.msg,
// icon: 'none',
// duration: 2000
// });
// uni.navigateBack()
}
})
}, 1000)
} else {
let name = ''
let index = this.name.indexOf('-');
if (index !== -1) {
name = this.name.slice(index + 1);
}
let data = {
storeId: this.storeId,
mac: this.mac
}
this.$u.put('/app/device/bind', data).then((res) => {
if (res.code == 200) {
// uni.showToast({
// title: '绑定成功',
// icon: 'none',
// duration: 2000
// })
this.shibaiflag = false
this.bluetoothflag = false
uni.hideLoading();
uni.removeStorageSync('mac');
let systemInfo = uni.getSystemInfoSync();
if (systemInfo.platform == 'android') {
// 当前设备是 Android
uni.navigateTo({
url: '/page_components/wifilist/index?deviceId=' + this.deviceId +
'&name=' + this.name
})
} else if (systemInfo.platform == 'ios') {
// 当前设备是 iOS
uni.navigateTo({
url: '/page_fenbao/device/wifivideo?deviceId=' + this.deviceId +
'&name=' + this.name
})
}
} else {
if (res.msg == '设备编号和mac不能同时为空') {
this.shibaiflag = true
this.bluetoothflag = false
uni.hideLoading()
// uni.showToast({
// title: '连接失败',
// icon: 'none',
// duration: 2000
// })
} else {
this.shibaiflag = true
this.bluetoothflag = false
uni.hideLoading()
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
})
// uni.navigateBack()
}
}
})
}
},
funListenDeviceMsgEvent: function(options) {
switch (options.type) {
case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_MY_DATA:
let loadPercent = options.data;
let loadText = '文件读取中'
// console.log("文件读取中", options.data);
break;
case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
let ver_data = this.parseCustomData(options.data)
this.setMode = Math.floor(ver_data.setMode / 60)
console.log("1收到设备发来的自定义数据结果", ver_data, this.setMode)
break;
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
if (options.result) {
let devicesarr = options.data
// console.log(devicesarr,'devicesarrdevicesarr');
devicesarr.forEach(device => {
const mac = device.name.substring(5)
if (device.name.slice(5, 17) == this.qrResult) {
this.deviceId = device.deviceId
this.name = device.name
this.mac = device.name.slice(5, 17)
// console.log(this.mac, 'macmacmac');
// this.devicesList = uniqueDevicesList;
}
})
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
// console.log("连接回调:" + JSON.stringify(options));
if (options.result) {
this.bluetoothflag = false
uni.hideLoading();
// uni.showToast({
// title: '连接成功',
// icon: 'none'
// });
{
console.log("连接回调options.data.deviceId" + options.data.deviceId,
"连接回调options.data.name" + options.data.name);
}
} else {
this.shibaiflag = true
this.bluetoothflag = false
uni.hideLoading()
// uni.showToast({
// title: '设备离线或不在范围内',
// icon: 'none',
// duration: 2000
// })
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
if (!options.result) {
setTimeout(() => {
uni.hideLoading()
this.bluetoothflag = false
}, 3000)
console.log("蓝牙未开启", options);
// uni.showToast({
// title: '蓝牙未开启',
// icon: 'none',
// duration: 3000
// });
return
} else {
// this.searching = true
//蓝牙搜索开始
// _this.setData({
// searching: true
// });
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_STOP:
if (options.result) {
let uniqueDevicesList = Array.from(new Set(this.devicesList));
// 将去重后的数组重新赋值给 this.devicesList
this.devicesList = uniqueDevicesList;
let list = []
filteredDevices.forEach(device => {
// 从设备名称中提取 MAC 地址(假设 MAC 地址是设备名称的后6个字符
let macFromName = device.name.substring(device.name.length - 12);
this.$u.get(`/app/device/${macFromName}/isBind`).then((res) => {
if (res.data == false) {
list.push(device)
} else {
}
})
});
setTimeout(() => {
this.devicesList = list
}, 200)
console.log('蓝牙停止搜索ok');
} else {
//蓝牙停止搜索失败
console.log('蓝牙停止搜索失败');
}
this.searching = false
// _this.setData({
// searching: false
// });
break;
}
},
parseCustomData(data) {
// 将字符串按照 "@" 分割成数组
const dataArray = data.split('@');
// 根据约定,解析各个字段的值
const voltage = parseFloat(dataArray[0].substring(1)); // 去除前缀 "V",并将字符串转换为浮点数
const switchState = dataArray[1].substring(1); // 去除前缀 "S"
const current = parseFloat(dataArray[2].substring(1)); // 去除前缀 "A",并将字符串转换为浮点数
const power = parseFloat(dataArray[4].substring(1)); // 去除前缀 "P",并将字符串转换为浮点数
const remainingPower = parseFloat(dataArray[5].substring(1)); // 去除前缀 "M",并将字符串转换为浮点数
const setMode = dataArray[6].substring(1); // 去除前缀 "T"
// 返回解析后的数据对象
return {
voltage,
switchState,
current,
power,
remainingPower,
setMode
};
},
}
}
</script>
<style lang="scss">
2024-09-29 19:32:37 +08:00
.xints{
width: 584rpx;
height: 798rpx;
background: #FFFFFF;
border-radius: 24rpx 24rpx 24rpx 24rpx;
position: fixed;
top: 332rpx;
left: 50%;
transform: translateX(-50%);
z-index: 3;
.wxts{
position: fixed;
top: 34rpx;
left: 50%;
transform: translateX(-50%);
font-size: 32rpx;
color: #3D3D3D;
z-index: 4;
}
.huany{
position: fixed;
top: 90rpx;
left: 50%;
transform: translateX(-50%);
font-size: 24rpx;
color: #808080;
z-index: 4;
}
.yiyue{
position: fixed;
bottom:46rpx;
left: 50%;
transform: translateX(-50%);
font-size: 24rpx;
color: #808080;
z-index: 4;
width: 530rpx;
height: 76rpx;
background: #C3C0FF;
border-radius: 47rpx 47rpx 47rpx 47rpx;
font-size: 32rpx;
color: #FFFFFF;
text-align: center;
line-height: 76rpx;
}
.yiyues{
position: fixed;
bottom:46rpx;
left: 50%;
transform: translateX(-50%);
font-size: 24rpx;
color: #808080;
z-index: 4;
width: 530rpx;
height: 76rpx;
background: #8883F0;
border-radius: 47rpx 47rpx 47rpx 47rpx;
font-size: 32rpx;
color: #FFFFFF;
text-align: center;
line-height: 76rpx;
}
.scrolls{
position: fixed;
top: 170rpx;
left: 50%;
width: 100%;
height: 460rpx;
padding: 0 36rpx;
box-sizing: border-box;
transform: translateX(-50%);
font-size: 24rpx;
color: #3D3D3D;
z-index: 4;
}
image{
width: 584rpx;
height: 798rpx;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
}
2024-09-25 18:30:46 +08:00
.active{
background-color: #8883F0 !important;
color: #fff !important;
}
/deep/ .u-flex {
padding-top: 20rpx !important;
box-sizing: border-box;
}
/deep/ .panel {
position: fixed;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
z-index: 99 !important;
overflow: hidden;
}
/deep/ .u-title {
padding-bottom: 22rpx;
}
/deep/ .u-icon__icon {
padding-bottom: 22rpx;
}
.xztclist{
display: flex;
align-items: center;
text{
margin-top: 0 !important;
}
image{
2024-09-29 19:32:37 +08:00
width: 37rpx;
height: 37rpx;
padding-left: 10rpx;
margin-right: 10rpx;
2024-09-25 18:30:46 +08:00
}
}
.taocanlist{
2024-09-29 19:32:37 +08:00
text{
display: inline-block !important;
}
2024-09-25 18:30:46 +08:00
.tc_list{
2024-09-29 19:32:37 +08:00
// display: flex;
2024-09-25 18:30:46 +08:00
padding-left: 30rpx;
padding-right: 30rpx;
box-sizing: border-box;
2024-09-29 19:32:37 +08:00
// justify-content: space-between;
height: 160rpx;
2024-09-25 18:30:46 +08:00
line-height: 40rpx;
2024-09-29 19:32:37 +08:00
background-color: #fff;
2024-09-25 18:30:46 +08:00
color: #000;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
border-radius: 20rpx;
margin-top: 10rpx;
}
}
.toptit {
font-weight: 700;
font-size: 44rpx;
color: #3D3D3D;
// padding-top: 18rpx;
// padding-left: 58rpx;
box-sizing: border-box;
}
.buttit{
width: 100%;
2024-09-29 19:32:37 +08:00
height:1050rpx;
2024-09-25 18:30:46 +08:00
overflow: scroll;
background-color: #fff;
margin-top: 30rpx;
padding: 28rpx 20rpx;
box-sizing: border-box;
border-radius: 20rpx;
text{
display: block;
margin-top: 20rpx;
font-size: 26rpx;
}
}
.bluetoothbox {
width: 100%;
height: 100vh;
background-color: #f4f1f6;
position: fixed;
top: 0;
left: 0;
z-index: 99;
text-align: center;
.img {
margin-top: 400rpx;
width: 320rpx;
height: 320rpx;
}
.one {
font-size: 36rpx;
color: #000;
// margin-top: 80rpx;
}
.two {
margin-top: 30rpx;
font-size: 24rpx;
color: #ccc;
}
.thr {
margin-top: 30rpx;
font-size: 28rpx;
color: #ccc;
}
.anfour {
display: flex;
margin-top: 30rpx;
justify-content: space-between;
padding: 0 220rpx;
box-sizing: border-box;
.qx {
width: 100rpx;
height: 70rpx;
line-height: 70rpx;
text-align: center;
border: 1px solid #3D3D3D;
border-radius: 10rpx;
}
.cx {
width: 200rpx;
height: 70rpx;
line-height: 70rpx;
text-align: center;
background-color: #8883F0;
color: #fff;
border-radius: 10rpx;
}
}
.stop {
font-size: 36rpx;
color: #000;
margin-top: 380rpx;
}
.xtop {
margin-top: 30rpx;
font-size: 24rpx;
color: #ccc;
}
.xqx {
width: 530rpx;
height: 90rpx;
line-height: 90rpx;
// border: 1px solid #808080;
border-radius: 20rpx;
text-align: center;
background-color: #fff;
margin: auto;
margin-top: 200rpx;
}
image {
width: 500rpx;
height: 500rpx;
margin-top: 100rpx;
}
}
page {
background-color: #F7FAFE;
}
2024-09-29 19:32:37 +08:00
.btnanniu{
width: 86%;
align-items: center;
display: flex;
justify-content: space-between;
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 50rpx;
}
2024-09-25 18:30:46 +08:00
.btnxyb {
2024-09-29 19:32:37 +08:00
width: 60%;
2024-09-25 18:30:46 +08:00
height: 100rpx;
background: #8883F0;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
filter: blur(0px);
text-align: center;
line-height: 100rpx;
font-size: 36rpx;
color: #FFFFFF;
border-radius: 10rpx;
}
.btntg {
font-size: 32rpx;
color: #8883F0;
margin-top: 20rpx;
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 80rpx;
}
.page {
width: 750rpx;
.popcard {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 550rpx;
height: 400rpx;
border-radius: 20rpx;
.tit {
display: flex;
justify-content: center;
width: 100%;
align-items: center;
font-size: 28rpx;
font-weight: 700;
}
.ipt {
margin-top: 60rpx;
width: 80%;
.u-input::placeholder {
font-size: 20px;
color: red;
}
}
.btnbox {
width: 100%;
display: flex;
flex-wrap: nowrap;
border-radius: 0 0 20rpx 20rpx;
.btn2 {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
font-size: 32rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #000;
background-color: #fff;
}
.btn1 {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
font-size: 32rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #fff;
background-color: #8883F0;
border: 1rpx solid #ccc;
}
}
}
.card {
// padding: 16rpx 38rpx;
margin: 60rpx auto 0;
width: 654rpx;
// background: #FFFFFF;
border-radius: 30rpx;
.shebeiname {
width: 654rpx;
2024-09-29 19:32:37 +08:00
// height: 160rpx;
// background: #FFFFFF;
// box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
2024-09-25 18:30:46 +08:00
border-radius: 24rpx 24rpx 24rpx 24rpx;
margin: auto;
margin-top: 26rpx;
box-sizing: border-box;
.shebeitit {
font-size: 28rpx;
color: #606060;
margin-top: 18rpx;
}
input {
width: 580rpx;
height: 66rpx;
background: #EDEDED;
border-radius: 10rpx 10rpx 10rpx 10rpx;
margin-top: 22rpx;
padding-left: 26rpx;
box-sizing: border-box;
}
.info {
margin-top: 20rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
padding-right: 5rpx;
box-sizing: border-box;
.txt {
font-size: 32rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #95989D;
}
.icon-xiangyou1 {
margin-left: 6rpx;
color: #95989D;
}
}
.icon_img {
image {
width: 50rpx;
height: 50rpx;
margin-right: 14rpx;
}
display: flex;
align-items: center;
view {
font-size: 32rpx;
color: #3D3D3D;
}
}
}
.li {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
height: 94rpx;
border-bottom: #E5E5E5 solid 2rpx;
.tit {
font-size: 32rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #000000;
}
}
}
.btn {
display: flex;
align-items: center;
justify-content: center;
margin: 52rpx auto 0;
width: 654rpx;
height: 100rpx;
background: #FF4F4F;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
opacity: 1;
border-radius: 30rpx;
font-size: 32rpx;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
font-weight: 400;
color: #FFFFFF;
}
.fz {
position: fixed;
bottom: 0;
width: 750rpx;
height: 1152rpx;
background: #F7FAFE;
border-radius: 30rpx 30rpx 0 0;
z-index: 10071;
.fz_top {
margin: 18rpx 0 auto;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
.icon-shanchu {
margin-left: 40rpx;
font-size: 50rpx;
}
.tit {
font-size: 36rpx;
font-family: Source Han Sans, Source Han Sans;
font-weight: 400;
color: #000000;
}
.txt {
margin-right: 40rpx;
font-size: 36rpx;
font-family: Source Han Sans, Source Han Sans;
font-weight: 400;
color: #8883F0;
}
}
.card_cont {
width: 750rpx;
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
height: 1030rpx;
overflow-y: auto;
overflow-x: hidden;
.cards {
margin-top: 32rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
padding: 0 40rpx;
width: 682rpx;
border-radius: 30rpx;
height: 114rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
.txt {
font-size: 36rpx;
font-family: Source Han Sans, Source Han Sans;
font-weight: 400;
color: #000000;
}
.num {
font-size: 36rpx;
font-family: Source Han Sans, Source Han Sans;
font-weight: 400;
color: #000000;
}
}
}
}
}
.icon {
// display: flex;
// flex-wrap: wrap;
// align-items: center;
margin-top: 40rpx;
margin-bottom: 30rpx;
.imgbox {
// width: 33%;
image {
width: 142rpx;
height: 142rpx;
}
}
}
</style>