APP/pages/common/index/index.vue

<template>
	<view>
		<!-- 使用自定义导航栏 -->
		<custom-navbar :title="navTitle" :showBack="false" backgroundColor="#202020" color="#FFFFFF"
			rightIcon="/static/images/common/add.png" @right-click="scan"></custom-navbar>
		<view class="device-page" :style="{ paddingTop: navBarHeight + 'px' }">
			<!-- handleSend   发送信息 -->
			<view class="tab-bar-wrap">
				<scroll-view class="tab-bar" scroll-x="true" scroll-with-animation>
					<view class="tab-container">
						<view v-for="(tab, index) in tabs" :key="index"
							:class="['tab-item', activeTab === index ? 'active' : '']" @click="switchTab(tab, index)">
							{{ tab.typeName }}
						</view>
					</view>
				</scroll-view>
				<view class="tab-more" @click="allMore">
					<image src="/static/images/common/more.png" mode="aspectFit" class="more"></image>
				</view>
			</view>
			<view class="sendFlex" v-if="activeTab && activeTab.id !== '' && activeTabInfo.communicationMode == 0">
				<view class="callpolice" @click="callpolice">报警</view>
				<view class="Sendmessage" @click="location">位置</view>
				<view class="Sendmessage" @click="handleSend">发送信息</view>
			</view>
			<mescroll-uni class="device-list" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
				:down="downOption" :fixed="false">
				<view v-if="deviceList.length > 0">
					<uni-swipe-action ref="swipeAction">
						<block v-for="(item, index) in deviceList" :key="index" :ref="'swipeItem_' + index">
							<uni-swipe-action-item :right-options="Options"
								@click="handleSwipeClick($event, item, index)" class="device-card"
								:style="{ border: item.communicationMode == 0 && item.onlineStatus == 1 && item.alarmStatus == 1 ? '1px solid rgba(224, 52, 52, 1)' : 'none' }">
								<view @click.stop="handleFile(item)">
									<view class="device-header">
										<view class="deviceIMG">
											<image :src="item.devicePic" class="IMG" mode="aspectFit"></image>
										</view>
										<view class="device-name">
											<view>设备:{{ item.deviceName }}</view>
											<view class="ID">
												<view class="ID" v-if="item.communicationMode == 0">ID:{{
													item.deviceImei }}
												</view>
												<view class="ID" v-else>ID:{{ item.deviceMac }}</view>
												<!-- 在线状态 -->
												<view class="onlines"
													v-if="item.communicationMode == 0 && item.onlineStatus == 1">在线
												</view>
												<!-- 离线状态 -->
												<view class="offlines"
													v-if="item.communicationMode == 0 && item.onlineStatus == 0">离线
												</view>
												<view>电量：{{ item.battery || '0' }}%</view>
											</view>
										</view>
									</view>
									<view class="device-callpolice"
										v-if="item.communicationMode == 0 && item.onlineStatus == 1 && item.alarmStatus == 1">
										报警中</view>
									<view v-if="item.communicationMode == 1">
										<view class="device-status online">已连接</view>
										<view class="device-status unline">未连接</view>
									</view>
								</view>
								<image src="/static/images/common/cires.png" class="circle" mode="aspectFit"></image>
							</uni-swipe-action-item>
						</block>
					</uni-swipe-action>
					<!-- 加载状态提示 -->
					<view class="loading-status">
						<text v-if="loading">加载中...</text>
						<text v-if="finished">没有更多数据了</text>
					</view>
				</view>
				<view v-else class="noDATA">
					<view> <uni-icons type="image-filled" size="120" color="rgba(255, 255, 255, 0.9)"></uni-icons>
					</view>
					暂无数据
				</view>
			</mescroll-uni>
		</view>
		<!-- 删除弹框 -->
		<view class="agreement-mask" v-if="deleteShow" @click="closePopup('delete')" catchtouchmove="true">
			<view class="agreement-popupC" @click.stop>
				<view class="popup-content">
					<image src="/static/images/common/dell.png" mode="" class="svg"></image>
					<uni-icon class="trash"></uni-icon>
					<view>
						<view class="popup-Title">确定删除所选设备！</view>
					</view>
				</view>
				<!-- 按钮组 -->
				<view class="popup-buttons">
					<button class="btn agreeBtn" @click="handleBtn">确定</button>
				</view>
			</view>
		</view>
		<!-- =========重命名============== -->
		<view class="agreement-mask" v-if="RenameModel" @click="closePopup('rename')" catchtouchmove="true">
			<view class="agreement-popupD" @click.stop>
				<view class="popup-content">
					<view>
						<view class="popup-flex">
							<text>设备名称</text>
							<input type="text" v-model="deviceName" placeholder="请输入设备名称" class="popup-input"
								@click.stop />
						</view>
					</view>
				</view>
				<!-- 按钮组 -->
				<view class="popup-buttons" style="margin-top:50rpx;">
					<button class="btn agreeBtn4" @click="handleBtnName">确定</button>
				</view>
			</view>
		</view>
		<!-- 小提示框 -->
		<view class="tooltip-box" v-if="showTooltip" @click="closePopupTooltip" catchtouchmove="true">
			<view class="tooltip-arrow"></view>
			<view class="tooltip-content" @click.stop>
				<view class="tooltip-item" v-for="(item, index) in menuItems" :key="index"
					@click="handleMenuClick(item)">
					<image :src="item.icon" class="item-icon" />
					<text>{{ item.text }}</text>
				</view>
			</view>
		</view>
		<!-- ====分享，类型提示框==== -->
		<view class="tooltip-share" v-if="showshare" @click="closePopupTooltip" catchtouchmove="true">
			<view class="tooltip-arrow"></view>
			<view class="tooltip-content" @click.stop>
				<view class="tooltip-item" v-for="(item, index) in shareItems" :key="index"
					@click="handleshareClick(item)">
					<image :src="item.icon" class="item-icon" />
					<text>{{ item.text }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		deviceTypeList,
		deviceInfo,
		deviceUnbind, //删除设备
		deviceReName
	} from '@/api/common/index.js'
	import BleHelper from '@/utils/BleHelper.js';
	import MescrollUni from 'mescroll-uni/mescroll-uni.vue'
	var ble = null;
	export default {
		components: {
			MescrollUni
		},
		data() {
			return {
				navBarHeight: 70 + uni.getSystemInfoSync().statusBarHeight,
				deviceList: [],
				tabs: [],
				activeTab: 0,
				showTooltip: false,
				showshare: false,
				Options: [{
						text: '重命名',
						style: {
							backgroundColor: '#E09319',
							borderRadius: '16px',
							width: '240rpx', // 初始宽度
						},
					},
					{
						text: '删除',
						style: {
							backgroundColor: 'rgb(240, 60, 60)',
							borderRadius: '16px',
							width: '240rpx', // 初始宽度
						},
					},
				],
				navTitle: "我的设备",
				deleteShow: false,
				RenameModel: false,
				menuItems: [{
						text: '扫一扫添加',
						icon: '/static/images/common/scane.png',
						action: 'scan'
					},
					{
						text: '蓝牙添加',
						icon: '/static/images/common/bluetooth.png',
						action: 'bluetooth'
					}
				],
				shareItems: [{
						text: '所有类型',
						icon: '/static/images/common/type.png',
						action: 'type'
					},
					{
						text: '所有分享',
						icon: '/static/images/common/share.png',
						action: 'share'
					}
				],
				mescroll: null,
				downOption: {
					auto: false
				},
				upOption: {
				  auto: false,
				  noMoreSize: 1,
				  offset: 80,       
				  empty: {
				    tip: '暂无相关数据'
				  }
				},

				page: 1, // 当前页码
				size: 10, // 每页条数
				total: 0, // 总数据量
				loadedCount: 0,
				loading: false,
				finished: false,
				deviceId: '',
				deviceName: "", //重命名
				activeTabInfo: ''
			}
		},
		methods: {
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			// 下拉刷新
			downCallback() {
				const currentDeviceType = this.activeTabInfo?.id === '' ? undefined : this.activeTabInfo?.id;
				const tempList = [...this.deviceList];
				
				// 重置分页参数
				this.page = 1;
				this.finished = false;
				this.loadedCount = 0;
				
				this.getData(currentDeviceType)
					.then(() => {
						
						this.mescroll.endDownScroll(true);
					})
					.catch(() => {
						
						this.deviceList = tempList;
						this.mescroll.endDownScroll(false);
					});
			},
			// 上拉加载 
			upCallback() {
				// 防止重复加载
				if (this.finished || this.loading) {
					this.mescroll.endUpScroll(false);
					return;
				}
				const currentDeviceType = this.activeTabInfo?.id === '' ? undefined : this.activeTabInfo?.id;
				this.getData(currentDeviceType)
					.then(() => {
						const hasMore = this.loadedCount < this.total;
						console.log(`上拉加载 - 已加载: ${this.loadedCount}, 总数: ${this.total}, 是否还有更多: ${hasMore}`);
						this.mescroll.endUpScroll(hasMore);
					})
					.catch(() => {
						// 失败时回退页码
						this.page--;
						this.mescroll.endUpScroll(false);
					});
			},
			// 更多
			allMore() {
				this.showshare = !this.showshare;
			},
			// 所有分享,所有类型
			handleshareClick(item) {
				this.showshare = false;
				switch (item.action) {
					case 'type':
						uni.navigateTo({
							url: '/pages/common/allType/index'
						});
						break;
					case 'share':
						uni.navigateTo({
							url: "/pages/common/allShare/index"
						})
						break;
				}
			},
			// 点击弹框外的区域关闭
			closePopup(type) {
				if (type === 'delete') {
					this.deleteShow = false;
					uni.showTabBar();
				} else if (type === 'rename') {
					this.RenameModel = false;
					uni.showTabBar();
				}
			},
			// tab导航切换栏
			getTab() {
				deviceTypeList({}).then((res) => {
					if (res.code == 200) {
						this.tabs = [{
								id: '',
								name: '全部设备',
								typeName: '全部设备'
							},
							...res.data.map(item => ({
								id: item.id,
								name: item.typeName,
								typeName: item.typeName,
								communicationMode: item.communicationMode
							}))
						];
					}
				})
			},
			// tab切换页
			switchTab(tab, index) {
				this.deviceList = [];
				this.activeTab = index;
				this.activeTabInfo = tab;
				// 完全重置分页状态
				this.page = 1;
				this.finished = false;
				this.loadedCount = 0;
				
				const deviceType = tab.id === '' ? undefined : tab.id;
				this.getData(deviceType);
				
				if (this.mescroll) {
					this.mescroll.resetUpScroll();
				}
			},
			// 获取设备列表 - 核心修复
			getData(deviceType = '') {
				return new Promise((resolve, reject) => {
					if (this.loading || this.finished) {
						reject('正在加载或已无更多数据');
						return;
					}

					this.loading = true;
					let data = {
						pageNum: this.page,
						pageSize: this.size,
						deviceType: deviceType
					}

					deviceInfo(data).then((res) => {
						if (res.code == 200) {
							// 第一页加载时初始化总数据量
							if (this.page === 1) {
								this.total = res.total;
								this.loadedCount = 0; // 重置计数
								console.log(`第1页加载 - 总数据量: ${this.total}`);
							}
							
							const newDevices = res.rows.map(device => ({
								...device,
								showConfirm: false
							}));
							
							// 累加已加载数量
							this.loadedCount += newDevices.length;
							console.log(`第${this.page}页加载 - 新增: ${newDevices.length}, 累计: ${this.loadedCount}`);
							
							// 数据累加逻辑（第一页替换，其他页追加）
							if (this.page === 1) {
								this.deviceList = newDevices;
							} else {
								this.deviceList = [...this.deviceList, ...newDevices];
							}
							
							// 关键：正确判断是否加载完成
							if (this.loadedCount >= this.total || newDevices.length < this.size) {
								this.finished = true;
								console.log(`加载完成 - 已加载${this.loadedCount}/${this.total}`);
							} else {
								this.page++; // 只有还有数据时才增加页码
							}
							resolve();
						} else {
							reject(res.msg || '获取数据失败');
						}
					}).catch((err) => {
						console.error('获取设备列表失败:', err);
						reject(err);
					}).finally(() => {
						this.loading = false;
					});
				});
			},
			// 添加扫一扫图标
			scan() {
				this.showTooltip = !this.showTooltip;
			},
			closePopupTooltip() {
				this.showTooltip = !this.showTooltip
				this.showshare = !this.showshare
			},
			// 添加设备,扫一扫,蓝牙
			handleMenuClick(item) {
				this.showTooltip = false;
				switch (item.action) {
					case 'scan':
						uni.scanCode({
							success: (res) => {
								const cleanedResult = res.result.trim();
								uni.navigateTo({
									url: `/pages/common/qrcode/qrcode?deviceId=${encodeURIComponent(cleanedResult)}`
								});
							},
							fail: (err) => {
								console.log('扫码失败', err);
								uni.showToast({
									title: '扫码失败',
									icon: 'none'
								});
							}
						});
						break;
					case 'bluetooth':
						uni.navigateTo({
							url: "/pages/common/addBLE/addEquip"
						})
						break;
				}
			},
			// 右滑点击事件处理
			handleSwipeClick(e, item, index) {
				switch (e.content.text) {
					case '删除':
						this.handleDeleteDevice(item, index)
						break
					case '重命名':
						this.handleRenameDevice(item, index)
						break
				};
			},
			// 删除设备
			handleDeleteDevice(item, index) {
				this.deviceId = item
				this.deleteShow = true
				uni.hideTabBar()
			},
			// 确认删除
			handleBtn() {
				uni.showTabBar()
				deviceUnbind(this.deviceId.id).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '删除成功',
							icon: 'none',
							duration: 1000
						});
						setTimeout(() => {
							this.onIntall();
							this.getTab()
						}, 500);
						this.deleteShow = false
						if (this.$refs.swipeAction) {
							this.$refs.swipeAction.closeAll();
						}

						ble && ble.DropDevice(this.deviceId.id);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						});
					}
				})
			},
			// 重命名设备
			handleRenameDevice(item, index) {
				this.RenameModel = true
				uni.hideTabBar()
				this.deviceId = item
			},
			handleBtnName() {
				uni.showTabBar()
				deviceReName({
					id: this.deviceId.id,
					deviceName: this.deviceName
				}).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						});
						setTimeout(() => {
							this.onIntall();
						}, 500);
						this.RenameModel = false
						this.deviceName = ''
						if (this.$refs.swipeAction) {
							this.$refs.swipeAction.closeAll();
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						});
					}
				})
			},
			// 报警 
			callpolice() {
				const currentTab = this.tabs[this.activeTab];
				uni.navigateTo({
					url: '/pages/6170/callPolice/index',
					success: (res) => {
						res.eventChannel.emit('devicePolice', {
							data: currentTab
						});
					}
				})
			},
			// 发生短信
			handleSend() {
				const currentTab = this.tabs[this.activeTab];
				uni.navigateTo({
					url: '/pages/common/send/index',
					success: (res) => {
						res.eventChannel.emit('deviceSend', {
							data: currentTab
						});
					}
				})
			},
			// 位置
			location() {
				uni.navigateTo({
					url: '/pages/common/map/index',
					success: (res) => {
						res.eventChannel.emit('Map', {
							data: this.deviceList,
						});
					}
				})
			},
			// 列表跳转
			handleFile(item) {
				let url = item.detailPageUrl;
				uni.navigateTo({
					url: url,
					success: (res) => {
						res.eventChannel.emit('detailData', {
							data: item,
							deviceType: this.tabs[this.activeTab].id || '',
							apiType: 'listA'
						});
					},
					fail(ex) {
						console.log("ex=", ex);
					}
				})
			},
			onIntall() {
				this.page = 1;
				this.finished = false;
				this.loadedCount = 0; // 重置计数
				const deviceType = this.activeTabInfo?.id === '' ? undefined : this.activeTabInfo?.id;
				this.getData(deviceType);
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 800);
			},
			updateDeviceStatus(data) {
				this.deviceList = this.deviceList
					.map(item => {
						if (!item) return null;
						if (item.communicationMode == 0) {
							let messageData;
							try {
								messageData = data.message;
							} catch (e) {
								return item;
							}
							const [deviceId, onlineStatus, battery] = messageData.state || [];
							return {
								...item,
								battery: battery ?? item.battery,
								onlineStatus: onlineStatus ?? item.onlineStatus,
								lastUpdate: data.timestamp,
							};
						}
						return item;
					})
					.filter(Boolean);
			},
		},
		onLoad() {
			this.getTab()
			this.onIntall()
			uni.$on('refreshDeviceList', () => {
				this.getTab()
				this.onIntall()
			});
			uni.$on('deviceStatusUpdate', (data) => {
				this.onIntall()
			});
			ble = BleHelper.getBleTool();
		},
		beforeDestroy() {
			uni.$off('refreshDeviceList');
		},
		onUnload() {
			uni.$off('deviceStatusUpdate');
		}

	}
</script>

<style>
	/* 保持原有样式不变 */
	.device-page {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: rgb(18, 18, 18);
		padding: 30rpx;
	}

	.tab-bar {
		width: 100%;
		color: rgb(255, 255, 255);
		white-space: nowrap;
		overflow: hidden;
		position: relative;

	}

	.tab-container {
		display: flex;
		cursor: pointer;
		margin-bottom: 40rpx;
		padding-right: 80rpx;
	}

	.tab-item {
		font-size: 28rpx;
		padding: 0 30rpx;
		text-align: center;
	}

	.active {
		color: rgba(187, 230, 0, 1);
		border-bottom: 6rpx solid rgba(187, 230, 0, 1);
		height: 60rpx;
	}

	.sendFlex {
		display: flex;
		color: rgba(255, 255, 255, 0.87);
		justify-content: flex-end;
		cursor: pointer;
		margin-bottom: 30rpx;
		font-size: 28rpx;
	}

	.tab-bar-wrap {
		display: flex;
		align-items: baseline;
		position: relative;
	}

	.tab-more {
		margin-left: 10rpx;
		display: flex;
		align-items: center;
		background: linear-gradient(-88.60deg, rgba(18, 18, 18, 1), rgba(18, 18, 18, 0) 100%);
	}

	.more {
		width: 40rpx;
		height: 8rpx;
	}

	.Sendmessage {
		margin-left: 50rpx;
		color: rgba(255, 255, 255, 0.87);
	}

	.callpolice {
		color: rgba(224, 52, 52, 1);
	}

	/* 设备卡片 */
	.device-card {
		background-color: rgb(26, 26, 26);
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		position: relative;
	}

	.device-header {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
		padding: 30rpx 0 10rpx 30rpx;
	}

	.unline {
		color: rgba(255, 255, 255, 0.4);
	}

	.device-name {
		font-size: 32rpx;
		color: rgba(255, 255, 255, 0.87);
		margin-left: 24rpx;
		line-height: 50rpx;
		width: 75%;
		white-space: nowrap;
	}

	.ID {
		color: rgba(255, 255, 255, 0.6);
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
		position: relative;

	}

	.device-callpolice {
		width: 122rpx;
		height: 52rpx;
		font-size: 24rpx;
		border-radius: 0px 8px 0px 8px;
		background-color: rgba(224, 52, 52, 1);
		position: absolute;
		top: 0rpx;
		right: -4rpx;
		text-align: center;
		line-height: 52rpx;
		color: #fff;
	}

	.device-status {
		width: 122rpx;
		height: 52rpx;
		font-size: 26rpx;
		border-radius: 0px 8px 0px 8px;
		background-color: rgb(42, 42, 42);
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		text-align: center;
		line-height: 52rpx;
	}

	.circle {
		width: 8rpx;
		height: 40rpx;
		position: absolute;
		right: 25rpx;
		top: 60rpx;
	}

	.online {
		color: rgb(187, 230, 0);
	}

	.deviceIMG {
		width: 100rpx;
		height: 100rpx;
		border-radius: 16rpx;
		position: relative;
		background-color: rgba(42, 42, 42, 0.6);
		display: flex;
		align-items: center;
	}

	.IMG {
		width: 68rpx;
		height: 50rpx;
		margin-left: 17%;
		object-fit: contain;
	}

	.onlines {
		position: relative;
	}

	.onlines::before {
		content: '';
		position: absolute;
		width: 15rpx;
		height: 15rpx;
		background: rgb(0, 171, 103);
		border-radius: 50%;
		top: 20rpx;
		left: -20rpx
	}

	.offlines {
		position: relative;
	}

	.offlines::before {
		content: '';
		position: absolute;
		width: 15rpx;
		height: 15rpx;
		background: rgba(255, 255, 255, 0.4);
		border-radius: 50%;
		top: 20rpx;
		left: -20rpx
	}

	.loading-status {
		text-align: center;
		color: rgba(255, 255, 255, 0.6);
		padding: 20rpx;
		font-size: 22rpx;
	}

	.noDATA {
		text-align: center;
		color: rgba(255, 255, 255, 0.87);
		transform: translate(-0%, 100%);
	}

	/* 遮罩层 */
	.agreement-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	.popup-Title {
		color: rgba(255, 255, 255, 0.86);
		text-align: center;
		padding: 30rpx 0rpx;
	}

	.popup-buttons {
		display: flex;
		text-align: center;
	}

	.agreement-popupC {
		width: 60%;
		background-color: rgb(42, 42, 42);
		border-radius: 40rpx;
		padding: 30rpx;
		text-align: center;
		border: 1px solid rgba(255, 200, 78, 0.3);
	}

	.agreement-popupD {
		width: 70%;
		background-color: rgb(42, 42, 42);
		border-radius: 40rpx;
		padding: 40rpx;
		text-align: center;
		border: 1px solid rgba(187, 230, 0, 0.3);
	}

	.popup-flex {
		display: flex;
		white-space: nowrap;
		color: rgba(255, 255, 255, 0.87);
		height: 50rpx;
		padding: 30rpx;
		align-items: center;
	}

	.popup-input {
		border: 1px solid rgba(255, 255, 255, 0.4);
		border-radius: 12rpx;
		margin-left: 15rpx;
		padding: 10rpx 0rpx;
		font-size: 28rpx;
	}

	.svg {
		width: 58rpx;
		height: 62rpx;
	}

	/* 通用按钮样式 */
	.btn {
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 40rpx;
		font-size: 24rpx;
		margin: 10rpx auto;
		text-align: center;

	}

	.agreeBtn {
		background: #FFC84E;
		color: #232323;
		border: none;
		width: 170rpx !important;
	}

	.agreeBtn4 {
		background: rgba(187, 230, 0, 1);
		color: #232323;
		border: none;
		width: 170rpx !important;
	}

	.closeBtn {
		border: 1px solid rgba(255, 255, 255, 0.2);
		background-color: rgba(35, 35, 35, 0.87);
		color: rgba(255, 255, 255, 1);
	}

	/* 提示框样式 */
	.tooltip-box {
		position: fixed;
		right: 18rpx;
		top: 140rpx;
		z-index: 9999;
	}

	.tooltip-share {
		position: fixed;
		right: 18rpx;
		top: 230rpx;
		z-index: 9999;
	}

	.tooltip-arrow {
		width: 0;
		height: 0;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-bottom: 8px solid #333;
		position: absolute;
		right: 12px;
		top: -8px;
	}

	.tooltip-content {
		border-radius: 8rpx;
		backdrop-filter: blur(14px);
		background: rgba(58, 58, 58, 1);
		padding: 10px 0;
		min-width: 120px;
	}

	.tooltip-item {
		padding: 8px 16px;
		display: flex;
		align-items: center;
		color: #fff;
	}

	.tooltip-item text {
		margin-left: 8px;
		font-size: 14px;
	}

	.item-icon {
		width: 16px;
		height: 16px;
	}
</style>