From 601f99ec800170d8a847cd2e32da06f6a8ea4bda 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, 28 May 2025 17:54:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E9=80=82=E9=85=8D=E5=92=8C=E6=A0=B7=E5=BC=8F=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在多个页面添加移动端检测并重定向到对应的移动端页面
- 优化移动端布局样式，包括间距、背景和高度调整
- 为社会责任页面添加分页功能
- 统一图片资源使用CDN地址
- 修复导航链接问题
- 添加新的背景变量和样式
- 优化动画效果和滚动触发
- 调整页面元素间距和响应式布局
---
 .gitignore                  |   2 +-
 assets/css/common.scss      |   1 +
 assets/index.scss           |   2 +-
 components/AppFooter.vue    |  30 ++++--
 components/AppHeader.vue    |   2 +-
 pages/aboutUs.vue           |   6 +-
 pages/concatUs.vue          |  15 ++-
 pages/customerReviews.vue   |   4 +
 pages/phone_aboutUs.vue     |   8 +-
 pages/phone_index.vue       | 194 ++++++++++++++++++++++--------------
 pages/phone_proServices.vue |  33 +++---
 pages/phone_societyDuty.vue |  51 +++++++++-
 pages/proServices.vue       |   4 +
 pages/proServices_con.vue   |   4 +
 pages/societyDuty.vue       |  76 +++++++++-----
 pages/societyDutyNew.vue    |   4 +
 16 files changed, 295 insertions(+), 141 deletions(-)

diff --git a/.gitignore b/.gitignore
index 676f52a..ad6585e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,7 +8,7 @@ dist
 
 # Node dependencies
 node_modules
-
+.history
 # Logs
 logs
 *.log
diff --git a/assets/css/common.scss b/assets/css/common.scss
index 1aac570..534d0a7 100644
--- a/assets/css/common.scss
+++ b/assets/css/common.scss
@@ -9,6 +9,7 @@
     --bg-b: url('https://cdn.web.0rui.cn/img/bg-b.png');
     --bg-4: url('https://cdn.web.0rui.cn/img/bg-4.png');
     --bg-5: url('https://cdn.web.0rui.cn/img/bg-5.png');
+    --bg-6: url('https://cdn.web.0rui.cn/img/bg-6.png');
     --qall: url('https://cdn.web.0rui.cn/img/qall.png');
     --close: url('https://cdn.web.0rui.cn/img/close.png');
     --t1a: url('https://cdn.web.0rui.cn/img/about/t1a.png');
diff --git a/assets/index.scss b/assets/index.scss
index c142b23..4c5b966 100644
--- a/assets/index.scss
+++ b/assets/index.scss
@@ -110,7 +110,7 @@
   height: 681px;
   background: var(--bg-c) 100% no-repeat;
   background-size: 100% 100%;
-  gap: 150px;
+  gap: 40px;
 }
 
 @media (max-width: 1440px) {
diff --git a/components/AppFooter.vue b/components/AppFooter.vue
index 5137fbc..d3209d5 100644
--- a/components/AppFooter.vue
+++ b/components/AppFooter.vue
@@ -36,10 +36,8 @@
           洛阳公司地址：洛阳市&nbsp;洛龙区&nbsp;世贸中心D座1816室
         </span>
       </div>
-      <img class="image_29" referrerpolicy="no-referrer"
-        src="public/img/wb.png" />
-      <img class="image_30" referrerpolicy="no-referrer"
-        src="public/img/wx.png" />
+      <img class="image_29" referrerpolicy="no-referrer" src="public/img/wb.png" />
+      <img class="image_30" referrerpolicy="no-referrer" src="public/img/wx.png" />
     </div>
   </div>
 
@@ -47,12 +45,24 @@
   <div class="mobile-footer flex-col">
     <div style="background-color: #eeeeee;width:100%;height: 0.5px;margin-bottom: 20px;"></div>
     <div class="mobile-nav flex-col">
-      <span class="mobile-nav-item">企业首页</span>
-      <span class="mobile-nav-item">产品&amp;服务</span>
-      <span class="mobile-nav-item">灵睿&amp;我们</span>
-      <span class="mobile-nav-item">客户&amp;评价</span>
-      <span class="mobile-nav-item">社会&amp;责任</span>
-      <span class="mobile-nav-item">联系我们</span>
+      <NuxtLink to="/" class="mobile-nav-item">
+        <span >企业首页</span>
+      </NuxtLink>
+      <NuxtLink to="/phone_proServices_con/" class="mobile-nav-item">
+        <span >产品&amp;服务</span>
+      </NuxtLink>
+      <NuxtLink to="/phone_aboutUs/" class="mobile-nav-item">
+        <span >灵睿&amp;我们</span>
+      </NuxtLink>
+      <NuxtLink to="/phone_customerReviews/" class="mobile-nav-item">
+        <span >客户&amp;评价</span>
+      </NuxtLink>
+      <NuxtLink to="/phone_societyDutyNew/" class="mobile-nav-item">
+        <span >社会&amp;责任</span>
+      </NuxtLink>
+      <NuxtLink to="/phone_concatUs/" class="mobile-nav-item">
+        <span >加入我们</span>
+      </NuxtLink>
       <span class="mobile-contact">联系电话：400-080-0379</span>
     </div>
     <div class="mobile-info flex-col">
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
index 6eb75df..0ed1357 100644
--- a/components/AppHeader.vue
+++ b/components/AppHeader.vue
@@ -178,7 +178,7 @@ console.log(route)
   display: flex;
   align-items: center;
   gap: 20px;
-  padding-left: 150px;
+  padding-left: 340px;
 
   @media (max-width: 768px) {
     display: none;
diff --git a/pages/aboutUs.vue b/pages/aboutUs.vue
index 5e3fe25..6704245 100644
--- a/pages/aboutUs.vue
+++ b/pages/aboutUs.vue
@@ -131,7 +131,7 @@
 				<swiper ref="swiper_exp" :slidesPerView="5" loop :loopedSlides="3" :autoplay="{ delay: 2000 }"
 					centeredSlides :modules="modules" :watchSlidesProgress="true" @swiper="onSwiperExp">
 					<swiper-slide v-for="(item, index) in 21" :key="index" style="padding: 0 10px;">
-						<img :src="`/img/about/${item}.jpg`" style="width: 100%;">
+						<img :src="`${cdnUrl}/img/about/${item}.jpg`" style="width: 100%;">
 					</swiper-slide>
 				</swiper>
 				<!-- <div class="dswper_left">
@@ -217,6 +217,10 @@ const swiper_exp = ref();
 
 // 新闻数据
 onMounted(() => {
+	const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+	if (coMobile) {
+		window.location.href="/web/phone_aboutUs/";
+	}
 	animate()
 })
 const numberAnimationInstRef = ref()
diff --git a/pages/concatUs.vue b/pages/concatUs.vue
index 0fe3c12..be80ac5 100644
--- a/pages/concatUs.vue
+++ b/pages/concatUs.vue
@@ -61,13 +61,14 @@
 			<span class="text_54" style="margin-top: 20px;">Company&nbsp;environment</span>
 			<div class="hbform">
 				<div class="flex boxgs">
-					<div v-for="(item, index) in typeList" @click="openType(item)" :class="typeId == item.id ? 'title active' : 'title'">{{ item.name
+					<div v-for="(item, index) in typeList" @click="openType(item)"
+						:class="typeId == item.id ? 'title active' : 'title'">{{ item.name
 						}}</div>
 				</div>
 				<div class="flex justify-center align-center flex-wrap" style="margin-top: 30px;">
 					<div v-for="item in list" class="flex-col box_18s" style="margin-bottom: 20px;">
 						<div class="titless">
-							<div class="a1s">{{ item.name}}</div>
+							<div class="a1s">{{ item.name }}</div>
 							<div class="a2s">任职要求请联系HR</div>
 						</div>
 						<div class="line"></div>
@@ -128,7 +129,11 @@ const swiperOptionsNews = {
 }
 // 新闻数据
 onMounted(() => {
-		animate()
+	const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+	if (coMobile) {
+		window.location.href = "/web/phone_concatUs/";
+	}
+	animate()
 	getType();
 })
 const openType = (item: any) => {
@@ -151,7 +156,7 @@ const getType = () => {
 }
 const list = ref([])
 const getList = () => {
-	$api.get("/api/home.recruitment_information/index?cate_id="+typeId.value)
+	$api.get("/api/home.recruitment_information/index?cate_id=" + typeId.value)
 		.then((res: any) => {
 			console.log(res)
 			list.value = res.data.data.list
@@ -263,6 +268,7 @@ const animate = () => {
 	transition: 6s linear;
 	transform: scale(1, 1);
 }
+
 .section_1s {
 	height: 360px;
 	background: var(--allpeople) 100% no-repeat;
@@ -379,6 +385,7 @@ const animate = () => {
 		padding: 20px;
 		color: #768597;
 	}
+
 	&:hover {
 		cursor: pointer;
 		box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
diff --git a/pages/customerReviews.vue b/pages/customerReviews.vue
index 84b35e2..bfe9f42 100644
--- a/pages/customerReviews.vue
+++ b/pages/customerReviews.vue
@@ -101,6 +101,10 @@ const lists = ref([
 ]);
 // 新闻数据
 onMounted(() => {
+	const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+	if (coMobile) {
+		window.location.href="/web/phone_customerReviews/";
+	}
 	nextTick(() => {
 		animate()
 	})
diff --git a/pages/phone_aboutUs.vue b/pages/phone_aboutUs.vue
index 8791846..c82f70f 100644
--- a/pages/phone_aboutUs.vue
+++ b/pages/phone_aboutUs.vue
@@ -126,7 +126,7 @@
 				<swiper ref="swiper_exp" :slidesPerView="2" loop :loopedSlides="2" :autoplay="{ delay: 2000 }"
 					 :modules="modules" :watchSlidesProgress="true" @swiper="onSwiperExp">
 					<swiper-slide v-for="(item, index) in 21" :key="index" style="padding: 0 10px;">
-						<img :src="`/img/about/${item}.jpg`" style="width: 100%;">
+						<img :src="`${cdnUrl}/img/about/${item}.jpg`" style="width: 100%;">
 					</swiper-slide>
 				</swiper>
 				<div class="rongyu_cla flex-row justify-center align-center absolute w-full" style="gap: 10px;">
@@ -380,8 +380,10 @@ const animate = () => {
 }
 
 .box_7 {
-	background: var(--ruanzhu) 100% no-repeat;
-	height: 458px;
+	background: var(--ruanzhu) no-repeat;
+	background-size: 100% 100%;
+	height: auto;
+    padding-bottom: 70px;
 }
 
 .rongyu_cla {
diff --git a/pages/phone_index.vue b/pages/phone_index.vue
index 4ac400d..8fbcfe6 100644
--- a/pages/phone_index.vue
+++ b/pages/phone_index.vue
@@ -81,7 +81,8 @@
 				<div style="padding: 20px;">
 					<div class="leftBox section_2s flex-col" style="margin-right: 30px;">
 						<div class="group_6 flex-col">
-							<div class="box_6 flex-row align-center justify-between" style="width: 100%;align-items: center;">
+							<div class="box_6 flex-row align-center justify-between"
+								style="width: 100%;align-items: center;">
 								<div class="text-group_2">
 									<div class="text_17" style="color: #0256FF;">
 										专业技术服务
@@ -252,13 +253,8 @@
 				<span class="text_24 topBox">行业案例</span>
 				<span class="text_15 topBox">Industry&nbsp;Cases</span>
 				<div class="dswper">
-					<swiper ref="swiper_exp" 
-						:slidesPerView="isMobile ? 1 : 2" 
-						loop 
-						:autoplay="false" 
-						:modules="modules"
-						:watchSlidesProgress="true" 
-						@swiper="onSwiperExp">
+					<swiper ref="swiper_exp" :slidesPerView="isMobile ? 1 : 2" loop :autoplay="false" :modules="modules"
+						:watchSlidesProgress="true" @swiper="onSwiperExp">
 						<swiper-slide v-for="(item, index) in 14" :key="index">
 							<div style="padding: 20px;">
 								<img class="hy_my_home" :src="`${$cdnUrl}/img/home_al/op${item}.png`">
@@ -277,31 +273,31 @@
 			<div class="text-wrapper_10">
 				<span class="text_41">新闻动态</span>
 			</div>
-			<div class="text-wrapper_11" style="margin-bottom: 20px;">
-				<span class="text_42">news information</span>
+			<div class="text-wrapper_11" style="margin-bottom: 20px;width: 100%;">
+				<span style="color: rgb(118, 133, 151);font-size: 16px;">news information</span>
 			</div>
 			<div v-for="item in newsList">
 				<div class="box_12 flex-row justify-center">
-				<img @click="openUrl(item.id)" class="image_7 leftBoxTop" referrerpolicy="no-referrer"
-					:src="item.image" style="cursor: pointer;;object-fit: cover;" />
-				<div class="box_13 flex-col" @click="openUrl(item.id)">
-					<div class="text-group_6">
-						<div class="one-line-ellipsis news_title_home">
-							{{ item.title }}
+					<img @click="openUrl(item.id)" class="image_7 leftBoxTop" referrerpolicy="no-referrer"
+						:src="item.image" style="cursor: pointer;;object-fit: cover;" />
+					<div class="box_13 flex-col" @click="openUrl(item.id)">
+						<div class="text-group_6">
+							<div class="one-line-ellipsis news_title_home">
+								{{ item.title }}
+							</div>
+							<div class="two-line-ellipsis"
+								style="color: #768597;font-size: 14px;font-weight: 400;margin-top: 20px;">
+								{{ item.subtitle }}
+							</div>
 						</div>
-						<div class="two-line-ellipsis"
-							style="color: #768597;font-size: 14px;font-weight: 400;margin-top: 20px;">
-							{{ item.subtitle }}
+						<div class="group_22 flex-row">
+							<div class="section_6 flex-col"></div>
+							<span class="text_44">{{ item.cate.name }}</span>
+							<span class="text_45">{{ retTime(item.release_time_text) }}</span>
 						</div>
 					</div>
-					<div class="group_22 flex-row">
-						<div class="section_6 flex-col"></div>
-						<span class="text_44">{{ item.cate.name }}</span>
-						<span class="text_45">{{ retTime(item.release_time_text) }}</span>
-					</div>
 				</div>
 			</div>
-			</div>
 			<div class="box_16 flex-row">
 				<div class="text-wrapper_12 flex-col">
 					<nuxt-link to="/phone_societyDutyNew/" class="text_52">
@@ -339,15 +335,8 @@
 		<div v-if="videoShow" class="pop" style="display: block;">
 			<div class="abs popCont pop_video_cont" :style="isMobile ? { width: '90%' } : {}">
 				<a @click="videoShow = false" class="abs pop_video_close closePop"></a>
-				<video 
-					:x5-playsinline="true" 
-					:playsinline="true" 
-					:webkit-playsinline="true" 
-					preload="auto"
-					x5-video-orientation="portraint" 
-					:controls="true" 
-					:autoplay="true" 
-					:src="`${cdnUrl}/img/222.mp4`"
+				<video :x5-playsinline="true" :playsinline="true" :webkit-playsinline="true" preload="auto"
+					x5-video-orientation="portraint" :controls="true" :autoplay="true" :src="`${cdnUrl}/img/222.mp4`"
 					:draggable="true"></video>
 			</div>
 		</div>
@@ -601,15 +590,17 @@ const openUrl = (id: number) => {
 @import "@/assets/animate/animate.min.css";
 @import "@/assets/index.scss";
 
-.text_7, .text_8 {
+.text_7,
+.text_8 {
 	text-align: center;
 	width: 100%;
 }
 
-.text_9, .text_11 {
+.text_9,
+.text_11 {
 	font-size: 16px !important;
 	text-align: center;
-	padding-right:0px
+	padding-right: 0px
 }
 
 .text_12 {
@@ -618,10 +609,13 @@ const openUrl = (id: number) => {
 	padding: 0 15px;
 	width: 100%;
 }
-.text-wrapper_2{
+
+.text-wrapper_2 {
 	margin: 0 auto;
 }
-.leftBox, .rightBox {
+
+.leftBox,
+.rightBox {
 	width: 100% !important;
 	margin: 10px 0 !important;
 }
@@ -638,18 +632,21 @@ const openUrl = (id: number) => {
 	width: 100% !important;
 	height: auto !important;
 }
-.section_1{
+
+.section_1 {
 	height: 323px;
-    width: 100%;
+	width: 100%;
 }
-.image-wrapper_2{
+
+.image-wrapper_2 {
 	border-radius: 10px;
 }
+
 .contactForm {
 	.inputform {
 		flex-direction: column !important;
 		width: 100% !important;
-		padding:20px 20px 10px 20px;
+		padding: 20px 20px 10px 20px;
 	}
 
 	.contactInput {
@@ -657,7 +654,7 @@ const openUrl = (id: number) => {
 		margin: 10px 0 !important;
 		height: 40px !important;
 		font-size: 14px !important;
-		border-radius: 6px!important;
+		border-radius: 6px !important;
 		background: #FFFFFF;
 		padding-left: 10px;
 	}
@@ -666,36 +663,47 @@ const openUrl = (id: number) => {
 		width: 100% !important;
 		height: 120px !important;
 		font-size: 14px !important;
-		border-radius: 6px!important;
+		border-radius: 6px !important;
 		padding: 10px;
 	}
 }
 
-.box_12, .box_14 {
+.box_12,
+.box_14 {
 	flex-direction: column !important;
 }
-.box_3{
+
+.box_3 {
 	width: 100%;
 }
-.box_7,.box_13,.box_18{
+
+.box_7,
+.box_13,
+.box_18 {
 	height: 100%;
 }
 
-.image_7, .image_8, .image_9 {
+.image_7,
+.image_8,
+.image_9 {
 	width: 100% !important;
 }
-.text_24{
+
+.text_24 {
 	margin-top: 30px;
 }
-.group_22{
+
+.group_22 {
 	width: 100%;
 	margin: 27px 0 23px 15px;
 }
+
 .news_my_home {
 	width: 100% !important;
 	margin: 10px 0 !important;
 	padding: 15px !important;
 }
+
 .contactBut {
 	width: 108px;
 	border-radius: 4px 4px 4px 4px;
@@ -703,13 +711,14 @@ const openUrl = (id: number) => {
 	bottom: 20px;
 	right: 30px;
 	height: 36px;
-	background-color: #222222;
+	background-color: rgb(252, 116, 40);
 	border: none;
 	font-weight: 400;
 	font-size: 16px;
 	line-height: 28px;
 	color: #FFFFFF;
 }
+
 .group_29 {
 	grid-template-columns: repeat(2, 1fr) !important;
 	gap: 10px !important;
@@ -762,15 +771,18 @@ const openUrl = (id: number) => {
 	width: 100%;
 	height: 100%;
 }
+
 .text_16 {
 	font-size: 14px;
 	line-height: 24px;
 }
-.group_10{
+
+.group_10 {
 	width: 91%;
-	margin-left:15px;
+	margin-left: 15px;
 	margin-top: 0px;
 }
+
 .text_18 {
 	font-size: 15px !important;
 }
@@ -782,24 +794,30 @@ const openUrl = (id: number) => {
 .group_7 {
 	padding: 10px !important;
 	margin: 0px 0 !important;
-	height: 100%!important;
+	height: 100% !important;
 }
-.text-group_3{
+
+.text-group_3 {
 	height: auto;
 }
-.section_2sa{
+
+.section_2sa {
 	height: 700px;
 }
+
 .image-wrapper_5 {
 	width: 40px !important;
 	height: 40px !important;
 	margin-top: 0px;
 	margin-right: 20px !important;
 }
-.text-group_3_3{
+
+.text-group_3_3 {
 	height: auto;
 }
-.text-group_3, .text-group_3_3 {
+
+.text-group_3,
+.text-group_3_3 {
 	flex: 1 !important;
 }
 
@@ -819,64 +837,88 @@ const openUrl = (id: number) => {
 	transform: none !important;
 	color: inherit !important;
 }
-.text-group_1,.group_7,.group_6s{
+
+.text-group_1,
+.group_7,
+.group_6s {
 	width: 100%;
 }
-.text_19{
+
+.text_19 {
 	width: 100%;
 	line-height: 25px;
 	height: auto;
 }
-.box_12{
+
+.box_12 {
 	height: 100%;
 	margin-top: 0px;
 }
+
 .group_6 {
 	width: 100%;
 }
-.box_13{
+
+.box_13 {
 	width: 100%;
-	margin:0px;
+	margin: 0px;
 }
-.section_2s{
+
+.section_2s {
 	height: 710px;
 }
-.box_5{
+
+.box_5 {
 	height: auto;
 }
-.text-group_2{
+
+.text-group_2 {
 	width: 55%;
 	height: auto;
 }
-.text_17,.text_16{
+
+.text_17,
+.text_16 {
 	width: auto;
 }
-.box_6{
-	padding:0px 15px 15px 15px;
+
+.box_6 {
+	padding: 0px 15px 15px 15px;
 	height: 100%;
 }
-.image-wrapper_5{
+
+.image-wrapper_5 {
 	width: 30%;
 }
-.text-group_3{
+
+.text-group_3 {
 	width: 70%;
 }
+
 .group_10s {
 	width: 100%;
 	margin: 0px;
 }
-.dswper{
+
+.dswper {
 	margin-top: 10px;
 }
-.text-wrapper_10{
+
+.text-wrapper_10 {
 	margin-top: 30px;
 }
+
 @media (max-width: 768px) {
 	.group_3 {
 		height: auto;
 		padding: 20px;
-		background-size:auto;
+		background-size: auto;
 	}
-	
+
+	.box_18 {
+		background: var(--bg-6) 100% no-repeat;
+		background-size: 100% 100%;
+	}
+
 }
 </style>
diff --git a/pages/phone_proServices.vue b/pages/phone_proServices.vue
index c6f33cc..85bf9e9 100644
--- a/pages/phone_proServices.vue
+++ b/pages/phone_proServices.vue
@@ -12,7 +12,7 @@
 			</swiper>
 		</div>
 		<div class="group_2 flex-col"
-			style="background-color: #ffffff;overflow: unset;position: relative;height: 100%;">
+			style="background-color: #ffffff;overflow: unset;position: relative;min-height: 1157px;">
 			<!-- <img :src="`${cdnUrl}/img/service_01.png`" style="width: 100%;position: absolute;top: -26px;z-index: 10;"> -->
 			<div class="service_top1">
 				<NuxtLink to="/phone_proServices_con/" style="cursor: pointer;width: 50%;text-align: center;">
@@ -134,7 +134,7 @@
 			</div>
 
 		</div>
-		<div class="service_023">
+		<div class="service_023" style="min-height: 996px;">
 			<div class="service-01" 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: 14px;margin-top:10px;">全方位的定制化软件开发服务</div>
@@ -172,7 +172,7 @@
 				</div>
 			</div>
 		</div>
-		<div style="padding: 40px 0px 40px 0px;z-index: 30;background-color: #ffffff;">
+		<div style="min-height: 619px;padding: 40px 0px 40px 0px;z-index: 30;background-color: #ffffff;">
 			<div style="text-align: center;z-index: 30;">
 				<div style="font-size: 34px;font-weight: 700;">IT运维服务</div>
 				<div style="color: #768597;font-size: 14px;margin-top: 10px;">承接客户网站及应用系统的全面安全防护项目</div>
@@ -216,12 +216,12 @@
 				</div>
 			</div>
 		</div>
-		<div class="service_033" style="padding-top: 30px;z-index: 30;">
+		<div class="service_033" style="padding-top: 30px;z-index: 30;min-height: 1576px;">
 			<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-b" style="flex-wrap: wrap;display: flex;justify-content: center;margin-top: 30px;">
+			<div style="flex-wrap: wrap;display: flex;justify-content: center;margin-top: 30px;">
 				<div class="service-wl">
 					<div style="position: absolute;">
 						<img :src="`${cdnUrl}/img/service_034.png`" style="width:100%;height: 100%;">
@@ -266,7 +266,7 @@
 						多重加密技术对应用运行时的进程空间进行防护，采用动态加解密技术，阻止各种调试器进行内存调试、注入和dump</div>
 				</div>
 			</div>
-			<div class="service-wl-b" style="flex-wrap: wrap;display: flex;justify-content: center;gap: 0px;">
+			<div style="flex-wrap: wrap;display: flex;justify-content: center;gap: 0px;">
 				<div class="service-wl">
 					<div style="position: absolute;">
 						<img :src="`${cdnUrl}/img/service_034.png`" style="width:100%;height: 100%;">
@@ -311,7 +311,7 @@
 				</div>
 			</div>
 		</div>
-		<div style="z-index: 30;background-color: #ffffff;padding:40px 20px;">
+		<div style="min-height: 1705px;z-index: 30;background-color: #ffffff;padding:40px 20px;">
 			<div style="text-align: center;z-index: 30;">
 				<div style="font-size: 34px;font-weight: 700;">智慧化解决方案</div>
 				<div style="color: #768597;font-size: 14px;margin-top: 10px;">利用物联网、大数据、人工智能等前沿技术，为不同场景提供一体化的智慧化解决方案
@@ -499,7 +499,9 @@ const swiperOptionsNews = {
 
 // 新闻数据
 onMounted(() => {
-	animate();
+	nextTick(() => {
+		animate();
+	})
 })
 const animate = () => {
 	const sr = ScrollReveal();
@@ -516,14 +518,15 @@ const animate = () => {
 	})
 	
 	sr.reveal('.service_bottom_01', {
-		origin: "left",
+		origin: "right",
 		distance: "550px",
 		duration: 800,
 		delay: 100,
 		opacity: 0,
 		scale: 0.9,
-		reset: true,
+		reset: false,
 		useDelay: 130,
+		viewFactor: 0.3,
 		mobile: true,
 	})
 	sr.reveal('.service-01', {
@@ -555,23 +558,25 @@ const animate = () => {
 		delay: 100,
 		opacity: 0,
 		scale: 0.9,
-		reset: false,
+		reset: true,
 		useDelay: 500,
 		mobile: true,
 	})
 	sr.reveal('.service-wl', {
 		origin: "left",
-		distance: "50px",
+		distance: "550px",
 		duration: 800,
-		delay: 200,
+		delay: 100,
 		opacity: 0,
 		scale: 0.9,
 		reset: true,
+		viewFactor: 0.1,
+		useDelay: 130,
 		mobile: true,
 	})
 	// sr.reveal('.service-wl-b', {
 	// 	origin: "left",
-	// 	distance: "50px",
+	// 	distance: "500px",
 	// 	duration: 800,
 	// 	delay: 300,
 	// 	opacity: 0,
diff --git a/pages/phone_societyDuty.vue b/pages/phone_societyDuty.vue
index d2bba12..05e0bd8 100644
--- a/pages/phone_societyDuty.vue
+++ b/pages/phone_societyDuty.vue
@@ -52,13 +52,13 @@
 			
 			<div class="boxgs flex-row flex-wrap">
 
-				<div class="box_con flex-col"  v-for="(item,index) in lists" :key="index">
+				<div class="box_con flex-col"  v-for="(item,index) in newsList" :key="index">
 					<div class="align-center"  style="justify-content: center;">
-						<img  :src="`${cdnUrl}/img/societyduty/s${index+1}.png`" style="width: 100%;">
+						<img  :src="item.image" style="width: 100%;">
 					</div>
 					<div class="flex-col" style="justify-content: center;margin-top: 5px;">
 						<span class="text_tt">
-							{{item.title}}
+							{{item.name}}
 						</span>
 						<!-- <span class="text_cc">
 							{{item.value}}
@@ -67,12 +67,16 @@
 				</div>	
 			</div>	
 		</div>
-
-		
+		<div class="flex flex-row justify-center py-5" style="background-color: #F8F8F8;padding-bottom: 40px;">
+			<n-pagination v-model:page="page" :page-sizes="[10]" :item-count="total" size="large"
+				@update:page="getPageList">
+			</n-pagination>
+		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
+import { NPagination } from 'naive-ui'
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import { nextTick, ref } from 'vue'
 import 'swiper/css'
@@ -138,10 +142,29 @@ const lists = ref([
 ]);
 // 新闻数据
 onMounted(() => {
+	getIndexNews();
 	nextTick(() => {
 		animate()
 	})
 })
+const page = ref(1);
+const total = ref(0);
+const getPageList = async () => {
+	page.value = page.value + 1;
+	getIndexNews();
+}
+
+const newsList = ref([])
+const getIndexNews = () => {
+	$api.get(`/api/home.news/images?page=${page.value}limit=12`)
+		.then((res: any) => {
+			console.log(res)
+			newsList.value = res.data.data.list
+		})
+		.catch((err) => {
+			console.dir(err)
+		})
+}
 const numberAnimationInstRef = ref()
 const numberAnimationInstRefKH = ref()
 const numberAnimationInstRefJS = ref()
@@ -224,6 +247,24 @@ const animate = () => {
 @import "@/assets/animate/animate.min.css";
 @import "@/assets/index.scss";
 
+::v-deep .n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active {
+	color: #ffffff;
+	background-color: #FC7428;
+	border: 1px solid #FC7428;
+}
+
+::v-deep .n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover.n-pagination-item--button {
+	color: #FC7428;
+}
+
+::v-deep .n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover {
+	color: #FC7428;
+	border: 1px solid #FC7428;
+}
+
+::v-deep .n-pagination .n-pagination-item {
+	border: 1px solid #999999;
+}
 
 
 .group_666 .swiper-slide img {
diff --git a/pages/proServices.vue b/pages/proServices.vue
index 59046a5..e56e696 100644
--- a/pages/proServices.vue
+++ b/pages/proServices.vue
@@ -1045,6 +1045,10 @@ const swiperOptionsNews = {
 
 // 新闻数据
 onMounted(() => {
+	const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+	if (coMobile) {
+		window.location.href="/web/phone_proServices/";
+	}
 	animate()
 })
 const animate = () => {
diff --git a/pages/proServices_con.vue b/pages/proServices_con.vue
index ab1c97d..331aa1a 100644
--- a/pages/proServices_con.vue
+++ b/pages/proServices_con.vue
@@ -379,6 +379,10 @@ const swiperOptionsNews = {
 
 // 新闻数据
 onMounted(() => {
+	const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+	if (coMobile) {
+		window.location.href="/web/phone_proServices_con/";
+	}
 	animate()
 })
 const animate = () => {
diff --git a/pages/societyDuty.vue b/pages/societyDuty.vue
index 5c28b63..282fa27 100644
--- a/pages/societyDuty.vue
+++ b/pages/societyDuty.vue
@@ -40,13 +40,13 @@
 			
 			<div class="boxgs flex-row flex-wrap">
 
-				<div class="box_con flex-col" v-for="(item,index) in lists" :key="index">
+				<div class="box_con flex-col" v-for="(item,index) in newsList" :key="index">
 					<div class="align-center"  style="justify-content: center;">
-						<img width="277px" height="189px" :src="`${cdnUrl}/img/societyduty/s${index+1}.png`" alt="">
+						<img width="277px" height="189px" :src="item.image" alt="">
 					</div>
 					<div class="flex-col" style="justify-content: center;margin-top: 5px;">
 						<span class="text_tt">
-							{{item.title}}
+							{{item.name}}
 						</span>
 						<!-- <span class="text_cc">
 							{{item.value}}
@@ -55,12 +55,17 @@
 				</div>	
 			</div>	
 		</div>
-
+		<div class="flex flex-row justify-center py-5" style="background-color: #F8F8F8;padding-bottom: 40px;">
+			<n-pagination v-model:page="page" :page-sizes="[10]" :item-count="total" size="large"
+				@update:page="getPageList">
+			</n-pagination>
+		</div>
 		
 	</div>
 </template>
 
 <script lang="ts" setup>
+import { NPagination } from 'naive-ui'
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import { nextTick, ref } from 'vue'
 import 'swiper/css'
@@ -104,32 +109,35 @@ const swiperOptionsNews = {
 	},
 }
 
-let vesSwiper: any = null
-const onSwiperExp = (swiper: any) => {
-	vesSwiper = swiper
-}
-const swiper_exp = ref();
-const lists = ref([
-	{title: '21年西工硅巷青创加速营仪式开营'},
-	{title: '21年西工硅巷青创加速营活动进行中'},
-	{title: '香港青英会15 周年、第16 届执委会暨第7屆理事会就职仪式'},
-	{title: '青年企业家助力河南高质量发展暨河南青年创新创业论坛'},
-	{title: '郑州市儿童福利院慰问活动'},
-	{title: '河南青年科技创新论坛'},
-	{title: '洛阳市青年联合会第九届委员会常务委员第一次会议'},
-	{title: '团省委省青联2023年新春送温暖慰问活动'},
-	{title: '荥阳市乔楼镇付河村“扶贫助困 情系家乡”志愿活动'},
-	{title: '东方医院活动'},
-	{title: '中国青年梦想季活动-中国'},
-	{title: '河南省青年企业家协会第十一届常务理事选举'}
-
-]);
 // 新闻数据
 onMounted(() => {
+	const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+	if (coMobile) {
+		window.location.href="/web/phone_societyDuty/";
+	}
+	getIndexNews();
 	nextTick(() => {
 		animate()
 	})
 })
+const page = ref(1);
+const total = ref(0);
+const getPageList = async () => {
+	page.value = page.value + 1;
+	getIndexNews();
+}
+
+const newsList = ref([])
+const getIndexNews = () => {
+	$api.get(`/api/home.news/images?page=${page.value}limit=12`)
+		.then((res: any) => {
+			console.log(res)
+			newsList.value = res.data.data.list
+		})
+		.catch((err) => {
+			console.dir(err)
+		})
+}
 const numberAnimationInstRef = ref()
 const numberAnimationInstRefKH = ref()
 const numberAnimationInstRefJS = ref()
@@ -211,6 +219,24 @@ const animate = () => {
 <style lang="scss" scoped>
 @import "@/assets/animate/animate.min.css";
 @import "@/assets/index.scss";
+::v-deep .n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active {
+	color: #ffffff;
+	background-color: #FC7428;
+	border: 1px solid #FC7428;
+}
+
+::v-deep .n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover.n-pagination-item--button {
+	color: #FC7428;
+}
+
+::v-deep .n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover {
+	color: #FC7428;
+	border: 1px solid #FC7428;
+}
+
+::v-deep .n-pagination .n-pagination-item {
+	border: 1px solid #999999;
+}
 
 
 
@@ -230,7 +256,7 @@ const animate = () => {
 .bottom_imgss{
 	// background: url(/public/img/customer/bg-s.png);
 	background: #F8F8F8;
-    height: 1047px;
+    height: 100%;
     // background-size: 100%;
 }
 .boxgs{
diff --git a/pages/societyDutyNew.vue b/pages/societyDutyNew.vue
index 405cc6b..74af966 100644
--- a/pages/societyDutyNew.vue
+++ b/pages/societyDutyNew.vue
@@ -151,6 +151,10 @@ const openNewInfo = (item) => {
 
 // 新闻数据
 onMounted(() => {
+	const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+	if (coMobile) {
+		window.location.href="/web/phone_societyDutyNew/";
+	}
 	animate()
 	getNewsList();
 })