kyj-yanglao-bigscreen-web2/src/layout/index.vue

<script setup>
	import { defineProps, onMounted, ref, watch, onUnmounted, h } from 'vue';
	import { RouterView, useRoute, useRouter } from 'vue-router';
	import { SlackCircleFilled, FullscreenOutlined, CaretDownOutlined, VideoCameraFilled } from '@ant-design/icons-vue';
	import { findAllChannelsByUserAPI, getOrganCameraListAPI, getWeatherAPi } from '@/api/layout/index.js';
	import { useMechanismStore } from '@/store/index.js';
	import { toggle } from '@/utils/full.js';
	import { message, notification } from 'ant-design-vue';
	import $bus from '@/utils/mitt.js';
	const store = useMechanismStore();

	const router = useRouter();
	const route = useRoute();

	const isGrid = ref(localStorage.getItem('isGrid'));
	const routerList = ref({});
	const routerListShow = ref(false);

	const findAllChannelsByUserList = ref([]);
	const findAllChannelsByUserListShow = ref(false);

	const openPages = () => {
		routerListShow.value = !routerListShow.value;
		//routerList.value = router.getRoutes();
		routerList.value = [
			{
				meta: { title: '数据总览' },
				path: '/'
			},
			{
				meta: { title: '健康数据' },
				path: '/health_data'
			},
			{
				meta: { title: '报警数据' },
				path: '/alarm_data'
			},
			{
				meta: { title: '个人中心' },
				path: '/personal_center'
			},
			{
				meta: { title: '体征数据' },
				path: '/sign_data'
			}
		];
	};

	const selectNowRouter = item => {
		routerListShow.value = false;

		router.push(item.path);
	};
	const title = ref(0);

	watch(store, val => {
		title.value = route.query.title ? route.query.title : '';
	});

	// 监听路由变化，处理URL参数中的机构信息
	watch(
		() => route.query,
		(newQuery, oldQuery) => {
			// 当tenantId或tenantName变化时，重新处理
			if (newQuery.tenantId && newQuery.tenantName) {
				handleTenantFromQuery();
			}
		},
		{ immediate: false }
	);

	const findAllChannelsByUserParams = ref({
		pageNum: 1,
		pageSize: 20
	});
	const findAllChannelsByUserLoading = ref(false);

	const weather_info = ref({});

	// 获取天气
	function get_weatherinfofun() {
		getWeatherAPi().then(res => {
			console.log(res);
			if (res.data.weather) {
				weather_info.value = res.data.weather[0];
			}
		});
	}

	// 获取机构
	function findAllChannelsByUser() {
		if (findAllChannelsByUserLoading.value) return;
		findAllChannelsByUserLoading.value = true;
		findAllChannelsByUserAPI({}).then(res => {
			findAllChannelsByUserList.value = res.data;

			// if (!store.$state.mechanismData) {
			//   console.log(findAllChannelsByUserList.value[0]);
			//   selectFindAllChannelsByUser(findAllChannelsByUserList.value[0]);
			// }

			// if (res.data.length === 0) {
			//   findAllChannelsByUserParams.value.pageNum;
			// }
			// findAllChannelsByUserList.value = findAllChannelsByUserList.value.concat(
			//   res.data
			// );
			findAllChannelsByUserLoading.value = false;
		});
	}

	const openFindAllChannelsByUserList = () => {
		findAllChannelsByUserListShow.value = !findAllChannelsByUserListShow.value;
	};

	const selectFindAllChannelsByUser = item => {
		store.setMechanismData(item);
		console.log(item);
		findAllChannelsByUserListShow.value = false;
		const tentantId = item.tentantId;
		const title = item.tentantName;
		window.location.href = '/index/roomdetail?tenantId=' + tentantId + '&title=' + title;
		// router.push({
		//   path: "/index/roomdetail",
		//   query: {
		//     tenantId: tentantId,
		//   },
		// });
	};

	// 处理从URL参数接收的机构信息
	const handleTenantFromQuery = () => {
		const tenantId = route.query.tenantId;
		const tenantName = route.query.tenantName;

		// 如果URL中有tenantId和tenantName，说明是从外部系统传入的机构信息
		if (tenantId && tenantName) {
			localStorage.setItem('isGrid', 1);
			isGrid.value = 1;
			console.log('从URL接收机构信息:', { tenantId, tenantName });

			// 构造机构数据对象，格式与selectFindAllChannelsByUser使用的格式一致
			const tenantInfo = {
				tentantId: tenantId,
				tentantName: tenantName,
				groupFlag: 0
			};

			// 设置到store中
			store.setMechanismData(tenantInfo);

			// 更新title显示
			title.value = tenantName;

			// 如果当前不在roomdetail页面，则跳转到roomdetail页面
			if (route.path !== '/index/roomdetail') {
				router.push({
					path: '/index/roomdetail',
					query: {
						tenantId: tenantId,
						title: tenantName
					}
				});
			}
		} else {
			localStorage.setItem('isGrid', 0);
			isGrid.value = 0;
		}
	};

	function jump_indpage() {
		if (isGrid.value == 0) {
			routerListShow.value = false;
			router.push('/index');
		}
	}

	const findAllChannelsByUserListScroll = e => {
		if (e.target) {
			// 滚动容器的高度
			const containerHeight = e.target.clientHeight;
			// 滚动内容的总高度
			const contentHeight = e.target.scrollHeight - 1;
			// 当前滚动位置
			const scrollPosition = e.target.scrollTop;

			// 判断是否滚动到底部
			if (scrollPosition + containerHeight > contentHeight) {
				// 在此处可以触发加载更多内容或其他操作
				// findAllChannelsByUserParams.value.pageNum++;
				// findAllChannelsByUser();
			}
		}
	};

	// 远程视频
	const openVideo = () => {
		getOrganCameraListAPI({
			pageNum: 1, //页数
			pageSize: 10, //条数
			params: {
				orgId: store.channelId //机构ID（查询全部传null）
			}
		}).then(res => {
			//console.log(res.data[0].url);
			if (res.data.length) {
				window.open(res.data[0].url);
			} else {
				message.error('暂无视频');
			}
		});
	};

	onUnmounted(() => {
		// 清理所有定时器
		stopHeartbeat();
		if (reconnectTimeout) {
			clearTimeout(reconnectTimeout);
			reconnectTimeout = null;
		}

		// 正常关闭连接
		if (socket.value) {
			socket.value.close(1000, '页面关闭');
			socket.value = null;
		}
	});

	onMounted(() => {
		// 优先处理从URL参数传入的机构信息（外部系统传入）
		handleTenantFromQuery();

		findAllChannelsByUser();
		// get_weatherinfofun();
		title.value = route.query.title ? route.query.title : '';
		// 页面加载后自动连接
		setTimeout(() => {
			connect();
		}, 1000);

		// 页面可见性变化处理
		// 页面可见性变化处理
		document.addEventListener('visibilitychange', () => {
			if (document.hidden) {
				console.log('页面切换到后台');
			} else {
				console.log('页面回到前台');
				// 检查连接和心跳状态
				checkConnectionHealth();
			}
		});
		// 添加定期健康检查
		setInterval(() => {
			checkConnectionHealth();
		}, 30000); // 每30秒检查一次连接健康状态

		// 网络状态监测
		window.addEventListener('online', () => {
			if (!socket.value) {
				connect();
			}
		});

		window.addEventListener('offline', () => {
			console.log('网络连接断开');
		});
	});

	// websocket设备连接
	// 响应式数据
	const socket = ref(null);
	const isConnecting = ref(false);
	const connectionId = ref(null);
	const reconnectAttempts = ref(0);
	const maxReconnectAttempts = ref(10);
	const lastActivityTime = ref('-');
	const initTime = ref(new Date().toLocaleTimeString());
	const events = ref([]);
	// 定时器引用
	let heartbeatInterval = null;
	let heartbeatTimeout = null;
	let reconnectTimeout = null;
	let lastActivity = Date.now();
	const heartbeatIntervalTime = 25000; // 25秒发送一次心跳
	const heartbeatTimeoutTime = 10000; // 10秒心跳响应超时

	// 添加心跳状态响应式变量
	const heartbeatStatus = ref('normal'); // normal: 正常, waiting: 等待响应, timeout: 超时, expired: 过期
	const lastHeartbeatTime = ref(null); // 最后一次发送心跳的时间
	const lastHeartbeatAckTime = ref(null); // 最后一次收到心跳响应的时间

	// 连接websocket方法
	const connect = () => {
		// 连接已存在或连接中，跳过重复连接
		if (isConnecting.value || socket.value) {
			return;
		}
		isConnecting.value = true;
		// 连接中...
		// 清除之前的重连定时器
		if (reconnectTimeout) {
			clearTimeout(reconnectTimeout);
			reconnectTimeout = null;
		}
		try {
			const clientId = generateClientId();
			// 连接地址: ${wsUrl}
			const isGrid = localStorage.getItem('isGrid');
			const urlObj = {
				0: import.meta.env.VITE_API_WSS_URL,
				1: import.meta.env.VITE_API_WSS_URL_org
			};
			const wsUrl = urlObj[isGrid] + clientId;
			socket.value = new WebSocket(wsUrl);
			socket.value.onopen = handleOpen;
			socket.value.onmessage = handleMessage;
			socket.value.onclose = handleClose;
			socket.value.onerror = handleError;
		} catch (error) {
			// 连接创建错误: ${error.message}
			handleConnectionFailure();
		}
	};

	const sendMessage = message => {
		if (socket.value && socket.value.readyState === WebSocket.OPEN) {
			try {
				socket.value.send(JSON.stringify(message));
				lastActivity = Date.now();
				updateLastActivity();
				return true;
			} catch (error) {
				// 发送消息失败: ${error.message}
				return false;
			}
		} else {
			// 无法发送消息: WebSocket未连接
			return false;
		}
	};

	// 连接成功
	const handleOpen = event => {
		isConnecting.value = false;
		reconnectAttempts.value = 0;
		lastActivity = Date.now();
		// WebSocket连接成功
		// 启动心跳机制
		startHeartbeat();
		// 发送身份验证消息
		const isGrid = localStorage.getItem('isGrid');
		const objApiMonitor = {
			0: 'instcare-bigscreen',
			1: 'instcare-web-orgadmin'
		};
		let postData = {
			type: 'AUTH',
			clientType: objApiMonitor[isGrid],
			clientId: generateClientId(),
			timestamp: Date.now()
		};
		if (isGrid == 1) {
			postData.organizationId = Number(store.tentantId || 0);
		}
		console.log('postData', postData);
		sendMessage(postData);
	};

	// 获取到服务器发送的消息
	const handleMessage = event => {
		try {
			lastActivity = Date.now();
			updateLastActivity();

			const data = JSON.parse(event.data);
			processIncomingData(data);
		} catch (error) {
			console.error('消息解析错误:', error, '原始数据:', event.data);
		}
	};

	// 处理心跳响应
	const handleHeartbeatAck = data => {
		console.log('心跳消息', data);
		// 清除超时检测
		if (heartbeatTimeout) {
			clearTimeout(heartbeatTimeout);
			heartbeatTimeout = null;
		}

		heartbeatStatus.value = 'normal';
		lastHeartbeatAckTime.value = Date.now();
		lastActivity = Date.now();
		updateLastActivity();

		console.log('💓 心跳响应正常');
	};

	// 新增：连接健康检查
	const checkConnectionHealth = () => {
		if (!socket.value || socket.value.readyState !== WebSocket.OPEN) {
			return;
		}

		const now = Date.now();
		const timeSinceLastActivity = now - lastActivity;
		const timeSinceLastHeartbeat = now - (lastHeartbeatTime.value || 0);
		const totalTimeout = heartbeatIntervalTime + heartbeatTimeoutTime;

		console.log('🔍 连接健康检查:');
		console.log('最后活动:', Math.round(timeSinceLastActivity / 1000) + '秒前');
		console.log('最后心跳:', Math.round(timeSinceLastHeartbeat / 1000) + '秒前');
		console.log('心跳状态:', heartbeatStatus.value);

		// 如果超过总超时时间无活动，认为连接已死
		if (timeSinceLastActivity > totalTimeout + 10000) {
			// 额外给10秒缓冲
			console.error('🚨 连接长时间无活动，可能已断开');
			heartbeatStatus.value = 'expired';
			handleHeartbeatExpired();
			return;
		}

		// 如果心跳等待时间过长，发送测试消息
		if (heartbeatStatus.value === 'waiting' && timeSinceLastHeartbeat > heartbeatTimeoutTime + 5000) {
			console.warn('⚠️ 心跳响应延迟，发送测试消息');
			sendMessage({ type: 'PING', timestamp: now });
		}
	};

	const handleClose = event => {
		console.log(`WebSocket连接关闭: 代码 ${event.code}, 原因: ${event.reason || '未知'}`);

		isConnecting.value = false;
		socket.value = null;
		connectionId.value = null;
		heartbeatStatus.value = 'expired'; // 连接关闭时标记为过期

		// 停止心跳检测
		stopHeartbeat();

		// 清除可能存在的重连定时器
		if (reconnectTimeout) {
			clearTimeout(reconnectTimeout);
			reconnectTimeout = null;
		}

		// 判断是否需要重连（非正常关闭且未超过最大重连次数）
		if (event.code !== 1000 && reconnectAttempts.value < maxReconnectAttempts.value) {
			reconnectAttempts.value++;
			const delay = Math.min(3000 * Math.pow(1.5, reconnectAttempts.value - 1), 30000);

			console.log(`${Math.round(delay / 1000)}秒后尝试重连 (${reconnectAttempts.value}/${maxReconnectAttempts.value})`);

			reconnectTimeout = setTimeout(() => {
				// 检查是否已经重新连接
				if (!socket.value && !isConnecting.value) {
					connect();
				}
			}, delay);
		} else if (reconnectAttempts.value >= maxReconnectAttempts.value) {
			console.error('已达到最大重连次数，停止自动重连');
			heartbeatStatus.value = 'expired';
		}
	};

	const handleError = event => {
		console.error('WebSocket错误详情:', event);
	};

	// 修改心跳检测逻辑
	const startHeartbeat = () => {
		// 先停止可能存在的旧心跳
		stopHeartbeat();

		// 初始化心跳状态
		heartbeatStatus.value = 'normal';
		lastHeartbeatTime.value = Date.now();

		// 定时发送心跳
		heartbeatInterval = setInterval(() => {
			// 检查连接状态
			if (!socket.value || socket.value.readyState !== WebSocket.OPEN) {
				console.log('连接已断开，停止心跳');
				heartbeatStatus.value = 'expired';
				stopHeartbeat();
				return;
			}

			// 检查上次心跳是否过期（超过间隔+超时时间未收到响应）
			const now = Date.now();
			const timeSinceLastHeartbeat = now - lastHeartbeatTime.value;
			const totalTimeout = heartbeatIntervalTime + heartbeatTimeoutTime;

			if (lastHeartbeatTime.value && timeSinceLastHeartbeat > totalTimeout) {
				console.warn(`💔 心跳已过期，距离上次心跳${Math.round(timeSinceLastHeartbeat / 1000)}秒，触发重连`);
				heartbeatStatus.value = 'expired';
				handleHeartbeatExpired();
				return;
			}

			// 发送心跳
			heartbeatStatus.value = 'waiting';
			lastHeartbeatTime.value = now;
			let params = {
				type: 'HEARTBEAT',
				timestamp: now,
				clientTime: now
			};
			console.log('params', params);
			const success = sendMessage(params);

			if (success) {
				// 设置心跳超时检测
				if (heartbeatTimeout) {
					clearTimeout(heartbeatTimeout);
				}

				heartbeatTimeout = setTimeout(() => {
					console.warn('💔 心跳响应超时，连接可能已断开');
					heartbeatStatus.value = 'timeout';
					handleHeartbeatTimeout();
				}, heartbeatTimeoutTime);
			} else {
				console.warn('心跳发送失败，连接可能有问题');
				heartbeatStatus.value = 'timeout';
				handleHeartbeatTimeout();
			}
		}, heartbeatIntervalTime);
	};

	// 新增：处理心跳过期
	const handleHeartbeatExpired = () => {
		console.error('🚨 心跳已过期，关闭连接并重新连接');

		// 停止所有定时器
		stopHeartbeat();

		// 关闭当前连接
		if (socket.value) {
			socket.value.close(1000, '心跳过期');
			socket.value = null;
		}

		// 立即重新连接
		reconnectAttempts.value = 0; // 重置重连计数
		setTimeout(() => {
			if (!socket.value && !isConnecting.value) {
				console.log('开始心跳过期重连...');
				connect();
			}
		}, 1000);
	};

	// 新增：处理心跳超时
	const handleHeartbeatTimeout = () => {
		console.warn('⏰ 心跳响应超时，关闭连接触发重连');

		// 停止心跳检测
		stopHeartbeat();

		// 主动关闭连接触发重连机制
		if (socket.value) {
			socket.value.close(1000, '心跳响应超时');
		}
	};

	const stopHeartbeat = () => {
		if (heartbeatInterval) {
			clearInterval(heartbeatInterval);
			heartbeatInterval = null;
		}
		if (heartbeatTimeout) {
			clearTimeout(heartbeatTimeout);
			heartbeatTimeout = null;
		}
	};

	const processIncomingData = data => {
		if (!data || !data.type) {
			// 收到无效消息格式
			return;
		}

		switch (data.type) {
			case 'CONNECT_SUCCESS':
				handleConnectSuccess(data);
				break;
			case 'AUTH_SUCCESS':
				handleAuthSuccess(data);
				break;
			case 'SOS_ALERT':
				// 需要展示的数据
				handleSOSAlert(data);
				break;
			case 'DEVICE_DATA_UPDATE':
				handleDeviceData(data);
				break;
			case 'SYSTEM_STATS_UPDATE':
				handleStatsUpdate(data);
				break;
			case 'HEARTBEAT_ACK':
				handleHeartbeatAck(data);
				break;
			default:
				handleGenericMessage(data);
		}
	};

	const handleConnectSuccess = data => {
		console.log('WebSocket连接成功');
		// 连接成功，连接ID: ${connectionId.value}
		connectionId.value = data.connectionId;
	};

	const handleAuthSuccess = data => {
		console.log('身份验证成功');
	};

	const handleSOSAlert = alertData => {
		console.log('alertData', alertData);
		try {
			const alert = alertData.data || alertData;
			// 发送确认消息
			sendMessage({
				type: 'SOS_ACK',
				alertId: alertData.timestamp,
				timestamp: Date.now()
			});
			notification.warning({
				message: h('div', {
					style: {
						color: '#fff',
						// fontSize: '18px'
						fontSize: '0.1rem'
					},
					innerHTML: `
					<div>🚨🚨 SOS紧急预警 🚨🚨</div>
					`
				}),
				duration: 10,
				// duration: null,
				class: 'my-warning-notification',
				style: {
					background: 'linear-gradient(135deg, #1e4184 0%, #3469e3 100%) !important',
					border: '1px solid rgba(42, 157, 143, 0.3) !important',
					'box-shadow': '0 4px 20px rgba(0, 0, 0, 0.5) !important',
					color: '#fff !important',
					width: '2rem !important'
				},
				description: h('div', {
					style: {
						color: '#fff',
						fontSize: '0.1rem'
					},
					innerHTML: `
	         <div>院区名称: ${alert.organizationName || '未知'}</div>
	         <div>长者姓名: ${alert.elderName || '未知'}</div>
	         <div>长者房间: ${alert.roomName || '未知'}</div>
			 <div>设备类型: ${alert.deviceType || '未知'}</div>
			 <div>设备电量: ${alert.batteryLevel || '0%'}</div>
	         <div>时间: ${new Date(alertData.timestamp).toLocaleString()}</div>
	       `
				})
			});
			$bus.emit('roomDetails', alertData);
			// 重新获取信息
			// overviewStatistics()
			// <div>设备: ${alert.deviceId || '未知'}</div>
			//  ${alert.location ? `<div>位置: 经度${alert.location.longitude?.toFixed(6)}, 纬度${alert.location.latitude?.toFixed(6)}</div>` : ''}
		} catch (error) {
			console.error('处理SOS告警错误:', error);
		}
	};

	const handleDeviceData = deviceData => {
		console.log('deviceData', deviceData);
	};

	const handleStatsUpdate = statsData => {
		console.log('statsData', statsData);
	};

	// 修改普通消息处理，不干扰心跳检测
	const handleGenericMessage = data => {
		console.log('收到普通消息:', data);
		// 这里只更新最后活动时间，但不影响心跳超时检测
		lastActivity = Date.now();
		updateLastActivity();
	};

	const updateLastActivity = () => {
		lastActivityTime.value = new Date().toLocaleTimeString();
	};

	const generateClientId = () => {
		const timestamp = Date.now();
		const random = Math.random().toString(36).substr(2, 9);
		return `monitor_${timestamp}_${random}`;
	};

	const handleConnectionFailure = () => {
		isConnecting.value = false;
		socket.value = null;

		// 连接创建失败也尝试重连
		if (reconnectAttempts.value < maxReconnectAttempts.value) {
			reconnectAttempts.value++;
			const delay = Math.min(3000 * Math.pow(1.5, reconnectAttempts.value - 1), 30000);

			reconnectTimeout = setTimeout(() => {
				if (!socket.value && !isConnecting.value) {
					connect();
				}
			}, delay);
		}
	};
</script>

<template>
	<div>
		<div class="weatherbox">
			<div class="lfet_box">
				<span>{{ weather_info.city }}</span>
				<span>{{ weather_info.weather }}</span>
				<!-- <span>风力 {{ weather_info.windpower }}级</span>
        <span>方向 {{ weather_info.winddirection }}</span> -->
			</div>
			<div class="rgiht_box">
				<!-- <span
          >{{ weather_info.temperature }}℃ 空气湿度{{
            weather_info.humidity_float
          }}</span
        > -->
			</div>
		</div>
		<div class="layout">
			<!-- <img src="../assets/img/common/bg3.png" alt="" /> -->
			<div class="title">
				<div class="flex title_item full_screen" @click="toggle">
					<FullscreenOutlined />
					<div class="title_item_text">全屏</div>
				</div>

				<div class="flex title_item meat_name" @click="openFindAllChannelsByUserList" v-if="isGrid == 0">
					<!--<div class="title_item_text">海珠颐年养老</div>  -->
					<div class="title_item_text">{{ title ? title : store.name }}</div>
					<CaretDownOutlined />
					<div class="findAllChannelsByUser-list" v-show="findAllChannelsByUserListShow" @scroll="findAllChannelsByUserListScroll">
						<div v-for="item in findAllChannelsByUserList" :key="item">
							<div @click.stop="selectFindAllChannelsByUser(item)" v-if="item.tentantName">
								{{ item.tentantName }}
							</div>
						</div>
						<!-- <template v-for="item in findAllChannelsByUserList">
            <div
              @click.stop="selectFindAllChannelsByUser(item)"
              v-if="item.sysChannelOrg.orgName">
              {{ item.sysChannelOrg.orgName }}
            </div>
          </template> -->
					</div>
				</div>

				<div class="flex title_item title_item_info">
					<!--<SlackCircleFilled/>-->
					<div class="title_item_text" @click="jump_indpage">颐年智慧医养数字化平台</div>
				</div>

				<div class="flex title_item page_type" @click="openPages" v-if="isGrid == 0">
					<div class="title_item_text">{{ route.meta.title }}</div>
					<CaretDownOutlined />

					<div class="router-list" v-show="routerListShow">
						<div v-for="item in routerList" :key="item">
							<div @click.stop="selectNowRouter(item)" v-if="item.meta.title">
								{{ item.meta.title }}
							</div>
						</div>
					</div>
				</div>

				<div class="flex title_item video_telephone" @click="openVideo">
					<VideoCameraFilled />
					<div class="title_item_text">远程视频</div>
				</div>
			</div>
			<div class="content">
				<RouterView />
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	@import '@/assets/css/layout.css';
	.weatherbox {
		width: 100%;
		z-index: 99;
		display: flex;
		justify-content: space-between;
		position: absolute;
		top: 0;
		padding: 14px 0;
		.lfet_box {
			display: flex;
			margin-left: 30px;
			span {
				margin-right: 20px;
				color: #f0f0f0;
				font-size: 14px;
			}
		}
		.rgiht_box {
			display: flex;
			margin-right: 30px;
			span {
				color: #f0f0f0;
				font-size: 14px;
			}
		}
	}

	.layout {
		background-image: url('../assets/img/common/bg3.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		.title {
			// z-index: 50;
			// position: absolute;
			// top: 0;
			// right: 0;
			// left: 0;
			height: 120px;

			.title_item {
				position: absolute;
				font-family: MiSans, MiSans;
				font-weight: 600;
				font-size: 24px;
				color: #39e6ad;
				display: inline-block;
				line-height: 32px;

				span {
					font-size: 22px;
				}

				.title_item_text {
					margin: 0 5px;
					cursor: pointer;
					display: inline-block;
				}
			}

			.full_screen {
				top: 80px;
				left: 190px;

				&:hover {
					cursor: pointer;
				}
			}

			.meat_name {
				top: 65px;
				left: 400px;
				position: relative;

				&:hover {
					cursor: pointer;
				}

				.findAllChannelsByUser-list::-webkit-scrollbar {
					background-color: #f0f0f0;
					width: 6px;
					border-radius: 40px;
					height: 10px;
				}

				.findAllChannelsByUser-list::-webkit-scrollbar-thumb {
					background-color: #0284ff;
					border-radius: 40px;
				}
				.findAllChannelsByUser-list {
					position: absolute;
					top: 45px;
					width: 300px;
					height: 400px;
					z-index: 100;
					border-radius: 10px;
					background: #0a1a35;
					box-sizing: border-box;
					border: 1px solid #0284ff;
					overflow: auto;

					div {
						padding: 5px 10px;
						box-sizing: border-box;
						font-size: 16px;
						line-height: 18px;
						&:hover {
							background: rgba(41, 108, 220, 0.28);
						}
					}
				}
			}

			.title_item_info {
				top: 50px;
				left: 0;
				right: 0;

				width: fit-content;
				margin: auto;
				font-size: 39px;
				letter-spacing: 5px;

				span {
					font-size: 39px;
				}
			}

			.page_type {
				top: 65px;
				left: 1380px;

				.router-list::-webkit-scrollbar {
					background-color: #f0f0f0;
					width: 6px;
					border-radius: 40px;
					height: 10px;
				}

				.router-list::-webkit-scrollbar-thumb {
					background-color: #0284ff;
					border-radius: 40px;
				}

				.router-list {
					position: absolute;
					top: 45px;
					width: 130px;
					z-index: 900;
					border-radius: 10px;
					background: #0a1a35;
					box-sizing: border-box;
					border: 1px solid #0284ff;

					div {
						padding: 5px 10px;
						line-height: 18px;
						box-sizing: border-box;
						font-size: 16px;
						//border: 1px solid #fff;
					}
				}

				&:hover {
					cursor: pointer;
				}
			}

			.video_telephone {
				top: 80px;
				right: 190px;

				&:hover {
					cursor: pointer;
				}
			}
		}

		.content {
			position: absolute;
			top: 120px;
			left: 0;
			right: 0;
			bottom: 70px;
			z-index: 40;
		}
	}
</style>