From 4725513ff2eac5c7467d1252585ed116a461a670 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=86=E9=92=B1=E8=90=BD=E5=B0=BD=E6=A7=BF=E8=8A=B1?=
 =?UTF-8?q?=E7=A8=80?= <2675540038@qq.com>
Date: Wed, 14 May 2025 14:40:42 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=BA=A7=E5=93=81=E4=B8=8E=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E5=B7=B2=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/proServices.vue | 298 +++++++++++++++++++++++++++++++++++-------
 1 file changed, 252 insertions(+), 46 deletions(-)

diff --git a/pages/proServices.vue b/pages/proServices.vue
index 8d7373f..49e53f6 100644
--- a/pages/proServices.vue
+++ b/pages/proServices.vue
@@ -1,5 +1,5 @@
 <template>
-	<div style="width: 100%;">
+	<div style="width: 100%;overflow: hidden;">
 		<!-- Swiper 容器 -->
 		<div class="group_666" style="position: relative;">
 			<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
@@ -27,48 +27,48 @@
 		<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
-				style="font-size: 24px;padding-top: 30px;z-index: 30;;display: flex;flex-direction: row;justify-content: space-around;width: 100%;">
+			<div class="service_top1">
 				<div style="cursor: pointer;">内容创作与运营</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 style="text-align: center;padding-top: 30px;z-index: 30;">
+			<div class="service-01" style="text-align: center;padding-top: 30px;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 style="width: 30%;">
-						<div style="display: flex;flex-direction: row;align-items: center;">
+					<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 style="margin-top: 30px;font-size: 14px;font-weight: 400;color: #768597;">
+						<div class="reveal-left"
+							style="margin-top: 30px;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 style="display: flex;flex-direction: row;align-items: center;">
+								<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 style="display: flex;flex-direction: row;align-items: center;">
+								<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 style="display: flex;flex-direction: row;align-items: center;">
+								<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>
@@ -78,21 +78,21 @@
 							</div>
 							<div
 								style="margin-top: 40px;display: flex;flex-direction: row;justify-content: space-between;">
-								<div style="display: flex;flex-direction: row;align-items: center;">
+								<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 style="display: flex;flex-direction: row;align-items: center;">
+								<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 style="display: flex;flex-direction: row;align-items: center;">
+								<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>
@@ -102,21 +102,21 @@
 							</div>
 							<div
 								style="margin-top: 40px;display: flex;flex-direction: row;justify-content: space-between;">
-								<div style="display: flex;flex-direction: row;align-items: center;">
+								<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 style="display: flex;flex-direction: row;align-items: center;">
+								<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 style="display: flex;flex-direction: row;align-items: center;">
+								<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>
@@ -126,32 +126,32 @@
 							</div>
 						</div>
 					</div>
-					<div style="width: 30%;text-align: center;">
+					<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" style="padding-top: 80px;z-index: 30;">
-			<div style="text-align: center;padding-top: 30px;z-index: 30;">
+		<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 style="width: 30%;">
+				<div class="service_center_01" style="width: 30%;">
 					<img src="public/img/service_024.png" style="width:100%;height: 100%;">
 				</div>
-				<div style="width: 30%;">
+				<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="font-size: 18px;font-weight: 700;margin-left: 10px;">项目介绍和业务描述</div>
+						<div style="color: #222222;font-size: 18px;font-weight: 700;margin-left: 10px;">项目介绍和业务描述</div>
 					</div>
 					<div style="margin-top: 30px;font-size: 14px;font-weight: 400;color: #768597;">
-						我们专注于提供全方位的定制化软件开发服务，满足您多样化的业务需求。无论是面向特定群体的活动平台（如“多样青春项目”），功能完善的电子商务系统（如“商城项目”），互动性强的活动应用（如“健身打卡活动项目”），还是便捷高效的组织管理工具（如“协会小程序项目”），我们的团队都能运用主流技术栈和敏捷开发模式，为您打造用户体验出色、性能稳定可靠的Web应用、移动App及小程序，驱动业务创新
+						我们专注于提供全方位的定制化软件开发服务，满足您多样化的业务需求。无论是面向特定群体的活动平台（如"多样青春项目"），功能完善的电子商务系统（如"商城项目"），互动性强的活动应用（如"健身打卡活动项目"），还是便捷高效的组织管理工具（如"协会小程序项目"），我们的团队都能运用主流技术栈和敏捷开发模式，为您打造用户体验出色、性能稳定可靠的Web应用、移动App及小程序，驱动业务创新
 					</div>
 					<div
 						style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%;margin-top: 30px;">
@@ -178,7 +178,7 @@
 			</div>
 			<div
 				style="display: flex;flex-direction: row;align-items: center;justify-content: center;width: 100%;gap: 30px;margin-top: 30px;">
-				<div style="position: relative;">
+				<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>
@@ -186,7 +186,7 @@
 							帮助决策者制定针对性防护策略降低网络攻击、数据泄露和业务中断等风险</div>
 					</div>
 				</div>
-				<div style="position: relative;">
+				<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>
@@ -194,7 +194,7 @@
 							专业团队，快速检测、定位并处置安全威胁，最大限度减少损失，保障业务连续性</div>
 					</div>
 				</div>
-				<div style="position: relative;">
+				<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>
@@ -202,7 +202,7 @@
 							防篡改 防窃取 防逆向抵御各类网络攻击和数据泄露风险</div>
 					</div>
 				</div>
-				<div style="position: relative;">
+				<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>
@@ -217,8 +217,8 @@
 				<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;justify-content: center;gap: 30px;margin-top: 30px;">
-				<div style="position: relative;width: 380px;height: 236px;">
+			<div class="service-wl-a" 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>
@@ -232,7 +232,7 @@
 					<div style="padding: 0px 30px;position: relative;;color: #768597;font-size: 14px;font-weight: 400;">
 						对安卓应用进行深度加密、加壳保护的安全产品，且在系统层实时进行威胁环境检测，保护应用远离恶意破解、反编译、二次打包，动态调试、内存抓取等威胁</div>
 				</div>
-				<div style="position: relative;width: 380px;height: 236px;">
+				<div class="service-wl">
 					<div style="position: absolute;">
 						<img src="public/img/service_034.png" style="width:100%;height: 100%;">
 					</div>
@@ -247,7 +247,7 @@
 						iOS应用加固是旨在为广大的i0S软件开发者以及厂商源代码提供加密保护，通过代码加密、指令混淆等技术手段在编译阶段对源代码进行常量加密、逻辑混淆、结构混排等保护，增加反编译、改和注入的难度，提高核心代码及数据的安全性
 					</div>
 				</div>
-				<div style="position: relative;width: 380px;height: 236px;">
+				<div class="service-wl">
 					<div style="position: absolute;">
 						<img src="public/img/service_034.png" style="width:100%;height: 100%;">
 					</div>
@@ -262,8 +262,8 @@
 						多重加密技术对应用运行时的进程空间进行防护，采用动态加解密技术，阻止各种调试器进行内存调试、注入和dump</div>
 				</div>
 			</div>
-			<div style="display: flex;justify-content: center;gap: 30px;margin-top: 30px;">
-				<div style="position: relative;width: 380px;height: 236px;">
+			<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>
@@ -277,7 +277,7 @@
 					<div style="padding: 0px 30px;position: relative;;color: #768597;font-size: 14px;font-weight: 400;">
 						在程序运行时对文件指纹及完整性进行校验，如发现任一文件被篡改或与原始签名不一致，应用则停止运行，从而保证了应用运行的安全</div>
 				</div>
-				<div style="position: relative;width: 380px;height: 236px;">
+				<div class="service-wl">
 					<div style="position: absolute;">
 						<img src="public/img/service_034.png" style="width:100%;height: 100%;">
 					</div>
@@ -291,7 +291,7 @@
 					<div style="padding: 0px 30px;position: relative;;color: #768597;font-size: 14px;font-weight: 400;">
 						动态监控程序中的内存分布文件，可以随时监控到内存读取等操作，从而保护内存截取攻击，安全键盘和通信协议加密分别对输入和网络通信增加了安全保障，</div>
 				</div>
-				<div style="position: relative;width: 380px;height: 236px;">
+				<div class="service-wl">
 					<div style="position: absolute;">
 						<img src="public/img/service_034.png" style="width:100%;height: 100%;">
 					</div>
@@ -313,7 +313,7 @@
 				<div style="color: #768597;font-size: 16px;margin-top: 15px;">利用物联网、大数据、人工智能等前沿技术，为不同场景提供一体化的智慧化解决方案
 				</div>
 			</div>
-			<div style="margin: 0 auto;width: 62%;position: relative;margin-top: 30px">
+			<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` }"
@@ -557,21 +557,21 @@
 					<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: 80%;">
-				<div style="text-align: center;padding-top: 30px;z-index: 30;color: #ffffff;">
+				<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" style="margin: 80px 0px 0px 250px;">
-					<div v-for="(item,index) in 11" 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;">需求分析与规划</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>
@@ -602,7 +602,19 @@ 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);
@@ -1046,11 +1058,85 @@ onMounted(() => {
 	})
 })
 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-item', {
+		duration: 800,
+		delay: 300,
+		opacity: 0,
+		scale: 0.5,
+		reset: true,
+		mobile: true,
+	})
 }
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 @import "@/assets/animate/animate.min.css";
 @import "@/assets/index.css";
 
@@ -1068,6 +1154,8 @@ const animate = () => {
 	height: 100%;
 	background-size: 100%;
 	height: 645px;
+	padding-top: 80px;
+	z-index: 30;
 }
 
 .service_033 {
@@ -1102,17 +1190,135 @@ const animate = () => {
 	/* 强制固定 3 列 */
 	gap: 20px;
 	max-width: 715px;
+	margin: 80px 0px 0px 250px;
 }
 
 .service-item {
 	display: flex;
 	align-items: center;
 	width: 225px;
-	padding:20px;
+	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: 30px
+}
+
+.service-02 {
+	text-align: center;
+	padding-top: 30px;
+	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>