From e0442c3c6cd309ae2ee2b9ab0d5a53ea00647ff3 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: Thu, 22 May 2025 18:30:57 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96AppHeader.vue=E5=92=8C?=
 =?UTF-8?q?=E5=85=B3=E4=BA=8E=E6=88=91=E4=BB=AC=E9=A1=B5=E9=9D=A2=E7=9A=84?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=8F=8A=E5=93=8D=E5=BA=94=E5=BC=8F=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在AppHeader.vue中，调整了logo的显示逻辑，增加了对`phone_info-id`路由的支持，优化了移动端菜单的交互效果。
- 在aboutUs.vue中，增加了Swiper容器的最小高度，提升了页面的视觉效果。
- 在phone_index.vue中，修改了动画配置，确保更好的用户体验。
- 在phone_proServices.vue中，调整了专业技术服务的样式，提升了页面的整体美观性。
---
 components/AppHeader.vue        |  43 ++--
 pages/aboutUs.vue               |  17 +-
 pages/phone_aboutUs.vue         | 409 ++++++++++++++++++++++++++++++++
 pages/phone_concatUs.vue        | 372 +++++++++++++++++++++++++++++
 pages/phone_customerReviews.vue | 185 +++++++++++++++
 pages/phone_index.vue           |   2 +-
 pages/phone_info/[id].vue       |  77 ++++++
 pages/phone_proServices.vue     |   2 +-
 pages/phone_societyDuty.vue     | 271 +++++++++++++++++++++
 pages/phone_societyDutyNew.vue  | 380 +++++++++++++++++++++++++++++
 10 files changed, 1722 insertions(+), 36 deletions(-)
 create mode 100644 pages/phone_aboutUs.vue
 create mode 100644 pages/phone_concatUs.vue
 create mode 100644 pages/phone_customerReviews.vue
 create mode 100644 pages/phone_info/[id].vue
 create mode 100644 pages/phone_societyDuty.vue
 create mode 100644 pages/phone_societyDutyNew.vue

diff --git a/components/AppHeader.vue b/components/AppHeader.vue
index 2a58f1c..3d18170 100644
--- a/components/AppHeader.vue
+++ b/components/AppHeader.vue
@@ -2,13 +2,17 @@
   <div class="page flex-col">
     <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 || 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`" />
+      <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' && route.name != 'phone_info-id' && !isScrolled && !isMobileMenuOpen"
+          class="image_1" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/logo.png`" />
+        <img v-if="(route.name != 'info-id' && route.name != 'phone_info-id') && isScrolled"
+          class="image_1" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/logo1.png`" />
+          <img v-if="(route.name != 'info-id' && route.name != 'phone_info-id') && isMobileMenuOpen"
+          class="image_1" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/logo1.png`" />
+        <img v-if="route.name == 'info-id' || route.name == 'phone_info-id'" class="image_1"
+          referrerpolicy="no-referrer" :src="`${cdnUrl}/img/logo1.png`" />
         <!-- Desktop Navigation -->
         <div class="desktop-nav">
           <div data-title="企业首页"
@@ -49,7 +53,8 @@
         </div>
         <!-- Mobile Hamburger Button -->
         <div class="mobile-menu-btn" @click="toggleMobileMenu">
-          <div class="hamburger" :class="{ 'is-active': isMobileMenuOpen,'is-scrolled':isScrolled }">
+          <div class="hamburger"
+            :class="{ 'is-active': isMobileMenuOpen, 'is-scrolled': isScrolled || route.name == 'phone_info-id' }">
             <span></span>
             <span></span>
             <span></span>
@@ -60,10 +65,10 @@
       <div class="mobile-nav" v-if="isMobileMenuOpen">
         <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>
+        <span @click="openUrl('/phone_aboutUs/')" class="mobile-nav-item">灵睿&amp;我们</span>
+        <span @click="openUrl('/phone_customerReviews/')" class="mobile-nav-item">客户&amp;评价</span>
+        <span @click="openUrl('/phone_societyDutyNew/')" class="mobile-nav-item">社会&amp;责任</span>
+        <span @click="openUrl('/phone_concatUs/')" class="mobile-nav-item">加入我们</span>
       </div>
     </div>
     <transition name="fade-scale" v-if="!coMobile">
@@ -120,7 +125,7 @@ const openTop = () => {
   window.scrollTo(0, 0);
 }
 const openmosee = () => {
-  if(!coMobile){
+  if (!coMobile) {
     isScrolled.value = true;
   }
 }
@@ -214,9 +219,10 @@ console.log(route)
   }
 
   &.is-active {
-   
+
     span {
       background-color: #000000;
+
       &:nth-child(1) {
         transform: rotate(45deg);
         top: 10px;
@@ -301,12 +307,12 @@ console.log(route)
   bottom: 20%;
   right: 20px;
   z-index: 1000;
-  
+
   img {
     height: 60px;
     cursor: pointer;
     transition: transform 0.3s ease;
-    
+
     &:hover {
       transform: scale(1.1);
     }
@@ -329,8 +335,9 @@ console.log(route)
   opacity: 1;
   transform: scale(1);
 }
-.is-scrolled{
-  span{
+
+.is-scrolled {
+  span {
     background-color: #000000;
   }
 }
diff --git a/pages/aboutUs.vue b/pages/aboutUs.vue
index 06c4324..5e3fe25 100644
--- a/pages/aboutUs.vue
+++ b/pages/aboutUs.vue
@@ -1,7 +1,7 @@
 <template>
 	<div style="width: 100%;">
 		<!-- Swiper 容器 -->
-		<div class="group_666" style="position: relative;min-height: 350px;">
+		<div class="group_666" style="position: relative;min-height: 450px;">
 			<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
 				<swiper-slide>
 					<img :src="`${cdnUrl}/img/abus.png`" style="width: 100%;height: 100%;object-fit: cover;">
@@ -10,19 +10,6 @@
 					<img :src="`${cdnUrl}/img/abus.png`" style="width: 100%;height: 100%;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">
 			<div class="box_2 flex-col">
@@ -35,8 +22,6 @@
 						<div class="text-group_1 flex-col" style="width: 100%;">
 							<span class="text_7" style="width: 100%;position: relative;text-align: center;">
 								洛阳灵睿网络技术有限公司
-								<!-- <img :src="`${cdnUrl}/img/about/xing.png`" alt=""
-									style="position: absolute;top: -10px; right: 0;" /> -->
 							</span>
 							<span class="text_8" style="width: 100%;color: #3D3D3D;text-align: center;">
 								智慧信息化与数字内容服务领航者
diff --git a/pages/phone_aboutUs.vue b/pages/phone_aboutUs.vue
new file mode 100644
index 0000000..6848f23
--- /dev/null
+++ b/pages/phone_aboutUs.vue
@@ -0,0 +1,409 @@
+<template>
+	<div style="width: 100%;">
+		<!-- 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/abus.png`" style="width: 100%;height: 100%;object-fit: cover;">
+				</swiper-slide>
+				<swiper-slide>
+					<img :src="`${cdnUrl}/img/abus.png`" style="width: 100%;height: 100%;object-fit: cover;">
+				</swiper-slide>
+			</swiper>
+		</div>
+		<div class="group_2 flex-col">
+			<div class="box_2 flex-col">
+				<div class="group_3 flex-row justify-center" style="background: #ffffff;height: auto;">
+
+					<!-- <div class="group_5 flex-col justify-center align-center rightBox">
+						<div class="flex-col section_1sa"></div>
+					</div> -->
+					<div class="group_4 flex-col leftBox" style="padding: 40px 20px 0px 20px;width: 100%;">
+						<div class="text-group_1 flex-col" style="width: 100%;">
+							<span class="text_7"
+								style="width: 100%;position: relative;text-align: center;font-size: 26px;">
+								洛阳灵睿网络技术有限公司
+							</span>
+							<span class="text_8" style="width: 100%;color: #3D3D3D;text-align: center;">
+								智慧信息化与数字内容服务领航者
+							</span>
+						</div>
+
+						<span class="text_top_12" style="height: auto;font-size: 14px;margin-top: 20px;">
+							洛阳灵睿网络技术有限公司成立于2006年，深耕互联网行业，专注智慧信息化与数字内容服务领域19年。是集技术研发、创意策划、全媒体运营于一体的高新技术企业。公司以“技术赋能场景，内容驱动价值”为核心使命，专注于为大型公立医院、教育机构、企事业单位、品牌营销策略提供一站式智慧化解决方案与品牌数字化升级服务，助力客户实现效率提升、品牌增值与精准传播。
+						</span>
+						<span class="textss13">
+							专注互联网领域，发散新媒体创思，执着深耕口碑服务，扎实落地品牌内容，共创新信息化与内容服务业态。
+						</span>
+						<div class="group_28 flex-row  justify-between numberTopBox"
+							style="width: 100%;text-align: center;">
+							<div class="text-group_9 flex-col justify-between" style="width: auto;height: 80px;">
+								<div class="text_55" style="font-size: 28px;text-align: center;width: auto;">
+									<n-number-animation :duration="5000" ref="numberAnimationInstRef" :active="false"
+										:from="0" :to="1000"></n-number-animation>
+									<span style="font-size: 20px;">+</span>
+								</div>
+								<span class="">服务客户</span>
+							</div>
+
+
+							<div class="text-group_10 flex-col justify-between" style="width: auto;height: 80px;">
+								<div class="text_58" style="font-size: 28px;text-align: center;width: auto;">
+									<n-number-animation :duration="5000" ref="numberAnimationInstRefKH" :active="false"
+										:from="0" :to="19"></n-number-animation>
+									<span style="font-size: 20px;">年</span>
+								</div>
+								<span class="">技术沉淀</span>
+							</div>
+
+							<div class="text-group_11 flex-col justify-between" style="width: auto;height: 80px;">
+								<div class="text_61" style="font-size: 28px;text-align: center;width: auto;">
+									<n-number-animation :duration="5000" ref="numberAnimationInstRefJS" :active="false"
+										:from="0" :to="100"></n-number-animation>
+									<span style="font-size: 20px;">+</span>
+								</div>
+								<div class="">覆盖行业</div>
+							</div>
+
+
+							<div class="text-group_12 flex-col justify-between" style="width: auto;height: 80px;">
+								<div class="text_64" style="font-size: 28px;text-align: center;width: auto;">
+									<n-number-animation :duration="5000" ref="numberAnimationInstRefHY" :active="false"
+										:from="0" :to="30"></n-number-animation>
+									<span style="font-size: 20px;">+</span>
+								</div>
+								<span class="">技术团队</span>
+							</div>
+
+						</div>
+					</div>
+				</div>
+				<div class="flex rongyu1s bottomBox">
+					<div class="flex" style="width: 55%;align-items: center;">
+						<img style="margin-left: 20px;" :src="`${cdnUrl}/img/about/jiangbei.png`" alt="">
+						<span class="spanst">荣誉标签：</span>
+					</div>
+					<div class="flex" style="width: 85%;overflow: hidden;">
+						<n-marquee>
+							<div class="spans" style="margin-right: 50px;display: inline-block;">中国电子商务协会工业电商委员会河南分会单位
+							</div>
+							<div class="spans" style="display: inline-block;margin-right: 50px;">新华网、人民网、今日头条新闻联络中心
+							</div>
+							<div class="spans" style="display: inline-block;margin-right: 50px;">
+								灵睿与郑州、洛阳等地的网信以及网监系统保持长期合作获</div>
+						</n-marquee>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="group_2 flex-col">
+			<div class="box_2 flex-col">
+				<div class="group_3 flex-row justify-center align-center"
+					style="background: #F8F8F8;flex-wrap: wrap;padding:40px 20px;">
+					<div class="group_4 flex-col leftBox" style="width: 100%;">
+						<div class="text-group_1 flex-col justify-between" style="width: 100%;height: auto;">
+							<span class="text_7" style="position: relative;margin: 0 auto;width: auto;">
+								睿创团队介绍
+								<img :src="`${cdnUrl}/img/about/xing.png`" alt=""
+									style="position: absolute;top: -10px; right: -30px;" />
+							</span>
+						</div>
+
+						<span class="text_12" style="width: 100%;;height: auto;font-size: 14px;">
+							灵睿基因一直是一群年轻的青年人组成，我们致力打造专业的团队化运营模式，集合程序猿、设计狗、运营喵的创作者联盟。年轻不是资本，敢重新定义年轻才是，在互联网领域，我们致力做一支专业，积极，上进的年轻团队；80后主导，90后主力，00后紧随。以“为客户创造价值 用互联网思维打造品牌”为使命。以“正直诚信、实干勇敢、协作共赢、创业精神”为价值观。努力发展，破茧成蝶。
+						</span>
+					</div>
+					<div class="group_5 flex-col justify-center align-center rightBox" style="width: 100%;">
+						<div class="flex-col section_1sb"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="box_7 flex-col">
+			<span class="text_24 topBox">著作权和荣誉证书</span>
+			<span class="text_15 topBox">Company&nbsp;environment</span>
+			<div class="dswper" style="margin-top: 30px;width: 100%;">
+				<swiper ref="swiper_exp" :slidesPerView="2" loop :loopedSlides="2" :autoplay="{ delay: 2000 }"
+					 :modules="modules" :watchSlidesProgress="true" @swiper="onSwiperExp">
+					<swiper-slide v-for="(item, index) in 21" :key="index" style="padding: 0 10px;">
+						<img :src="`/img/about/${item}.jpg`" style="width: 100%;">
+					</swiper-slide>
+				</swiper>
+				<div class="rongyu_cla flex-row justify-center align-center absolute w-full" style="gap: 30px;">
+					<div v-for="(_, index) in 3" :key="index" style="width: 25px; height: 5px;"
+						:style="{ backgroundColor: activeSlideIndex === index ? '#fc7428' : '#C1C1C1' }">
+					</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, NMarquee } 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()
+
+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',
+	},
+}
+const activeSlideIndex = ref(0);
+let vesSwiper: any = null
+const onSwiperExp = (swiper: any) => {
+	vesSwiper = swiper
+	// 监听幻灯片变化事件
+	swiper.on('slideChange', () => {
+		// 更新当前活动幻灯片索引
+		activeSlideIndex.value = swiper.realIndex % 3
+	})
+}
+const swiper_exp = ref();
+
+// 新闻数据
+onMounted(() => {
+	animate()
+})
+const numberAnimationInstRef = ref()
+const numberAnimationInstRefKH = ref()
+const numberAnimationInstRefJS = ref()
+const numberAnimationInstRefHY = ref()
+const animate = () => {
+
+	const sr = ScrollReveal();
+	sr.reveal('.leftBox', {
+		origin: "left",
+		distance: "1000px",
+		duration: 1300,
+		delay: 0,
+		opacity: 0,
+		scale: 0.9,
+		reset: true,
+		mobile: true,
+	})
+	sr.reveal('.rightBox', {
+		origin: "right",
+		distance: "1000px",
+		duration: 1300,
+		delay: 100,
+		opacity: 0,
+		scale: 0.9,
+		reset: true,
+		mobile: true,
+	})
+	sr.reveal('.topBox', {
+		origin: "top",
+		distance: "1000px",
+		duration: 1300,
+		delay: 100,
+		opacity: 0,
+		scale: 0.9,
+		reset: true,
+		mobile: true,
+	})
+	sr.reveal('.bottomBox', {
+		origin: "bottom",
+		distance: "1000px",
+		duration: 1300,
+		delay: 100,
+		opacity: 0,
+		scale: 0.9,
+		reset: true,
+		mobile: true,
+	})
+	sr.reveal('.numberTopBox', {
+		origin: "top",
+		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()
+		},
+	})
+	sr.reveal('.topSj', {
+		origin: "bottom",
+		distance: "1000px",
+		duration: 1300,
+		delay: 5,
+		opacity: 0,
+		scale: 0.9,
+		reset: true,
+		mobile: true,
+		useDelay: 'always',
+		interval: 50,
+	})
+}
+</script>
+
+<style lang="scss" scoped>
+@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;
+}
+
+.group_666 .swiper-slide img {
+	width: 100%;
+	height: 500px;
+	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);
+}
+
+.bottom_imgs {
+	background: var(--qall) no-repeat;
+	width: 1230px;
+	height: 272px;
+	background-size: 100% 100%;
+	margin: 0 auto;
+}
+
+
+
+.section_1sa {
+	height: 410px;
+	background: var(--t1a) 100% no-repeat;
+	width: 576px;
+	z-index: 10;
+}
+
+.section_1sb {
+	height: 256px;
+	background: var(--t1b) no-repeat;
+	background-size: 100%;
+	width: 100%;
+	z-index: 10;
+}
+
+
+.textss13 {
+	width: 100%;
+	font-weight: 600;
+	font-size: 14px;
+	color: #768597;
+	line-height: 22px;
+	font-family: Microsoft YaHei UI-Regular;
+	text-align: center;
+}
+
+.rongyu1s {
+	width: 90%;
+	height: 68px;
+	background: #F8F8F8;
+	border-radius: 0px 0px 0px 0px;
+	align-items: center;
+	margin: 0 auto;
+	margin-bottom: 70px;
+
+	.spanst {
+		height: 32px;
+		font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+		font-weight: bold;
+		font-size: 14px;
+		color: #3D3D3D;
+		line-height: 32px;
+		text-align: left;
+		font-style: normal;
+		text-transform: none;
+		margin-left: 10px;
+	}
+
+	.spans {
+		// width: px;
+		height: 21px;
+		font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+		font-weight: 400;
+		font-size: 14px;
+		color: #3D3D3D;
+		line-height: 21px;
+		text-align: left;
+		font-style: normal;
+		text-transform: none;
+	}
+}
+
+.n-marquee {
+	width: 100%;
+}
+
+.box_7 {
+	background: var(--ruanzhu) 100% no-repeat;
+	height: 512px;
+}
+
+.rongyu_cla {
+	margin-top: 50px;
+}
+
+.text_top_12 {
+	color: rgb(118, 133, 151);
+	font-size: 16px;
+	font-family: Microsoft YaHei UI-Regular;
+	font-weight: 400;
+	text-align: left;
+	line-height: 24px;
+	width: 100%;
+	text-align: center;
+	margin: 0 auto;
+}
+
+@media (max-width: 786px) {
+	.group_3 {
+		gap: 0px;
+		height: 645px;
+	}
+}
+</style>
diff --git a/pages/phone_concatUs.vue b/pages/phone_concatUs.vue
new file mode 100644
index 0000000..df2aefc
--- /dev/null
+++ b/pages/phone_concatUs.vue
@@ -0,0 +1,372 @@
+<template>
+    <div style="width: 100%;">
+        <!-- Swiper 容器 -->
+        <div class="group_666" style="position: relative;height: 200px;">
+            <swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
+                <swiper-slide>
+                    <img :src="`${cdnUrl}/img/joinus.png`" style="width: 100%;height: 100%;object-fit: cover;">
+                </swiper-slide>
+                <swiper-slide>
+                    <img :src="`${cdnUrl}/img/joinus.png`" style="width: 100%;height: 100%;object-fit: cover;">
+                </swiper-slide>
+            </swiper>
+        </div>
+        <div class="group_2 flex-col" >
+            <div class="box_2 flex-col">
+                <div class="group_3 flex-wrap" style="padding: 20px;">
+                    <div class="group_5 flex-col justify-center align-center rightBox" style="width: 100%;">
+                        <div class="section_1s flex-col"></div>
+                    </div>
+                    <div class="group_4 flex-col leftBox">
+                        <div class="flex-col justify-between text-center">
+                            <span style="font-size: 24px;font-weight: 600;">洛阳灵睿网络技术有限公司</span>
+                        </div>
+                        <span  style="color: #768597;font-size: 15px;margin-top: 10px;">
+                            从一支年轻的创业团队，慢慢发展成为业务遍及全国的信息化，内容支持型互联网公司，我们仍旧保持着始终创业的心态，每一天努力向前，如果你也愿意加入我们，请联系我们的HR，期待与你的会面。
+                        </span>
+                        <div  style="margin-top: 30px;">
+                            <div class="text_13s">
+                                <img :src="`${cdnUrl}/img/telphone.png`" alt="" class="imgs">
+                                联系电话：17603796680
+                            </div>
+                            <div class="text_13s" style="margin-top: 15px;">
+                                <img :src="`${cdnUrl}/img/wechat.png`" alt="" class="imgs">
+                                微信：17603796680
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+
+        <div class="box_17s flex-col" style="overflow: hidden;">
+            <span class="text_53" style="margin-top: 30px">热门岗位</span>
+            <span class="text_54" style="margin-top: 20px;">Company&nbsp;environment</span>
+            <div class="hbform">
+                <div class="flex boxgs">
+                    <div v-for="(item, index) in typeList" @click="openType(item)"
+                        :class="typeId == item.id ? 'title active' : 'title'">{{ item.name
+                        }}</div>
+                </div>
+                <div class="flex justify-center align-center flex-wrap" style="padding: 20px;width: 100%;">
+                    <div v-for="item in list" class="flex-col box_18s" style="margin-bottom: 20px;">
+                        <div class="titless">
+                            <div class="a1s">{{ item.name }}</div>
+                            <div class="a2s">任职要求请联系HR</div>
+                        </div>
+                        <div class="line"></div>
+                        <div class="bottomss">
+                            <div>灵睿网络</div>
+                            <div>{{ item.release_time_text }}</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()
+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()
+    getType();
+})
+const openType = (item: any) => {
+    typeId.value = item.id;
+    getList();
+}
+const typeId = ref(0)
+const typeList = ref([])
+const getType = () => {
+    $api.post("/api/home.recruitment_information/cate", { page: 1, size: 100 })
+        .then((res: any) => {
+            console.log(res);
+            typeId.value = res.data.data.list[0].id;
+            typeList.value = res.data.data.list;
+            getList();
+        })
+        .catch((err) => {
+            console.dir(err)
+        })
+}
+const list = ref([])
+const getList = () => {
+    $api.get("/api/home.recruitment_information/index?cate_id=" + typeId.value)
+        .then((res: any) => {
+            console.log(res)
+            list.value = res.data.data.list
+        })
+        .catch((err) => {
+            console.dir(err)
+        })
+}
+const numberAnimationInstRef = ref()
+const numberAnimationInstRefKH = ref()
+const numberAnimationInstRefJS = ref()
+const numberAnimationInstRefHY = ref()
+const animate = () => {
+
+    const sr = ScrollReveal();
+    sr.reveal('.leftBox', {
+        origin: "left",
+        distance: "1000px",
+        duration: 1300,
+        delay: 100,
+        opacity: 0,
+        scale: 0.9,
+        reset: true,
+        mobile: true,
+    })
+    sr.reveal('.rightBox', {
+        origin: "right",
+        distance: "1000px",
+        duration: 1300,
+        delay: 100,
+        opacity: 0,
+        scale: 0.9,
+        reset: true,
+        mobile: true,
+    })
+    sr.reveal('.topBox', {
+        origin: "top",
+        distance: "1000px",
+        duration: 1300,
+        delay: 100,
+        opacity: 0,
+        scale: 0.9,
+        reset: true,
+        mobile: true,
+    })
+    sr.reveal('.bottomBox', {
+        origin: "bottom",
+        distance: "1000px",
+        duration: 1300,
+        delay: 100,
+        opacity: 0,
+        scale: 0.9,
+        reset: true,
+        mobile: true,
+    })
+    sr.reveal('.numberTopBox', {
+        origin: "top",
+        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()
+        },
+    })
+    sr.reveal('.topSj', {
+        origin: "bottom",
+        distance: "1000px",
+        duration: 1300,
+        delay: 5,
+        opacity: 0,
+        scale: 0.9,
+        reset: true,
+        mobile: true,
+        useDelay: 'always',
+        interval: 50,
+    })
+}
+</script>
+
+<style lang="scss" scoped>
+@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;
+}
+
+.group_666 .swiper-slide img {
+    width: 100%;
+    height: 500px;
+    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);
+}
+
+.section_1s {
+    height: 260px;
+    background: var(--allpeople) no-repeat;
+    background-size: 100%;
+    width: 100%;
+    z-index: 10;
+}
+
+.text_13s {
+    width: 100%;
+    height: 48px;
+    line-height: 44px;
+    border-radius: 4px 4px 4px 4px;
+    border: 1px solid #768597;
+    color: #768597;
+    font-size: 16px;
+    font-family: Microsoft YaHei UI-Regular;
+    font-weight: 400;
+    text-align: center;
+    white-space: nowrap;
+    margin-right: 22px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    .imgs {
+        width: 24px;
+        height: 24px;
+        margin-right: 10px;
+    }
+}
+
+.box_17s {
+    width: 100%;
+    background: #F8F8F8;
+    justify-content: flex-center;
+    padding-bottom: 40px;
+}
+
+.hbform {
+    width: 100%;
+}
+
+.boxgs {
+    width: 100%;
+    margin-top: 30px;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    padding: 0px 20px;
+    .title {
+        width: 100%;
+        padding:10px;
+        background: #FFFFFF;
+        border-radius: 78px 78px 78px 78px;
+        text-align: center;
+        font-weight: 400;
+        font-size: 14px;
+        color: #222222;
+        cursor: pointer;
+
+        &.active {
+            background: linear-gradient(360deg, #FC7428 0%, #FF9357 100%);
+            color: #FFFFFF;
+        }
+    }
+}
+
+.box_18s {
+    width: 100%;
+    height: 149px;
+    background: var(--lianxiyp) 100% no-repeat;
+    z-index: 10;
+    justify-content: center;
+    .line {
+        width: 347px;
+        height: 1px;
+        background: #D8D8D8;
+        margin: 0 auto;
+    }
+
+    .titless {
+        width: 100%;
+        padding-top: 20px;
+        padding-left: 20px;
+
+        .a1s {
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 700;
+            font-size: 18px;
+            color: #3D3D3D;
+        }
+
+        .a2s {
+            margin: 15px 0;
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 12px;
+            color: #768597;
+
+        }
+    }
+
+    .bottomss {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px;
+        color: #768597;
+    }
+}
+
+@media (max-width: 768px) {
+    .group_3 {
+        gap: 0px;
+        height: 100%;
+    }
+}
+</style>
diff --git a/pages/phone_customerReviews.vue b/pages/phone_customerReviews.vue
new file mode 100644
index 0000000..04b7e82
--- /dev/null
+++ b/pages/phone_customerReviews.vue
@@ -0,0 +1,185 @@
+<template>
+	<div style="width: 100%;">
+		<!-- 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/customer/topnav.png`" style="width: 100%;height: 100%;object-fit: cover;">
+				</swiper-slide>
+				<swiper-slide>
+					<img :src="`${cdnUrl}/img/customer/topnav.png`" style="width: 100%;height: 100%;object-fit: cover;">
+				</swiper-slide>
+			</swiper>
+		</div>
+		<div class="box_11 flex-col bottom_imgss">
+			<div class="text-wrapper_10" style="margin-top: 30px;">
+				<span class="text_41">公司荣誉</span>
+			</div>
+			<div class="text-wrapper_11" style="margin-top: 20px;">
+				<span class="text_42">Company&nbsp;Honors&nbsp;</span>
+			</div>
+
+			<div class="boxgs flex-row flex-wrap">
+				<div class="box_con flex-col leftBox" v-for="(item, index) in lists" :key="index">
+					<div class="align-center" style="justify-content: center;padding: 10px;">
+						<img :src="`${cdnUrl}/img/customer/${index}.png`" alt="">
+					</div>
+					<div class="flex-col"
+						style="justify-content: center;border-top: 1px solid #EEEEEE;padding-bottom: 10px;">
+						<span class="text_tt">
+							{{ item.title }}
+						</span>
+						<span class="text_cc">
+							{{ item.value }}
+						</span>
+					</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()
+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',
+	},
+}
+
+const lists = ref([
+	{ title: '扶贫助困情系家乡', value: '-洛阳市郑州商会-' },
+	{ title: '互联网技术服务合作单位', value: '-洛阳百艺建筑装饰-' },
+	{ title: '平安洛阳微信平台技术服务单位', value: '-洛阳市公安局-' },
+	{ title: '健康洛阳微信平台技术合作单位', value: '-河南科技大学第一附属医院-' },
+	{ title: '爱心捐助奉献奖', value: '-洛阳市郑州商会-' },
+	{ title: '精彩洛阳微信平台技术服务单位', value: '-洛阳市宣传部网信办-' },
+	{ title: '青年说短视频征集大赛', value: '-洛阳市公安局-' },
+	{ title: '青年说短视频征集大赛', value: '-河南科技大学第一附属医院-' }
+]);
+// 新闻数据
+onMounted(() => {
+	nextTick(() => {
+		animate()
+	})
+})
+const animate = () => {
+
+	const sr = ScrollReveal();
+	sr.reveal('.leftBox', {
+		origin: "left",
+		distance: "1000px",
+		duration: 500,
+		delay: 100,
+		opacity: 0,
+		scale: 0.9,
+		reset: true,
+		mobile: true,
+	})
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/animate/animate.min.css";
+@import "@/assets/index.scss";
+
+
+
+.group_666 .swiper-slide img {
+	width: 100%;
+	height: 500px;
+	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);
+}
+
+.bottom_imgss {
+	background: var(--bg-s);
+    background-repeat:no-repeat;
+	height: auto;
+	background-size: 100% 100%;
+}
+
+.boxgs {
+	width: 100%;
+	margin: 0 auto;
+    justify-content: center;
+	.box_con {
+		margin:20px 20px 0px 20px;
+		background-color: #ffffff;
+		width: 100%;
+		height: auto;
+		font-family: Microsoft YaHei UI-Regular;
+		border-radius: 4px;
+
+		.text_tt {
+			display: inline-block;
+			width: 100%;
+			margin-top: 15px;
+			overflow-wrap: break-word;
+			color: #3D3D3D;
+			font-size: 18px;
+			font-weight: 500;
+			text-align: center;
+			white-space: nowrap;
+		}
+
+		.text_cc {
+			display: inline-block;
+			width: 100%;
+			height: 30px;
+			overflow-wrap: break-word;
+			color: #999999;
+			font-size: 14px;
+			font-weight: 400;
+			text-align: center;
+			line-height: 30px;
+		}
+	}
+    img{
+        width: 100%;
+    }
+}
+</style>
diff --git a/pages/phone_index.vue b/pages/phone_index.vue
index 6d9ad8c..d7ff7cd 100644
--- a/pages/phone_index.vue
+++ b/pages/phone_index.vue
@@ -527,7 +527,7 @@ const animate = () => {
 		delay: 100,
 		opacity: 0,
 		scale: 0.9,
-		reset: true,
+		reset: false,
 		mobile: true,
 		beforeReveal: function (el: any) {
 			// numberAnimationInstRef.value.play()
diff --git a/pages/phone_info/[id].vue b/pages/phone_info/[id].vue
new file mode 100644
index 0000000..e1cd664
--- /dev/null
+++ b/pages/phone_info/[id].vue
@@ -0,0 +1,77 @@
+<template>
+	<div style="width: 100%;">
+		<div style="height:90px;background-color: #ffffff;"></div>
+		<div style="background-color: #F8F8F8;">
+			<div class="content_class" style="">
+				<div style="font-size: 20px;font-weight: 700;color: #323232;">{{ info.title }}</div>
+				<div style="font-size: 14px;font-weight: 400;margin-top: 30px;color: #768597;">
+					<div>发布人：{{ info.author }}</div>
+					<div>发布时间：{{ info.release_time_text }} </div>
+				</div>
+				<div style="width: 100%;margin:20px 0px 0px 0px;height: 1px;background-color: #EEEEEE;"></div>
+				<div class="info_content" v-html="info.content"></div>
+				<div style="width: 100%;margin: 20px auto;height: 1px;background-color: #EEEEEE;"></div>
+				<div style="display: flex;justify-content: space-between;align-items: center;">
+					<div style="width: 100%;">
+						<div @click="openNews(1)" style="cursor: pointer;">上一篇：{{ info.prev != null ? info.prev.title : '暂无' }}
+						</div>
+						<div @click="openNews(2)" style="margin-top: 20px;cursor: pointer;">
+							下一篇：{{ info.next != null ? info.next.title : '暂无' }}</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, ref } from 'vue'
+const route = useRoute()
+import $api from '@/service/webRequest'
+import { Item } from 'ant-design-vue/es/menu'
+const id = ref(route.params.id)
+const openNews = (type) => {
+	if (type == 1 && info.value.prev != null) {
+		window.open('/phone_info/' + info.value.prev.id, '_self');
+	}
+	if (type == 2 && info.value.next != null) {
+		window.open('/phone_info/' + info.value.next.id, '_self');
+	}
+}
+// 新闻数据
+onMounted(() => {
+	getInfo();
+})
+const info = ref({});
+const getInfo = async () => {
+	const res = await $api.get('/api/home.news/detail?id=' + id.value)
+	console.log(res);
+	info.value = res.data.data;
+}
+const delWeb = () => {
+	window.close();
+}
+</script>
+
+<style lang="scss">
+@import "@/assets/animate/animate.min.css";
+@import "@/assets/index.scss";
+
+.info_content img {
+	width: 100% !important;
+	margin: 0 auto;
+	margin-bottom: 10px;
+}
+
+.info_content {
+	line-height: 28px;
+}
+
+.content_class {
+	width: 100%;
+	min-height: 500px;
+	margin: 0 auto;
+	background-color: #ffffff;
+	padding: 30px;
+}
+</style>
diff --git a/pages/phone_proServices.vue b/pages/phone_proServices.vue
index e4bcaad..7dd3b49 100644
--- a/pages/phone_proServices.vue
+++ b/pages/phone_proServices.vue
@@ -21,7 +21,7 @@
 					</div>
 				</NuxtLink>
 				<div style="cursor: pointer;width: 50%;text-align: center;">
-					<div style="color: #0256FF;margin-bottom: 20px;">专业技术服务</div>
+					<div style="color: #0256FF;margin-bottom: 10px;">专业技术服务</div>
 					<div style="background-color: #0256FF;width:20%;height: 8px;margin: 0 auto;"></div>
 				</div>
 			</div>
diff --git a/pages/phone_societyDuty.vue b/pages/phone_societyDuty.vue
new file mode 100644
index 0000000..9ef3b03
--- /dev/null
+++ b/pages/phone_societyDuty.vue
@@ -0,0 +1,271 @@
+<template>
+	<div style="width: 100%;">
+		<!-- 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/societyduty/shehui.png`" style="width: 100%;height: 100%;object-fit: cover;">
+				</swiper-slide>
+				<swiper-slide>
+					<img :src="`${cdnUrl}/img/societyduty/shehui.png`" style="width: 100%;height: 100%;object-fit: cover;">
+				</swiper-slide>
+			</swiper>
+		</div>
+		<div class="box_11 flex-col bottom_imgss">
+			<!-- <div class="text-wrapper_10">
+				<span class="text_41">公司荣誉</span>
+			</div>
+			<div class="text-wrapper_11">
+				<span class="text_42">Company&nbsp;Honors&nbsp;</span>
+			</div> -->
+			<div class="group_14 flex-row justify-between align-center" style="flex-wrap: wrap;width: 95%;padding-top: 30px;">
+				<div class="flex-row">
+					<div class="text_25">
+						<span>
+							<NuxtLink to="/phone_societyDutyNew/">
+								公司动态
+							</NuxtLink>
+						</span>
+					</div>
+					<div class="text_25">
+						<span style="color: rgb(252, 116, 40);">活动影集（部分）</span>
+						<div
+							style="left: 20px;width: 100%;height: 1px;background-color: #fc7428;position: absolute;bottom: -21px;">
+						</div>
+					</div>
+					
+				</div>
+				<div class="group_15" style="flex: 0 0 100%;"></div>
+			</div>
+			
+			<div class="boxgs flex-row flex-wrap">
+
+				<div class="box_con flex-col"  v-for="(item,index) in lists" :key="index">
+					<div class="align-center"  style="justify-content: center;">
+						<img  :src="`${cdnUrl}/img/societyduty/s${index+1}.png`" style="width: 100%;">
+					</div>
+					<div class="flex-col" style="justify-content: center;margin-top: 5px;">
+						<span class="text_tt">
+							{{item.title}}
+						</span>
+						<!-- <span class="text_cc">
+							{{item.value}}
+						</span> -->
+					</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()
+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',
+	},
+}
+
+let vesSwiper: any = null
+const onSwiperExp = (swiper: any) => {
+	vesSwiper = swiper
+}
+const swiper_exp = ref();
+const lists = ref([
+	{title: '21年西工硅巷青创加速营仪式开营'},
+	{title: '21年西工硅巷青创加速营活动进行中'},
+	{title: '香港青英会15 周年、第16 届执委会暨第7屆理事会就职仪式'},
+	{title: '青年企业家助力河南高质量发展暨河南青年创新创业论坛'},
+	{title: '郑州市儿童福利院慰问活动'},
+	{title: '河南青年科技创新论坛'},
+	{title: '洛阳市青年联合会第九届委员会常务委员第一次会议'},
+	{title: '团省委省青联2023年新春送温暖慰问活动'},
+	{title: '荥阳市乔楼镇付河村“扶贫助困 情系家乡”志愿活动'},
+	{title: '东方医院活动'},
+	{title: '中国青年梦想季活动-中国'},
+	{title: '河南省青年企业家协会第十一届常务理事选举'}
+
+]);
+// 新闻数据
+onMounted(() => {
+	nextTick(() => {
+		animate()
+	})
+})
+const numberAnimationInstRef = ref()
+const numberAnimationInstRefKH = ref()
+const numberAnimationInstRefJS = ref()
+const numberAnimationInstRefHY = ref()
+const animate = () => {
+
+	const sr = ScrollReveal();
+	sr.reveal('.leftBox', {
+		origin: "left",
+		distance: "1000px",
+		duration: 1300,
+		delay: 100,
+		opacity: 0,
+		scale: 0.9,
+		reset: true,
+		mobile: true,
+	})
+	sr.reveal('.rightBox', {
+		origin: "right",
+		distance: "1000px",
+		duration: 1300,
+		delay: 100,
+		opacity: 0,
+		scale: 0.9,
+		reset: true,
+		mobile: true,
+	})
+	sr.reveal('.topBox', {
+		origin: "top",
+		distance: "1000px",
+		duration: 1300,
+		delay: 100,
+		opacity: 0,
+		scale: 0.9,
+		reset: true,
+		mobile: true,
+	})
+	sr.reveal('.bottomBox', {
+		origin: "bottom",
+		distance: "1000px",
+		duration: 1300,
+		delay: 100,
+		opacity: 0,
+		scale: 0.9,
+		reset: true,
+		mobile: true,
+	})
+	sr.reveal('.numberTopBox', {
+		origin: "top",
+		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()
+		},
+	})
+	sr.reveal('.topSj', {
+		origin: "bottom",
+		distance: "1000px",
+		duration: 1300,
+		delay: 5,
+		opacity: 0,
+		scale: 0.9,
+		reset: true,
+		mobile: true,
+		useDelay: 'always',
+		interval: 50,
+	})
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/animate/animate.min.css";
+@import "@/assets/index.scss";
+
+
+
+.group_666 .swiper-slide img {
+  width: 100%;
+  height: 500px;
+  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);
+}
+.bottom_imgss{
+	// background: url(/public/img/customer/bg-s.png);
+	background: #F8F8F8;
+    height: auto;
+    // background-size: 100%;
+}
+.boxgs{
+    width: 100%;
+    margin: 0 auto;
+	margin-top: 30px;
+	padding: 20px;
+	.box_con{
+		margin:10px;
+		background-color: #ffffff;
+		width: 100%;
+		height: auto;
+		font-family: Microsoft YaHei UI-Regular;
+		border-radius:4px;
+		.text_tt{
+			display: inline-block;
+			width: 100%;
+			margin-top: 15px;
+			color: #3D3D3D ;
+			font-size: 16px;
+			font-weight: 500;
+			text-align: center;
+			padding: 0 25px 20px 25px;
+		}
+		.text_cc{
+			display: inline-block;
+			width: 100%;
+			height: 30px;
+			overflow-wrap: break-word;
+			color: #999999 ;
+			font-size: 14px;
+			font-weight: 400;
+			text-align: center;
+			line-height: 30px;
+		}
+	}
+}
+</style>
diff --git a/pages/phone_societyDutyNew.vue b/pages/phone_societyDutyNew.vue
new file mode 100644
index 0000000..2323597
--- /dev/null
+++ b/pages/phone_societyDutyNew.vue
@@ -0,0 +1,380 @@
+<template>
+	<div style="width: 100%;">
+		<!-- 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/societyduty/shehui.png`" style="width: 100%;height: 100%;object-fit: cover;">
+				</swiper-slide>
+				<swiper-slide>
+					<img :src="`${cdnUrl}/img/societyduty/shehui.png`" style="width: 100%;height: 100%;object-fit: cover;">
+				</swiper-slide>
+			</swiper>
+		</div>
+		<div class="box_11 flex-col bottom_imgss" style="padding-bottom: 0px;">
+			<div class="group_14 flex-row justify-between align-center" style="flex-wrap: wrap;width: 95%;padding-top: 30px;">
+				<div class="flex-row">
+					<div class="text_25">
+						<span style="color: rgb(252, 116, 40);">公司动态</span>
+						<div
+							style="width: 100%;height: 1px;background-color: #fc7428;position: absolute;bottom: -21px;">
+						</div>
+					</div>
+					<div class="text_25">
+						<NuxtLink to="/phone_societyDuty/">
+							<span>活动影集（部分）</span>
+						</NuxtLink>
+					</div>
+
+				</div>
+				<div class="group_15" style="flex: 0 0 100%;"></div>
+			</div>
+
+			<div class="boxgs flex-row flex-wrap">
+				<div class="boxgs_top" style="display: flex;align-items: center;justify-content: center;flex-wrap: wrap;padding: 10px;">
+					<div style="position: relative;cursor: pointer;" @click="videoShow = true">
+						<img :src="`${cdnUrl}/img/societyduty/det.png`" style="width: 500px;">
+						<img :src="`${cdnUrl}/img/societyduty/bf.png`"
+							style="width: 50px;height: 50px;position: absolute;top: 45%;left: 0;right: 0;margin: 0 auto;">
+					</div>
+					<div style="width: 100%;padding-top: 10px;">
+						<div style="font-size: 24px;color: #3D3D3D;font-weight: 700;">青年企业家岳崇霄:招商引智为洛阳注入创新活水</div>
+						<div style="color: #FC7428;font-size: 14px;font-weight: 900;margin: 10px 0px;">灵睿网络创始人：岳崇霄</div>
+						<div style="font-size: 14px;font-weight: 400;color: #3D3D3D;">
+							<div>岳崇霄，2020年4月，荣获2020年全国向上向善好青年：扶贫助困好青年。 </div>
+							<div>洛阳灵睿网络技术有限公司 创始人</div>
+							<div>河南灵睿科技集团有限公司 董事长</div>
+							<div>
+								河南省青联委员、河南省青年企业家协会理事、河南省青少年新媒体协会理事、洛阳市青联常委、洛阳市青年企业家协会副会长、洛阳市党外知识分子联谊会副秘书长、洛阳市青年文艺联合会副秘书长、洛阳市郑州商会副会长、涧西区党外知识分子联谊会副会长、洛阳师范学院客座教授
+								洛阳职业技术学院客座教授</div>
+						</div>
+						<div style="margin-top: 20px;">
+							<div @click="videoShow = true"
+								style="margin: 0 auto;cursor: pointer;;line-height: 36px;text-align: center;width: 109px;height: 36px;background: #222222;color: #ffffff;">
+								查看详情</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="box_con flex-row" style="flex-wrap: wrap;margin-top: 20px;" v-for="(item, index) in newList" :key="index" @click="openNewInfo(item)">
+					<div class="align-center" >
+						<img :src="item.image" style="width: 100vw;height: 180px;object-fit: cover;border-radius: 8px;">
+					</div>
+					<div class="flex-col" style="width: 100%;position: relative;padding: 10px;">
+						<div class="text_tt">
+							{{ item.title }}
+						</div>
+						<div class="text_cc three-line-ellipsis">
+							{{ item.subtitle }}
+						</div>
+						<div style="margin-top: 10px;display: flex;justify-content: space-between;align-items: center;">
+							<div style="font-size: 14px;">发布日期：{{ timeDateMy(item.release_time_text) }}</div>
+							<div style="font-size: 14px;color: #FC7428;display: flex;align-items: center;">
+								<div>查看详情</div>
+								<div style="margin-left: 10px;">
+									<img :src="`${cdnUrl}/img/societyduty/r.png`" alt="">
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="flex flex-row justify-center py-5" style="background-color: #F8F8F8;padding-bottom: 40px;">
+			<n-pagination v-model:page="page" :page-sizes="[10]" :item-count="total" size="large"
+				@update:page="getPageList">
+			</n-pagination>
+		</div>
+		<div v-if="videoShow" class="pop" style="display: block;">
+			<div class="abs popCont pop_video_cont">
+				<a @click="videoShow = false" class="abs pop_video_close closePop"></a>
+				<video x5-playsinline="" playsinline="" webkit-playsinline="" preload=""
+					x5-video-orientation="portraint" controls="" autoplay :src="`${cdnUrl}/img/yue.mp4`"
+					draggable="true"></video>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup >
+import { NPagination } from 'naive-ui'
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { nextTick, ref } from 'vue'
+import 'swiper/css'
+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 videoShow = ref(false);
+const cdnUrl = useCdn()
+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',
+	},
+}
+
+const openNewInfo = (item) => {
+	window.open(`/phone_info/${item.id}`)
+}
+
+// 新闻数据
+onMounted(() => {
+	animate()
+	getNewsList();
+})
+const timeDateMy = (dateStr) => {
+	const date = new Date(dateStr);
+	const year = date.getFullYear();
+	const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始 
+	const day = String(date.getDate()).padStart(2, '0');
+	return `${year}.${month}.${day}`;
+}
+const page = ref(1);
+const total = ref(0);
+const getPageList = async () => {
+	page.value = page.value + 1;
+	getNewsList();
+}
+
+const newList = ref([]);
+const getNewsList = async () => {
+	const res = await $api.post('/api/home.news/index', {
+		limit: 10,
+		page: page.value,
+	})
+	total.value = res.data.data.count;
+	newList.value = res.data.data.list;
+}
+const numberAnimationInstRef = ref()
+const numberAnimationInstRefKH = ref()
+const numberAnimationInstRefJS = ref()
+const numberAnimationInstRefHY = ref()
+const animate = () => {
+
+	const sr = ScrollReveal();
+	sr.reveal('.leftBox', {
+		origin: "left",
+		distance: "1000px",
+		duration: 1300,
+		delay: 100,
+		opacity: 0,
+		scale: 0.9,
+		reset: true,
+		mobile: true,
+	})
+	sr.reveal('.rightBox', {
+		origin: "right",
+		distance: "1000px",
+		duration: 1300,
+		delay: 100,
+		opacity: 0,
+		scale: 0.9,
+		reset: true,
+		mobile: true,
+	})
+	sr.reveal('.topBox', {
+		origin: "top",
+		distance: "1000px",
+		duration: 1300,
+		delay: 100,
+		opacity: 0,
+		scale: 0.9,
+		reset: true,
+		mobile: true,
+	})
+	sr.reveal('.bottomBox', {
+		origin: "bottom",
+		distance: "1000px",
+		duration: 1300,
+		delay: 100,
+		opacity: 0,
+		scale: 0.9,
+		reset: true,
+		mobile: true,
+	})
+	sr.reveal('.numberTopBox', {
+		origin: "top",
+		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()
+		},
+	})
+	sr.reveal('.topSj', {
+		origin: "bottom",
+		distance: "1000px",
+		duration: 1300,
+		delay: 5,
+		opacity: 0,
+		scale: 0.9,
+		reset: true,
+		mobile: true,
+		useDelay: 'always',
+		interval: 50,
+	})
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/animate/animate.min.css";
+@import "@/assets/index.scss";
+
+::v-deep .n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active {
+	color: #ffffff;
+	background-color: #FC7428;
+	border: 1px solid #FC7428;
+}
+
+::v-deep .n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover.n-pagination-item--button {
+	color: #FC7428;
+}
+
+::v-deep .n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover {
+	color: #FC7428;
+	border: 1px solid #FC7428;
+}
+
+::v-deep .n-pagination .n-pagination-item {
+	border: 1px solid #999999;
+}
+
+.group_666 .swiper-slide img {
+	width: 100%;
+	height: 500px;
+	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);
+}
+
+.bottom_imgss {
+	// background: url(/public/img/customer/bg-s.png);
+	background: #F8F8F8;
+	// background-size: 100%;
+}
+
+.boxgs {
+	width: 100%;
+	margin: 0 auto;
+	padding: 20px;
+
+	.boxgs_top {
+		background: var(--newstop) 100% 100% no-repeat;
+		width: 100%;
+		height: auto;
+		border: 1px solid #FC7428;
+		border-radius: 24px;
+		margin-top: 30px;
+	}
+
+	.box_con {
+		background-color: #ffffff;
+		width: 100%;
+		font-family: Microsoft YaHei UI-Regular;
+		border-radius: 4px;
+
+		.text_tt {
+			font-size: 22px;
+			width: 100%;
+			margin-top: 10px;
+			color: #3D3D3D;
+			font-weight: 700;
+		}
+
+		.text_cc {
+			width: 100%;
+			color: #768597;
+			font-size: 14px;
+			font-weight: 400;
+			margin-top: 10px;
+		}
+	}
+}
+
+
+.pop {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 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: -60px;
+	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: 90%;
+	border: 6px solid #979797;
+	background: #000;
+}
+
+.pop_video_cont video {
+	display: block;
+	width: 100%;
+	height: 100%;
+}
+</style>