feat: 增加移动端适配及页面优化

- 调整AppFooter.vue中移动端社交图标大小
- 在index.vue中添加移动端检测并跳转至手机版首页
- 优化AppHeader.vue的移动端菜单样式及交互
- 新增phone_proServices_con.vue页面，提供移动端服务内容展示
- 优化phone_index.vue页面布局及交互，增强移动端用户体验

components/AppFooter.vue

@@ -134,8 +134,8 @@
   }
 
   .mobile-social-icon {
-    width: 24px;
-    height: 24px;
+    width: 150px;
+    height: 150px;
   }
 }
 </style>

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>

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

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>