<template> <view> <u-navbar title="WIFI连接" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff" title-size='36' height='50'></u-navbar> <!-- 样式 --> <view class="container" style="margin-top: 50rpx;"> <view class="device"> <span class="device-list-title">WIFI选择</span> </view> <view class="flex-row items-center flex-1 group" style="display: flex;justify-content: space-between;align-items: center;"> <view class="text_3 ml-3">请选择您需要连接的2.4GwiFi名称</view> <view class="text_3 ml-3" style="color: #8883F0;display: flex;justify-content: space-between;align-items: center;" @click="btnwifi"> <image class="sximg" src="https://api.ccttiot.com/smartmeter/img/static/uhhg02VV44LLPaDJDJO2" mode="" :style="{ transform: 'rotate(' + rotateDegree + 'deg)' }" ></image> <text>刷新</text> </view> </view> <!-- wifi列表 --> <view class="wifilist"> <view class="bd" v-for="(item,index) in list" :key="index" @click="btnqhwifi(index,item)" v-if="signalStrengthflag"> <view class="bdbox"> <view class="box"> <ul> <li v-if="(item.signalStrength < 1 ? (item.signalStrength * 100) : item.signalStrength) > 1 && (item.signalStrength < 1 ? (item.signalStrength * 100) : item.signalStrength) < 30"> <image src="https://api.ccttiot.com/smartmeter/img/static/ucHCSQoAToQAwajScBCs" mode=""></image> </li> <li v-if="(item.signalStrength < 1 ? (item.signalStrength * 100) : item.signalStrength) > 29 && (item.signalStrength < 1 ? (item.signalStrength * 100) : item.signalStrength) < 51"> <image src="https://api.ccttiot.com/smartmeter/img/static/u99d7sacejXaGlsLedNx" mode=""></image> </li> <li v-if="(item.signalStrength < 1 ? (item.signalStrength * 100) : item.signalStrength) > 50 && (item.signalStrength < 1 ? (item.signalStrength * 100) : item.signalStrength) < 70"> <image src="https://api.ccttiot.com/smartmeter/img/static/ueL5rF2AGWamJzGpLMU9" mode=""></image> </li> <li v-if="(item.signalStrength < 1 ? (item.signalStrength * 100) : item.signalStrength) > 69"> <image src="https://api.ccttiot.com/smartmeter/img/static/uCN5HZjWwMqVQkbccAxa" mode=""></image> </li> </ul> </view> <view class="content"> <view class="bt">{{item.SSID == '' ? 'CMCC-eaca' : item.SSID}}</view> <!-- <view class="wz" style="color: #8883F0 ;">{{item.BSSID}}</view> --> </view> </view> <image src="https://api.ccttiot.com/smartmeter/img/static/uLrArPv3OrIodtWZ3gri" mode="" class="pictwo" v-if="indexs == index"> </image> </view> </view> <view class="annius" style="display: flex;justify-content: space-between;"> <view class="" @click="btnsd">手动添加其他网络</view> <!-- <view class="" @click="btnxyb">下一步</view> --> </view> </view> <!-- 蒙层 --> <view class="mask" v-if="maskflag"></view> <!-- 点击WiFi连接弹窗 --> <view class="lianjie" style="height:380rpx;" v-if="maskflag"> <view class="wifitop"> 连接网络 </view> <view class="wifiname"> {{ssid}} </view> <view class="" style="position: relative;color: #000; font-size: 30rpx; padding-left: 30rpx; box-sizing: border-box; background-color: #efefef; border-radius: 10rpx; height: 80rpx;width: 100%;" v-if="passmm == true"> <input class="uni-input" v-model="password" type="text" placeholder="输入WiFi密码" /> <u-icon name="eye-fill" style="position: absolute;top: 15rpx;right: 60rpx;z-index: 99;" @click="passmm = false" size="50"></u-icon> </view> <view class="" style="position: relative;color: #000; font-size: 30rpx; padding-left: 30rpx; box-sizing: border-box; background-color: #efefef; border-radius: 10rpx; height: 80rpx;width: 100%;" v-if="passmm == false"> <input class="uni-input" v-model="password" type="password" placeholder="输入WiFi密码" /> <u-icon name="eye-off" style="position: absolute;top: 15rpx;right: 60rpx;z-index: 99;" @click="passmm = true" size="50"></u-icon> </view> <view class="butlj" style="border-top: 1px solid #ccc;"> <view class="btnljqx" @click="btnmaskflag" style="border-right: 1px solid #ccc;"> 取消 </view> <view v-if="textwifi == '连接'" class="btnljqx" @click="content_wf" :class="{ 'actives': textwifi === '连接中...' }"> 连接 </view> <view v-else class="btnljqx" :class="{ 'actives': textwifi === '连接中...' }" style="display: flex; justify-content: center; align-items: center;"> <text>连接中</text> <view class="" style="width: 36rpx;"> <text v-for="n in 3" :key="n" v-if="currentIndex >= n">.</text> </view> </view> </view> </view> <!-- 手动输入WiFi --> <view class="mask" v-if="sdmaskflag"></view> <!-- 点击WiFi连接弹窗 --> <view class="lianjie" v-if="sdmaskflag"> <view class="wifitop"> 手动添加 </view> <view class="" style="margin-top: 30rpx; color: #000; font-size: 30rpx; padding-left: 30rpx; box-sizing: border-box; background-color: #efefef; border-radius: 10rpx; height: 80rpx;width: 100%;"> <input class="uni-input" v-model="ssid" type="text" placeholder="输入WiFi名称" /> </view> <view class="" style="position: relative;width: 100%; margin-top: 30rpx; color: #000; font-size: 30rpx; padding-left: 30rpx; box-sizing: border-box; background-color: #efefef; border-radius: 10rpx; height: 80rpx;" v-if="passmm == true"> <input class="uni-input" v-model="password" type="text" placeholder="输入WiFi密码" /> <u-icon name="eye-fill" style="position: absolute;top: 15rpx;right: 60rpx;z-index: 99;" @click="passmm = false" size="50"></u-icon> </view> <view class="" style="position: relative;width: 100%; margin-top: 30rpx; color: #000; font-size: 30rpx; padding-left: 30rpx; box-sizing: border-box; background-color: #efefef; border-radius: 10rpx; height: 80rpx;" v-if="passmm == false"> <input class="uni-input" v-model="password" type="password" placeholder="输入WiFi密码" /> <u-icon name="eye-off" style="position: absolute;top: 15rpx;right: 60rpx;z-index: 99;" @click="passmm = true" size="50"></u-icon> </view> <view class="butlj" style="border-top: 1px solid #ccc;"> <view class="btnljqx" @click="btnsdmaskflag" style="border-right: 1px solid #ccc;"> 取消 </view> <view v-if="textwifi == '连接'" class="btnljqx" @click="content_wf" :class="{ 'actives': textwifi === '连接中...' }"> 连接 </view> <view v-else class="btnljqx" :class="{ 'actives': textwifi === '连接中...' }" style="display: flex; justify-content: center; align-items: center;"> <text>连接中</text> <view class="" style="width: 36rpx;"> <text v-for="n in 3" :key="n" v-if="currentIndex >= n">.</text> </view> </view> </view> </view> <!-- 没有WiFi --> <!-- <view class="bluetoothbox" v-if="list.length == 0"> <image class="img" src="https://api.ccttiot.com/smartmeter/img/static/uZH5T5qPm6VjuJbGbCpj" mode=""></image> <view class="one"> 发现网络失败 </view> <view class="two"> 请确保你的设备处于局域网范围内 </view> <view class="anfour"> <view class="qx" @click="btnsd"> 手动添加 </view> <view class="cx" @click="btnwifi"> 重新发现 </view> </view> </view> --> </view> </template> <script> var xBlufi = require("@/page_components/blufi/xBlufi.js") // import jpSelect from '@/components/jp-select/jp-select.vue'; // var xBlufi = require("@/page_components/blufi/xBlufi.js"); export default { // components: { // jpSelect // },nin data() { return { passmm:false, password:'', sdmaskflag:false, maskflag:false, options: {}, optionsobj: {}, version: '2.0', name: '', connectedDeviceId: '', connected: true, deviceInfo: null, isInitOK: false, password: '', customData: '', ble_data: '', wifiList: "", item: '', textwb: '重新扫描', list: [], picflag: false, indexs: -1, wififlag: true, //wifi列表flag videoflag: false, //视频flag ssid: '', //wifi名称 signalStrengthflag: false, objlist: {}, bgc: { backgroundColor: "#8883f0", }, textwifi:'连接', rotateDegree: 0, // 图片的旋转角度 rotationInterval: null, // 定时器的引用 isRotating: false, // 标志位,控制是否正在旋转 currentIndex: 0, // 控制当前应该显示到哪个点 dotShowInterval: null, }; }, // components: {}, props: {}, onShow: function(options) { // 判断手机是什么型号 let systemInfo = uni.getSystemInfoSync(); if (systemInfo.platform === 'android') { // 当前设备是 Android var that = this wx.startWifi({ success: function() { // Wi-Fi 模块初始化成功 console.log('Wi-Fi 模块已初始化'); // 在这里可以调用 wx.getWifiList wx.getWifiList({ success: function(res) { // 获取 Wi-Fi 列表成功 console.log('获取 Wi-Fi 列表成功:', res); // 在这里可以处理 Wi-Fi 列表数据 wx.onGetWifiList(function(res) { // 这里是监听获取到 Wi-Fi 列表后的回调函数 console.log('监听到获取到 Wi-Fi 列表:', res.wifiList); that.wifiList = res.wifiList // 升序排序 that.wifiList.sort(function(a, b) { return b.signalStrength - a.signalStrength; }); // 去重 for (var i = 0; i < that.wifiList.length; i++) { for (var j = i + 1; j < that.wifiList .length; j++) { if (that.wifiList[i].SSID == that.wifiList[j].SSID) { that.wifiList.splice(j, 1); j-- } } } that.signalStrengthflag = true that.list = that.wifiList }); }, fail: function(err) { // 获取 Wi-Fi 列表失败 console.error('获取 Wi-Fi 列表失败:', err); } }); }, fail: function(err) { // 初始化失败 console.error('Wi-Fi 初始化失败:', err); } }); } else if (systemInfo.platform === 'ios') { // 当前设备是 iOS } }, onLoad: function(option) { // 传过来的蓝牙信息 this.objlist = option // 接受蓝牙信息 xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent); xBlufi.notifyInitBleEsp32({ deviceId: this.objlist.deviceId }) var that = this wx.startWifi({ success: function() { // Wi-Fi 模块初始化成功 console.log('Wi-Fi 模块已初始化'); // 在这里可以调用 wx.getWifiList wx.getWifiList({ success: function(res) { // 获取 Wi-Fi 列表成功 console.log('获取 Wi-Fi 列表成功:', res); // 在这里可以处理 Wi-Fi 列表数据 wx.onGetWifiList(function(res) { // 这里是监听获取到 Wi-Fi 列表后的回调函数 console.log('ios监听到获取到 Wi-Fi 列表:', res.wifiList); that.wifiList = res.wifiList // 降序排序 that.wifiList.sort(function(a, b) { return b.signalStrength - a.signalStrength; }); // 去重 for (var i = 0; i < that.wifiList.length; i++) { for (var j = i + 1; j < that.wifiList.length; j++) { if (that.wifiList[i].SSID == that.wifiList[j].SSID) { that.wifiList.splice(j, 1); j-- } } } that.signalStrengthflag = true that.list = that.wifiList.filter(item => { return item.SSID !== '' }) // console.log(that.list, '1010'); //在这里提取列表数据 }); }, fail: function(err) { // 获取 Wi-Fi 列表失败 console.error('获取 Wi-Fi 列表失败:', err); } }); }, fail: function(err) { // 初始化失败 console.error('Wi-Fi 初始化失败:', err); } }); }, // 分享到好友(会话) onShareAppMessage: function () { return { title: '创想物联', path: '/pages/shouye/index' } }, // 分享到朋友圈 onShareTimeline: function () { return { title: '创想物联', query: '', path: '/pages/shouye/index' } }, onUnload: function() { console.log("unload返回 "); if (this.dotShowInterval) { clearInterval(this.dotShowInterval); } console.log("unload "); xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent); wx.closeBLEConnection({ deviceId: this.objlist.deviceId, }) }, mounted() { // 开始闪烁动画 this.startDotShow() }, methods: { // 开始旋转图片 // 模拟异步请求 simulateRequest() { // 使用setTimeout来模拟异步操作 setTimeout(() => { // 假设请求完成 console.log('请求完成'); this.stopRotation(); }, 3000); }, // 停止旋转图片 stopRotation() { this.isRotating = false; clearInterval(this.rotationInterval); // 清除定时器 }, startDotShow() { this.dotShowInterval = setInterval(() => { if (this.currentIndex < 3) { this.currentIndex++; } else { // 如果需要循环显示,可以重置currentIndex this.currentIndex = 0; // 重启动画 } }, 500); // 每500毫秒更新currentIndex }, btnmaskflag(){ this.textwifi = '连接' this.maskflag = false this.password = '' }, btnsdmaskflag(){ this.textwifi = '连接' this.sdmaskflag = false this.password = '' }, // 点击重新获取wifi btnwifi(){ if (!this.isRotating) { this.isRotating = true; this.rotationInterval = setInterval(() => { if (this.isRotating) { this.rotateDegree = (this.rotateDegree + 5) % 360; // 每次增加5度,并循环 } }, 10); // 每100毫秒旋转一次 // 假设这里发起一个异步请求 this.simulateRequest(); } var that = this wx.startWifi({ success: function() { // Wi-Fi 模块初始化成功 console.log('Wi-Fi 模块已初始化'); // 在这里可以调用 wx.getWifiList wx.getWifiList({ success: function(res) { // 获取 Wi-Fi 列表成功 console.log('获取 Wi-Fi 列表成功:', res); // 在这里可以处理 Wi-Fi 列表数据 wx.onGetWifiList(function(res) { // 这里是监听获取到 Wi-Fi 列表后的回调函数 console.log('ios监听到获取到 Wi-Fi 列表:', res.wifiList); that.wifiList = res.wifiList // 降序排序 that.wifiList.sort(function(a, b) { return b.signalStrength - a.signalStrength; }); // 去重 for (var i = 0; i < that.wifiList.length; i++) { for (var j = i + 1; j < that.wifiList .length; j++) { if (that.wifiList[i].SSID == that.wifiList[j] .SSID) { that.wifiList.splice(j, 1); j-- } } } that.signalStrengthflag = true that.list = that.wifiList console.log(that.list, '1010'); //在这里提取列表数据 }); }, fail: function(err) { // 获取 Wi-Fi 列表失败 console.error('获取 Wi-Fi 列表失败:', err); } }); }, fail: function(err) { // 初始化失败 console.error('Wi-Fi 初始化失败:', err); } }); }, // 点击判断索引是否相同显示图片 btnqhwifi(index, item) { // this.indexs = index this.ssid = item.SSID this.maskflag = true }, // 点击进行下一步 btnxyb() { console.log('panduan1', this.indexs); if (this.indexs == -1) { uni.showToast({ title: '请选择需要连接的WiFi', icon: 'none', duration: 3000 }); } else { console.log('panduan2'); uni.navigateTo({ url: '/page_user/wifijoint/index?ssid=' + JSON.stringify(this.ssid) + '&objlist=' + JSON.stringify(this.objlist) }) } }, btnsd() { this.sdmaskflag = true this.ssid = '' // uni.navigateTo({ // url: '/page_user/wifijoint/index?objlist=' + JSON.stringify(this.objlist) + '&ssid=' + JSON.stringify(this.ssid) // }) }, // 点击连接操作 content_wf() { if (!this.ssid) { uni.showToast({ title: 'SSID不能为空', icon: 'none' }); return; } if (!this.password) { uni.showToast({ title: '密码不能为空', icon: 'none' }); return; } this.textwifi = '连接中...' xBlufi.notifySendCustomData({ customData: "ssid@" + this.ssid + "pass@" + this.password }) }, // 蓝牙回调 funListenDeviceMsgEvent: function(options) { let that = this; switch (options.type) { // case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED: { // console.log('状态', options.result) // this.textwifi = '连接' // uni.showModal({ // title: '很抱歉提醒你!', // content: '蓝牙异常断开,请重新连接…', // showCancel: false, // success: function(res) { // uni.switchTab({ // url:'/pages/index/index' // }) // } // }); // this.statusflag = false // uni.hideLoading(); // } // break; case xBlufi.XBLUFI_TYPE.TYPE_CONNECT_ROUTER_RESULT: uni.hideLoading(); if (!options.result) this.textwifi = '连接', this.statusflag = false, uni.hideLoading(), uni.showModal({ title: '温馨提示', content: '配网失败,请选择2.4GWiFi连接并确保密码正确', showCancel: false //是否显示取消按钮 }); else { if (options.data.progress == 100) { let ssid = options.data.ssid; this.statusflag = false uni.hideLoading(); this.textwifi = '连接' uni.showModal({ title: '温馨提示', content: `连接成功`, showCancel: false, success: function(res) { let systemInfo = uni.getSystemInfoSync(); if (systemInfo.platform == 'android') { // 当前设备是 Android uni.navigateBack() } else if (systemInfo.platform == 'ios') { // 当前设备是 iOS uni.navigateBack({ delta:2 }) } wx.closeBLEConnection({ deviceId: this.objlist.deviceId, }) } }) } break; } break; case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_MY_DATA: this.loadPercent = options.data; this.loadText = '文件读取中' console.log("文件读取中", options.data); break; case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA: this.ver_data = this.parseCustomData(options.data) console.log("1收到设备发来的自定义数据结果:", this.ver_data); break; case xBlufi.XBLUFI_TYPE.TYPE_INIT_ESP32_RESULT: uni.hideLoading(); if (options.result) { console.log('初始化成功'); } else { console.log('初始化失败'); wx.closeBLEConnection({ deviceId: this.objlist.deviceId, }) uni.showModal({ title: '温馨提示', content: `设备初始化失败,请重新连接`, showCancel: false, //是否显示取消按钮 success: function(res) { let systemInfo = uni.getSystemInfoSync(); if (systemInfo.platform == 'android') { // 当前设备是 Android uni.navigateBack() } else if (systemInfo.platform == 'ios') { // 当前设备是 iOS uni.navigateBack({ delta:2 }) } // uni.switchTab({ // url:'/pages/index/index' // }) } }) break; } 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(3); // 去除前缀 "SET" // 返回解析后的数据对象 return { voltage, switchState, current, power, remainingPower, setMode }; } }, }; </script> <style lang="less"> .bluetoothbox{ width: 100%; height: 100vh; background-color: #f4f1f6; position: fixed; top: 0; left: 0; z-index: 98; text-align: center; .img{ margin-top: 400rpx; } .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 160rpx; box-sizing: border-box; .qx{ width: 200rpx; 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: 320rpx; height: 320rpx; margin-top: 100rpx; } } .actives{ opacity: .5 !important; } .sximg{ width: 34rpx; height: 34rpx; vertical-align: middle; margin-right: 10rpx; } //wifi信号强度显示 .wifiactive { background-color: limegreen !important; } .mask{ width: 100%; height: 100vh; background-color: #000; opacity: .3; position: fixed; top: 0; left: 0; z-index: 99; } * { margin: 0; padding: 0; list-style: none; } .box { margin-right: 30rpx; height: 100%; padding-bottom: 40rpx; box-sizing: border-box; } ul { position: relative; width: 100%; height: 100%; } li { image { display: inline-block; margin-top: 10rpx; width: 50rpx; height: 52rpx; } } .annius{ // position: fixed; align-items: center; // left: 50%; // transform: translateX(-50%); // bottom: 50rpx; border-radius: 52rpx 52rpx 52rpx 52rpx; // font-weight: 700; font-size: 38rpx; width: 100%; margin-top: 20rpx; view{ height: 96rpx; border-radius: 30rpx; line-height: 96rpx; box-sizing: border-box; width: 100%; // background-color: #8883F0 !important; color: #8883F0; text-align: center; } } .lianjie{ width: 620rpx; height: 425rpx; background-color: #fff; border-radius: 30rpx; position: fixed; top: 30%; left: 50%; transform: translateX(-50%); z-index: 99; padding: 30rpx; box-sizing: border-box; .wifitop{ font-size: 32rpx; } .wifiname{ font-size: 30rpx; color: #000; margin-top: 30rpx; } input{ width: 400rpx; margin-top: 30rpx; color: #000; font-size: 30rpx; padding-left: 30rpx; box-sizing: border-box; background-color: #efefef; border-radius: 10rpx; height: 80rpx; } .butlj{ display: flex; justify-content: space-between; text-align: center; box-sizing: border-box; margin-top: 30rpx; .btnljqx{ font-size: 32rpx; color: #8883F0; width: 100%; text-align: center; height: 95rpx; line-height: 95rpx; } } } // 点击关闭弹出弹窗提示 .tanctitle { width: 500rpx; background-color: #fff; margin: auto; position: fixed; top: 35%; left: 50%; transform: translateX(-50%); border-radius: 30rpx; padding: 20rpx; box-sizing: border-box; border: 1px solid #ccc; .title { margin-top: 20rpx; font-size: 16px; font-weight: 700; } .anniu { margin-top: 50rpx; display: flex; border-top: 1px solid #ccc; height: 60rpx; line-height: 60rpx; .btnqx { width: 50%; text-align: center; border-right: 1px solid #ccc; } .btnqd { width: 50%; text-align: center; } } } .page { width: 100%; padding: 0 20rpx; box-sizing: border-box; .wz { display: flex; justify-content: space-between; margin-top: 30rpx; margin-bottom: 10rpx; .title { font-size: 18px; font-weight: 700; } .bg { display: inline-block; border-radius: 10rpx; padding: 5rpx 10rpx; box-sizing: border-box; background-color: red; color: #fff; } } .wifivideo { width: 100%; video { width: 100%; height: 90vh; } } } .active { background: rgba(240, 252, 251, 1); } .bdbox { display: flex; } .wifilist { margin-top: 80rpx; .bd { display: flex; justify-content: space-between; width: 100%; height: 148rpx; // line-height: 148rpx; padding-top: 45rpx; box-sizing: border-box; padding-left: 60rpx; padding-right: 60rpx; box-shadow: 0 0 10px rgba(0, 0, 0, .1); border-radius: 10rpx; margin-top: 50rpx; .picone { width: 58rpx; height: 42rpx; margin-top: 10rpx; } .pictwo { width: 40rpx; height: 40rpx; margin-top: 10rpx; } .content { margin-left: 30rpx; view { height: 40rpx; margin-top: 20rpx; } .wz { color: rgba(189, 188, 188, 1); font-size: 12px; } .bt { color: rgba(80, 86, 90, 1); font-size: 16px; } } } } .device-list-title { color: #50565a; font-size: 86rpx; font-family: SourceHanSansCN; margin-top: 100rpx; } .text_3 { margin-top: 10rpx; color: rgba(119, 128, 141, 1); font-size: 28rpx; } .container { /* padding-top: 30rpx !important; */ padding: 0 30rpx 50rpx 30rpx !important; align-items: center; } .button { position: fixed; display: flex; align-items: center; justify-content: center; left: 50%; transform: translateX(-50%); bottom: 50rpx; padding: 10rpx 0; height: 96rpx; box-sizing: border-box; background-color: #8883F0 !important; border-radius: 52rpx 52rpx 52rpx 52rpx; font-weight: 700; font-size: 20px; width: 90%; color: #FFFFFF; } .buttons { display: flex; align-items: center; justify-content: center; position: fixed; left: 50%; transform: translateX(-50%); bottom: 200rpx; height: 96rpx; padding: 10rpx 0; box-sizing: border-box; background-color: #8883F0 !important; border-radius: 52rpx 52rpx 52rpx 52rpx; font-weight: 700; font-size: 20px; width: 90%; color: #FFFFFF; } </style>