<template>
	<div style="width: 100%;overflow: hidden;">
		<!-- Swiper 容器 -->
		<div class="group_666" style="position: relative;height: 600px;">
			<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
				<swiper-slide>
					<img src="public/img/service.png" style="width: 100%;">
				</swiper-slide>
				<swiper-slide>
					<img src="public/img/service.png" style="width: 100%;">
				</swiper-slide>
			</swiper>
			<!-- <div style="position: absolute;bottom: 50px;left: 0;width: 100%;z-index: 100;">
				<div class="flex-row justify-center align-center">
					<div>
						<img src="public/img/left.png" alt="">
					</div>
					<div style="margin: 0px 20px;">
						<img src="public/img/morse.png" alt="">
					</div>
					<div>
						<img src="public/img/right.png" alt="">
					</div>
				</div>
			</div> -->
		</div>
		<div class="group_2 flex-col"
			style="background-color: #ffffff;overflow: unset;position: relative;height: 735px;">
			<img src="public/img/service_01.png" style="width: 100%;position: absolute;top: -30px;z-index: 10;">
			<div class="service_top1">
				<div style="cursor: pointer;">
					<NuxtLink to="/proServices_con/">
             			内容创作与运营
            		</NuxtLink>
				</div>
				<div style="cursor: pointer;">
					<div style="color: #0256FF;margin-bottom: 20px;">专业技术服务</div>
					<div style="background-color: #0256FF;width:40%;height: 8px;margin: 0 auto;"></div>
				</div>
			</div>
			<div class="service-01" style="text-align: center;padding-top: 70px;z-index: 30;">
				<div style="font-size: 34px;font-weight: 700;">AI应用定制化开发</div>
				<div style="color: #768597;font-size: 16px;margin-top: 30px;">精准赋能行业创新，深度定制AI解决方案驱动企业智能升级</div>
			</div>
			<div style="padding-top: 30px;z-index: 30;">
				<div style="display: flex;flex-direction: row;justify-content: center;width: 100%;gap: 30px;">
					<div class="service_top1_width">
						<div class="reveal-left" style="display: flex;flex-direction: row;align-items: center;">
							<div>
								<img src="public/img/service_012.png" style="width:22px;height: 22px;">
							</div>
							<div style="font-size: 18px;font-weight: 700;margin-left: 10px;">项目介绍和业务描述</div>
						</div>
						<div class="reveal-left"
							style="line-height: 24px;margin-top: 20px;font-size: 14px;font-weight: 400;color: #768597;">
							我们紧跟人工智能发展浪潮，专注于AI技术的应用与落地。无论是将先进的AI模(DeepSeek）进行本地化部署以满足特定场景需求，还是根据您的独特业务挑战开发定制化的AI应用程序，我们都能提供从模型选型、数据处理、算法优化到应用集成与部署的全栈服务，针对金融、医疗、教育等行业定制预训练微调模型与专用知识库模板，提供开箱即用的解决方案。
						</div>
						<div
							style="margin-top: 30px;background: linear-gradient( 138deg, #F7F7F7 0%, #FFFFFF 100%);border-radius: 4px;padding: 20px;">
							<div style="display: flex;flex-direction: row;justify-content: space-between;">
								<div class="service-1" style="display: flex;flex-direction: row;align-items: center;">
									<div>
										<img src="public/img/service_013.png" style="width:32px;height: 32px;">
									</div>
									<div style="width: 105px;font-size: 14px;font-weight: 400;margin-left: 15px;">
										多模态输入与智能处理</div>
								</div>
								<div class="service-1" style="display: flex;flex-direction: row;align-items: center;">
									<div>
										<img src="public/img/service_014.png" style="width:32px;height: 32px;">
									</div>
									<div style="width: 105px;font-size: 14px;font-weight: 400;margin-left: 15px;">
										联网搜索增强与分层服务</div>
								</div>
								<div class="service-1" style="display: flex;flex-direction: row;align-items: center;">
									<div>
										<img src="public/img/service_015.png" style="width:32px;height: 32px;">
									</div>
									<div style="width: 105px;font-size: 14px;font-weight: 400;margin-left: 15px;">
										私有化知识库与RAG技术</div>
								</div>
							</div>
							<div
								style="margin-top: 40px;display: flex;flex-direction: row;justify-content: space-between;">
								<div class="service-1" style="display: flex;flex-direction: row;align-items: center;">
									<div>
										<img src="public/img/service_016.png" style="width:32px;height: 32px;">
									</div>
									<div style="width: 105px;font-size: 14px;font-weight: 400;margin-left: 15px;">
										高并发与稳定性优化</div>
								</div>
								<div class="service-1" style="display: flex;flex-direction: row;align-items: center;">
									<div>
										<img src="public/img/service_017.png" style="width:32px;height: 32px;">
									</div>
									<div style="width: 105px;font-size: 14px;font-weight: 400;margin-left: 15px;">
										全链路安全与商业化支持</div>
								</div>
								<div class="service-1" style="display: flex;flex-direction: row;align-items: center;">
									<div>
										<img src="public/img/service_018.png" style="width:32px;height: 32px;">
									</div>
									<div style="width: 105px;font-size: 14px;font-weight: 400;margin-left: 15px;">
										模型生态扩展接入更多模型</div>
								</div>
							</div>
							<div
								style="margin-top: 40px;display: flex;flex-direction: row;justify-content: space-between;">
								<div class="service-1" style="display: flex;flex-direction: row;align-items: center;">
									<div>
										<img src="public/img/service_019.png" style="width:32px;height: 32px;">
									</div>
									<div style="width: 105px;font-size: 14px;font-weight: 400;margin-left: 15px;">
										知识库智能化升级</div>
								</div>
								<div class="service-1" style="display: flex;flex-direction: row;align-items: center;">
									<div>
										<img src="public/img/service_020.png" style="width:32px;height: 32px;">
									</div>
									<div style="width: 105px;font-size: 14px;font-weight: 400;margin-left: 15px;">
										边缘计算协同部署轻量化模型</div>
								</div>
								<div class="service-1" style="display: flex;flex-direction: row;align-items: center;">
									<div>
										<img src="public/img/service_021.png" style="width:32px;height: 32px;">
									</div>
									<div style="width: 105px;font-size: 14px;font-weight: 400;margin-left: 15px;">
										垂直领域深度适配多行业应用</div>
								</div>
							</div>
						</div>
					</div>
					<div class="service_top1_width" style="text-align: center;">
						<img src="public/img/service_022.png" style="width:100%;height: 100%;">
					</div>
				</div>
			</div>

		</div>
		<div class="service_023">
			<div class="service-01" style="text-align: center;padding-top: 30px;z-index: 30;">
				<div style="font-size: 34px;font-weight: 700;">定制软件开发</div>
				<div style="color: #768597;font-size: 16px;margin-top: 15px;">全方位的定制化软件开发服务</div>
			</div>
			<div
				style="display: flex;flex-direction: row;align-items: center;justify-content: center;width: 100%;gap: 30px;margin-top: 30px;">
				<div class="service_center_01" style="width: 30%;">
					<img src="public/img/service_024.png" style="width:100%;height: 100%;">
				</div>
				<div class="service_center_02">
					<div style="display: flex;flex-direction: row;align-items: center;">
						<div>
							<img src="public/img/service_012.png" style="width:22px;height: 22px;">
						</div>
						<div style="color: #222222;font-size: 18px;font-weight: 700;margin-left: 10px;">项目介绍和业务描述</div>
					</div>
					<div style="line-height: 24px;margin-top: 20px;font-size: 14px;font-weight: 400;color: #768597;">
						我们专注于提供全方位的定制化软件开发服务，满足您多样化的业务需求。无论是面向特定群体的活动平台（如"多样青春项目"），功能完善的电子商务系统（如"商城项目"），互动性强的活动应用（如"健身打卡活动项目"），还是便捷高效的组织管理工具（如"协会小程序项目"），我们的团队都能运用主流技术栈和敏捷开发模式，为您打造用户体验出色、性能稳定可靠的Web应用、移动App及小程序，驱动业务创新
					</div>
					<div
						style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%;margin-top: 30px;">
						<div>
							<img src="public/img/service_025.png" style="width:135px;">
						</div>
						<div>
							<img src="public/img/service_026.png" style="width:135px;">
						</div>
						<div>
							<img src="public/img/service_027.png" style="width:135px;">
						</div>
						<div>
							<img src="public/img/service_028.png" style="width:135px;">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div style="padding: 40px 0px 100px 0px;z-index: 30;background-color: #ffffff;">
			<div style="text-align: center;padding-top: 30px;z-index: 30;">
				<div style="font-size: 34px;font-weight: 700;">IT运维服务</div>
				<div style="color: #768597;font-size: 16px;margin-top: 15px;">承接客户网站及应用系统的全面安全防护项目</div>
			</div>
			<div
				style="display: flex;flex-direction: row;align-items: center;justify-content: center;width: 100%;gap: 30px;margin-top: 40px;">
				<div class="service-yw" style="position: relative;">
					<img src="public/img/service_029.png" style="width:275px;">
					<div style="position: absolute;bottom: 0px;left: 0px;width: 100%;height: 100%;padding: 30px;">
						<div style="font-size: 18px;font-weight: 700;color: #3D3D3D;">安全防护</div>
						<div style="font-weight: 400;color: #768597;font-size: 14px;margin-top: 10px;">
							帮助决策者制定针对性防护策略降低网络攻击、数据泄露和业务中断等风险</div>
					</div>
				</div>
				<div class="service-yw" style="position: relative;">
					<img src="public/img/service_030.png" style="width:275px;">
					<div style="position: absolute;bottom: 0px;left: 0px;width: 100%;height: 100%;padding: 30px;">
						<div style="font-size: 18px;font-weight: 700;color: #3D3D3D;">漏洞修复</div>
						<div style="font-weight: 400;color: #768597;font-size: 14px;margin-top: 10px;">
							专业团队，快速检测、定位并处置安全威胁，最大限度减少损失，保障业务连续性</div>
					</div>
				</div>
				<div class="service-yw" style="position: relative;">
					<img src="public/img/service_031.png" style="width:275px;">
					<div style="position: absolute;bottom: 0px;left: 0px;width: 100%;height: 100%;padding: 30px;">
						<div style="font-size: 18px;font-weight: 700;color: #3D3D3D;">安全加固</div>
						<div style="font-weight: 400;color: #768597;font-size: 14px;margin-top: 10px;">ios和Android应用防调试
							防篡改 防窃取 防逆向抵御各类网络攻击和数据泄露风险</div>
					</div>
				</div>
				<div class="service-yw" style="position: relative;">
					<img src="public/img/service_032.png" style="width:275px;">
					<div style="position: absolute;bottom: 0px;left: 0px;width: 100%;height: 100%;padding: 30px;">
						<div style="font-size: 18px;font-weight: 700;color: #3D3D3D;">实时监控</div>
						<div style="font-weight: 400;color: #768597;font-size: 14px;margin-top: 10px;">
							网络安全实时监控服务提供24小时威胁检测与主动防御，实时识别漏洞，保障数据安全</div>
					</div>
				</div>
			</div>
		</div>
		<div class="service_033" style="padding-top: 60px;z-index: 30;">
			<div style="text-align: center;padding-top: 10px;z-index: 30;">
				<div style="font-size: 34px;font-weight: 700;">网络与信息安全</div>
				<div style="color: #768597;font-size: 16px;margin-top: 15px;">专业守护数据，防御威胁，护航企业数字安全</div>
			</div>
			<div class="service-wl-a" style="display: flex;justify-content: center;gap: 30px;margin-top: 40px;">
				<div class="service-wl">
					<div style="position: absolute;">
						<img src="public/img/service_034.png" style="width:100%;height: 100%;">
					</div>
					<div style="display: flex;align-items: center;padding:30px 30px 20px 30px;">
						<div style="z-index: 10;">
							<img src="public/img/service_035.png" style="width:36px;height: 36px;">
						</div>
						<div style="font-size: 18px;color: #3D3D3D;font-weight: 700;z-index: 10;margin-left: 20px;">
							Android应用加固</div>
					</div>
					<div style="padding: 0px 30px;position: relative;;color: #768597;font-size: 14px;font-weight: 400;">
						对安卓应用进行深度加密、加壳保护的安全产品，且在系统层实时进行威胁环境检测，保护应用远离恶意破解、反编译、二次打包，动态调试、内存抓取等威胁</div>
				</div>
				<div class="service-wl">
					<div style="position: absolute;">
						<img src="public/img/service_034.png" style="width:100%;height: 100%;">
					</div>
					<div style="display: flex;align-items: center;padding:30px 30px 20px 30px;">
						<div style="z-index: 10;">
							<img src="public/img/service_036.png" style="width:36px;height: 36px;">
						</div>
						<div style="font-size: 18px;color: #3D3D3D;font-weight: 700;z-index: 10;margin-left: 20px;">
							IOS应用加固</div>
					</div>
					<div style="padding: 0px 30px;position: relative;;color: #768597;font-size: 14px;font-weight: 400;">
						iOS应用加固是旨在为广大的i0S软件开发者以及厂商源代码提供加密保护，通过代码加密、指令混淆等技术手段在编译阶段对源代码进行常量加密、逻辑混淆、结构混排等保护，增加反编译、改和注入的难度，提高核心代码及数据的安全性
					</div>
				</div>
				<div class="service-wl">
					<div style="position: absolute;">
						<img src="public/img/service_034.png" style="width:100%;height: 100%;">
					</div>
					<div style="display: flex;align-items: center;padding:30px 30px 20px 30px;">
						<div style="z-index: 10;">
							<img src="public/img/service_037.png" style="width:36px;height: 36px;">
						</div>
						<div style="font-size: 18px;color: #3D3D3D;font-weight: 700;z-index: 10;margin-left: 20px;">
							防调试</div>
					</div>
					<div style="padding: 0px 30px;position: relative;;color: #768597;font-size: 14px;font-weight: 400;">
						多重加密技术对应用运行时的进程空间进行防护，采用动态加解密技术，阻止各种调试器进行内存调试、注入和dump</div>
				</div>
			</div>
			<div class="service-wl-b" style="display: flex;justify-content: center;gap: 30px;margin-top: 30px;">
				<div class="service-wl">
					<div style="position: absolute;">
						<img src="public/img/service_034.png" style="width:100%;height: 100%;">
					</div>
					<div style="display: flex;align-items: center;padding:30px 30px 20px 30px;">
						<div style="z-index: 10;">
							<img src="public/img/service_038.png" style="width:36px;height: 36px;">
						</div>
						<div style="font-size: 18px;color: #3D3D3D;font-weight: 700;z-index: 10;margin-left: 20px;">
							防篡改</div>
					</div>
					<div style="padding: 0px 30px;position: relative;;color: #768597;font-size: 14px;font-weight: 400;">
						在程序运行时对文件指纹及完整性进行校验，如发现任一文件被篡改或与原始签名不一致，应用则停止运行，从而保证了应用运行的安全</div>
				</div>
				<div class="service-wl">
					<div style="position: absolute;">
						<img src="public/img/service_034.png" style="width:100%;height: 100%;">
					</div>
					<div style="display: flex;align-items: center;padding:30px 30px 20px 30px;">
						<div style="z-index: 10;">
							<img src="public/img/service_039.png" style="width:36px;height: 36px;">
						</div>
						<div style="font-size: 18px;color: #3D3D3D;font-weight: 700;z-index: 10;margin-left: 20px;">
							防窃取</div>
					</div>
					<div style="padding: 0px 30px;position: relative;;color: #768597;font-size: 14px;font-weight: 400;">
						动态监控程序中的内存分布文件，可以随时监控到内存读取等操作，从而保护内存截取攻击，安全键盘和通信协议加密分别对输入和网络通信增加了安全保障，</div>
				</div>
				<div class="service-wl">
					<div style="position: absolute;">
						<img src="public/img/service_034.png" style="width:100%;height: 100%;">
					</div>
					<div style="display: flex;align-items: center;padding:30px 30px 20px 30px;">
						<div style="z-index: 10;">
							<img src="public/img/service_040.png" style="width:36px;height: 36px;">
						</div>
						<div style="font-size: 18px;color: #3D3D3D;font-weight: 700;z-index: 10;margin-left: 20px;">
							防逆向</div>
					</div>
					<div style="padding: 0px 30px;position: relative;;color: #768597;font-size: 14px;font-weight: 400;">
						对classes.dex文件采用高压缩及加密变形处理，并对关键核心逻辑代码进行双重VMP保护;对SO文件代码进行LLVM混淆及加密保护，Native层代码安全性得到有效的保证</div>
				</div>
			</div>
		</div>
		<div style="padding-top: 50px;z-index: 30;background-color: #ffffff;height: 715px;">
			<div style="text-align: center;padding-top: 20px;z-index: 30;">
				<div style="font-size: 34px;font-weight: 700;">智慧化解决方案</div>
				<div style="color: #768597;font-size: 16px;margin-top: 15px;">利用物联网、大数据、人工智能等前沿技术，为不同场景提供一体化的智慧化解决方案
				</div>
			</div>
			<div class="service_bottom_01">
				<div class="box1" @mouseenter="mous(1, $event)"
					:class="mousindex == 1 ? 'service_bottom' : 'service_bottom_no'"
					:style="{ left: `${left1}px`, top: `${top1}px` }"
					style="position: absolute;border-radius: 8px;width: 277px;height: 428px;padding: 30px;">
					<div v-if="mousindex != 1">
						<img src="public/img/service_041.png" style="width: 38px;height: 38px;">
					</div>
					<div style="font-size: 18px;font-weight: 700;margin-top: 20px;">
						监控系统
					</div>
					<div
						:style="{ fontSize: '14px', color: mousindex == 1 ? '#ffffff' : '#768597', fontWeight: '400', marginTop: '10px' }">
						基于AI与物联网的智能监控系统实时分析精准预警安全高效运行
					</div>
					<div v-if="mousindex == 1" style="margin-top: 30px;">
						<div style="display: flex;align-items: center;">
							<div>
								<img src="public/img/service_049.png" style="width: 32px;height: 32px;">
							</div>
							<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
								监控回溯
							</div>
						</div>
						<div style="display: flex;align-items: center;margin-top: 30px;">
							<div>
								<img src="public/img/service_050.png" style="width: 32px;height: 32px;">
							</div>
							<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
								人员轨迹
							</div>
						</div>
					</div>
				</div>
				<div class="box2" @mouseenter="mous(2, $event)"
					:class="mousindex == 2 ? 'service_bottom' : 'service_bottom_no'"
					:style="{ left: `${left2}px`, top: `${top2}px` }"
					style="position: absolute;border-radius: 8px;width: 277px;height: 196px;padding: 30px;">
					<div v-if="mousindex != 2">
						<img src="public/img/service_042.png" style="width: 38px;height: 38px;">
					</div>
					<div style="font-size: 18px;font-weight: 700;margin-top: 20px;">
						门禁系统
					</div>
					<div
						:style="{ fontSize: '14px', color: mousindex == 2 ? '#ffffff' : '#768597', fontWeight: '400', marginTop: '10px' }">
						互联网智慧门禁：安全便捷，智能管理，远程控制
					</div>
					<div v-if="mousindex == 2" style="margin-top: 30px;">
						<div style="display: flex;align-items: center;">
							<div>
								<img src="public/img/service_052.png" style="width: 32px;height: 32px;">
							</div>
							<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
								人脸识别
							</div>
						</div>
						<div style="display: flex;align-items: center;margin-top: 30px;">
							<div>
								<img src="public/img/service_053.png" style="width: 32px;height: 32px;">
							</div>
							<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
								id卡
							</div>
						</div>
						<div style="display: flex;align-items: center;margin-top: 30px;">
							<div>
								<img src="public/img/service_054.png" style="width: 32px;height: 32px;">
							</div>
							<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
								蓝牙检测
							</div>
						</div>
						<div style="display: flex;align-items: center;margin-top: 30px;">
							<div>
								<img src="public/img/service_055.png" style="width: 32px;height: 32px;">
							</div>
							<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
								停车管理系统
							</div>
						</div>
					</div>
				</div>
				<div class="box3" @mouseenter="mous(3, $event)"
					:class="mousindex == 3 ? 'service_bottom' : 'service_bottom_no'"
					:style="{ left: `${left3}px`, top: `${top3}px` }"
					style="position: absolute;border-radius: 8px;width: 277px;height: 196px;padding: 30px;">
					<div v-if="mousindex != 3">
						<img src="public/img/service_043.png" style="width: 38px;height: 38px;">
					</div>
					<div style="font-size: 18px;font-weight: 700;margin-top: 20px;">
						充电系统
					</div>
					<div
						:style="{ fontSize: '14px', color: mousindex == 3 ? '#ffffff' : '#768597', fontWeight: '400', marginTop: '10px' }">
						智慧物联"突出互联网+智能化核心物联网技术、云端管理、能效优化
					</div>
					<div v-if="mousindex == 3" style="margin-top: 30px;">
						<div style="display: flex;align-items: center;">
							<div>
								<img src="public/img/service_056.png" style="width: 32px;height: 32px;">
							</div>
							<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
								充电桩
							</div>
						</div>
						<div style="display: flex;align-items: center;margin-top: 30px;">
							<div>
								<img src="public/img/service_057.png" style="width: 32px;height: 32px;">
							</div>
							<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
								安全警告
							</div>
						</div>
					</div>
				</div>
				<div class="box4" @mouseenter="mous(4, $event)"
					:class="mousindex == 4 ? 'service_bottom' : 'service_bottom_no'"
					:style="{ left: `${left4}px`, top: `${top4}px` }"
					style="position: absolute;border-radius: 8px;width: 277px;height: 196px;padding: 30px;">
					<div v-if="mousindex != 4">
						<img src="public/img/service_044.png" style="width: 38px;height: 38px;">
					</div>
					<div style="font-size: 18px;font-weight: 700;margin-top: 20px;">
						水电收费系统
					</div>
					<div
						:style="{ fontSize: '14px', color: mousindex == 4 ? '#ffffff' : '#768597', fontWeight: '400', marginTop: '10px' }">
						智慧水电云管家，实时计费自动缴费，高效管理无忧。
					</div>
					<div v-if="mousindex == 4" style="margin-top: 30px;">
						<div style="display: flex;align-items: center;">
							<div>
								<img src="public/img/service_058.png" style="width: 32px;height: 32px;">
							</div>
							<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
								物业缴费
							</div>
						</div>
						<div style="display: flex;align-items: center;margin-top: 30px;">
							<div>
								<img src="public/img/service_059.png" style="width: 32px;height: 32px;">
							</div>
							<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
								报修
							</div>
						</div>
						<div style="display: flex;align-items: center;margin-top: 30px;">
							<div>
								<img src="public/img/service_060.png" style="width: 32px;height: 32px;">
							</div>
							<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
								投诉处理
							</div>
						</div>
					</div>
				</div>
				<div class="box5" @mouseenter="mous(5, $event)"
					:class="mousindex == 5 ? 'service_bottom' : 'service_bottom_no'"
					:style="{ left: `${left5}px`, top: `${top5}px` }"
					style="position: absolute;border-radius: 8px;width: 277px;height: 196px;padding: 30px;">
					<div v-if="mousindex != 5">
						<img src="public/img/service_045.png" style="width: 38px;height: 38px;">
					</div>
					<div style="font-size: 18px;font-weight: 700;margin-top: 20px;">
						养老系统
					</div>
					<div
						:style="{ fontSize: '14px', color: mousindex == 5 ? '#ffffff' : '#768597', fontWeight: '400', marginTop: '10px' }">
						智慧养老系统:AI监护+健康管理打造安全便捷银发生活。
					</div>
					<div v-if="mousindex == 5" style="margin-top: 30px;">
						<div style="display: flex;align-items: center;">
							<div>
								<img src="public/img/service_061.png" style="width: 32px;height: 32px;">
							</div>
							<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
								烟感警报
							</div>
						</div>
						<div style="display: flex;align-items: center;margin-top: 30px;">
							<div>
								<img src="public/img/service_062.png" style="width: 32px;height: 32px;">
							</div>
							<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
								摄像头人物摔倒提示
							</div>
						</div>
						<div style="display: flex;align-items: center;margin-top: 30px;">
							<div>
								<img src="public/img/service_063.png" style="width: 32px;height: 32px;">
							</div>
							<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
								防丢手环
							</div>
						</div>
						<div style="display: flex;align-items: center;margin-top: 30px;">
							<div>
								<img src="public/img/service_064.png" style="width: 32px;height: 32px;">
							</div>
							<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
								护理请求传感器
							</div>
						</div>
					</div>
				</div>
				<div class="box6" @mouseenter="mous(6, $event)"
					:class="mousindex == 6 ? 'service_bottom' : 'service_bottom_no'"
					:style="{ left: `${left6}px`, top: `${top6}px` }"
					style="position: absolute;border-radius: 8px;width: 277px;height: 196px;padding: 30px;">
					<div v-if="mousindex != 6">
						<img src="public/img/service_046.png" style="width: 38px;height: 38px;">
					</div>
					<div style="font-size: 18px;font-weight: 700;margin-top: 20px;">
						租房系统
					</div>
					<div
						:style="{ fontSize: '14px', color: mousindex == 6 ? '#ffffff' : '#768597', fontWeight: '400', marginTop: '10px' }">
						智慧租房系统，实现线上托管自动化流程，或者提升用户体验
					</div>
					<div v-if="mousindex == 6" style="margin-top: 30px;">
						<div style="display: flex;align-items: center;">
							<div>
								<img src="public/img/service_065.png" style="width: 32px;height: 32px;">
							</div>
							<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
								托管出租
							</div>
						</div>
					</div>
				</div>
				<div class="box7" @mouseenter="mous(7, $event)"
					:class="mousindex == 7 ? 'service_bottom' : 'service_bottom_no'"
					:style="{ left: `${left7}px`, top: `${top7}px` }"
					style="position: absolute;border-radius: 8px;width: 277px;height: 196px;padding: 30px;">
					<div v-if="mousindex != 7">
						<img src="public/img/service_047.png" style="width: 38px;height: 38px;">
					</div>
					<div style="font-size: 18px;font-weight: 700;margin-top: 20px;">
						更多方案联系我们
					</div>
					<div
						:style="{ fontSize: '14px', color: mousindex == 7 ? '#ffffff' : '#768597', fontWeight: '400', marginTop: '10px' }">
						{{ mousindex != 7 ? '创新科技驱动的互联网智慧化解决方案，赋能企业数字化转型' :
							'创新科技驱动的互联网智慧化解决方案，赋能企业数字化转型。高效便捷、精准赋能，覆盖多场景需求。定制化服务，助力降本增效。欢迎垂询，获取专属升级方案' }}
					</div>
				</div>
			</div>
		</div>
		<div class="service_051" style="z-index: 30;">
			<div style="width: 100%;">
				<div class="service-02">
					<div style="font-size: 34px;font-weight: 700;">硬件基础设施建设</div>
					<div style="font-size: 16px;margin-top: 30px;">提供从需求分析、方案设计、设备选型、综合布线到安装调试、环境监控的全流程服务</div>
				</div>
				<div class="service-container">
					<div v-for="(item, index) in serviceList" class="service-item">
						<img :src="`/img/service_000${index + 1}.png`" style="width: 28px;height: 28px;">
						<div style="margin-left: 10px;font-size: 16px;font-weight: 400;">{{ item.name }}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { nextTick, ref } from 'vue'
import 'swiper/css'
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade } from "swiper/modules";
import ScrollReveal from 'scrollreveal';
import { NNumberAnimation } from 'naive-ui'
let modules = [Autoplay, A11y, EffectCoverflow, EffectFade];

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import 'swiper/css/effect-coverflow';
import 'swiper/css/mousewheel'
import 'swiper/css/grid'
import 'swiper/css/effect-fade'
import 'swiper/css/autoplay'
import * as swiperAni from '@/assets/animate/animate.js'
import $api from '@/service/webRequest'
import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
const { locale } = useI18n()

const serviceList = ref([
	{ name: '需求分析与规划' },
	{ name: '选址与场地设计' },
	{ name: '供配电系统' },
	{ name: '制冷系统' },
	{ name: '机柜布局' },
	{ name: '防静电设施' },
	{ name: '网络架构' },
	{ name: '安全防护' },
	{ name: '监控系统' },
	{ name: '应急预案' },
	{ name: '运维流程' },
])


const mousindex = ref(1);

const left1 = ref(0);
const top1 = ref(0);

const left2 = ref(310);
const top2 = ref(0);

const left3 = ref(620);
const top3 = ref(0);

const left4 = ref(930);
const top4 = ref(0);

const left5 = ref(310);
const top5 = ref(230);

const left6 = ref(620);
const top6 = ref(230);

const left7 = ref(930);
const top7 = ref(230);

const mous = (index: number, event: any) => {
	mousindex.value = index;
	const thisDiv = event.currentTarget;
	if (index == 1) {
		animateElement(document.querySelector('.box1'), {
			height: 428,
			left: 0,
			top: 0
		}, 200);
		animateElement(document.querySelector('.box2'), {
			height: 196,
			left: 310,
			top: 0
		}, 200);
		animateElement(document.querySelector('.box3'), {
			height: 196,
			left: 620,
			top: 0
		}, 200);
		animateElement(document.querySelector('.box5'), {
			height: 196,
			left: 310,
			top: 230
		}, 200);
		animateElement(document.querySelector('.box6'), {
			height: 196,
			left: 620,
			top: 230
		}, 200);
	}
	if (index == 2) {
		const box2 = document.querySelector('.box2');
		//获取当前鼠标位置
		const leftValue = parseFloat(
			window.getComputedStyle(box2).left ||
			box2.style.left ||
			box2.offsetLeft
		);
		console.log(leftValue);
		if (leftValue == 310) {
			animateElement(document.querySelector('.box1'), {
				height: 196,
				left: 0,
				top: 0
			}, 200);
			animateElement(document.querySelector('.box2'), {
				height: 428,
				left: 310,
				top: 0
			}, 200);
			animateElement(document.querySelector('.box3'), {
				height: 196,
				left: 620,
				top: 0
			}, 200);
			animateElement(document.querySelector('.box5'), {
				height: 196,
				left: 0,
				top: 230
			}, 200);
			animateElement(document.querySelector('.box6'), {
				height: 196,
				left: 620,
				top: 230
			}, 200);
		} else {
			animateElement(document.querySelector('.box1'), {
				height: 196,
				left: 310,
				top: 230
			}, 200);
			animateElement(document.querySelector('.box2'), {
				height: 428,
				left: 0,
				top: 0
			}, 200);
			animateElement(document.querySelector('.box3'), {
				height: 196,
				left: 620,
				top: 0
			}, 200);
			animateElement(document.querySelector('.box5'), {
				height: 196,
				left: 310,
				top: 0
			}, 200);
			animateElement(document.querySelector('.box6'), {
				height: 196,
				left: 620,
				top: 230
			}, 200);
		}

	}
	if (index == 5) {
		const box5 = document.querySelector('.box5');
		//获取当前鼠标位置
		const leftValue = parseFloat(
			window.getComputedStyle(box5).left ||
			box5.style.left ||
			box5.offsetLeft
		);
		console.log(leftValue);
		if (leftValue == 310) {

			animateElement(document.querySelector('.box1'), {
				height: 196,
				left: 0,
				top: 230
			}, 200);
			animateElement(document.querySelector('.box2'), {
				height: 196,
				left: 0,
				top: 0
			}, 200);
			animateElement(document.querySelector('.box5'), {
				height: 428,
				left: 310,
				top: 0
			}, 200);
		} else {
			animateElement(document.querySelector('.box1'), {
				height: 196,
				left: 310,
				top: 0
			}, 200);
			animateElement(document.querySelector('.box2'), {
				height: 196,
				left: 310,
				top: 230
			}, 200);
			animateElement(document.querySelector('.box5'), {
				height: 428,
				left: 0,
				top: 0
			}, 200);
		}

	}
	if (index == 3) {
		animateElement(document.querySelector('.box1'), {
			height: 196,
			left: 0,
			top: 0
		}, 200);
		animateElement(document.querySelector('.box2'), {
			height: 196,
			left: 310,
			top: 0
		}, 200);
		animateElement(document.querySelector('.box3'), {
			height: 428,
			left: 620,
			top: 0
		}, 200);
		animateElement(document.querySelector('.box4'), {
			height: 196,
			left: 930,
			top: 0
		}, 200);
		animateElement(document.querySelector('.box5'), {
			height: 196,
			left: 0,
			top: 230
		}, 200);
		animateElement(document.querySelector('.box6'), {
			height: 196,
			left: 310,
			top: 230
		}, 200);
		animateElement(document.querySelector('.box7'), {
			height: 196,
			left: 930,
			top: 230
		}, 200);
	}
	if (index == 6) {
		const box6 = document.querySelector('.box6');
		//获取当前鼠标位置
		const leftValue = parseFloat(
			window.getComputedStyle(box6).left ||
			box6.style.left ||
			box6.offsetLeft
		);
		if (leftValue == 620) {
			animateElement(document.querySelector('.box2'), {
				height: 196,
				left: 310,
				top: 230
			}, 200);
			animateElement(document.querySelector('.box3'), {
				height: 196,
				left: 310,
				top: 0
			}, 200);
			animateElement(document.querySelector('.box6'), {
				height: 428,
				left: 620,
				top: 0
			}, 200);
		} else {
			animateElement(document.querySelector('.box2'), {
				height: 196,
				left: 620,
				top: 0
			}, 200);
			animateElement(document.querySelector('.box3'), {
				height: 196,
				left: 620,
				top: 230
			}, 200);
			animateElement(document.querySelector('.box6'), {
				height: 428,
				left: 310,
				top: 0
			}, 200);
		}
		animateElement(document.querySelector('.box1'), {
			height: 196,
			left: 0,
			top: 0
		}, 200);

		animateElement(document.querySelector('.box4'), {
			height: 196,
			left: 930,
			top: 0
		}, 200);
		animateElement(document.querySelector('.box5'), {
			height: 196,
			left: 0,
			top: 230
		}, 200);


	}
	if (index == 4) {
		const box4 = document.querySelector('.box4');
		//获取当前鼠标位置
		const leftValue = parseFloat(
			window.getComputedStyle(box4).left ||
			box4.style.left ||
			box4.offsetLeft
		);
		console.log(leftValue);
		if (leftValue == 930) {
			animateElement(document.querySelector('.box4'), {
				height: 428,
				left: 930,
				top: 0
			}, 200);
			animateElement(document.querySelector('.box7'), {
				height: 192,
				left: 620,
				top: 230
			}, 200);
		}
		animateElement(document.querySelector('.box1'), {
			height: 196,
			left: 0,
			top: 0
		}, 200);
		animateElement(document.querySelector('.box2'), {
			height: 196,
			left: 310,
			top: 0
		}, 200);
		animateElement(document.querySelector('.box3'), {
			height: 196,
			left: 620,
			top: 0
		}, 200);
		animateElement(document.querySelector('.box5'), {
			height: 196,
			left: 0,
			top: 230
		}, 200);
		animateElement(document.querySelector('.box6'), {
			height: 192,
			left: 310,
			top: 230
		}, 200);

	}
	if (index == 7) {
		const box7 = document.querySelector('.box7');
		//获取当前鼠标位置
		const leftValue = parseFloat(
			window.getComputedStyle(box7).left ||
			box7.style.left ||
			box7.offsetLeft
		);
		console.log(leftValue);
		//在左侧
		if (leftValue == 620) {
			animateElement(document.querySelector('.box3'), {
				height: 196,
				left: 930,
				top: 0
			}, 100);
			animateElement(document.querySelector('.box4'), {
				height: 196,
				left: 930,
				top: 230
			}, 100);
			animateElement(document.querySelector('.box7'), {
				height: 428,
				left: 620,
				top: 0
			}, 100);
		} else {
			animateElement(document.querySelector('.box3'), {
				height: 196,
				left: 620,
				top: 230
			}, 100);
			animateElement(document.querySelector('.box4'), {
				height: 196,
				left: 620,
				top: 0
			}, 100);
			animateElement(document.querySelector('.box7'), {
				height: 428,
				left: 930,
				top: 0
			}, 100);
		}
		animateElement(document.querySelector('.box1'), {
			height: 196,
			left: 0,
			top: 0
		}, 100);
		animateElement(document.querySelector('.box2'), {
			height: 196,
			left: 310,
			top: 0
		}, 100);

		animateElement(document.querySelector('.box5'), {
			height: 196,
			left: 0,
			top: 230
		}, 100);
		animateElement(document.querySelector('.box6'), {
			height: 192,
			left: 310,
			top: 230
		}, 100);

	}
}


const animateElement = (element, target, duration) => {
	let start = null;
	const initialStyle = {
		width: parseFloat(getComputedStyle(element).width),
		height: parseFloat(getComputedStyle(element).height),
		left: parseFloat(getComputedStyle(element).left),
		top: parseFloat(getComputedStyle(element).top)
	};
	// 立即停止当前动画
	if (element.animationFrame) cancelAnimationFrame(element.animationFrame);

	const step = (timestamp) => {
		if (!start) start = timestamp;
		const progress = timestamp - start;
		const ratio = Math.min(progress / duration, 1);

		// 实时更新所有属性
		element.style.width = (initialStyle.width + (target.width - initialStyle.width) * ratio) + 'px';
		element.style.height = (initialStyle.height + (target.height - initialStyle.height) * ratio) + 'px';
		element.style.left = (initialStyle.left + (target.left - initialStyle.left) * ratio) + 'px';
		element.style.top = (initialStyle.top + (target.top - initialStyle.top) * ratio) + 'px';

		if (progress < duration) {
			element.animationFrame = requestAnimationFrame(step);
		} else {
			// 确保最终值精确 
			element.style.width = target.width + 'px';
			element.style.height = target.height + 'px';
			element.style.left = target.left + 'px';
			element.style.top = target.top + 'px';
		}
	}

	element.animationFrame = requestAnimationFrame(step);

}

let newsSwiper: any = null
const onSwiperNews = (swiper: any) => {
	newsSwiper = swiper
}
const swiperOptionsNews = {
	autoplay: {
		delay: 5000,
		disableOnInteraction: false,
	},
	direction: 'horizontal',
	slidesPerView: 1,
	speed: 500,
	effect: 'fade',
	loop: true,
	modules: [EffectFade, Autoplay, Navigation],
	navigation: {
		nextEl: '#swipen_prev',
		prevEl: '#swipen_next',
	},
}

// 新闻数据
onMounted(() => {
		animate()
})
const animate = () => {
	const sr = ScrollReveal();
	sr.reveal('.service-1', {
		origin: "bottom",
		distance: "50px",
		duration: 800,
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: true,
		useDelay: 30,
		mobile: true,
	})
	sr.reveal('.service-01', {
		origin: "right",
		distance: "550px",
		duration: 800,
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: true,
		useDelay: 130,
		mobile: true,
	})
	sr.reveal('.reveal-left', {
		origin: "left",
		distance: "50px",
		duration: 800,
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: true,
		useDelay: 500,
		mobile: true,
	})
	sr.reveal('.service-yw', {
		origin: "left",
		distance: "50px",
		duration: 800,
		easing: 'cubic-bezier(0.5, 0, 0, 1)', // 缓动函数
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: true,
		useDelay: 500,
		mobile: true,
	})
	sr.reveal('.service-wl-a', {
		origin: "left",
		distance: "50px",
		duration: 800,
		delay: 200,
		opacity: 0,
		scale: 0.9,
		reset: true,
		mobile: true,
	})
	sr.reveal('.service-wl-b', {
		origin: "left",
		distance: "50px",
		duration: 800,
		delay: 300,
		opacity: 0,
		scale: 0.9,
		reset: true,
		mobile: true,
	})
	//service-item
	sr.reveal('.service-container', {
		origin: 'bottom',
		delay: 300,
		opacity: 0,
		scale: 0.5,
		reset: true,
	})
}
</script>

<style scoped lang="scss">
@import "@/assets/animate/animate.min.css";
@import "@/assets/index.css";

:deep(.dswper .swiper-slide-next) {
	transform: translate3d(0px, 0px, -507px) rotateX(0deg) rotateY(0deg) scale(1) !important;
}

:deep(.dswper .swiper-slide-prev) {
	transform: translate3d(0px, 0px, -507px) rotateX(0deg) rotateY(0deg) scale(1) !important;
}

.service_023 {
	background: url(/public/img/service_023.png) no-repeat center center;
	width: 100%;
	height: 100%;
	background-size: 100%;
	height: 645px;
	padding-top: 80px;
	z-index: 30;
}

.service_033 {
	background: url(/public/img/service_033.png) no-repeat center center;
	width: 100%;
	height: 100%;
	background-size: 100%;
	height: 770px;
}

.service_bottom {
	background: url('public/img/service_048.png') no-repeat center center;
	background-size: 100%;
	color: #ffffff !important;
}

.service_bottom_no {
	background-color: #F8F8F8;

}

.service_051 {
	background: url('public/img/service_051.png') no-repeat center center;
	background-size: 100%;
	color: #ffffff !important;
	height: 640px;
}

.service-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* 强制固定 3 列 */
	gap: 20px;
	max-width: 715px;
	margin: 40px 0px 0px 367px;
}

.service-item {
	display: flex;
	align-items: center;
	width: 225px;
	padding: 20px;
	border: 1px solid #FFFFFF;
	box-sizing: border-box;
	/* 确保宽度计算包含边框 */
	justify-self: start;
	cursor: pointer;
	/* 强制每个单元格左对齐 */
}

.service-item:hover {
	background-color: #4A4C5F;
}

.service-wl {
	position: relative;
	width: 380px;
	height: 236px;
	transition: all 0.3s ease;
	overflow: hidden;
	cursor: pointer;
}

.service-wl:hover {
	transform: scale(1.1);
}

.service-yw {
	position: relative;
	transition: all 0.3s ease;
	cursor: pointer;
	border-radius: 12px;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border: 2px solid transparent;
		border-radius: 12px;
		background: linear-gradient(45deg, #4D8FFF, #87CEFA) border-box;
		-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
		-webkit-mask-composite: destination-out;
		mask-composite: exclude;
		transform: scale(0.95);
		opacity: 0;
		transition: all 0.3s ease;
		pointer-events: none;
	}

	&:hover {
		transform: translateY(-5px);

		&::before {
			transform: scale(1);
			opacity: 1;
		}
	}
}

.service_top1 {
	font-size: 24px;
	padding-top: 30px;
	z-index: 30;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	width: 100%;
}

.service_top1_width {
	width: 30%;
}

.service_bottom_01 {
	margin: 0 auto;
	width: 62%;
	position: relative;
	margin-top: 40px
}

.service-02 {
	text-align: center;
	padding-top: 70px;
	z-index: 30;
	color: #ffffff;
}
.service_center_02{
	width: 30%;
}
@media (max-width: 1440px) {
	.service_center_02{
		width: 40%;
	}
	.service_top1 {
		padding-top: 16px;
	}

	.service_top1_width {
		width: 40%;
	}

	.service_023 {
		height: 485px;
		padding-top: 0px;
	}

	.service_bottom_01 {
		width: 84%;
	}

	.service_051 {
		height: 480px;
	}

	.service-container {
		margin: 30px 0px 0px 140px;
	}
	.service-item{
		padding: 14px;
	}
}
</style>
