waterElectricityMinApp/pagesAir/shareAir/shareAir.vue

<template>
	<view class="container">
		<uni-swiper-dot :info="imgUrl" :current="current" field="content" :mode="dotMode">
			<swiper class="swiper-box" @change="swiper_change" autoplay :interval="3000" :duration="500">
				<swiper-item v-for="(item, index) in imgUrl" :key="index">
					<image :src="item.url" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="line"></view>
		<view class="nav">
			<navigator class="btn" url="/pagesAir/stdBookMgr/stdBookMgr" hover-class="navigator-hover">
				<view class="btn-icon-tzgl">
					<image src="../static/images/tzgl.png" mode=""></image>
					<text>台账管理</text>
				</view>
				<view class="txt-right">
					<text></text>
					<uni-icons type="forward" color="#c7c9ce" size="26"></uni-icons>
				</view>
			</navigator>
			<navigator class="btn" url="/pagesAir/accountBalance/accountBalance" hover-class="navigator-hover">
				<view class="btn-icon">
					<image src="../static/images/yhye.png" mode=""></image>
					<text>账户余额</text>
				</view>
				<view class="txt-right">
					<text>{{ balance }}</text>
					<uni-icons type="forward" color="#c7c9ce" size="26"></uni-icons>
				</view>
			</navigator>
		</view>
		<view class="line"></view>
		<view class="add-air" v-if="isList === false" :style="{ height: screenHeight }">
			<view class="add-content">
				<view class="add-left">
					<navigator open-type="redirect" url="../addAir/addAir" class="add-btn">
						<uni-icons type="plus" color="white" size="30"></uni-icons>
						<view>添加</view>
					</navigator>
					<view class="add-tip">
						<view class="txt-add-air">添加空调</view>
						<view class="txt-tip">点击添加设备</view>
						<view class="txt-tip">可添加多个设备</view>
					</view>
				</view>
				<view class="add-right">
					<image src="../static/images/air-pic.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<view class="list-air" v-else>
			<scroll-view scroll-y="true" :style="{ height: screenHeight }">
				<view class="list-items" v-for="(item, index) in airs" :key="index">
					<view v-if="item.on === true" class="item-air" @tap="tapHandler(item.air_ip)" @longpress="itemLongPress($event, item.time, item.air_ip)">
						<view class="item-left">
							<view class="item-icon">
								<view class="circle1"></view>
								<view class="circle2"></view>
								<view class="circle3"></view>
							</view>
							<view class="item-title">{{ item.name_show }}</view>
							<view class="item-info">
								<text class="item-info-left">{{ item.info }}</text>
								<text>{{ item.status }}</text>
								<text>{{ item.time }}</text>
							</view>
						</view>
						<view class="item-right" @tap="btn_click(index, item.air_ip, item.name, item.info, item.order_num, item.time)">
							<view class="item-btn">
								<image src="../static/images/power-off.png" mode="aspectFit"></image>
								<view class="item-txt-off">关闭</view>
							</view>
						</view>
					</view>
					<view v-else class="item-air" @tap="tapHandler(item.air_ip)" @longpress="itemLongPress($event, item.time, item.air_ip)" :ref="index">
						<view class="item-left">
							<view class="item-icon">
								<view class="circle1"></view>
								<view class="circle2"></view>
								<view class="circle3"></view>
							</view>
							<view class="item-title">{{ item.name_show }}</view>
							<view class="item-info">
								<text class="item-info-left">{{ item.info }}</text>
								<text>{{ item.status }}</text>
								<text v-if="item.time !== ''">{{ item.time }}</text>
								<text v-else>未启动</text>
							</view>
						</view>
						<view class="item-right" v-if="item.abnormal == 1" @tap="btn_click(index, item.air_ip, item.name, item.info, item.order_num, item.time)" :ref="index">
							<view class="item-btn">
								<image src="../static/images/power-on.png" mode="aspectFit"></image>
								<view class="item-txt-on">启动</view>
							</view>
						</view>
						<view class="item-right" v-else :ref="index">
							<view class="item-btn">
								<image src="../static/images/power-off.png" mode="aspectFit"></image>
								<view class="item-txt-off">禁用</view>
							</view>
						</view>
					</view>
				</view>
				<navigator open-type="redirect" url="../addAir/addAir" class="add-air-bottom">
					<uni-icons type="plus" size="30" color="#4B8DFB"></uni-icons>
					<view class="add-btn-bottom">添加</view>
				</navigator>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			ceshi: 'air',
			userinfo: {}, // 用户信息
			stu_number: '', // 学号
			id_card: '', // 身份证号
			// 滚动横幅的数据
			imgUrl: [
				{
					url: this.$code_base_url + '/image/1.png'
				},
				{
					url: 'https://chtech.ncjti.edu.cn/hotelReservation/image/28.png'
				}
				// {
				// 	url: this.$code_base_url + '/image/2.png'
				// },
				// {
				// 	url: this.$code_base_url + '/image/3.png'
				// }
			],
			current: 0, // 开始显示第几个
			balance: (0.0).toFixed(2), // 余额
			airs: [], // 已经添加成功的空调列表数据
			selectAirs: [], // 已经选择的空调列表数据
			dotMode: 'round', // 显示控制点样式
			isList: false, // 是否显示添加的空调列表
			screenHeight: '', // 屏幕的高度
			options: 0,
			time_string: '其他人员使用中',
			test: this.$store.state.test
		}
	},
	onLoad(options) {
		// 系统正在维护...
		if (this.test == 'weihuzhong') {
			uni.redirectTo({
				url: '../../pages/index/index'
			})

			return
		}

		this.options = options
		try {
			// 选择绑定了的空调
			let airs_selected = uni.getStorageSync('airs_selected')
			if (airs_selected.length > 0) {
				// 使用存储的列表
				this.selectAirs = airs_selected
			}
		} catch (e) {
			console.log('读取空调相关信息：' + e.message)
		}
	},
	onShow() {
		uni.showLoading({
			title: '加载中...',
			mask: true
		})

		// var _this = this;
		// 监听全局的自定义事件，事件由 uni.$emit 触发，但仅触发一次，在第一次触发之后移除该监听器。
		// 绑定空调
		uni.$once('selectAirs', (data) => {
			// console.log(data.sel_airs);
			// 拆分数组元素
			let tf = true
			let arrAirs = data.sel_airs.trim().split(',')
			for (var i = 0; i < arrAirs.length; i++) {
				let tmpAirs = arrAirs[i].split('|')
				let t = tmpAirs[1].split('-')
				tf = true
				for (var j = 0; j < this.selectAirs.length; j++) {
					if (this.selectAirs[j].air_ip == tmpAirs[2]) {
						tf = false
					}
				}
				// 存在则不添加到数组和缓存
				if (true === tf) {
					this.selectAirs.push({
						air_ip: tmpAirs[2],
						name: tmpAirs[0] + ' ' + t[0],
						info: t[1],
						time: '',
						abnormal: 1,
						on: false, // true开启了，false关闭了
						order_num: '' // 订单号
					})
				}
			}
			// 如果选的空调不为空，则显示添加的空调列表
			if (this.selectAirs.length > 0) {
				// 去重
				const newArr = Array.from(new Set(this.selectAirs.map(JSON.stringify))).map(JSON.parse)

				this.selectAirs = newArr
			}
			// 存储空调列表
			uni.setStorageSync('airs_selected', this.selectAirs)
			// 移除全局自定义事件监听器。
			uni.$off('selectAirs')
		})

		// 获取基本信息
		this.get_base_info('onShow')

		// 从新计算高度
		this.calc_screen_height()
		// setTimeout(() => {
		// 	uni.hideLoading();
		// }, 3000);
	},
	// 下拉刷新
	onPullDownRefresh() {
		// 获取基本信息
		this.get_base_info(this.options, 'onShow')
		// 查询绑定的空调（更新列表）
		this.select_banding_airs()
		// 停止刷新
		uni.stopPullDownRefresh()
	},
	methods: {
		// 跳转到电流、电压、功率页面
		tapHandler(air_ip) {
			// console.log(air_ip);
			uni.navigateTo({
				url: '/pagesAir/figure/figure?airip=' + air_ip
			})
		},
		/**
		 * 查询绑定的空调
		 */
		async select_banding_airs() {
			var _this = this
			const res = await this.$myRequest({
				host: _this.ceshi,
				url: '/airManage/usersqueryAir.action',
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					sfzh: _this.id_card
				}
			})

			// console.log(res.data);
			if (res.data.code == 200) {
				let data = res.data.data
				if (data.length > 0) {
					_this.airs = []
					let tmpAirs = []
					for (var i = 0; i < data.length; i++) {
						tmpAirs.push({
							air_ip: data[i].air_ip,
							name: data[i].school + '-' + data[i].build + '-' + data[i].floors + '-' + data[i].dom + '-' + data[i].air_name,
							name_show: data[i].school + '-' + data[i].dom + '-' + data[i].air_name,
							info: data[i].air_config,
							time: '',
							abnormal: data[i].is_normal,
							on: data[i].is_on, // true开启了，false关闭了
							order_num: '' // 订单号
						})
					}
					// 不为空
					if (tmpAirs.length > 0) {
						// 遍历状态
						for (var i = 0; i < tmpAirs.length; i++) {
							// 获取空调状态
							;(function (t, tmpAirs) {
								// 注意这里是形参
								setTimeout(function () {
									_this.readAirsStatus(tmpAirs, t)
								}, 10 * t) // 还是0.01秒执行一次，不是累加的
							})(i, tmpAirs) // 注意这里是实参，这里把要用的参数传进去
						}

						setTimeout(() => {
							if (_this.airs.length > 0) {
								// 显示添加的空调列表
								_this.isList = true
								// uni.hideLoading();
							}
						}, 300)
					}
				} else {
					// 隐藏添加的空调列表
					_this.isList = false
				}
			} else if (res.data.code == 205) {
				// 隐藏添加的空调列表
				_this.isList = false
			} else {
				// 隐藏添加的空调列表
				_this.isList = false
				// 提示返回信息
				uni.showToast({
					title: res.data.message
				})
			}
			// 隐藏加载
			uni.hideLoading()
		},
		/**
		 * 获取绑定的空调的状态
		 * @param {Object} tmpAirs
		 * @param {Object} index
		 */
		async readAirsStatus(tmpAirs, index) {
			var _this = this
			const res = await _this.$myRequest({
				host: _this.ceshi,
				url: '/airManage/consumeStatus.action',
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					air_ip: tmpAirs[index].air_ip,
					sfzh: _this.id_card
				}
			})

			// console.log(res.data, tmpAirs[index].air_ip);
			if (res.data.code == 200) {
				let data = res.data
				if (data.is_on == 1) {
					if (typeof data.order_num === 'undefined') {
						tmpAirs[index].status = '状态：'
						tmpAirs[index].time = _this.time_string
					} else {
						tmpAirs[index].status = '启动时间：'
						tmpAirs[index].time = data.start_time
					}
					tmpAirs[index].on = true
					tmpAirs[index].order_num = data.order_num
				} else {
					tmpAirs[index].status = '状态：'
					tmpAirs[index].on = false
					tmpAirs[index].time = ''
					tmpAirs[index].order_num = ''
				}
				// 更新自己绑定的空调列表
				_this.airs.push(tmpAirs[index])
			} else {
				tmpAirs[index].status = '状态：'
				tmpAirs[index].time = res.data.message
				// 更新自己绑定的空调列表
				_this.airs.push(tmpAirs[index])
			}
			// 按名称排序
			_this.airs.sort((a, b) => a.name.localeCompare(b.name))
		},
		/**
		 * 获取基本信息
		 */
		get_base_info(param) {
			// console.log(options);
			var _this = this
			// 获取学号
			_this.stu_number = _this.$store.state.userInfo.card_number

			try {
				if (_this.stu_number == '' || typeof _this.stu_number == 'undefined') {
					// 学号不存在，可以从存储中拿用户信息
					const userinfo = uni.getStorageSync('userinfo_storage_key')
					if (userinfo) {
						// 拿学号
						_this.userinfo = userinfo
						_this.stu_number = userinfo.card_number
						_this.id_card = userinfo.id_card
					} else {
						// 还没有需要跳转到首页进行获取
						uni.navigateTo({
							url: '../../pages/index/index?from=' + _this.options.from
						})

						uni.showToast({
							icon: 'none',
							title: '学号为空，请进行授权',
							duration: 3000
						})

						return
					}
				} else {
					// 学号已经存在，可以从存储中拿用户信息
					_this.userinfo = JSON.stringify(uni.getStorageSync('userinfo_storage_key'))
				}
			} catch (e) {
				console.log('获取基本信息：' + e.message)
			}
			// 获取code
			_this.getCode(param)
		},
		/**
		 * 获得code
		 */
		getCode(param) {
			var _this = this
			uni.login({
				success: (res) => {
					// console.log('getCode', res);
					if (res.code) {
						if (param == 'get_user_info') {
							_this.getUserInfo(res.code)
						} else {
							// 请求服务器，获得openid
							_this.getOpenId(res.code)
						}
					} else {
						uni.showToast({
							title: res.errMsg,
							icon: 'none'
						})
					}
				}
			})
		},
		/**
		 * 请求服务器，获得openid
		 */
		async getOpenId(param_code) {
			var _this = this
			if (typeof _this.userinfo === 'object') {
				_this.userinfo = JSON.stringify(_this.userinfo)
			}
			const res = await _this.$myRequest({
				host: _this.ceshi,
				url: '/airManage/usersopenid.action',
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					code: param_code,
					userinfo: _this.userinfo
				}
			})

			// console.log(res.data);
			if (res.data.code == 200) {
				// 查询用户基本信息
				_this.getCode('get_user_info')
			} else if (res.data.code == 205) {
				// 查询用户基本信息
				_this.getCode('get_user_info')
			} else {
				// 提示返回信息
				uni.showToast({
					title: res.data.message
				})

				if (_this.options && typeof _this.options.from != 'undefined' && typeof _this.options.from != '') {
					uni.navigateTo({
						url: '../../pages/index/index?from=' + _this.options.from
					})
				} else {
					uni.redirectTo({
						url: '../../pages/index/index?from=0'
					})
				}
			}
		},
		/**
		 * 获取用户基本信息
		 * @param {Object} code
		 */
		async getUserInfo(code) {
			var _this = this
			const res = await _this.$myRequest({
				host: _this.ceshi,
				url: '/airManage/usersget_user.action',
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					code: code
				}
			})

			// console.log(res.data);
			if (res.data.code == 200) {
				// 余额
				_this.balance = res.data.data.balance.toFixed(2)
				_this.id_card = res.data.data.sfzh

				// 查询绑定的空调（更新列表）
				_this.select_banding_airs()
			} else {
				uni.showToast({
					title: res.data.message
				})
			}
		},
		/**
		 * 长按可解绑
		 * @param {Object} e
		 * @param {Object} time
		 * @param {Object} air_ip
		 */
		itemLongPress(e, time, air_ip) {
			// console.log(e, time, air_ip);
			var _this = this
			var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/
			var regExp = new RegExp(reg)
			// if (regExp.test(time) || time == this.time_string) {
			if (regExp.test(time)) {
				uni.showToast({
					title: '使用中不能解绑',
					icon: 'error',
					duration: 1000
				})
			} else {
				let index = e.currentTarget.dataset.ref
				uni.showModal({
					title: '提示',
					content: '是否解绑该空调？',
					success: (res) => {
						if (res.confirm) {
							// 解绑空调
							_this.unbangding_airs(air_ip, index)
						}
					}
				})
			}
		},
		/**
		 * 解绑空调
		 * @param {Object} air_ip
		 * @param {Object} index
		 */
		async unbangding_airs(air_ip, index) {
			var _this = this
			const res = await _this.$myRequest({
				host: _this.ceshi,
				url: '/airManage/usersdelAir.action',
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					sfzh: _this.id_card,
					air_ip: air_ip
				}
			})

			// console.log(res.data);
			if (res.data.code == 200) {
				// 删除指定下标的元素
				_this.airs.splice(index, 1)
				uni.setStorageSync('airs_selected', _this.airs)

				if (_this.airs.length == 0) {
					_this.isList = false
				}

				uni.showToast({
					title: res.data.message
				})
			} else {
				uni.showToast({
					title: res.data.message
				})
			}
		},
		/**
		 * 单击了启动或关闭按钮
		 * @param {Object} e
		 */
		btn_click(index, air_ip, name, info, order_num, time) {
			// console.log(index, air_ip, name, info, order_num, time);
			var _this = this
			let tmp = name.split('-')
			let build = tmp[1],
				floors = tmp[2],
				dom = tmp[3] + '-' + tmp[4].split(' ')[0]
			let air_name = tmp[tmp.length - 1]
			// console.log(air_name);
			// 未获取到索引
			if (typeof index === 'undefined') {
				uni.showToast({
					title: '索引为空！',
					icon: 'none'
				})

				return
			}
			// 获取空调名称
			if (typeof air_name === 'undefined') {
				uni.showToast({
					title: '空调名称为空！',
					icon: 'none'
				})

				return
			}

			if (_this.airs[index].on) {
				uni.showModal({
					title: '提示',
					content: '确认【关闭】空调吗？',
					success: (res) => {
						if (res.confirm) {
							// 【关闭】空调
							_this.close_airs(index, air_ip, order_num)
						}
					}
				})
			} else {
				uni.showModal({
					title: '提示',
					content: '确认【启动】空调吗？',
					success: (res) => {
						if (res.confirm) {
							// 【启动】空调
							uni.login({
								success: (res) => {
									// console.log('getCode', res);
									if (res.code) {
										// 调用接口，开启空调
										_this.open_airs(res.code, index, air_ip, build, floors, dom, info, air_name)
									} else {
										uni.showToast({
											title: res.errMsg,
											icon: 'none'
										})
									}
								}
							})
						}
					}
				})
			}
		},
		/**
		 * 关闭空调
		 * @param {Object} index
		 * @param {Object} air_ip
		 */
		async close_airs(index, air_ip, order_num) {
			// console.log(index, air_ip, order_num);
			if (order_num == '') {
				uni.showToast({
					title: '未获得单号'
				})
				return
			}

			if (this.id_card == '') {
				uni.showToast({
					title: '未获得身份证号'
				})
				return
			}

			uni.showLoading({
				title: '关闭中...',
				mask: true
			})

			var _this = this
			const res = await this.$myRequest({
				host: _this.ceshi,
				url: '/airManage/consumeend.action',
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					sfzh: _this.id_card,
					order_num: order_num,
					air_ip: air_ip
				}
			})

			if (typeof res.data === 'undefined') {
				uni.showToast({
					title: '请求超时！',
					duration: 3000,
					success() {
						setTimeout(() => {
							uni.hideLoading()
						}, 1000)
					}
				})
			} else {
				// console.log(res.data)
				if (res.data.code == 200) {
					// 显示已经关闭图标
					_this.airs[index].status = '状态：'
					_this.airs[index].on = false
					_this.airs[index].time = '未启动'
					uni.showToast({
						title: '关闭成功！',
						duration: 2000,
						success() {
							// 获取基本信息
							_this.get_base_info(_this.options, 'onShow')
							setTimeout(() => {
								uni.hideLoading()
							}, 1000)
						}
					})
				} else {
					if (res.data.message.indexOf('已结算') != -1 || res.data.message.indexOf('结算成功') != -1) {
						// 显示已经关闭图标
						_this.airs[index].status = '状态：'
						_this.airs[index].time = '设备已结算'

						setTimeout(() => {
							uni.hideLoading()
						}, 1000)
					} else {
						// "该空调开启时长超过5天，请联系管理员关闭"
						uni.showToast({
							icon: 'none',
							title: res.data.message,
							duration: 3000,
							success() {
								_this.airs[index].status = '状态：'
								_this.airs[index].time = _this.time_string

								setTimeout(() => {
									uni.hideLoading()
								}, 1000)
							}
						})
					}
				}
			}
		},
		/**
		 * 启动空调
		 * @param {Object} code
		 * @param {Object} index
		 * @param {Object} air_ip
		 * @param {Object} build
		 * @param {Object} floors
		 * @param {Object} dom
		 * @param {Object} air_config
		 */
		async open_airs(code, index, air_ip, build, floors, dom, air_config, air_name) {
			// console.log(code, index, air_ip, build, floors, dom, air_config, air_name);
			uni.showLoading({
				title: '开启中...',
				mask: true
			})
			var _this = this
			const res = await this.$myRequest({
				host: _this.ceshi,
				url: '/airManage/consumestart.action',
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					code: code,
					air_ip: air_ip,
					build: build,
					floors: floors,
					dom: dom,
					air_config: air_config,
					air_name: air_name
				}
			})

			if (typeof res.data === 'undefined') {
				uni.showToast({
					title: '请求超时！',
					duration: 3000,
					success() {
						setTimeout(() => {
							uni.hideLoading()
						}, 1000)
					}
				})
			} else {
				// console.log(res.data);
				if (res.data.code == 200) {
					// 获取订单号
					_this.airs[index].order_num = res.data.order_num
					uni.showToast({
						title: '开启成功！',
						duration: 2000,
						success() {
							// 将开启按钮变成关闭按钮
							_this.airs[index].status = '启动时间：'
							_this.airs[index].on = true
							_this.airs[index].time = res.data.start_time
							setTimeout(() => {
								uni.hideLoading()
							}, 1000)
						}
					})
				} else {
					// "设备已被其他人使用"
					if (res.data.message.indexOf('已被其他人使用') != -1 || res.data.message.indexOf('请勿重复开启' != -1)) {
						// 显示已经关闭图标
						_this.airs[index].status = '状态：'
						_this.airs[index].time = _this.time_string

						setTimeout(() => {
							uni.hideLoading()
						}, 1000)
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.message,
							duration: 2000,
							success() {
								_this.airs[index].status = '状态：'
								_this.airs[index].time = res.data.message
								setTimeout(() => {
									uni.hideLoading()
								}, 1000)
							}
						})
					}
				}
			}
		},
		/**
		 * 轮播图发生改变
		 * @param {Object} e
		 */
		swiper_change(e) {
			// console.log(e.detail.current);
			this.current = e.detail.current
		},
		/**
		 * 计算屏幕的高度, 适配屏幕的高度
		 */
		calc_screen_height() {
			uni.getSystemInfo({
				success: (res) => {
					let h = 0
					if (this.isList === true) {
						h = res.screenHeight * (750 / res.windowWidth) - 640 //将px 转换rpx
					} else {
						h = res.screenHeight * (750 / res.windowWidth) - 740 //将px 转换rpx
					}
					this.screenHeight = Math.floor(h) + 'rpx'
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	font-size: 28rpx;
	font-family: 'Microsoft YaHei-3970(82674968)';
	width: 730rpx;
	padding: 10rpx;

	.swiper-box {
		height: 150px;
		width: 100%;
	}

	swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;

		image {
			height: 100%;
			width: 100%;
			border-radius: 8rpx;
		}
	}

	.line {
		height: 20rpx;
	}

	.nav {
		display: flex;
		justify-content: space-between;

		.btn {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 338rpx;
			height: 100rpx;
			padding: 5rpx 10rpx;
			border-radius: 8rpx;
			background-color: #eaefff;

			.btn-icon-tzgl {
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
					padding: 10rpx;
				}
			}

			.btn-icon {
				display: flex;
				align-items: center;

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.txt-right {
				display: flex;
				align-items: center;
			}
		}
	}

	.add-air {
		border-radius: 8rpx;
		padding: 60rpx 10rpx;
		background-color: #ffffff;

		.add-content {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-bottom: 20rpx;

			.add-left {
				display: flex;

				.add-btn {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;
					width: 120rpx;
					height: 120rpx;
					border-radius: 20rpx;
					background-color: #2979ff;
					color: #ffffff;
				}

				.add-tip {
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.txt-add-air {
						font-size: 40rpx;
						font-weight: bold;
					}

					.txt-tip {
						font-size: 20rpx;
						color: #8f939c;
					}
				}
			}

			.add-right {
				width: 300rpx;
				height: 100rpx;
				border-radius: 10rpx;

				image {
					width: 300rpx;
					height: 100rpx;
				}
			}
		}

		.add-bg {
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 90rpx;

			image {
				width: 400rpx;
				height: 400rpx;
			}
		}
	}

	.list-air {
		border-radius: 8rpx;
		padding: 10rpx 10rpx;
		background-color: #e9e9eb;

		.list-items {
			display: flex;
			flex-direction: column;

			.item-air {
				display: flex;
				justify-content: space-between;
				padding: 30rpx 20rpx;
				border-bottom: 1px solid #c3c8d4;

				.item-left {
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.item-icon {
						display: flex;
						align-items: center;

						.circle1 {
							width: 16rpx;
							height: 16rpx;
							border-radius: 8rpx;
							background-color: #18bc37;
						}

						.circle2 {
							width: 12rpx;
							height: 12rpx;
							border-radius: 6rpx;
							background-color: #18bc37;
							margin: 0 10rpx;
						}

						.circle3 {
							display: inline-block;
							width: 8rpx;
							height: 8rpx;
							border-radius: 4rpx;
							background-color: #18bc37;
						}
					}

					.item-title {
						font-size: 32rpx;
						font-weight: bold;
						padding-bottom: 12rpx;
					}

					.item-info {
						display: flex;
						color: #8f939c;

						.item-info-left {
							padding-right: 20rpx;
						}

						.item-info-icon {
							width: 40rpx;
							height: 40rpx;
							margin-right: 8rpx;
						}
					}
				}

				.item-right {
					.item-btn {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						margin-left: 20rpx;
						width: 100rpx;
						height: 100rpx;
						border: 1px solid #d9deeb;
						border-radius: 50rpx;
						box-shadow: 4rpx 4rpx 5rpx #c8cdd8;
						background-image: linear-gradient(-45deg, #f2f4f2, #dfdfdf);

						image {
							width: 50rpx;
							height: 50rpx;
						}

						.item-txt-on {
							font-size: 24rpx;
							font-weight: bold;
							color: #4b8dfb;
						}

						.item-txt-off {
							font-size: 24rpx;
							font-weight: bold;
							color: #8a8a8a;
						}
					}
				}
			}
		}

		.add-air-bottom {
			display: flex;
			justify-content: center;
			margin: 20rpx 0;
			padding: 20rpx 0;
			width: 160rpx;
			border-radius: 10rpx;

			.add-btn-bottom {
				font-size: 40rpx;
				color: #4b8dfb;
				padding-left: 8rpx;
			}
		}
	}
}
</style>