kaiguan-zfb/page_components/wifilist/index.vue

<template>
	<view>
		<u-navbar title="WIFI连接" :border-bottom="false" :background="bgc" title-color='#000' back-icon-color="000" 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="aspectFit" :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="aspectFit"></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="aspectFit"></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="aspectFit"></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="aspectFit"></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="aspectFit"
						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="aspectFit"></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: "#fff",
				},
				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
			     })
				setTimeout(()=>{
					if(this.textwifi != '连接'){
						uni.showModal({
							title: '温馨提示',
							content: '配网失败，请重新操作', 
							showCancel: false,
							success: function(res) {
								uni.switchTab({
									url:'/pages/index/index'
								})
							}
						})
					}
				},20000)
			},
			
			
			
			
			// 蓝牙回调 
			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 ,//是否显示取消按钮
								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,
									})
								}			
							});
						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) {
										uni.hideLoading()
										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('初始化失败');
							// 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>