bigdata_WX/pages/equipList/index.vue

<template>
	<view>


		<view class="textbox">
			<view class="inputs">

				<u-search placeholder="请输入设备ID" v-model="imports" placeholder-color="#909696" :show-action="false"
					search-icon-color="#909696" @input="searchinput">
				</u-search>

			</view>
			
				<view class="tab">
					<view class="tab-content">
						<view class="tab-box">
							<view v-for="(item,index) in menuList" :key="index" @click="change(index)"
								:class="['tab-item',currents==index?'active':'']">
								<image class="img-icon" :src="$imageURL+item.icon" mode=""></image>
								<view class="text">{{item.name}}</view>
							</view>

						</view>
					</view>
				</view>
				<view class="listbox">
				<view class="second-tab">
					<view class="tab-box">
						<view v-for="(item,index) in list" :key="index" @click="change(index)"
							:class="['tab-item',currents==index?'active':'']">
							<text>{{item.name}}</text>

						</view>

					</view>
				</view>
				<view class="third-tab">
					<view class="third-tab-item">总计</view>
					<view class="third-tab-item">在线</view>
					<view class="third-tab-item">离线</view>
				</view>
				<scroll-view :scroll-top="0" :scroll-y="true" class="list scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<view class="list_item" v-for="(item, index) in eqlistdata" :key="index" @click="historys(item)">
						<view class="list_item_top">
							<p class="p1"> <span class="title">{{ (item.device_name || '--' )| yfEllipsis(7)}}</span><span class="sub-title">{{ item.only_for_show || item.device_id }}</span></p>
							
							<p v-if="![11, 19, 20].includes(type_id)"  class="online-status">
								<!-- {{ item.is_online ? '在线' : '离线' }} -->
								<image v-if="item.is_online" :src="$imageURL+'/bigdata_app/newImg/home/online.png'" mode=""></image>
								<image v-else :src="$imageURL+'/bigdata_app/newImg/home/outline.png'" mode=""></image>
							</p>
						</view>
						<view class="list_item_text">
							
							<p v-if="type_id == 40 || type_id == 42">
								<span class="label">上报时间</span> {{ item.uptime }}
							</p>
							<p v-else><span class="label">上报时间</span>{{ item.uptime | timeFormat() }}</p>
							<p>
								<span class="label">设备位置</span>{{ (item.address|| '无') | yfEllipsis(16)}}
							</p>
						</view>
					</view>
				</scroll-view>

				<!-- </view> -->
			</view>
		</view>

		<!-- <view class="utabs_box">
			<view class="utabs">
				<u-tabs :list="list" :is-scroll="true" :current="currents" @change="change" item-width="140"
					font-size="24" gutter="20" bar-width="60" active-color="#42b983" v-if="list.length"></u-tabs>
			</view>
		</view> -->
		<view class="loading" v-if="loadingtf">
			<image src="../../static/images/ajax-loader.gif" mode="" class="img"></image>
		</view>
		<view class="top" v-if="isTop" @click="top">
			<image :src="
          $imageURL+'/bigdata_app' +
          '/image/6209a98f0cb3b5086f2ca36152c9269.png'
        " mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		Debounce,
		Throttle
	} from '../../util/anitthro.js';
	export default {
		data() {
			return {
				list: [],
				current: 0,
				currents: 0,
				page: 1,
				size: 10,
				eqlistdata: [],
				isTop: false,
				device_model: 0,
				infoalter: false, // 权限设置,
				type_id: 0, //设备类型,
				imgpath: [],
				loadingtf: false,
				width: 0, //顶部搜索栏宽度
				imports: '', //搜索设备ID
				menuList: [{
					icon: '/bigdata_app/newImg/home/sqjd.png',
					name: '四情基地',

				}, {
					icon: '/bigdata_app/newImg/home/zngg.png',
					name: '智能灌溉',

				}, {
					icon: '/bigdata_app/newImg/home/yhgl.png',
					name: '用户管理',
				}, {
					icon: '/bigdata_app/newImg/home/shfw.png',
					name: '售后服务',

				}, {
					icon: '/bigdata_app/newImg/home/more.png',
					name: '更多功能'
				}, {
					icon: '/bigdata_app/newImg/home/more.png',
					name: '更多功能'
				}]
			};
		},
		methods: {
			// 大棚
			async getDpDeviceList(tf) {
				const res = await this.$myRequest({
					url: '/api/v2/iot/mobile/device/dpkzg/yf/list/',
					method: 'post',
					data: {
						pageSize: this.size,
						pageNum: this.page,
					},
				});
				this.loadingtf = false;
				const eqlistdata = res || [];
				eqlistdata.forEach((item) => {
					const newtime = +new Date() / 1000;
					const days = (newtime - item.addtime) / 60 / 60 / 24;
					item.days = Math.round(days);
					item.device_id = item.devCode;
					item.uptime = item.devUpdateddate;
					item.addtime = item.devCreateddate;
					item.device_name = item.devName;
					item.real_name = item.realName;
					item.is_online = item.devStatus == 1 ? true : false;
				});
				this.eqlistdata = eqlistdata;
			},
			// 水肥
			async getDeviceList(tf) {
				const res = await this.$myRequest({
					url: '/api/v2/iot/mobile/device/sf/zsrf/list/',
					method: 'post',
					data: {
						pageSize: this.size,
						pageNum: this.page,
					},
				});
				this.loadingtf = false;
				const eqlistdata = res || [];
				eqlistdata.forEach((item) => {
					const newtime = +new Date() / 1000;
					const days = (newtime - item.addtime) / 60 / 60 / 24;
					item.days = Math.round(days);
					item.device_id = item.devCode;
					item.uptime = item.devUpdateddate;
					item.addtime = item.devCreateddate;
					item.device_name = item.devName;
					item.real_name = item.realName;
					item.is_online = item.devStatus == 1 ? true : false;
				});
				this.eqlistdata = eqlistdata;
			},
			async eqlist(tf) {
				//设备列表
				this.loadingtf = true;
				console.log(this.type_id, 'type_idtype_id');
				if (this.type_id == 42) {
					this.getDpDeviceList(tf);
					return;
				}
				if (this.type_id == 40) {
					this.getDeviceList(tf);
					return;
				}
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
					data: {
						device_type_id: this.type_id,
						page: this.page,
						page_size: this.size,
						device_id: this.imports,
						device_model: this.device_model,
					},
				});
				this.loadingtf = false;
				if ([11, 19, 20].includes(Number(this.type_id))) {
					var newtime = +new Date() / 1000;
				} else {
					var newtime = +new Date() / 1000;
				}
				res.data.forEach((item) => {
					let {
						uptime,
						addtime
					} = item;
					item.uptime = addtime;
					item.addtime = uptime;
					var days = (newtime - item.addtime) / 60 / 60 / 24;
					item.days = Math.round(days);
				});
				if (tf) {
					this.eqlistdata = this.eqlistdata.concat(res.data);
				} else {
					this.eqlistdata = res.data;
				}
				console.log(this.eqlistdata);
				// for (var i = 0; i < this.eqlistdata.length; i++) {
				//   var days = (newtime - this.eqlistdata[i].addtime) / 60 / 60 / 24;
				//   this.eqlistdata[i].days = Math.round(days);
				// }
			},
			async xyeqlist(tf) {
				//设备列表
				this.loadingtf = true;
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_list',
					data: {
						device_type_id: this.type_id,
						page: this.page,
						page_size: this.size,
						device_id: this.imports,
					},
				});
				this.loadingtf = false;
				var newtime = +new Date() / 1000;
				if (tf) {
					this.eqlistdata = this.eqlistdata.concat(res.data);
				} else {
					this.eqlistdata = res.data;
				}
				for (var i = 0; i < this.eqlistdata.length; i++) {
					var days = (newtime - this.eqlistdata[i].addtime) / 60 / 60 / 24;
					this.eqlistdata[i].days = Math.round(days);
				}
				console.log(res);
			},
			//camera.camera_manage.list_camera
			async camera() {
				//监控
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=camera.camera_manage.list_camera',
					data: {
						page_size: 1,
					},
				});
				this.accessToken = res.accessToken;
			},
			// homes.user_device_type
			async usertype() {
				//设备列表
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=home.homes.user_device_type',
				});
				console.log(res);
				for (var i = 0; i < res.length; i++) {
					if (res[i].type_name == '温室大棚') {
						continue;
					}
					var obj = {
						name: res[i].type_name,
						id: res[i].id,
						device_model: res[i].device_model,
						pur_id: res[i].pur_id,
					};
					this.list.push(obj);
				}
				console.log('设备列表11111111111111', this.list);
				if (res.length) {
					this.type_id = this.list[0].id;
					this.device_model = this.list[0].device_model;
					if (this.list[0].id == 10) {
						this.xyeqlist();
					} else {
						this.eqlist();
					}
				}
			},
			change(index) {
				console.log(index);
				//头部导航栏的点击
				this.imports = '';
				this.current = index;
				this.currents = index;
				this.page = 1;
				this.eqlistdata = [];
				this.type_id = this.list[index].id;
				this.device_model = this.list[index].device_model;
				console.log(this.type_id);
				if (this.list[index].id == 10) {
					this.xyeqlist();
				} else {
					this.eqlist();
				}
			},
			clickRight() {
				//搜索
				this.width = '90%';
			},
			modification(item) {
				uni.navigateTo({
					url: './modification?data=' + JSON.stringify(item) + '&id=' + this.type_id,
				});
			},
			top() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500,
				});
			},
			historys(itemOld) {
				let item = JSON.parse(JSON.stringify(itemOld));
				console.log('item', item, this.type_id);
				item.pur_id = this.list[this.current].pur_id;
				switch (this.type_id) {
					// 水肥新设备
					case 22:
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.imei;
						obj.is_online = item.is_online;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.device_name;
						obj.uptime = item.uptime;
						uni.navigateTo({
							url: '../waterandfernew/details?shebei=' + JSON.stringify(obj),
						});
						break;
						// 病虫害可视监测
					case 14:
						item.addtime = item.uptime;
						uni.navigateTo({
							url: '../cb/sy/detail?detail=' + JSON.stringify(item),
						});
						break;
					case 2:
						item.addtime = item.uptime;
						uni.navigateTo({
							url: '../prevention/equipmentdetails?shebei=' + JSON.stringify(item),
						});
						break;
					case 38:
						// console.log(item);
						var obj = {};
						obj.d_id = item.d_id;
						obj.equip_id = item.imei;
						obj.is_online = item.is_online;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.device_name;
						obj.uptime = item.uptime;
						uni.navigateTo({
							url: '../environment/equipment-new?shebei=' + JSON.stringify(obj),
						});
						break;
					case 5:
						console.log(item);
						var obj = {};
						obj.d_id = item.d_id;
						obj.equip_id = item.imei;
						obj.is_online = item.is_online;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.device_name;
						obj.uptime = item.uptime;
						uni.navigateTo({
							url: '../environment/equipment?shebei=' + JSON.stringify(obj),
						});
						break;
					case 6:
						uni.navigateTo({
							url: '/pages/webview/webview?device_id=' +
								item.imei +
								'&accessToken=' +
								this.accessToken,
						});
						break;
					case 3:
						item.addtime = item.uptime;
						item.type = this.type_id;
						uni.navigateTo({
							url: '../cb/equip-detail/equip-detail?info=' + JSON.stringify(item),
						});
						break;
					case 28:
						item.addtime = item.uptime;
						item.type = this.type_id;
						uni.navigateTo({
							url: '../cb/smallPest/smallPest?info=' + JSON.stringify(item),
						});
						break;
					case 4:
						item.addtime = item.uptime;
						item.type = this.type_id;
						uni.navigateTo({
							url: '../cb/equip-detail/equip-detail?info=' + JSON.stringify(item),
						});
						break;
					case 32:
					case 33:
					case 34:
					case 35:
						item.addtime = item.uptime;
						item.type = this.type_id;
						uni.navigateTo({
							url: '../cb/equip-detail/equip-detail-new?info=' +
								JSON.stringify(item),
						});
						break;
					case 7:
						item.addtime = item.uptime;
						item.type = this.type_id;
						uni.navigateTo({
							url: '../cb/equip-detail/equip-detail?info=' + JSON.stringify(item),
						});
						break;
					case 8:
						// item.type = this.type_id;
						uni.navigateTo({
							url: '../cb/thxydetail/thxydetail?imei=' + item.imei,
						});
						break;
					case 29:
						// item.type = this.type_id;
						uni.navigateTo({
							url: `../cb/nlNewXy/nlNewXy?imei=${item.imei}&showId=${item.only_for_show}`,
						});
						break;
					case 24:
						// item.type = this.type_id;
						uni.navigateTo({
							url: '../cb/zjxydetail/thxydetail?imei=' + item.imei,
						});
						break;
					case 12:
						console.log(item);
						item.addtime = item.uptime;
						uni.navigateTo({
							url: '../cb/xctdetail/xctdetail?info=' + JSON.stringify(item),
						});
						break;
					case 13:
						console.log(item);
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.imei;
						obj.is_online = item.is_online;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.device_name;
						obj.uptime = item.uptime;
						uni.navigateTo({
							url: '../waterandfer/datails?shebei=' + JSON.stringify(obj),
						});
						break;
					case 15:
						console.log(item);
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.imei;
						obj.is_online = item.is_online;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.device_name;
						obj.uptime = item.uptime;
						uni.navigateTo({
							url: '../environment/gsequipment?shebei=' + JSON.stringify(obj),
						});
						break;
					case 17:
						break;
					case 18:
						var obj = {};
						obj.device_id = item.imei;
						obj.is_online = item.is_online;
						uni.navigateTo({
							url: '../cb/shuifeiL/shuifeiL?detail=' + JSON.stringify(obj),
						});
						break;
					case 11:
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.imei;
						obj.is_online = item.is_online;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.device_name;
						obj.uptime = item.uptime;
						obj.location = item.address;
						obj.type = 11;
						uni.navigateTo({
							url: '../disease/cmb?shebei=' + JSON.stringify(obj),
						});
						break;
					case 19:
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.imei;
						obj.is_online = item.is_online;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.device_name;
						obj.uptime = item.uptime;
						obj.location = item.address;
						obj.type = 19;
						uni.navigateTo({
							url: '../disease/cmb?shebei=' + JSON.stringify(obj),
						});
						break;
					case 20:
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.imei;
						obj.is_online = item.is_online;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.device_name;
						obj.uptime = item.uptime;
						obj.location = item.address;
						obj.type = 20;
						uni.navigateTo({
							url: '../disease/cmb?shebei=' + JSON.stringify(obj),
						});
						break;
					case 21:
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.imei;
						obj.is_online = item.is_online;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.device_name;
						obj.uptime = item.uptime;
						obj.location = item.address;
						obj.type = 21;
						uni.navigateTo({
							url: '../disease/cmb?shebei=' + JSON.stringify(obj),
						});
						break;
					case 26:
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.imei;
						obj.is_online = item.is_online;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.device_name;
						obj.uptime = item.uptime;
						obj.location = item.address;
						obj.type = 26;
						uni.navigateTo({
							url: '../disease/cmb?shebei=' + JSON.stringify(obj),
						});
						break;
					case 27:
						var obj = {};
						obj.d_id = item.d_id;
						obj.device_id = item.imei;
						obj.is_online = item.is_online;
						obj.lat = item.lat;
						obj.lng = item.lng;
						obj.equip_name = item.device_name;
						obj.uptime = item.uptime;
						obj.location = item.address;
						obj.type = 26;
						uni.navigateTo({
							url: '../disease/mls/mls?shebei=' + JSON.stringify(obj),
						});
						break;
					case 25:
						item.addtime = item.uptime;
						uni.navigateTo({
							url: '../cb/xylps/detail?detail=' + JSON.stringify(item),
						});
						break;
					default:
						item.addtime = item.uptime;
						item.type = this.type_id;
						uni.navigateTo({
							url: '../cb/xy2.0/particulars?info=' + JSON.stringify(item),
						});
						break;
					case 40:
						item.addtime = item.uptime;
						console.log(item, 'itemmtiemtiemtiemtie');
						uni.navigateTo({
							url: `../cb/shuifeizs/shuifeizs?devBid=${item.devBid}&devName=${item.devName}&devStatus=${item.devStatus}`,
						});
						break;
					case 42:
						item.addtime = item.uptime;
						uni.navigateTo({
							url: `../cb/wenshizs/wenshizs?devBid=${item.devBid}&devName=${item.device_name}&devStatus=${item.devStatus}`,
						});
						break;
				}
			},
			search() {
				//搜索
				this.eqlistdata = [];
				this.page = 1;
				if (this.list[this.currents].id == 10) {
					this.xyeqlist();
				} else {
					this.eqlist();
				}
			},
			searchinput() {
				Debounce(() => {
					this.eqlistdata = [];
					this.page = 1;
					if (this.list[this.currents].id == 10) {
						this.xyeqlist();
					} else {
						this.eqlist();
					}
				}, 1000)();
			},
			scrollTop(e) {
				console.log(e);
			},
			upper() {},
			lower() {
				this.page++;
				if (this.type_id == 10) {
					this.xyeqlist(true);
				} else {
					this.eqlist(true);
				}
			},
			scroll() {},
		},
		onLoad() {
			// this.list = [];
			// this.camera();
			// this.current = 0;
			// this.currents = 0;
			// this.page = 1;
			// this.usertype();
			// this.width = 0;
		},
		onTabItemTap(e) {
			// console.log(e);
			this.eqlistdata = [];
			this.list = [];
			this.camera();
			this.current = 0;
			this.currents = 0;
			this.page = 1;
			this.usertype();
			this.width = 0;
		},
		onReachBottom() {
			this.page++;
			if (this.type_id == 10) {
				this.xyeqlist(true);
			} else {
				this.eqlist(true);
			}
		},
		onPageScroll(e) {
			//nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop > 200) {
				//距离大于200时显示
				this.isTop = true;
			} else {
				//距离小于200时隐藏
				this.isTop = false;
			}
		},
	};
</script>
<style lang="scss">
	page {
		background: linear-gradient(180deg, #ffffff00 0%, #F5F6FA 23.64%, #F5F6FA 100%), linear-gradient(102deg, #BFEADD 6.77%, #B8F1E7 40.15%, #B9EEF5 84.02%);
	}

	/deep/.uni-icons {
		font-size: 40rpx !important;
	}

	.textbox {
		width: 100%;
		height: 100vh;
		padding-top: 112rpx;
		box-sizing: border-box;

	}

	.inputs {
		width: 55%;
		margin-left: 12rpx;

		/deep/.u-content {
			background-color: #fff !important;
		}

		/deep/.uni-input-wrapper {
			background-color: #fff !important;
		}

	}

	.utabs_box {
		width: 100%;
		position: fixed;
		top: 88px;
		background-color: #ffffff;
		z-index: 100;

		.utabs {
			width: 95%;
			margin: 0 auto;
		}
	}

	.loading {
		position: fixed;
		top: 440px;
		width: 95%;
		left: 2.5%;
		text-align: center;

		.img {
			width: 300rpx;
			height: 40rpx;
		}
	}


	.listbox{
		// background: #F1F4F8;
	}


	.tab-box {
		font-size: 30rpx;
		// padding: 32rpx;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		overflow-y: hidden;
		overflow-x: auto;
		white-space: nowrap;

		.tab-item {
			cursor: pointer;
			position: relative;
			text-align: center;
			display: inline-block;
			padding: 16rpx 24rpx;
			box-sizing: border-box;

			span {
				display: inline-block;
			}
		}
	}

	.tab {
		// background-color: #0BBC58;
		margin-top: 42rpx;
		margin-bottom: 38rpx;
		padding: 0 32rpx;
		
		.img-icon {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 12rpx;
		}
		
		.text {
			color: #303133;
			font-size: 24rpx;
		}
		.tab-content {
			width: 100%;
		
			height: 162rpx;
		
		}

		.tab-item.active {

			border-radius: 24rpx;
		
			background: linear-gradient(0deg, #0bbc580f 0%, #0bbc580f 100%), #00000005;

		}
		
	}

	.second-tab {
		height: 80rpx;
		.tab-item{
			font-size: 28rpx;
			color: #999999;
		}
		.tab-item.active {
			color: #303133;
			font-weight: 700;
			
		}
		.tab-item.active::after {
		  content: '';
		  position: absolute;
		  bottom: 0;
		  left: 50%;
		  transform: translateX(-50%);
		  width: 18px; /* 比文字略宽 */
		  height: 18px;
		  border: 3px solid #0BBC58;
		  border-radius: 50%;
			border-color: transparent; /* 隐藏其他部分 */

		    border-bottom-color: #0BBC58; /* 组合成45度角 */
		    // transform: rotate(0deg); /* 调整角度 */
		}
	}

	.third-tab {
		margin: 8rpx 0;
		height: 64rpx;
		line-height: 64rpx;
		display: flex;
		justify-content: space-between;

		.third-tab-item {
			flex: 1;
			text-align: center;
		}
	}

	.list {
		width: 100%;
		background-color: #F5F6FA;
		// margin-bottom: 100rpx;
		overflow-y: auto;
		padding: 0 32rpx;
		box-sizing: border-box;

		.list_item {
			width: 100%;
			margin: 0 auto 24rpx;
			padding: 32rpx;
			box-sizing: border-box;
			position: relative;
			background-color: #ffffff;
			border-radius: 16rpx;

			.list_item_top {
		

				.p1 {
					width: 86%;

					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					overflow: hidden;

				

					.title{
						 color: #333333;
						 
						 font-size: 28rpx;
						
						 font-weight: 700;
						margin-right: 8rpx;
					}
					
					.sub-title{
						 color: #666666;
						 
						 font-size: 28rpx;
						
						 font-weight: 400;
						
					}
				}

				
			}
			.online-status{
				font-size: 28rpx;
				position: absolute;
				top:0rpx;
				text-align: center;
				right: 0rpx;
				width: 76px;
				height: 28px;
				// line-height: 28px;
				// border-radius: 0px 0px 0px 26px;
				
				// border: 1px solid #ffffff;
				image{
					width: 152rpx;
					height: 56rpx;
				}
	
			}
			// .p2 {
					
			// 	color: #0BBC58;
			// 	background: #0bbc581a;
			// }
			
			// .p_out {
					
			// 	color: #FB4E52;
			// 	background: #fb4e521a;
			// }
			.list_item_text {
				margin-top: 20rpx;
				
				p {
					font-size: 24rpx;
					color: #303133;
					margin-top: 10rpx;
					word-break: break-all;
				}
				

				.label{
					 color: #999999;
					 text-align: right;
					margin-right: 32rpx;
					 font-size: 24rpx;
				}
			}

			.list_item_btn {
				width: 126rpx;
				color: #42b983;
				height: 40rpx;
				text-align: center;
				border: 1rpx solid #42b983;
				border-radius: 25rpx;
				font-size: 24rpx;
				line-height: 35rpx;
				position: absolute;
				bottom: 15rpx;
				right: 20rpx;
			}
		}
	}

	.top {
		position: fixed;
		right: 30px;
		bottom: 100px;
		z-index: 100;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>