833 lines
21 KiB
Vue
833 lines
21 KiB
Vue
<template>
|
||
<view class="pages">
|
||
<view class="title">
|
||
<view class="title_li" style="display: flex; align-items: center">
|
||
<view class="text">设备列表</view>
|
||
|
||
<view class="btns" @click="replay()"> 重置页面</view>
|
||
</view>
|
||
<image
|
||
mode="widthFix"
|
||
src="https://api.ccttiot.com/smartmeter/img/static/uCfe9273aC89tGOT7n1G"
|
||
></image>
|
||
<text class="sm">{{ texts }}</text>
|
||
</view>
|
||
<view
|
||
v-for="(item, index) in devicesList"
|
||
:key="index"
|
||
class="dblist"
|
||
@tap="choose(item)"
|
||
>
|
||
<view class="cen">
|
||
<view class="name">
|
||
MAC：{{ item.localName.substring(5) }}
|
||
<span
|
||
:style="{
|
||
fontSize: '24rpx',
|
||
marginLeft: '30rpx',
|
||
color: item.isBand ? '#808080' : '#4297F3',
|
||
}"
|
||
>
|
||
<!-- 根据 isBound 显示录入或未录入 -->
|
||
{{ item.isBand ? "已录入" : "未录入" }}
|
||
</span>
|
||
</view>
|
||
<view class="mac">
|
||
蓝牙信号：{{ item.RSSI }}
|
||
<span v-if="item.isBand" style="margin-left: 20rpx">
|
||
SN:{{ item.sn }}</span
|
||
>
|
||
</view>
|
||
</view>
|
||
<view class="rt" style="margin-right: 10rpx">
|
||
<text :id="item.deviceId">选择</text>
|
||
</view>
|
||
</view>
|
||
<view class="anniu" @click="Search">
|
||
<button>重新扫描</button>
|
||
</view>
|
||
<view v-if="showConfirmModal" class="modal-overlay">
|
||
<view class="modal">
|
||
<view class="modal-content">
|
||
<view class="modal-title">确认绑定</view>
|
||
<view class="modal-body">是否确认绑定设备？</view>
|
||
<view class="modal-footer">
|
||
<view
|
||
class="btn"
|
||
style="background: #ccc"
|
||
@click="closeConfirmModal"
|
||
>取消
|
||
</view>
|
||
<view class="btn" @click="confirmBind">确定</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 加载状态 -->
|
||
<view v-show="statusflag" class="containers">
|
||
<uni-section>
|
||
<uni-load-more :status="status" />
|
||
</uni-section>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { listSnByMac } from "../../api/device/device";
|
||
import xBlufi from "../../components/blufi/xBlufi";
|
||
import $wxBlufiImpl from "../../components/blufi/xBlufi-wx-impl.js"; // 0表示阿里支付宝小程序 1表示微信小程序
|
||
|
||
const app = getApp();
|
||
|
||
let _this = null;
|
||
export default {
|
||
data() {
|
||
return {
|
||
titleflag: false, //提示隐藏
|
||
bgc: {
|
||
backgroundColor: "#F7FAFE",
|
||
},
|
||
devicesList: [],
|
||
devicesLists: [],
|
||
searching: false,
|
||
texts: "正在扫描蓝牙设备...",
|
||
btnflag: true,
|
||
tishiflag: false,
|
||
option: "",
|
||
bluthlist: [], //蓝牙数组
|
||
statusflag: false,
|
||
Bluetoothmac: "",
|
||
gps: {},
|
||
mac: "",
|
||
status: false,
|
||
showConfirmModal: false, // 控制弹窗显示的标志
|
||
deviceinfo: null,
|
||
sn: "",
|
||
};
|
||
},
|
||
onLoad(e) {
|
||
if (e.sn) {
|
||
this.sn = e.sn;
|
||
}
|
||
$wxBlufiImpl.init();
|
||
// xBlufi.initXBlufi(1);
|
||
},
|
||
onShow: function () {
|
||
this.bluthlist = [];
|
||
this.devicesList = [];
|
||
this.devicesLists = [];
|
||
// 强制视图更新
|
||
this.$forceUpdate();
|
||
// 后续的蓝牙初始化和扫描逻辑
|
||
xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent);
|
||
xBlufi.notifyStartDiscoverBle({ isStart: true });
|
||
setTimeout(() => {
|
||
xBlufi.notifyStartDiscoverBle({ isStart: false });
|
||
if (this.devicesList.length === 0) {
|
||
this.tishiflag = true;
|
||
this.texts = "扫描完毕，请操作";
|
||
} else {
|
||
this.texts = "扫描到以下设备，请点击连接！";
|
||
}
|
||
this.status = true;
|
||
// 再次强制更新
|
||
this.$forceUpdate();
|
||
}, 2000);
|
||
},
|
||
onUnload: function () {
|
||
xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
|
||
xBlufi.notifyStartDiscoverBle({
|
||
isStart: false,
|
||
});
|
||
},
|
||
onHide() {
|
||
xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
|
||
xBlufi.notifyStartDiscoverBle({
|
||
isStart: false,
|
||
});
|
||
},
|
||
onBeforeUnmount() {
|
||
xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
|
||
xBlufi.notifyStartDiscoverBle({
|
||
isStart: false,
|
||
});
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
replay() {
|
||
uni.reLaunch({
|
||
url: "/page_user/luru/index",
|
||
});
|
||
},
|
||
toControl() {
|
||
uni.navigateTo({
|
||
url: "/page_user/luru/controlDevice",
|
||
});
|
||
},
|
||
async fetchDevicesBoundStatus() {
|
||
try {
|
||
// 1. 提取并去重设备MAC地址
|
||
const uniqueMacs = [
|
||
...new Set(
|
||
this.devicesList.map((item) => item.localName.substring(5)),
|
||
),
|
||
];
|
||
|
||
// 2. 重构去重后的设备列表（保留第一个匹配项）
|
||
this.devicesList = uniqueMacs
|
||
.map((mac) =>
|
||
this.devicesList.find(
|
||
(item) => item.localName.substring(5) === mac,
|
||
),
|
||
)
|
||
.filter(Boolean); // 过滤掉undefined项
|
||
|
||
// 3. 批量查询设备状态
|
||
const { data: resultList } = await listSnByMac(uniqueMacs);
|
||
console.log("API响应:", resultList);
|
||
|
||
// 4. 更新设备状态
|
||
const macToDeviceMap = new Map(
|
||
this.devicesList.map((device) => [
|
||
device.localName.substring(5),
|
||
device,
|
||
]),
|
||
);
|
||
|
||
resultList.forEach(({ mac, sn }) => {
|
||
const device = macToDeviceMap.get(mac);
|
||
if (device) {
|
||
device.sn = sn;
|
||
device.isBand = true;
|
||
}
|
||
});
|
||
|
||
// 5. 排序设备列表（未绑定的排前面）
|
||
this.devicesList.sort(
|
||
(a, b) => (a.isBand ? 1 : -1) - (b.isBand ? 1 : -1),
|
||
);
|
||
|
||
console.log("更新后的设备列表:", this.devicesList);
|
||
this.$forceUpdate();
|
||
} catch (error) {
|
||
console.error("批量获取设备录入状态失败:", error);
|
||
// 可以在这里添加错误处理逻辑，如显示错误提示
|
||
}
|
||
},
|
||
choose(e) {
|
||
console.log(e);
|
||
let Bluetoothmac = e.name.substring(5);
|
||
uni.navigateTo({
|
||
url:
|
||
"/page_user/luru/bind_mac?mac=" +
|
||
Bluetoothmac +
|
||
"&isBand=" + (e.isBand ? 1 : 0),
|
||
});
|
||
},
|
||
send() {
|
||
this.$u.post("/app/device/ring?sn=" + this.sn).then((res) => {
|
||
if (res.code === 200) {
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: "none",
|
||
duration: 2000,
|
||
});
|
||
}
|
||
});
|
||
},
|
||
openConfirmModal(e) {
|
||
this.deviceinfo = e;
|
||
this.showConfirmModal = true;
|
||
},
|
||
closeConfirmModal() {
|
||
this.showConfirmModal = false;
|
||
},
|
||
confirmBind() {
|
||
this.closeConfirmModal();
|
||
this.createBLEConnection(this.deviceinfo);
|
||
},
|
||
btnyc() {
|
||
this.titleflag = false;
|
||
},
|
||
sing() {
|
||
let vm = this; // 将外部的 this 绑定到 vm 上
|
||
uni.getNetworkType({
|
||
success(res) {
|
||
if (res.networkType !== "none") {
|
||
uni.getConnectedBluetoothDevices({
|
||
success(res) {
|
||
console.log("已连接的蓝牙设备信息：", res);
|
||
xBlufi.notifySendCustomData({
|
||
customData: "11play1@",
|
||
});
|
||
uni.hideLoading();
|
||
vm.remakr();
|
||
},
|
||
fail(err) {
|
||
uni.hideLoading();
|
||
console.error("获取已连接蓝牙设备信息失败：", err);
|
||
},
|
||
});
|
||
} else {
|
||
console.log("手机未连接网络");
|
||
}
|
||
},
|
||
});
|
||
},
|
||
remakr() {
|
||
let vm = this; // 将外部的 this 绑定到 vm 上
|
||
uni.getNetworkType({
|
||
success(res) {
|
||
if (res.networkType !== "none") {
|
||
uni.getConnectedBluetoothDevices({
|
||
success(res) {
|
||
console.log("已连接的蓝牙设备信息：", res);
|
||
xBlufi.notifySendCustomData({
|
||
customData: "11reboot",
|
||
});
|
||
uni.navigateBack({
|
||
delta: 1, // delta值为1时表示返回的页面层数
|
||
});
|
||
},
|
||
fail(err) {
|
||
console.error("获取已连接蓝牙设备信息失败：", err);
|
||
},
|
||
});
|
||
} else {
|
||
console.log("手机未连接网络");
|
||
}
|
||
},
|
||
});
|
||
},
|
||
funListenDeviceMsgEvent: function (options) {
|
||
switch (options.type) {
|
||
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
|
||
if (options.result) {
|
||
this.devicesLists = options.data;
|
||
// let devicesarr = options.data
|
||
// // this.devicesList = options.data
|
||
// // console.log(devicesarr, 'devicesarrdevicesarr');
|
||
// devicesarr.forEach(device => {
|
||
// const mac = device.name.substring(6);
|
||
|
||
// if (device.name.indexOf("BBLE") != -1) {
|
||
// // this.$u.get(`/app/device/${mac}/isBind`).then((res) => {
|
||
// // if (res.data == false) {
|
||
// this.devicesLists.push(device);
|
||
// let uniqueDevicesList = Array.from(new Set(this.devicesLists));
|
||
|
||
// // 将去重后的数组重新赋值给 this.devicesList
|
||
// this.devicesLists = uniqueDevicesList;
|
||
// // }
|
||
// // })
|
||
|
||
// }
|
||
// // getisband(mac).then(res => {
|
||
// // console.log(res);
|
||
// // if (res.data == true) {
|
||
// // console.log(`MAC 地址 ${mac} 已经绑定`);
|
||
// // } else {
|
||
// // this.devicesList.push(device)
|
||
// // }
|
||
// // }).catch(error => {
|
||
// // console.error(`检查 MAC 地址 ${mac} 是否绑定的过程中出错:`, error);
|
||
// // });
|
||
// });
|
||
}
|
||
break;
|
||
case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
|
||
console.log("连接回调：" + JSON.stringify(options));
|
||
if (options.result) {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: "连接成功",
|
||
icon: "none",
|
||
});
|
||
{
|
||
console.log(
|
||
"连接回调options.data.deviceId：" + options.data.deviceId,
|
||
"连接回调options.data.name：" + options.data.name,
|
||
);
|
||
xBlufi.notifyInitBleEsp32({
|
||
deviceId: options.data.deviceId,
|
||
});
|
||
let systemInfo = uni.getSystemInfoSync();
|
||
if (systemInfo.platform === "android") {
|
||
// 当前设备是 Android
|
||
} else if (systemInfo.platform === "ios") {
|
||
// 当前设备是 iOS
|
||
}
|
||
}
|
||
}
|
||
break;
|
||
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
|
||
if (!options.result) {
|
||
console.log("蓝牙未开启", options);
|
||
uni.showToast({
|
||
title: "蓝牙未开启，如有疑问请查看查看常见问题",
|
||
icon: "none",
|
||
duration: 3000,
|
||
});
|
||
if (this.devicesList.length == 0) {
|
||
this.tishiflag = true;
|
||
this.texts = "扫描完毕";
|
||
} else {
|
||
this.texts = "扫描到以下设备，请点击连接！";
|
||
}
|
||
} else {
|
||
this.searching = true;
|
||
}
|
||
break;
|
||
|
||
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_STOP:
|
||
if (options.result) {
|
||
let uniqueDevicesList = Array.from(new Set(this.devicesLists));
|
||
// 将去重后的数组重新赋值给 this.devicesList
|
||
this.devicesLists = uniqueDevicesList;
|
||
let list = [];
|
||
uniqueDevicesList.forEach((device) => {
|
||
// 从设备名称中提取 MAC 地址（假设 MAC 地址是设备名称的后6个字符）
|
||
let macFromName = device.name.substring(device.name.length - 12);
|
||
// console.log(macFromName);
|
||
// 与 this.mac 进行比较
|
||
list.push(device);
|
||
});
|
||
setTimeout(() => {
|
||
this.devicesList = list;
|
||
let uniqueDevicesList = Array.from(new Set(this.devicesList));
|
||
// 将去重后的数组重新赋值给 this.devicesList
|
||
this.devicesList = uniqueDevicesList;
|
||
this.fetchDevicesBoundStatus();
|
||
}, 200);
|
||
|
||
console.log("蓝牙停止搜索ok");
|
||
} else {
|
||
//蓝牙停止搜索失败
|
||
console.log("蓝牙停止搜索失败");
|
||
}
|
||
this.searching = false;
|
||
// _this.setData({
|
||
// searching: false
|
||
// });
|
||
|
||
break;
|
||
}
|
||
},
|
||
funListenDeviceMsgEvents: function (options) {
|
||
let that = this;
|
||
switch (options.type) {
|
||
case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED:
|
||
{
|
||
// console.log('状态', options.result)
|
||
if (options.result == false) {
|
||
this.statusflag = false;
|
||
uni.hideLoading();
|
||
}
|
||
}
|
||
break;
|
||
case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
|
||
console.log("1收到设备发来的自定义数据结果：", options.data);
|
||
break;
|
||
|
||
case xBlufi.XBLUFI_TYPE.TYPE_INIT_ESP32_RESULT:
|
||
uni.hideLoading();
|
||
if (options.result) {
|
||
console.log("初始化成功");
|
||
} else {
|
||
console.log("初始化失败");
|
||
uni.showModal({
|
||
title: "温馨提示",
|
||
content: `设备初始化失败`,
|
||
showCancel: false,
|
||
//是否显示取消按钮
|
||
success: function (res) {},
|
||
});
|
||
}
|
||
break;
|
||
}
|
||
},
|
||
|
||
//4、建立连接
|
||
createBLEConnection(e) {
|
||
this.mac = e.localName.substring(5);
|
||
let that = this;
|
||
that.$u
|
||
.post(`/appVerify/band?sn=` + that.sn + "&mac=" + that.mac)
|
||
.then((res) => {
|
||
uni.showLoading({
|
||
title: "绑定中",
|
||
});
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: "绑定成功",
|
||
icon: "none",
|
||
duration: 2000,
|
||
});
|
||
|
||
xBlufi.notifyStartDiscoverBle({
|
||
isStart: false,
|
||
});
|
||
|
||
const deviceId = that.deviceinfo.deviceId;
|
||
that.Bluetoothmac = that.deviceinfo.localName.substring(5); //从第七位开始截取 只取后面的mac号
|
||
|
||
let name = that.deviceinfo.name;
|
||
console.log(that.deviceinfo.deviceId, "that.deviceinfo.deviceId");
|
||
xBlufi.notifyConnectBle({
|
||
isStart: true,
|
||
deviceId: that.deviceinfo.deviceId,
|
||
name,
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: "none",
|
||
duration: 2000,
|
||
});
|
||
setTimeout(() => {
|
||
uni.navigateBack({
|
||
delta: 1, // delta值为1时表示返回的页面层数
|
||
});
|
||
}, 2000);
|
||
}
|
||
});
|
||
},
|
||
// 点击重新搜索
|
||
Search() {
|
||
if (this.status) {
|
||
xBlufi.notifyStartDiscoverBle({
|
||
isStart: true,
|
||
});
|
||
// 重新搜索清空蓝牙数组
|
||
this.bluthlist = [];
|
||
this.devicesList = [];
|
||
this.devicesLists = [];
|
||
// 重新搜索
|
||
// this.startBluetoothDevicesDiscovery()
|
||
this.statusflag = true;
|
||
this.texts = "正在扫描蓝牙设备...";
|
||
setTimeout(() => {
|
||
this.statusflag = false;
|
||
if (this.searching) {
|
||
// 判断是否存在浇花器设备
|
||
if (this.devicesList.length == 0) {
|
||
this.tishiflag = true;
|
||
this.texts = "扫描完毕，请操作";
|
||
} else {
|
||
this.texts = "扫描到以下设备，请点击连接！";
|
||
}
|
||
xBlufi.notifyStartDiscoverBle({
|
||
isStart: false,
|
||
});
|
||
} else {
|
||
xBlufi.notifyStartDiscoverBle({
|
||
isStart: true,
|
||
});
|
||
}
|
||
}, 2000);
|
||
}
|
||
},
|
||
// 点击隐藏没有设备提示
|
||
btnhd() {
|
||
this.tishiflag = false;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #f7fafe !important;
|
||
}
|
||
|
||
.containers {
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;
|
||
padding-top: 130rpx;
|
||
box-sizing: border-box;
|
||
left: 0;
|
||
z-index: 999 !important;
|
||
/* background-color: #fff; */
|
||
z-index: 99;
|
||
}
|
||
|
||
.anniu2 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 586rpx;
|
||
height: 90rpx;
|
||
border-radius: 54rpx 54rpx 54rpx 54rpx;
|
||
border: 4rpx solid #4c97e7;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
left: 90rpx;
|
||
bottom: 222rpx;
|
||
font-weight: 500;
|
||
font-size: 40rpx;
|
||
color: #4c97e7;
|
||
}
|
||
|
||
.pages {
|
||
// padding-top: 136rpx !important;
|
||
padding: 0 66rpx;
|
||
box-sizing: border-box;
|
||
padding-bottom: 200rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.modal-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.modal {
|
||
width: 300px;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.modal-content {
|
||
padding: 20px;
|
||
}
|
||
|
||
.modal-title {
|
||
font-size: 18px;
|
||
margin-bottom: 10px;
|
||
text-align: center;
|
||
}
|
||
|
||
.modal-body {
|
||
font-size: 16px;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.modal-footer {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.modal-footer button {
|
||
width: 80px;
|
||
height: 60rpx;
|
||
padding: 10px;
|
||
background: #8883f0;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #8883f0;
|
||
width: 80px;
|
||
height: 60rpx;
|
||
color: #fff;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.modal-footer button:first-of-type {
|
||
background: #ccc;
|
||
}
|
||
|
||
// text{
|
||
// display: block;
|
||
// }
|
||
|
||
.sm {
|
||
color: #77808d;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
// margin-top: 48rpx;
|
||
display: inline-block;
|
||
}
|
||
|
||
.title {
|
||
margin-bottom: 84rpx;
|
||
|
||
image {
|
||
display: inline-block;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
vertical-align: bottom;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
.title_li {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
|
||
.text {
|
||
font-weight: 400;
|
||
font-size: 70rpx;
|
||
color: #262b37;
|
||
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
display: block;
|
||
}
|
||
|
||
.btns {
|
||
margin-left: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 138rpx;
|
||
height: 50rpx;
|
||
background: #f14c4c;
|
||
border-radius: 31rpx 31rpx 31rpx 31rpx;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.dblist {
|
||
display: flex;
|
||
width: 100%;
|
||
margin-top: 34rpx;
|
||
background: #ffffff;
|
||
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
|
||
padding: 20rpx 0 24rpx 18rpx;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
border-radius: 10rpx;
|
||
|
||
.lt {
|
||
padding-left: 10rpx;
|
||
box-sizing: border-box;
|
||
margin-right: 38rpx;
|
||
|
||
image {
|
||
width: 42rpx;
|
||
// height: 112rpx;
|
||
}
|
||
}
|
||
|
||
.cen {
|
||
width: 370rpx;
|
||
padding-left: 10rpx;
|
||
box-sizing: border-box;
|
||
|
||
.name {
|
||
white-space: nowrap;
|
||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #262b37;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.mac {
|
||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #262b37;
|
||
line-height: 32rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
margin-top: 16rpx;
|
||
}
|
||
}
|
||
|
||
.rt {
|
||
margin-left: auto;
|
||
margin-top: 22rpx;
|
||
|
||
text {
|
||
display: inline-block;
|
||
width: 108rpx;
|
||
height: 60rpx;
|
||
background: rgba(255, 255, 255, 0);
|
||
border: 2rpx solid #8883f0;
|
||
filter: blur(0px);
|
||
border-radius: 20rpx;
|
||
text-align: center;
|
||
line-height: 60rpx;
|
||
color: #8883f0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.anniu {
|
||
padding: 0 90rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 112rpx;
|
||
|
||
button {
|
||
background: #8883f0;
|
||
border-radius: 52rpx 52rpx 52rpx 52rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.mask {
|
||
width: 622rpx;
|
||
height: 710rpx;
|
||
background: #ffffff;
|
||
filter: blur(0px);
|
||
border-radius: 20rpx;
|
||
position: fixed;
|
||
top: 475rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
padding-top: 38rpx;
|
||
padding-left: 60rpx;
|
||
padding-right: 60rpx;
|
||
box-sizing: border-box;
|
||
|
||
.titles {
|
||
font-size: 48rpx;
|
||
color: #262b37;
|
||
line-height: 70rpx;
|
||
text-align: center;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
text {
|
||
display: block;
|
||
font-size: 32rpx;
|
||
color: #262b37;
|
||
line-height: 56rpx;
|
||
text-align: left;
|
||
}
|
||
|
||
button {
|
||
margin-top: 46rpx;
|
||
width: 266rpx;
|
||
height: 96rpx;
|
||
background: #8883f0;
|
||
border-radius: 52rpx 52rpx 52rpx 52rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 96rpx;
|
||
}
|
||
}
|
||
</style>
|