From 54f205e764dbdfd6ae9dc5b9c6e9584e0becf592 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: Tue, 20 May 2025 18:32:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E9=80=82=E9=85=8D=E5=8F=8A=E9=A1=B5=E9=9D=A2=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整AppFooter.vue中移动端社交图标大小
- 在index.vue中添加移动端检测并跳转至手机版首页
- 优化AppHeader.vue的移动端菜单样式及交互
- 新增phone_proServices_con.vue页面，提供移动端服务内容展示
- 优化phone_index.vue页面布局及交互，增强移动端用户体验
---
 components/AppFooter.vue        |    4 +-
 components/AppHeader.vue        |   51 +-
 pages/index.vue                 |    7 +
 pages/phone_index.vue           | 1299 ++++++++++++++++---------------
 pages/phone_proServices_con.vue |  710 +++++++++++++++++
 5 files changed, 1418 insertions(+), 653 deletions(-)
 create mode 100644 pages/phone_proServices_con.vue

diff --git a/components/AppFooter.vue b/components/AppFooter.vue
index 2d9ab75..8d340c3 100644
--- a/components/AppFooter.vue
+++ b/components/AppFooter.vue
@@ -134,8 +134,8 @@
   }
 
   .mobile-social-icon {
-    width: 24px;
-    height: 24px;
+    width: 150px;
+    height: 150px;
   }
 }
 </style>
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
index bb0c236..2a58f1c 100644
--- a/components/AppHeader.vue
+++ b/components/AppHeader.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="page flex-col">
-    <div class="group_1 flex-col" :class="[(isScrolled || isHovered) && route.name != 'info-id' ? 'topfix' : '']"
-      @mouseenter="isScrolled = true;" @mouseleave="checkBoxHeight()">
-      <div class="flex-row" :class="route.name == 'info-id' ? 'box_1 box_1_info' : 'box_1'">
-        <img v-if="route.name != 'info-id' && !isScrolled" class="image_1" referrerpolicy="no-referrer"
+    <div class="group_1 flex-col" :class="[(isScrolled) && route.name != 'info-id' ? 'topfix' : '']"
+      @mouseenter="openmosee()" @mouseleave="checkBoxHeight()">
+      <div class="flex-row" :style="{justifyContent:coMobile?'space-between':'center',backgroundColor:isMobileMenuOpen?'#ffffff':'transparent',}" :class="route.name == 'info-id' ? 'box_1 box_1_info' : 'box_1'">
+        <img v-if="route.name != 'info-id' && !isScrolled && !isMobileMenuOpen" class="image_1" referrerpolicy="no-referrer"
           :src="`${cdnUrl}/img/logo.png`" />
-        <img v-if="route.name != 'info-id' && isScrolled" class="image_1" referrerpolicy="no-referrer"
+        <img v-if="route.name != 'info-id' && isScrolled || isMobileMenuOpen" class="image_1" referrerpolicy="no-referrer"
           :src="`${cdnUrl}/img/logo1.png`" />
         <img v-if="route.name == 'info-id'" class="image_1" referrerpolicy="no-referrer"
           :src="`${cdnUrl}/img/logo1.png`" />
@@ -49,7 +49,7 @@
         </div>
         <!-- Mobile Hamburger Button -->
         <div class="mobile-menu-btn" @click="toggleMobileMenu">
-          <div class="hamburger" :class="{ 'is-active': isMobileMenuOpen }">
+          <div class="hamburger" :class="{ 'is-active': isMobileMenuOpen,'is-scrolled':isScrolled }">
             <span></span>
             <span></span>
             <span></span>
@@ -58,15 +58,15 @@
       </div>
       <!-- Mobile Navigation -->
       <div class="mobile-nav" v-if="isMobileMenuOpen">
-        <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>
+        <span @click="openUrl('/')" class="mobile-nav-item">企业首页</span>
+        <span @click="openUrl('/phone_proServices_con/')" class="mobile-nav-item">产品&amp;服务</span>
+        <span @click="openUrl('/aboutUs/')" class="mobile-nav-item">灵睿&amp;我们</span>
+        <span @click="openUrl('/customerReviews/')" class="mobile-nav-item">客户&amp;评价</span>
+        <span @click="openUrl('/societyDutyNew/')" class="mobile-nav-item">社会&amp;责任</span>
+        <span @click="openUrl('/concatUs/')" class="mobile-nav-item">加入我们</span>
       </div>
     </div>
-    <transition name="fade-scale">
+    <transition name="fade-scale" v-if="!coMobile">
       <div v-if="scrollTop > 1000" class="back-to-top">
         <img @click="openTop()" :src="`${cdnUrl}/img/get_top.png`" alt="返回顶部" />
       </div>
@@ -85,19 +85,23 @@ const route = useRoute()
 const { locale } = useI18n()
 const isMobileMenuOpen = ref(false)
 const isScrolled = ref(false)
-const isHovered = ref(false)
 const scrollTop = ref(0);
 const handleScroll = () => {
   isScrolled.value = window.scrollY > 0;
   scrollTop.value = window.scrollY;
 }
-
+const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 onMounted(() => {
   window.addEventListener('scroll', handleScroll)
   // 初始化时检查一次滚动位置
   handleScroll()
 })
-
+const router = useRouter()
+const openUrl = (url) => {
+  isScrolled.value = false;
+  isMobileMenuOpen.value = false;
+  router.push(url)
+}
 const checkBoxHeight = () => {
   if (window.scrollY == 0) {
     isScrolled.value = false;
@@ -115,7 +119,11 @@ const openTop = () => {
   //返回顶部
   window.scrollTo(0, 0);
 }
-
+const openmosee = () => {
+  if(!coMobile){
+    isScrolled.value = true;
+  }
+}
 console.log(route)
 </script>
 
@@ -188,7 +196,7 @@ console.log(route)
     position: absolute;
     height: 3px;
     width: 100%;
-    background: #000;
+    background: #ffffff;
     border-radius: 3px;
     transition: all 0.3s ease;
 
@@ -206,7 +214,9 @@ console.log(route)
   }
 
   &.is-active {
+   
     span {
+      background-color: #000000;
       &:nth-child(1) {
         transform: rotate(45deg);
         top: 10px;
@@ -319,4 +329,9 @@ console.log(route)
   opacity: 1;
   transform: scale(1);
 }
+.is-scrolled{
+  span{
+    background-color: #000000;
+  }
+}
 </style>
diff --git a/pages/index.vue b/pages/index.vue
index a70319f..b4fb9d8 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -479,8 +479,15 @@ const formData = reactive({
 	emil: '',
 	message: ''
 })
+const router = useRouter()
 // 新闻数据
 onMounted(() => {
+	const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+	if (coMobile) {
+		router.push('/phone_index/')
+	} else {
+		router.push('/')
+	}
 	getIndexNews();
 	nextTick(() => {
 		// 初始化 ScrollReveal
diff --git a/pages/phone_index.vue b/pages/phone_index.vue
index aff2ed0..6d9ad8c 100644
--- a/pages/phone_index.vue
+++ b/pages/phone_index.vue
@@ -1,61 +1,73 @@
 <template>
 	<div style="width: 100%;">
 		<!-- Swiper 容器 -->
-		<div class="group_666" style="position: relative;">
+		<div class="group_666" style="position: relative;height: 219px;">
 			<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
 				<swiper-slide>
-					<img src="public/img/banner.png" style="width: 100%;">
+					<video class="video_1" :autoplay="true" :loop="true" :muted="true" :playsinline="true"
+						:src="`${cdnUrl}/img/1212.mp4`" style="width: 100%;height:100%;"></video>
 				</swiper-slide>
 				<swiper-slide>
-					<img src="public/img/banner.png" style="width: 100%;">
+					<img :src="`${cdnUrl}/img/banner.png`" style="width: 100%;height: 100%;">
+				</swiper-slide>
+				<swiper-slide>
+					<img :src="`${cdnUrl}/img/banner2.png`" style="width: 100%;height: 100%;">
 				</swiper-slide>
 			</swiper>
-			<div class="nav-container">
-				<div class="flex-row justify-center align-center">
-					<div>
-						<img src="public/img/left.png" alt="" class="nav-arrow">
-					</div>
-					<div style="margin: 0px 20px;">
-						<img src="public/img/morse.png" alt="" class="logo-img">
-					</div>
-					<div>
-						<img src="public/img/right.png" alt="" class="nav-arrow">
-					</div>
-				</div>
-			</div>
 		</div>
 		<div class="group_2 flex-col">
 			<div class="box_2 flex-col">
-				<div class="group_3 flex-col justify-center align-center">
+				<div class="group_3 ">
 					<div class="group_4 flex-col leftBox">
 						<div class="text-group_1 flex-col justify-between">
-							<span class="text_7">灵睿的互联网之道</span>
-							<span class="text_8">
+							<div class="text_7">灵睿的互联网之道</div>
+							<div class="text_8">
 								The&nbsp;Way&nbsp;of&nbsp;the&nbsp;Internet
-							</span>
-						</div>
-						<div class="text-wrapper_1 flex-row justify-center align-center" style="gap: 20px;">
-							<div class="text_9">公司简介</div>
-							<div class="text_10">运营方法论</div>
-							<div class="text_11">互联网营销</div>
-						</div>
-						<div class="box_3 flex-col">
-							<div class="box_4 flex-col"></div>
-						</div>
-						<span class="text_12">
-							灵睿是一家专业提供互联网技术及应用化服务的科技企业。公司成立于2006年，总部位于十三朝古都洛阳，在郑州、洛阳、许昌三地设立四家公司，是洛阳及河南建立较早、实力较强、规模较大的互联网骨干技术服务企业。公司致力于互联网+工业、互联网+医疗、互联网+教育、互联网+旅游、互联网+农业五个方面的发展。目前为近三千家企业提供互联网服务，并为上百家国有大型企业以及党政部门、事业机关单位提供互联网应用化服务。
-						</span>
-						<div class="text-wrapper_2 flex-col">
-							<span class="text_13">查看全部</span>
-						</div>
-					</div>
-					<div class="group_5 flex-col justify-center align-center rightBox">
-						<div class="section_1 flex-col">
-							<div class="image-wrapper_2 flex-col">
-								<img class="image_5" referrerpolicy="no-referrer" src="public/img/bf.png" />
 							</div>
 						</div>
-						<div class="orange-bg"></div>
+						<div style="gap: 50px;;display: flex;justify-content: center;margin-top: 50px;">
+							<div @click="openType(1)" :class="typeId == 1 ? 'text_9' : 'text_11'">公司简介</div>
+							<div @click="openType(2)" :class="typeId == 2 ? 'text_9' : 'text_11'">运营方法论</div>
+							<div @click="openType(3)" :class="typeId == 3 ? 'text_9' : 'text_11'">互联网营销</div>
+						</div>
+						<div class="box_3 flex-col" style="justify-content: center;">
+							<div v-if="typeId == 1" class="box_4 flex-col"></div>
+							<div v-if="typeId == 2" class="box_4 flex-col" style="margin-left: 120px;"></div>
+							<div v-if="typeId == 3" class="box_4 flex-col" style="margin-left: 250px;"></div>
+						</div>
+						<div class="text_12" v-if="typeId == 1">
+							洛阳灵睿网络技术有限公司
+							<br>
+							——智慧信息化与数字内容服务领航者
+							<br>
+							洛阳灵睿网络技术有限公司成立于2006年，深耕互联网行业，专注智慧信息化与数字内容服务领域19年。是集技术研发、创意策划、全媒体运营于一体的高新技术企业。公司以"技术赋能场景，内容驱动价值"为核心使命，专注于为大型公立医院、教育机构、企事业单位、品牌营销策略提供一站式智慧化解决方案与品牌数字化升级服务，助力客户实现效率提升、品牌增值与精准传播。
+							<br>
+							专注互联网领域，发散新媒体创思，执着深耕口碑服务，扎实落地品牌内容，共创新信息化与内容服务业态。
+						</div>
+						<div class="text_12" v-if="typeId == 2">
+
+							在灵睿，我们的运营方法论是基于深入的<strong>市场洞察、用户需求分析</strong>和科学的<strong>数据驱动</strong>，通过系统化的策略为品牌赋能。我们从运营的<strong>江湖地位</strong>出发，帮助品牌在竞争激烈的市场中确立<strong>独特的定位和竞争力；</strong>通过精确的运营基本逻辑，确保每一项策略与品牌核心价值相匹配，推动<strong>可持续发展。</strong>
+							我们将运营分为三大核心手段：<strong>内容运营、活动运营和用户运营</strong>。内容运营注重通过高质量、有共鸣的内容与受众建立深度联系；活动运营则通过创意和精准策划，提升品牌曝光和用户参与度；用户运营关注从触达到转化的全过程，通过个性化服务增强用户粘性与忠诚度。
+							灵睿深知，运营不仅依赖直觉与经验，更依<strong>赖数据支持。</strong>我们通过精细化的<strong>数据统计与分析</strong>数据统计与分析，实时监测运营效果并做出策略调整，确保每个决策都有<strong>数据背书</strong>。通过这一整套运营体系，我们不仅能为客户提供行之有效的解决方案，更能帮助他们在数字化浪潮中领先一步，实现<strong>持续增长与价值创造。</strong>
+						</div>
+						<div class="text_12" v-if="typeId == 3">
+							在灵睿，我们通过深度的<strong>数据分析</strong>和精确的<strong>用户洞察</strong>，帮助企业实现<strong>品牌的精准传播和长期增长。</strong>我们相信，成功的互联网营销不仅仅是提高曝光率，更是通过<strong>内容创作、活动策划和用户互动</strong>等手段，打造与受众的深层次连接，从而促进<strong>品牌的认知度和忠诚度。</strong>
+							我们帮助客户制定个性化的互联网营销策略，覆盖<strong>社交媒体、搜索引擎、视频内容</strong>等多个渠道，确保每个接触点都能精准传达品牌价值。在实际操作中，我们依托<strong>技术优势</strong>，结合行业<strong>最佳实践</strong>，为客户提供<strong>定制化的营销方案</strong>，推动<strong>线上线下的无缝连接。</strong>
+							灵睿的互联网营销不仅是单一的推广行为，更是一个以用户为中心的全方位战略，帮助企业在快速变化的市场中保持<strong>竞争力</strong>，实现<strong>持续增长。</strong>
+						</div>
+						<div class="text-wrapper_2 flex-col">
+							<nuxt-link to="/aboutUs/" class="text_13">
+								<span>查看全部</span>
+							</nuxt-link>
+						</div>
+					</div>
+					<div @click="videoShow = true"
+						class="group_5 flex-col justify-center align-center rightBox cursor-pointer">
+						<div class="section_1 flex-col">
+							<div class="image-wrapper_2 flex-col">
+								<img class="image_5" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/bf.png`" />
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -64,60 +76,169 @@
 			<div class="box_5 flex-col">
 				<span class="text_14 topBox">我们的业务</span>
 				<span class="text_15 topBox">
-					The&nbsp;Way&nbsp;of&nbsp;the&nbsp;Internet
+					Our&nbsp;BusinessWay
 				</span>
-				<div class="flex-col justify-center align-center business-container">
-					<!-- <div class="leftBox business-image">
-						<img class="image_6" referrerpolicy="no-referrer" src="public/img/t3.png" />
-					</div> -->
-					<div class="rightBox section_2 flex-col">
+				<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">
-								<div class="image-wrapper_3 flex-col align-center">
-									<img class="label_1" referrerpolicy="no-referrer" src="public/img/u1.png" />
-								</div>
+							<div class="box_6 flex-row align-center justify-between" style="width: 100%;">
 								<div class="text-group_2 flex-col justify-between">
-									<span class="text_17">
-										专业网站建设与企业官网设计定制服务
+									<span class="text_17" style="color: #0256FF;">
+										专业技术服务
 									</span>
-									<span class="text_16">
-										助力企业数字化转型升级，PC端/移动端/H5提供一站式网站开发、搭建
+									<span class="text_16" style="color: #0256FF;">
+										专业提供互联网技术支持，助力企业高效发展
 									</span>
 								</div>
+								<div class="image-wrapper_3s flex-col align-center">
+									<img class="label_1s" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/u1s.png`" />
+								</div>
+
 							</div>
 						</div>
-						<div class="group_7 flex-row">
-							<div class="image-wrapper_5 flex-col align-center">
-								<img class="label_1" referrerpolicy="no-referrer" src="public/img/r4.png" />
+						<div class="group_10s flex-col"></div>
+						<div class="group_7 flex-row justify-between">
+							<div class="image-wrapper_5 flex-col">
+								<img class="label_3" referrerpolicy="no-referrer"
+									:src="`${cdnUrl}/img/aiyingyong.png`" />
 							</div>
-							<div class="text-group_2 flex-col justify-between">
-								<span class="text_17">企业数字化自媒体托管专家</span>
-								<span class="text_16">
-									业团队代运营+AI智能内容生成+多平台精准投放，助您专注核心业务
+							<div class="text-group_3 flex-col justify-between">
+								<span class="text_18">AI应用与落地</span>
+								<span class="text_19">
+									从模型选型、数据处理、算法优化到应用集成与部署的全栈服务
 								</span>
 							</div>
 						</div>
 						<div class="group_10 flex-col"></div>
-						<div class="group_7 flex-row">
-							<div class="image-wrapper_5 flex-col align-center">
-								<img class="label_1" referrerpolicy="no-referrer" src="public/img/r3.png" />
+						<div class="group_7 flex-row justify-between">
+							<div class="image-wrapper_5 flex-col">
+								<img class="label_3" referrerpolicy="no-referrer"
+									:src="`${cdnUrl}/img/kaifapeizhi.png`" />
 							</div>
-							<div class="text-group_2 flex-col justify-between">
-								<span class="text_17">全流程抖音短视频制作服务</span>
-								<span class="text_16">
-									助您快速打造高播放量、高互动率的爆款短视频
+							<div class="text-group_3 flex-col justify-between">
+								<span class="text_18">定制软件开发</span>
+								<span class="text_19">
+									为您打造用户体验出色、性能稳定可靠的Web应用、移动App及小程序
 								</span>
 							</div>
 						</div>
-						<div class="group_12 flex-col"></div>
-						<div class="group_7 flex-row">
-							<div class="image-wrapper_5 flex-col align-center">
-								<img class="label_1" referrerpolicy="no-referrer" src="public/img/r2.png" />
+						<div class="group_10 flex-col"></div>
+						<div class="group_7 flex-row justify-between">
+							<div class="image-wrapper_5 flex-col">
+								<img class="label_3" referrerpolicy="no-referrer"
+									:src="`${cdnUrl}/img/a-yunweishuju1x.png`" />
 							</div>
-							<div class="text-group_2 flex-col justify-between">
-								<span class="text_17">全栈H5开发解决方案</span>
-								<span class="text_16">
-									基于HTML5/CSS3/JavaScript核心技术助力实现高转化率与沉浸式用户体验
+							<div class="text-group_3 flex-col justify-between">
+								<span class="text_18">IT运维服务</span>
+								<span class="text_19">
+									专业守护数据，防御威胁，护航企业数字安全
+								</span>
+							</div>
+						</div>
+						<div class="group_10 flex-col"></div>
+						<div class="group_7 flex-row justify-between">
+							<div class="image-wrapper_5 flex-col">
+								<img class="label_3" referrerpolicy="no-referrer"
+									:src="`${cdnUrl}/img/wangluoanquanshebei.png`" />
+							</div>
+							<div class="text-group_3 flex-col justify-between">
+								<span class="text_18">网络与信息安全</span>
+								<span class="text_19">
+									专业提供网络信息安全防护、实时监测与风险处置服务
+								</span>
+							</div>
+						</div>
+						<div class="group_10 flex-col"></div>
+						<div class="group_7 flex-row justify-between">
+							<div class="image-wrapper_5 flex-col">
+								<img class="label_3" referrerpolicy="no-referrer"
+									:src="`${cdnUrl}/img/yekuogongdianfangan.png`" />
+							</div>
+							<div class="text-group_3 flex-col justify-between">
+								<span class="text_18">智慧化解决方案</span>
+								<span class="text_19">
+									利用物联网、大数据、人工智能等前沿技术，提供智慧化解决方案
+								</span>
+							</div>
+						</div>
+					</div>
+
+					<div class="rightBox section_2sa flex-col">
+						<div class="group_6s flex-col">
+							<div class="box_6 flex-row align-center justify-between" style="width: 100%;">
+								<div class="text-group_2 flex-col justify-between">
+									<span class="text_17">
+										内容创作与运营
+									</span>
+									<span class="text_16" style="color: #FC7428;">
+										构建全域影响力，赋能品牌长效增长
+									</span>
+								</div>
+								<div class="image-wrapper_3s flex-col align-center">
+									<img class="label_1s" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/u1.png`" />
+								</div>
+
+							</div>
+						</div>
+						<div class="group_10s flex-col"></div>
+						<div class="group_7 flex-row justify-between">
+							<div class="image-wrapper_5 flex-col">
+								<img class="label_3" referrerpolicy="no-referrer"
+									:src="`${cdnUrl}/img/quanmeiti.png`" />
+							</div>
+							<div class="text-group_3_3 flex-col justify-between">
+								<span class="text_18">全媒体推广解决方案</span>
+								<span class="text_19">
+									覆盖各大主流平台定制【流量矩阵+内容策略+效果追踪】一体化方案
+								</span>
+							</div>
+						</div>
+						<div class="group_10 flex-col"></div>
+						<div class="group_7 flex-row justify-between">
+							<div class="image-wrapper_5 flex-col">
+								<img class="label_3" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/pingpai.png`" />
+							</div>
+							<div class="text-group_3_3 flex-col justify-between">
+								<span class="text_18">品牌账号代运营</span>
+								<span class="text_19">
+									全链路赋能品牌增长，内容+策略+数据 · 打造品效合一的社交资产
+								</span>
+							</div>
+						</div>
+						<div class="group_10 flex-col"></div>
+						<div class="group_7 flex-row justify-between">
+							<div class="image-wrapper_5 flex-col">
+								<img class="label_3" referrerpolicy="no-referrer"
+									:src="`${cdnUrl}/img/xianshang.png`" />
+							</div>
+							<div class="text-group_3_3 flex-col justify-between">
+								<span class="text_18">线上线下活动策划</span>
+								<span class="text_19">
+									专业守护数据，防御威胁，护航企业数字安全
+								</span>
+							</div>
+						</div>
+						<div class="group_10 flex-col"></div>
+						<div class="group_7 flex-row justify-between">
+							<div class="image-wrapper_5 flex-col">
+								<img class="label_3" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/news.png`" />
+							</div>
+							<div class="text-group_3_3 flex-col justify-between">
+								<span class="text_18">互联网新闻发布</span>
+								<span class="text_19">
+									整合全网权威渠道，依托海量优质媒体资源，定制新闻发布策略
+								</span>
+							</div>
+						</div>
+						<div class="group_10 flex-col"></div>
+						<div class="group_7 flex-row justify-between">
+							<div class="image-wrapper_5 flex-col">
+								<img class="label_3" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/daren.png`" />
+							</div>
+							<div class="text-group_3_3 flex-col justify-between">
+								<span class="text_18">IP孵化与达人合作</span>
+								<span class="text_19">
+									深度孵化+精准匹配，内容资产×流量裂变 · 打造IP与达人的共生生态
 								</span>
 							</div>
 						</div>
@@ -126,54 +247,29 @@
 				</div>
 			</div>
 		</div>
-		<div class="box_7 flex-col">
-			<span class="text_24">行业案例</span>
-			<div class="group_14 flex-row justify-between align-center" style="flex-wrap: wrap;">
-				<div class="industry-tabs justify-center align-center " style="gap: 20px;">
-					<div class="text_25 active-tab">
-						<span>医疗</span>
-						<div class="tab-indicator"></div>
+		<div style="background-color: #ffffff;">
+			<div class="box_7 flex-col">
+				<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-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`">
+							</div>
+						</swiper-slide>
+					</swiper>
+					<div class="flex-row justify-center align-center w-full" style="gap: 30px;height:40px;">
+						<div v-for="(_, index) in 3" :key="index" style="width: 20px; height: 5px;"
+							:style="{ backgroundColor: activeSlideIndex === index ? '#fc7428' : '#C1C1C1' }">
+						</div>
 					</div>
-					<div class="text_25">党政</div>
-					<div class="text_25">建筑</div>
-					<div class="text_25">物流</div>
-					<div class="text_25">教育</div>
-					<div class="text_25">文旅</div>
-					<div class="text_25">餐饮</div>
-				</div>
-				<div class="group_15" style="flex: 0 0 100%;"></div>
-			</div>
-
-			<div class="dswper">
-				<swiper ref="swiper_exp" :slidesPerView="1.2" loop :loopedSlides="3" :autoplay="false" centeredSlides
-					:modules="modules" :watchSlidesProgress="true" @swiper="onSwiperExp" effect="coverflow"
-					:breakpoints="swiperBreakpoints">
-					<swiper-slide>
-						<img src="public/img/home_al/op1.png" style="width: 100%;">
-					</swiper-slide>
-					<swiper-slide>
-						<img src="public/img/home_al/op1.png" style="width: 100%;">
-					</swiper-slide>
-					<swiper-slide>
-						<img src="public/img/home_al/op1.png" style="width: 100%;">
-					</swiper-slide>
-					<swiper-slide>
-						<img src="public/img/home_al/op1.png" style="width: 100%;">
-					</swiper-slide>
-					<swiper-slide>
-						<img src="public/img/home_al/op1.png" style="width: 100%;">
-					</swiper-slide>
-				</swiper>
-				<div class="dswper_left">
-					<img src="public/img/opl.png">
-				</div>
-				<div class="dswper_right">
-					<img src="public/img/opr.png">
-				</div>
-				<div class="flex-row justify-center align-center absolute w-full bottom-[-50px] pagination-dots">
-					<div class="dot active-dot"></div>
-					<div class="dot"></div>
-					<div class="dot"></div>
 				</div>
 			</div>
 		</div>
@@ -182,125 +278,77 @@
 				<span class="text_41">新闻动态</span>
 			</div>
 			<div class="text-wrapper_11">
-				<span class="text_42">Our&nbsp;Business&nbsp;</span>
+				<span class="text_42">news information</span>
 			</div>
-			<div class="news-container">
-				<img class="image_7 leftBox" referrerpolicy="no-referrer" src="public/img/news1.png" />
-				<div class="box_13 flex-col topBox">
-					<div class="text-group_6 flex-col justify-between">
-						<span class="text_43">
-							洛阳市郑州商会在洛阳灵睿网络技术有限...
-						</span>
-						<span class="paragraph_1">
-							为深入学习贯彻党的二十大精神，落实省、市委决策，
-							充分发挥民营企业的凝聚力、向心力和创造力，赴..
-						</span>
+			<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 }}
+						</div>
+						<div class="two-line-ellipsis"
+							style="color: #768597;font-size: 14px;font-weight: 400;margin-top: 20px;">
+							{{ item.subtitle }}
+						</div>
 					</div>
 					<div class="group_22 flex-row">
 						<div class="section_6 flex-col"></div>
-						<span class="text_44">行业动态</span>
-						<span class="text_45">2025-06-24</span>
-					</div>
-				</div>
-				<img class="image_8 rightBox" referrerpolicy="no-referrer" src="public/img/news2.png" />
-
-				<div class="group_23 flex-col leftBox">
-					<div class="text-group_7 flex-col justify-between">
-						<span class="text_46">
-							洛阳市郑州商会在洛阳灵睿网络技术有限...
-						</span>
-						<span class="paragraph_2">
-							为深入学习贯彻党的二十大精神，落实省、市委决策，
-							充分发挥民营企业的凝聚力、向心力和创造力，赴..
-						</span>
-					</div>
-					<div class="group_24 flex-row">
-						<div class="group_25 flex-col"></div>
-						<span class="text_47">行业动态</span>
-						<span class="text_48">2025-06-24</span>
-					</div>
-				</div>
-				<img class="image_9 bottomBox" referrerpolicy="no-referrer" src="public/img/news3.png" />
-				<div class="group_26 flex-col rightBox">
-					<div class="text-group_8 flex-col justify-between">
-						<span class="text_49">
-							洛阳市郑州商会在洛阳灵睿网络技术有限...
-						</span>
-						<span class="paragraph_3">
-							为深入学习贯彻党的二十大精神，落实省、市委决策，
-							充分发挥民营企业的凝聚力、向心力和创造力，赴..
-						</span>
-					</div>
-					<div class="box_15 flex-row">
-						<div class="group_27 flex-col"></div>
-						<span class="text_50">行业动态</span>
-						<span class="text_51">2025-06-24</span>
+						<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">
-					<span class="text_52">查看更多</span>
+					<nuxt-link to="/societyDutyNew/" class="text_52">
+						<span>查看更多</span>
+					</nuxt-link>
 				</div>
 			</div>
 		</div>
-		<div class="box_17 flex-col" style="overflow: hidden;">
-			<span class="text_53">合作伙伴</span>
-			<span class="text_54">Our&nbsp;Business&nbsp;</span>
-			<div class="partner-stats flex-col justify-center numberTopBox">
-				<div class="stat-item">
-					<div class="text-group_9 flex-col justify-between">
-						<span class="text_55">
-							<n-number-animation :duration="5000" ref="numberAnimationInstRef" :active="false" :from="0"
-								:to="5000"></n-number-animation>+
-						</span>
-						<span class="text_56">
-							19年技术沉淀，只为提供更在专业的服务，行业解决方案
-						</span>
-					</div>
-					<span class="text_57">服务客户</span>
-				</div>
-				<div class="section_7 flex-col"></div>
+		<div class="box_18 flex-col" style="overflow: hidden;">
+			<span class="text_53" style="color: #fff;">联系我们</span>
+			<span class="text_54" style="color: #fff;">cooperative&nbsp;partner&nbsp;</span>
 
-				<div class="stat-item">
-					<div class="text-group_10 flex-col justify-between">
-						<span class="text_58"><n-number-animation :duration="5000" ref="numberAnimationInstRefKH"
-								:active="false" :from="0" :to="19"></n-number-animation>+</span>
-						<span class="text_59">
-							19年技术沉淀，只为提供更在专业的服务，行业解决方案
-						</span>
+			<div class="numberTopBox" style="margin:0 auto;padding-bottom: 30px;">
+				<form class="contactForm mt-6 w-full" @submit.prevent="submitForm">
+					<div class="inputform">
+						<input v-model="formData.name" class="contactInput  mt-[15px] md:mt-[30px] w-full md:w-[700px]"
+							type="text" placeholder="输入您的姓名" />
+						<input v-model="formData.mobile"
+							class="contactInput mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[700px]" type="text"
+							placeholder="请输入您的联系电话" />
+						<input v-model="formData.emil"
+							class="contactInput mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[700px]" type="text"
+							placeholder="请输入您的邮箱" />
 					</div>
-					<span class="text_60">技术沉淀</span>
-				</div>
-				<div class="section_8 flex-col"></div>
-
-				<div class="stat-item">
-					<div class="text-group_11 flex-col justify-between">
-						<span class="text_61"><n-number-animation :duration="5000" ref="numberAnimationInstRefJS"
-								:active="false" :from="0" :to="100"></n-number-animation>+</span>
-						<span class="text_62">
-							19年技术沉淀，只为提供更在专业的服务，行业解决方案
-						</span>
+					<div class="relative w-full" style="padding:0px 20px;">
+						<textarea v-model="formData.message" id="myTextarea" placeholder="为了更好地帮助您，请尽量提供详细的信息" rows="5"
+							maxlength="100" class="w-full"></textarea>
+						<button type="submit" class="contactBut">
+							{{ '提交' }}
+						</button>
 					</div>
-					<span class="text_63">覆盖行业</span>
-				</div>
-				<div class="section_9 flex-col"></div>
-
-				<div class="stat-item">
-					<div class="text-group_12 flex-col justify-between">
-						<span class="text_64"><n-number-animation :duration="5000" ref="numberAnimationInstRefHY"
-								:active="false" :from="0" :to="30"></n-number-animation>+</span>
-						<span class="text_65">
-							19年技术沉淀，只为提供更在专业的服务，行业解决方案
-						</span>
-					</div>
-					<span class="text_66">技术团队</span>
-				</div>
+				</form>
 			</div>
-			<div class="group_29 partner-grid">
-				<div v-for="item in 18" class="">
-					<img class="image_11 topSj" referrerpolicy="no-referrer" src="public/img/q1.png" />
-				</div>
+		</div>
+		<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`"
+					:draggable="true"></video>
 			</div>
 		</div>
 	</div>
@@ -308,7 +356,7 @@
 
 <script lang="ts" setup>
 import { Swiper, SwiperSlide } from 'swiper/vue'
-import { nextTick, ref } from 'vue'
+import { nextTick, ref, onMounted, onUnmounted } from 'vue'
 import 'swiper/css'
 import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade } from "swiper/modules";
 import ScrollReveal from 'scrollreveal';
@@ -327,8 +375,32 @@ import * as swiperAni from '@/assets/animate/animate.js'
 import $api from '@/service/webRequest'
 import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
+const cdnUrl = useCdn()
+
 const { locale } = useI18n()
 
+const typeId = ref(1);
+
+interface NewsItem {
+	id: number;
+	title: string;
+	subtitle: string;
+	image: string;
+	cate: {
+		name: string;
+	};
+	release_time_text: string;
+}
+
+const newsList = ref<NewsItem[]>([])
+
+const openType = (type: number) => {
+	console.log(type);
+	typeId.value = type;
+}
+
+const videoShow = ref(false)
+
 let newsSwiper: any = null
 const onSwiperNews = (swiper: any) => {
 	newsSwiper = swiper
@@ -338,71 +410,80 @@ const swiperOptionsNews = {
 		delay: 5000,
 		disableOnInteraction: false,
 	},
-	direction: 'horizontal',
+	direction: 'horizontal' as const,
 	slidesPerView: 1,
 	speed: 500,
 	effect: 'fade',
 	loop: true,
-	modules: [EffectFade, Autoplay, Navigation],
-	navigation: {
-		nextEl: '#swipen_prev',
-		prevEl: '#swipen_next',
-	},
+	modules: [EffectFade, Autoplay],
 }
 
 let vesSwiper: any = null
 const onSwiperExp = (swiper: any) => {
 	vesSwiper = swiper
+	// 监听幻灯片变化事件
+	swiper.on('slideChange', () => {
+		// 更新当前活动幻灯片索引
+		activeSlideIndex.value = swiper.realIndex % 3
+	})
 }
 const swiper_exp = ref();
+const activeSlideIndex = ref(0);
+// 表单数据
+const formData = reactive({
+	name: '',
+	mobile: '',
+	emil: '',
+	message: ''
+})
+const router = useRouter()
+// 新闻数据
+const isMobile = ref(false)
 
-// 添加断点配置
-const swiperBreakpoints = {
-	320: {
-		slidesPerView: 1.2,
-		spaceBetween: 10
-	},
-	768: {
-		slidesPerView: 2,
-		spaceBetween: 20
-	},
-	1024: {
-		slidesPerView: 3,
-		spaceBetween: 30
-	}
+const checkMobile = () => {
+	isMobile.value = window.innerWidth <= 768
 }
 
-// 新闻数据
 onMounted(() => {
+	checkMobile()
+	window.addEventListener('resize', checkMobile)
+	
+	const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+	if (coMobile) {
+		router.push('/phone_index')
+	} else {
+		router.push('/')
+	}
+	getIndexNews();
 	nextTick(() => {
-		animate()
-		// 添加移动端检测
-		checkMobile()
+		// 初始化 ScrollReveal
+		setTimeout(() => {
+			animate()
+		}, 500)
 	})
 })
 
-// 检测移动设备并应用相应样式
-const checkMobile = () => {
-	const isMobile = window.innerWidth <= 768
-	document.body.classList.toggle('is-mobile', isMobile)
+onUnmounted(() => {
+	window.removeEventListener('resize', checkMobile)
+})
 
-	// 监听窗口大小变化
-	window.addEventListener('resize', () => {
-		const isMobile = window.innerWidth <= 768
-		document.body.classList.toggle('is-mobile', isMobile)
-	})
-}
-
-const numberAnimationInstRef = ref()
-const numberAnimationInstRefKH = ref()
-const numberAnimationInstRefJS = ref()
-const numberAnimationInstRefHY = ref()
 const animate = () => {
+
 	const sr = ScrollReveal();
+	sr.reveal('.leftBoxTop', {
+		origin: "left",
+		distance: "1000px",
+		duration: 1300,
+		delay: 100,
+		opacity: 0,
+		scale: 0.9,
+		reset: true,
+		mobile: true,
+	})
 	sr.reveal('.leftBox', {
 		origin: "left",
-		distance: "500px", // 减少移动设备上的距离
-		duration: 1000, // 减少动画时间
+		distance: "1000px",
+		duration: 1300,
 		delay: 100,
 		opacity: 0,
 		scale: 0.9,
@@ -411,8 +492,8 @@ const animate = () => {
 	})
 	sr.reveal('.rightBox', {
 		origin: "right",
-		distance: "500px", // 减少移动设备上的距离
-		duration: 1000, // 减少动画时间
+		distance: "1000px",
+		duration: 1300,
 		delay: 100,
 		opacity: 0,
 		scale: 0.9,
@@ -421,8 +502,8 @@ const animate = () => {
 	})
 	sr.reveal('.topBox', {
 		origin: "top",
-		distance: "500px", // 减少移动设备上的距离
-		duration: 1000, // 减少动画时间
+		distance: "1000px",
+		duration: 1300,
 		delay: 100,
 		opacity: 0,
 		scale: 0.9,
@@ -431,8 +512,8 @@ const animate = () => {
 	})
 	sr.reveal('.bottomBox', {
 		origin: "bottom",
-		distance: "500px", // 减少移动设备上的距离
-		duration: 1000, // 减少动画时间
+		distance: "1000px",
+		duration: 1300,
 		delay: 100,
 		opacity: 0,
 		scale: 0.9,
@@ -441,402 +522,354 @@ const animate = () => {
 	})
 	sr.reveal('.numberTopBox', {
 		origin: "top",
-		distance: "500px", // 减少移动设备上的距离
-		duration: 1000, // 减少动画时间
+		distance: "1000px",
+		duration: 1300,
 		delay: 100,
 		opacity: 0,
 		scale: 0.9,
 		reset: true,
 		mobile: true,
 		beforeReveal: function (el: any) {
-			numberAnimationInstRef.value.play()
-			numberAnimationInstRefKH.value.play()
-			numberAnimationInstRefJS.value.play()
-			numberAnimationInstRefHY.value.play()
+			// numberAnimationInstRef.value.play()
+			// numberAnimationInstRefKH.value.play()
+			// numberAnimationInstRefJS.value.play()
+			// numberAnimationInstRefHY.value.play()
 		},
 	})
-	sr.reveal('.topSj', {
+	sr.reveal('.group_29 ', {
 		origin: "bottom",
-		distance: "500px", // 减少移动设备上的距离
-		duration: 1000, // 减少动画时间
-		delay: 5,
+		distance: "500px",
 		opacity: 0,
 		scale: 0.9,
-		reset: true,
+		reset: false,
 		mobile: true,
-		useDelay: 'always',
-		interval: 50,
 	})
 }
+// 表单提交方法
+const submitForm = () => {
+	console.log(formData);
+
+	// 这里可以添加表单验证逻辑
+	if (!formData.name) {
+		alert('请输入您的姓名')
+		return
+	}
+
+	if (!formData.mobile) {
+		alert('请输入您的手机号码')
+		return
+	}
+
+	if (!formData.message) {
+		alert('请输入您的留言内容')
+		return
+	}
+	$api.post("/api/home.leave_word/add", formData)
+		.then((res: any) => {
+			console.log(res)
+			if (res.status == 200) {
+				alert('留言成功')
+			} else {
+				alert('失败')
+			}
+			formData.name = '';
+			formData.mobile = '';
+			formData.emil = '';
+			formData.message = '';
+		})
+		.catch((err) => {
+			console.dir(err)
+		})
+	// 重置表单
+	// formData.name = ''
+	// formData.mobile = ''
+	// formData.content = ''
+}
+const getIndexNews = () => {
+	$api.get("/api/home.news/index?page=1&limit=3")
+		.then((res: any) => {
+			console.log(res)
+			newsList.value = res.data.data.list
+		})
+		.catch((err) => {
+			console.dir(err)
+		})
+}
+
+const retTime = (dateTimeStr: string) => {
+	return dateTimeStr.split(' ')[0]; // 分割后取日期部分 
+}
+const openUrl = (id: number) => {
+	window.open(`/info/${id}`)
+}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import "@/assets/animate/animate.min.css";
 @import "@/assets/index.scss";
 
-/* 移动端通用样式 */
-body.is-mobile {
-	font-size: 14px;
-}
-
-/* 轮播图样式调整 */
-:deep(.dswper .swiper-slide-next) {
-	transform: translate3d(0px, 0px, -300px) rotateX(0deg) rotateY(0deg) scale(1) !important;
-}
-
-:deep(.dswper .swiper-slide-prev) {
-	transform: translate3d(0px, 0px, -300px) rotateX(0deg) rotateY(0deg) scale(1) !important;
-}
-
-.group_666 .swiper-slide img {
+.text_7, .text_8 {
+	text-align: center;
 	width: 100%;
-	height: auto;
-	transition: 1s linear 2s;
-	transform: scale(1.1, 1.1);
 }
 
-.group_666 .swiper-slide-active img,
-.swiper-slide-duplicate-active img {
-	transition: 6s linear;
-	transform: scale(1, 1);
+.text_9, .text_11 {
+	font-size: 16px !important;
+	text-align: center;
+	padding-right:0px
 }
 
-/* 移动端导航按钮 */
-.nav-arrow {
-	max-width: 30px;
-	height: auto;
-}
-
-.logo-img {
-	max-width: 120px;
-	height: auto;
-}
-
-/* 橙色背景块 */
-.orange-bg {
-	background-color: rgba(252, 116, 40, 1);
+.text_12 {
+	font-size: 14px !important;
+	line-height: 1.6;
+	padding: 0 15px;
 	width: 100%;
+}
+.text-wrapper_2{
+	margin: 0 auto;
+}
+.leftBox, .rightBox {
+	width: 100% !important;
+	margin: 10px 0 !important;
+}
+
+.content_box {
+	width: 100% !important;
+	height: 300px !important;
+	position: relative !important;
+	right: 0 !important;
+	bottom: 0 !important;
+}
+
+.hy_my_home {
+	width: 100% !important;
+	height: auto !important;
+}
+.section_1{
+	height: 323px;
+    width: 100%;
+}
+.image-wrapper_2{
+	border-radius: 10px;
+}
+.contactForm {
+	.inputform {
+		flex-direction: column !important;
+		width: 100% !important;
+		padding:20px 20px 10px 20px;
+	}
+
+	.contactInput {
+		width: 100% !important;
+		margin: 10px 0 !important;
+		height: 40px !important;
+		font-size: 14px !important;
+		border-radius: 6px!important;
+		background: #FFFFFF;
+		padding-left: 10px;
+	}
+
+	#myTextarea {
+		width: 100% !important;
+		height: 120px !important;
+		font-size: 14px !important;
+		border-radius: 6px!important;
+		padding: 10px;
+	}
+}
+
+.box_12, .box_14 {
+	flex-direction: column !important;
+}
+.box_3{
+	width: 100%;
+}
+.box_7,.box_13,.box_18{
 	height: 100%;
-	z-index: 1;
+}
+
+.image_7, .image_8, .image_9 {
+	width: 100% !important;
+}
+.text_24{
+	margin-top: 30px;
+}
+.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;
 	position: absolute;
-	right: -15px;
-	bottom: -15px;
+	bottom: 20px;
+	right: 30px;
+	height: 36px;
+	background-color: #222222;
+	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;
+	padding: 0 15px !important;
 }
 
-/* 业务部分 */
-.business-container {
-	flex-direction: column;
+.bottom_imgs {
+	width: 100% !important;
+	height: auto !important;
 }
 
-.business-image {
-	width: 100%;
-	margin-bottom: 20px;
-}
-
-/* 行业案例标签栏 */
-.industry-tabs {
-	display: flex;
-	overflow-x: auto;
-	width: 100%;
-	padding: 10px 0;
-	margin-bottom: 15px;
-	-webkit-overflow-scrolling: touch;
-}
-
-.text_25 {
-	white-space: nowrap;
-	margin-right: 15px;
-	position: relative;
-	width: auto;
-	margin:0px;
-}
-
-.active-tab {
-	color: #fc7428;
-}
-
-.tab-indicator {
-	width: 100%;
-	height: 1px;
-	background-color: #fc7428;
-	position: absolute;
-	bottom: -10px;
-}
-
-/* 更多案例按钮 */
-.more-cases {
-	width: 100%;
-	justify-content: flex-end;
-	margin: 10px 0;
-}
-
-.more-icon {
-	max-width: 20px;
-}
-
-/* 翻页按钮 */
-.dswper_left,
-.dswper_right {
-	width: 30px;
-	height: 30px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.dswper_left img,
-.dswper_right img {
-	max-width: 100%;
-}
-
-/* 分页指示点 */
-.pagination-dots {
-	bottom: -30px !important;
-}
-
-.dot {
-	width: 20px;
-	height: 4px;
-	background-color: #C1C1C1;
-	margin: 0 5px;
-}
-
-.active-dot {
-	background-color: #fc7428;
-}
-
-/* 新闻动态部分 */
-.news-container {
-	display: flex;
-	flex-direction: column;
-	gap: 20px;
-}
-
-/* 合作伙伴部分 */
-.partner-stats {
-	flex-direction: column;
-	align-items: center;
-}
-
-.stat-item {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	margin-bottom: 20px;
-	width: 100%;
-}
-
-.partner-grid {
-	display: grid;
-	grid-template-columns: repeat(3, 1fr);
-	gap: 10px;
-	width: 100%;
-}
-
-.nav-container {
-	position: absolute;
-	bottom: 30px;
+.pop {
+	position: fixed;
+	top: 0;
 	left: 0;
 	width: 100%;
-	z-index: 100;
+	height: 100%;
+	background: rgba(0, 0, 0, .8);
+	z-index: 200;
+	display: none;
 }
 
-/* 响应式断点 */
+.popCont {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.pop_video_close {
+	border-radius: 50%;
+	position: absolute;
+	top: -73px;
+	right: 0px;
+	width: 40px;
+	height: 40px;
+	background: var(--close) no-repeat 0 0;
+	background-size: 100% auto;
+	border: 6px solid #979797;
+}
+
+.pop_video_cont {
+	width: 600px;
+	border: 6px solid #979797;
+	background: #000;
+}
+
+.pop_video_cont video {
+	display: block;
+	width: 100%;
+	height: 100%;
+}
+.text_17, .text_16 {
+	font-size: 16px !important;
+}
+
+.text_18 {
+	font-size: 15px !important;
+}
+
+.text_19 {
+	font-size: 13px !important;
+}
+
+.group_7 {
+	padding: 10px !important;
+	margin: 5px 0 !important;
+}
+.section_2sa{
+	height: 700px;
+}
+.image-wrapper_5 {
+	width: 40px !important;
+	height: 40px !important;
+	margin-right: 10px !important;
+}
+
+.text-group_3, .text-group_3_3 {
+	flex: 1 !important;
+}
+
+.contactBut {
+	width: 100% !important;
+	height: 40px !important;
+	font-size: 16px !important;
+	margin-top: 10px !important;
+	position: relative !important;
+	right: 0 !important;
+	bottom: 0 !important;
+}
+
+// 移除所有hover效果
+.hy_my_home:hover,
+.news_my_home:hover .news_title_home {
+	transform: none !important;
+	color: inherit !important;
+}
+.text-group_1,.group_7,.group_6s{
+	width: 100%;
+}
+.text_19{
+	width: 100%;
+	line-height: 25px;
+}
+.box_12{
+	height: 100%;
+	margin-top: 0px;
+}
+.group_6 {
+	width: 100%;
+}
+.box_13{
+	width: 100%;
+	margin:0px;
+}
+.section_2s{
+	height: 710px;
+}
+.box_5{
+	height: auto;
+}
+.text-group_2{
+	width: 55%;
+	height: auto;
+}
+.text_17,.text_16{
+	width: auto;
+}
+.box_6{
+	padding:0px 15px 15px 15px;
+	height: 100%;
+}
+.image-wrapper_5{
+	width: 30%;
+}
+.text-group_3{
+	width: 70%;
+}
+.group_10s {
+	width: 100%;
+}
+.dswper{
+	margin-top: 10px;
+}
+.text-wrapper_10{
+	margin-top: 30px;
+}
 @media (max-width: 768px) {
-	.text-group_1 {
-		width: 100%;
-		text-align: center;
-	}
-
-	.text_7 {
-		width: 100%;
-		text-align: center;
-	}
-
-	.text_8 {
-		width: 100%;
-		text-align: center;
-	}
-
-	.text_9 {
-		text-align: center;
-		margin: 0px;
-		font-size: 18px;
-	}
-
-	.text_10 {
-		text-align: center;
-		margin: 0px;
-		font-size: 18px;
-	}
-
-	.text_11 {
-		text-align: center;
-		margin: 0px;
-		font-size: 18px;
-	}
-
-	.text_12 {
-		width: 100%;
-		text-align: center;
-		padding: 10px;
-		margin: 0px;
-		height: 100%;
-	}
-
-	.text_14 {
-		margin: 20px 0px 10px 0px;
-	}
-
-	.text-wrapper_1 {
-		margin-top: 30px;
-		width: 100%;
-	}
-
-	.text-wrapper_2 {
-		margin: 0px auto;
-	}
-
-	.section_1 {
-		width: 90%;
-		height: 330px;
-	}
-
-	.image_5 {
-		width: 50px;
-		height: 50px;
-	}
-
-	.orange-bg {
-		right: 0px;
-		bottom: 0px;
-	}
-
-	.group_5 {
-		width: 100%;
-	}
-
-	.section_2 {
-		width: 100%;
-	}
-
-	.box_6 {
-		width: 100%;
-	}
-
-	.group_6 {
-		width: 100%;
-	}
-
-	.group_7 {
-		width: 100%;
-	}
-
-	.text-group_2 {
-		width: 80%;
-		margin-left: 10px;
-	}
-
-	.image-wrapper_3 {
-		width: 35px;
-		height: 35px;
-	}
-	.text_32{
-		margin-left:0px;
-	}
-	.more-cases{
-		width: auto;
-	}
-	.label_1 {
-		width: 35px;
-		height: 35px;
-	}
-
 	.group_3 {
-		height: 100%;
-		padding-top: 20px;
-		background: url(public/img/bg-c.png) no-repeat;
-	}
-
-	.logo-img {
-		width: 15px;
 		height: auto;
+		padding: 20px;
+		background-size:auto;
 	}
-
-	.text_16 {
-		width: 100%;
-		font-size: 14px;
-		height: auto;
-		line-height: 20px;
-		margin-top: 5px;
-	}
-
-	.text_17 {
-		width: 100%;
-		font-size: 17px;
-	}
-
-	.box_3 {
-		width: 100%;
-		text-align: center;
-		margin-top: 10px;
-	}
-
-	.nav-arrow {
-		width: 15px;
-		height: auto;
-	}
-
-	.nav-container {
-		bottom: 10px;
-	}
-
-	.box_4 {
-		margin-left: 20px;
-	}
-
-	.business-container {
-		flex-direction: row;
-	}
-
-	.business-image {
-		width: 45%;
-		margin-bottom: 0;
-	}
-
-	.news-container {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		gap: 20px;
-	}
-
-	.partner-stats {
-		flex-direction: row;
-		flex-wrap: wrap;
-		justify-content: space-between;
-	}
-
-	.stat-item {
-		width: 48%;
-	}
-
-	.partner-grid {
-		grid-template-columns: repeat(4, 1fr);
-	}
-}
-
-@media (min-width: 1024px) {
-	.partner-stats {
-		flex-direction: row;
-		flex-wrap: nowrap;
-	}
-
-	.stat-item {
-		width: 23%;
-	}
-
-	.partner-grid {
-		grid-template-columns: repeat(6, 1fr);
-	}
+	
 }
 </style>
diff --git a/pages/phone_proServices_con.vue b/pages/phone_proServices_con.vue
new file mode 100644
index 0000000..f1de135
--- /dev/null
+++ b/pages/phone_proServices_con.vue
@@ -0,0 +1,710 @@
+<template>
+    <div style="width: 100%;overflow: hidden;">
+        <!-- Swiper 容器 -->
+        <div class="group_666" style="position: relative;height: 250px;">
+            <swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
+                <swiper-slide>
+                    <img :src="`${cdnUrl}/img/services1.png`" style="width: 100%;height: 250px;object-fit: cover;">
+                </swiper-slide>
+                <swiper-slide>
+                    <img :src="`${cdnUrl}/img/services1.png`" style="width: 100%;height: 250px;object-fit: cover;">
+                </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="`${cdnUrl}/img/left.png" alt="">
+					</div>
+					<div style="margin: 0px 20px;">
+						<img :src="`${cdnUrl}/img/morse.png" alt="">
+					</div>
+					<div>
+						<img :src="`${cdnUrl}/img/right.png" alt="">
+					</div>
+				</div>
+			</div> -->
+        </div>
+        <div class="group_2 flex-col"
+            style="background-color: #ffffff;overflow: unset;position: relative;height: 539px;">
+            <img :src="`${cdnUrl}/img/service_01s.png`" style="width: 100%;position: absolute;top: -26px;z-index: 10;">
+            <div class="service_top1">
+                <div style="cursor: pointer;width: 50%;text-align: center;">
+                    <div style="color: #FC7428;margin-bottom: 10px;">内容创作与运营</div>
+                    <div style="background-color: #FC7428;width:20%;height: 8px;margin: 0 auto;"></div>
+                </div>
+                <NuxtLink to="/proServices/" style="cursor: pointer;width: 50%;text-align: center;">
+                    <div>
+                        专业技术服务
+                    </div>
+                </NuxtLink>
+            </div>
+            <div class="service-01" style="text-align: center;padding-top: 70px;z-index: 30;">
+                <div style="font-size: 34px;font-weight: 700;">全媒体推广解决方案</div>
+                <div style="color: #768597;font-size: 16px;margin-top: 30px;">多维度矩阵覆盖，赋能品牌增长新势能</div>
+            </div>
+            <div style="z-index: 30;padding-top: 30px;">
+                <swiper ref="swiper_exp" :slidesPerView="1" loop :autoplay="false" :modules="modules"
+                    :watchSlidesProgress="true" @swiper="onSwiperNews">
+                    <swiper-slide>
+                        <div class="service_center_01s">
+                            <span class="service_center_01s_title">
+                                <img :src="`${cdnUrl}/img/content_ds.png`" alt="" style="margin-right: 10px;">
+                                覆盖各大主流平台
+                            </span>
+                            <span class="service_center_01s_text">定制【流量矩阵+内容策略+效果追踪】一体化方案</span>
+                            <div class="btn_lx">联系我们</div>
+                        </div>
+                    </swiper-slide>
+                    <swiper-slide>
+                        <div class="service_center_01s">
+                            <span class="service_center_01s_title">
+                                <img :src="`${cdnUrl}/img/content_xx.png`" alt="" style="margin-right: 10px;">
+                                平台搭建
+                            </span>
+                            <span class="service_center_01s_text">抖音、视频号、快手、B站、微信公众号、小红书等一站式布局</span>
+                            <div class="btn_lx">联系我们</div>
+                        </div>
+                    </swiper-slide>
+                    <swiper-slide>
+                        <div class="service_center_01s">
+                            <span class="service_center_01s_title">
+                                <img :src="`${cdnUrl}/img/content_yy.png`" alt="" style="margin-right: 10px;">
+                                精准运营
+                            </span>
+                            <span class="service_center_01s_text">行业大数据分析+账号定位+内容持续输出+流量裂变模型+账号运营变现</span>
+                            <div class="btn_lx">联系我们</div>
+                        </div>
+                    </swiper-slide>
+                </swiper>
+                <div style="margin-top: 30px;text-align: center;width: 100%;">
+                    <span class="more_bot">
+                        <span style="cursor: pointer;">了解更多解决方案</span>
+                        <img :src="`${cdnUrl}/img/moreright.png`" alt=""
+                            style="margin-left: 15px;width: 10px;cursor: pointer;">
+                    </span>
+                </div>
+            </div>
+        </div>
+        <div
+            style="padding: 40px 0px 0px 0px;z-index: 30;background: url(/img/content_con.png) no-repeat;background-size: 100%;">
+            <div style="text-align: center;padding-top: 30px;z-index: 30;">
+                <div style="font-size: 34px;font-weight: 700;">品牌账号代运营</div>
+                <div class="flex-row justify-center align-center" style="margin-top: 30px;">
+                    <div @click="openType(1)" :class="typeIndex == 1 ? 'video_wechat' : 'video_platform'">
+                        <img v-if="typeIndex == 1" :src="`${cdnUrl}/img/con_1.png`" alt=""
+                            style="margin-right: 10px;height: 24px;width: 24px;">
+                        <img v-else :src="`${cdnUrl}/img/mp4_video.png`" alt=""
+                            style="margin-right: 10px;height: 24px;width: 24px;">
+                        视频平台
+                    </div>
+                    <div @click="openType(2)" :class="typeIndex == 2 ? 'video_wechat' : 'video_platform'">
+                        <img v-if="typeIndex == 1" :src="`${cdnUrl}/img/con_2.png`"
+                            style="margin-right: 10px;height: 24px;width: 24px;">
+                        <img v-else :src="`${cdnUrl}/img/video_wechat.png`"
+                            style="margin-right: 10px;height: 24px;width: 24px;">
+                        微信账号
+                    </div>
+                </div>
+            </div>
+            <div
+                style="padding: 15px;flex-wrap: wrap;display: flex;flex-direction: row;align-items: center;width: 100%;gap: 30px;margin-top: 20px;">
+                <div v-if="typeIndex == 2" @mouseenter="bgSet(index)" class="service-yw" style="position: relative;flex: 0 1 calc(50% - 15px);"
+                    v-for="(item, index) in wchatList" :key="index">
+                    <img :src="`/img/media/${index + 1}.png`" style="width:216px;">
+                    <img v-if="!item.isShow" :src="`${cdnUrl}/img/media/buttom.png`"
+                        style="width: 216px;position: absolute;bottom: 0px;">
+                    <div v-if="!item.isShow" style="position: absolute;bottom: 0;color: #FFFFFF;padding: 15px;">
+                        <div style="font-size: 16px;font-weight: 600;">{{ item.name }}</div>
+                        <div style="font-size: 12px;font-weight: 400;margin-top: 5px;">{{ item.desc }}</div>
+                    </div>
+                    <div v-if="item.isShow">
+                        <div
+                            style="position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;background: rgba(252, 116, 40, 0.9);">
+                            <div
+                                style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
+                                <div style="width: 100%;text-align: center;padding: 15px;color: #ffffff;">
+                                    <div>
+                                        <img :src="`${cdnUrl}/img/media/a${index + 1}.png`"
+                                            style="width:70px;height: 70px;margin: 0 auto;">
+                                    </div>
+                                    <div style="font-size: 16px;font-weight: 600;margin-top: 10px;">{{ item.title }}
+                                    </div>
+                                    <div class="three-line-ellipsis" style="font-size: 12px;font-weight: 400;margin-top: 15px;">{{ item.content }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="typeIndex == 1" @mouseenter="bgSetVideo(index)" class="service-yw"
+                    style="position: relative;margin: 0 auto;" v-for="(item, index) in videoList" :key="index">
+                    <img :src="`/img/media/b${index + 1}.png`" style="width:160px;">
+                    <img v-if="!item.isShow" :src="`${cdnUrl}/img/media/buttom2.png`"
+                        style="width: 160px;position: absolute;bottom: 0px;">
+                    <div v-if="!item.isShow" style="position: absolute;bottom: 0;color: #FFFFFF;padding: 10px;">
+                        <div style="font-size: 15px;font-weight: 600;">{{ item.name }}</div>
+                        <div style="font-size: 12px;font-weight: 400;">{{ item.desc }}</div>
+                    </div>
+                    <div v-if="item.isShow">
+                        <div
+                            style="position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;background: rgba(252, 116, 40, 0.9);">
+                            <div
+                                style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
+                                <div style="width: 100%;text-align: center;padding:0px 5px;color: #ffffff;">
+                                    <div>
+                                        <img :src="`${cdnUrl}/img/media/v${index + 1}.png`"
+                                            style="width:60px;height: 60px;margin: 0 auto;">
+                                    </div>
+                                    <div style="font-size: 14px;font-weight: 600;margin-top: 5px;">{{ item.title }}</div>
+                                    <div class="three-line-ellipsis" style="font-size: 12px;font-weight: 400;margin-top: 5px;">{{ item.content }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div style="width: 100%;color: #FC7428;font-size: 18px;text-align: center;padding: 20px;">
+                全流程支持：脚本策划→专业拍摄→后期特效→精准投放→效果复盘</div>
+        </div>
+
+        <div class="flex justify-center align-center bottom-3s"
+            style="padding-top: 50px;z-index: 30;background-color: #f8f8f8;height: 559px;flex-wrap: wrap;">
+            <div>
+                <img :src="`${cdnUrl}/img/media/leftpeo.png`" alt="">
+            </div>
+            <div class="flex-col">
+                <div class="flex-col">
+                    <span class="mediat1">线上线下活动策划</span>
+                    <span class="mediat2">多维度矩阵覆盖，赋能品牌增长新势能</span>
+                </div>
+                <div style="width: 100%;height: 1px;background: #EEEEEE;margin-top: 30px;"></div>
+                <div>
+                    <div class="flex justify-center mediat3">
+                        <img :src="`${cdnUrl}/img/media/left1.png`" alt="">
+                        创意驱动，精准执行，从构思到落地，打通线上线下资源，一站式策划沉浸式活动，引爆品牌传播声量。
+                    </div>
+                    <div class="flex justify-center mediat3">
+                        <img :src="`${cdnUrl}/img/media/left2.png`" alt="">
+                        线上活动：聚焦行业热点打造爆款话题 （话题营销+直播连麦+裂变传播）助力品牌实现社交裂变传播，激活私域流量池。
+                    </div>
+                    <div class="flex justify-center mediat3">
+                        <img :src="`${cdnUrl}/img/media/left3.png`" alt="">
+                        线下活动：全案服务涵盖发布会、快闪店、行业峰会等多元形式，提供从创意策划、资源整合、现场执行到效果追踪的全流程专业落地解决方案。
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="flex justify-center align-center bottom-3s"
+            style="padding-top: 50px;z-index: 30;background-color: #ffffff;height: 559px;">
+
+            <div class="flex-col">
+                <div class="flex-col">
+                    <span class="mediat1">互联网新闻发布</span>
+                    <span class="mediat2">多维度矩阵覆盖，赋能品牌增长新势能</span>
+                </div>
+                <div style="width: 568px;height: 1px;background: #EEEEEE;margin-top: 40px;"></div>
+                <div>
+                    <div class="flex justify-center mediat3">
+                        <img :src="`${cdnUrl}/img/media/right1.png`" alt="">
+                        整合全网权威渠道，依托海量优质媒体资源，定制新闻发布策略，以专业视角与高效执行，让您的新闻迅速抢占舆论高地，第一时间触达目标受众。
+                    </div>
+                    <div class="flex justify-center mediat3">
+                        <img :src="`${cdnUrl}/img/media/right2.png`" alt="">
+                        权威媒体资源覆盖人民网、新浪、网易等、科技等垂直领域媒体，形成多渠道传播矩阵，深度触达目标受众，强化品牌公信力与行业影响力。
+                    </div>
+                    <div class="flex justify-center">
+                        <div class="group_28 flex-row justify-between numberTopBox"
+                            style="width: 390px;text-align: center;margin-left: 0;">
+                            <div class="text-group_9 flex-col justify-between" style="width: auto;height: 80px;">
+                                <span class="text_55" style="font-size: 32px;text-align: center;width: auto;">
+                                    <n-number-animation :duration="5000" ref="numberAnimationInstRef" :active="false"
+                                        :from="0" :to="1000"></n-number-animation>+</span>
+                                <span class="">权威媒体资源</span>
+                            </div>
+
+
+                            <div class="text-group_10 flex-col justify-between" style="width: auto;height: 80px;">
+                                <span class="text_58"
+                                    style="font-size: 32px;text-align: center;width: auto;"><n-number-animation
+                                        :duration="5000" ref="numberAnimationInstRefKH" :active="false" :from="0"
+                                        :to="800"></n-number-animation>万</span>
+                                <span class="">单日曝光超</span>
+                            </div>
+
+                            <div class="text-group_11 flex-col justify-between" style="width: auto;height: 80px;">
+                                <span class="text_61"
+                                    style="font-size: 32px;text-align: center;width: auto;"><n-number-animation
+                                        :duration="5000" ref="numberAnimationInstRefJS" :active="false" :from="0"
+                                        :to="50"></n-number-animation>+</span>
+                                <span class="">媒体矩阵报道</span>
+                            </div>
+
+
+
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div>
+                <img :src="`${cdnUrl}/img/media/rightpeo.png`" alt="">
+            </div>
+        </div>
+        <div class="flex" style="padding-top: 50px;z-index: 30;background-color: #ffffff;height: 592px;width: 100%;">
+            <div style="background: url(/img/media/botleft.png) 100% 100% no-repeat;width: 50%;">
+                <div style="display: flex;align-items: center;justify-content: right;height: 592px;color: #FFFFFF;">
+                    <div style="padding-right:200px;">
+                        <div style="font-size: 34px;font-weight: 700;">IP孵化与达人合作</div>
+                        <div style="font-size: 16px;font-weight: 400;margin-top: 30px;">多维度矩阵覆盖，赋能品牌增长新势能</div>
+                    </div>
+                </div>
+            </div>
+            <div style="background: url(/img/media/botright.png)100% 100% no-repeat;width: 50%;">
+                <div
+                    style="flex-direction:column;display: flex;justify-content: center;;height: 542px;color: #FFFFFF;padding-left: 70px;">
+                    <div>
+                        <div style="display: flex;align-items: center;">
+                            <img :src="`${cdnUrl}/img/media/left.png`" style="width: 32px;">
+                            <div style="font-size: 18px;font-weight: 700;padding-left: 25px;">从0到1打造现象级IP</div>
+                        </div>
+                        <div style="color: #FFFFFF;padding:10px 0px 0px 57px;">
+                            <div style="font-size: 14px;font-weight: 400;">联动本地头部达人精准引爆同城流量，合作ROI高达1:8</div>
+                        </div>
+                    </div>
+                    <div style="background-color: rgba(216, 216, 216, 0.5);width: 60%;height: 1px;margin: 50px 0px;">
+                    </div>
+                    <div>
+                        <div style="display: flex;align-items: center;">
+                            <img :src="`${cdnUrl}/img/media/left.png`" style="width: 32px;">
+                            <div style="font-size: 18px;font-weight: 700;padding-left: 25px;">IP打造</div>
+                        </div>
+                        <div style="color: #FFFFFF;padding:10px 0px 0px 57px;">
+                            <div style="font-size: 14px;font-weight: 400;">从人设定位到变现全链路服务</div>
+                        </div>
+                    </div>
+                    <div style="background-color: rgba(216, 216, 216, 0.5);width: 60%;height: 1px;margin: 50px 0px;">
+                    </div>
+                    <div>
+                        <div style="display: flex;align-items: center;">
+                            <img :src="`${cdnUrl}/img/media/left.png`" style="width: 32px;">
+                            <div style="font-size: 18px;font-weight: 700;padding-left: 25px;">达人资源</div>
+                        </div>
+                        <div style="color: #FFFFFF;padding:10px 0px 0px 57px;">
+                            <div style="font-size: 14px;font-weight: 400;">深度合作10万+粉丝本地达人500+，精准撬动同城流量</div>
+                        </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 cdnUrl = useCdn()
+const wchatList = ref([
+    { name: '微信底部菜单搭建', desc: '让底部菜单成为品牌的亮眼名片', title: '汝南县妇幼保健院', content: '将deep seek AI问诊功能搭建在医院底部菜单，提高医院就诊效率50%。', isShow: false },
+    { name: '内容采编', desc: '专业采编团队深挖品牌亮点', title: '河南科技大学第一附属医院', content: '《女博士养成记》原创文章平均每篇阅读量破5万+，整个系列阅读量破30万+。', isShow: false },
+    { name: '图文设计', desc: '专业设计师团队紧扣品牌定位', title: '商城县人民医院', content: '策划护士节系列参赛海报《商城白衣天使真“中”》，荣获*等奖', isShow: false },
+    { name: '活动策划', desc: '从创意构思到落地执行', title: '共青团洛阳市委', content: '[青春登场 只看洛阳]活动进行线上推广策划，共吸引1500+人次在线上小程序 投稿，共收集3000余副作品', isShow: false },
+    { name: '整案运营', desc: '助力品牌在微信生态强势崛起', title: '中集车辆搅拌车业务集团', content: '进行公众号整案运营，均篇播放量达3000+，后台咨询量月均50+', isShow: false }
+])
+const videoList = ref([
+    { name: '短视频', desc: '量身定制高端品牌视频矩阵账号', title: '洛阳市妇幼保健院', content: '洛阳市妇幼保健院账号，原创爆款率达65%，单条最高播放1700万，一月涨粉4万+', isShow: false },
+    { name: '系列视频', desc: '打造短剧化、沉浸式系列内容视频', title: '《姗姗的孕期日记》', content: '为洛阳市妇幼保健院打造原创系列短剧《姗姗的孕期日记》，一经上线便引爆本土目标人群，系列播放量达100W+为医院带来正向口碑', isShow: false },
+    { name: '宣传片/专题片', desc: '专业团队操刀，深入挖掘品牌精髓', title: '河南科技大学第一附属医院', content: '宣传片御用团队，策划制作医院向党的百年华诞献礼宣传片，在各大门户网站争相传播推广。', isShow: false },
+    { name: '工业视频', desc: '实现流量与订单双丰收', title: '河南某机械有限公司', content: '一个月播放量达70W+，在抖音成交第一单高达9万＋，阅读涨粉5000+。', isShow: false },
+])
+
+const bgSet = (index: number) => {
+    wchatList.value.forEach((item, index) => {
+        item.isShow = false;
+    })
+    wchatList.value[index].isShow = true;
+}
+const bgSetVideo = (index: number) => {
+    videoList.value.forEach((item, index) => {
+        item.isShow = false;
+    })
+    videoList.value[index].isShow = true;
+}
+
+const typeIndex = ref(1);
+const openType = (index: number) => {
+    typeIndex.value = index;
+}
+
+const numberAnimationInstRef = ref()
+const numberAnimationInstRefKH = ref()
+const numberAnimationInstRefJS = ref()
+
+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-01', {
+        origin: "right",
+        distance: "550px",
+        duration: 800,
+        delay: 100,
+        opacity: 0,
+        scale: 0.9,
+        reset: true,
+        useDelay: 130,
+        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('.numberTopBox', {
+        origin: "top",
+        distance: "200px",
+        duration: 1300,
+        delay: 100,
+        opacity: 0,
+        scale: 0.9,
+        reset: true,
+        mobile: true,
+        beforeReveal: function (el: any) {
+            numberAnimationInstRef.value.play()
+            numberAnimationInstRefKH.value.play()
+            numberAnimationInstRefJS.value.play()
+
+        },
+    })
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/assets/animate/animate.min.css";
+@import "@/assets/index.scss";
+
+: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: var(--service_023) no-repeat center center;
+    width: 100%;
+    height: 100%;
+    background-size: 100%;
+    height: 645px;
+    padding-top: 80px;
+    z-index: 30;
+}
+
+.service_033 {
+    background: var(--service_033) no-repeat center center;
+    width: 100%;
+    height: 100%;
+    background-size: 100%;
+    height: 800px;
+}
+
+.service_bottom {
+    background: var(--service_048) no-repeat center center;
+    background-size: 100%;
+    color: #ffffff !important;
+}
+
+.service_bottom_no {
+    background-color: #F8F8F8;
+
+}
+
+.service_051 {
+    background: var(--service_051) 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: 80px 0px 0px 250px;
+}
+
+.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;
+
+    &:hover {
+        transform: translateY(-5px);
+
+        &::before {
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
+}
+
+.service_top1 {
+    font-size: 18px;
+    padding-top: 10px;
+    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%;
+}
+
+
+.service_center_01s {
+    background: var(--content_top) no-repeat;
+    background-size: 100%;
+    width: 360px;
+    height: 196px;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    padding-left: 17px;
+    margin: 0 auto;
+
+    .service_center_01s_title {
+        margin-top: 30px;
+        width: 180px;
+        height: 18px;
+        font-family: Source Han Sans, Source Han Sans;
+        font-weight: 700;
+        font-size: 18px;
+        color: #FC7428;
+        line-height: 18px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+        display: flex;
+        align-items: center;
+    }
+
+    .service_center_01s_text {
+        margin-top: 20px;
+        width: 325px;
+        height: 20px;
+        font-family: Source Han Sans, Source Han Sans;
+        font-weight: 400;
+        font-size: 14px;
+        color: #768597;
+        line-height: 20px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+
+    .btn_lx {
+        margin-top: 40px;
+        width: 90px;
+        height: 32px;
+        background: linear-gradient(270deg, #FC7428 0%, #FFA06B 100%);
+        border-radius: 116px 116px 116px 116px;
+        font-family: Source Han Sans, Source Han Sans;
+        font-weight: 400;
+        font-size: 14px;
+        color: #FFFFFF;
+        line-height: 32px;
+        text-align: center;
+        cursor: pointer;
+    }
+}
+
+.more_bot {
+    height: 16px;
+    font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+    font-weight: 400;
+    font-size: 16px;
+    color: #FC772D;
+    line-height: 16px;
+    font-style: normal;
+    text-transform: none;
+    display: flex;
+    justify-content: center;
+}
+
+.video_platform {
+    width: 179px;
+    height: 48px;
+    background: var(--video) 100% no-repeat;
+    line-height: 44px;
+    font-family: Source Han Sans, Source Han Sans;
+    font-weight: 700;
+    font-size: 18px;
+    color: #FC7428;
+    font-style: normal;
+    text-transform: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.video_wechat {
+    width: 185px;
+    height: 52px;
+    background: var(--wechat1) 100% no-repeat;
+    line-height: 46px;
+    font-family: Source Han Sans, Source Han Sans;
+    font-weight: 700;
+    font-size: 18px;
+    color: #FFFFFF;
+    font-style: normal;
+    text-transform: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.bottom-3s {
+    width: 100%;
+
+    .mediat1 {
+        width: 100%;
+        height: 49px;
+        font-family: Source Han Sans, Source Han Sans;
+        font-weight: 700;
+        font-size: 30px;
+        color: #222222;
+        line-height: 49px;
+        text-align: center;
+        font-style: normal;
+        text-transform: none;
+
+    }
+
+    .mediat2 {
+        margin-top: 20px;
+        width: 100%;
+        height: 16px;
+        font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
+        font-weight: 400;
+        font-size: 16px;
+        color: #768597;
+        line-height: 16px;
+        text-align: center;
+        font-style: normal;
+        text-transform: none;
+    }
+
+    .mediat3 {
+        margin-top: 40px;
+        line-height: 24px;
+        width: 100%;
+        height: 40px;
+        font-family: Source Han Sans, Source Han Sans;
+        font-weight: 400;
+        font-size: 14px;
+        color: #3D3D3D;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+        align-items: center;
+
+        &:hover {
+            color: #FC7428;
+            cursor: pointer;
+        }
+
+        img {
+            margin-right: 30px;
+        }
+    }
+}
+</style>