lingrui-web/pages/phone_index.vue

<template>
	<div style="width: 100%;">
		<!-- Swiper 容器 -->
		<div class="group_666" style="position: relative;">
			<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
				<swiper-slide>
					<img src="public/img/banner.png" style="width: 100%;">
				</swiper-slide>
				<swiper-slide>
					<img src="public/img/banner.png" style="width: 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_4 flex-col leftBox">
						<div class="text-group_1 flex-col justify-between">
							<span class="text_7">灵睿的互联网之道</span>
							<span 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>
				</div>
			</div>
		</div>
		<div class="group_2 flex-col">
			<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
				</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 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="text-group_2 flex-col justify-between">
									<span class="text_17">
										专业网站建设与企业官网设计定制服务
									</span>
									<span class="text_16">
										助力企业数字化转型升级，PC端/移动端/H5提供一站式网站开发、搭建
									</span>
								</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>
							<div class="text-group_2 flex-col justify-between">
								<span class="text_17">企业数字化自媒体托管专家</span>
								<span class="text_16">
									业团队代运营+AI智能内容生成+多平台精准投放，助您专注核心业务
								</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>
							<div class="text-group_2 flex-col justify-between">
								<span class="text_17">全流程抖音短视频制作服务</span>
								<span class="text_16">
									助您快速打造高播放量、高互动率的爆款短视频
								</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>
							<div class="text-group_2 flex-col justify-between">
								<span class="text_17">全栈H5开发解决方案</span>
								<span class="text_16">
									基于HTML5/CSS3/JavaScript核心技术助力实现高转化率与沉浸式用户体验
								</span>
							</div>
						</div>
					</div>

				</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>
					<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>
		<div class="box_11 flex-col">
			<div class="text-wrapper_10">
				<span class="text_41">新闻动态</span>
			</div>
			<div class="text-wrapper_11">
				<span class="text_42">Our&nbsp;Business&nbsp;</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>
					<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>
					</div>
				</div>
			</div>
			<div class="box_16 flex-row">
				<div class="text-wrapper_12 flex-col">
					<span class="text_52">查看更多</span>
				</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="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>
					<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>
					<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>
			</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>
	</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()

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 swiperBreakpoints = {
	320: {
		slidesPerView: 1.2,
		spaceBetween: 10
	},
	768: {
		slidesPerView: 2,
		spaceBetween: 20
	},
	1024: {
		slidesPerView: 3,
		spaceBetween: 30
	}
}

// 新闻数据
onMounted(() => {
	nextTick(() => {
		animate()
		// 添加移动端检测
		checkMobile()
	})
})

// 检测移动设备并应用相应样式
const checkMobile = () => {
	const isMobile = window.innerWidth <= 768
	document.body.classList.toggle('is-mobile', isMobile)

	// 监听窗口大小变化
	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('.leftBox', {
		origin: "left",
		distance: "500px", // 减少移动设备上的距离
		duration: 1000, // 减少动画时间
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: true,
		mobile: true,
	})
	sr.reveal('.rightBox', {
		origin: "right",
		distance: "500px", // 减少移动设备上的距离
		duration: 1000, // 减少动画时间
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: true,
		mobile: true,
	})
	sr.reveal('.topBox', {
		origin: "top",
		distance: "500px", // 减少移动设备上的距离
		duration: 1000, // 减少动画时间
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: true,
		mobile: true,
	})
	sr.reveal('.bottomBox', {
		origin: "bottom",
		distance: "500px", // 减少移动设备上的距离
		duration: 1000, // 减少动画时间
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: true,
		mobile: true,
	})
	sr.reveal('.numberTopBox', {
		origin: "top",
		distance: "500px", // 减少移动设备上的距离
		duration: 1000, // 减少动画时间
		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: "500px", // 减少移动设备上的距离
		duration: 1000, // 减少动画时间
		delay: 5,
		opacity: 0,
		scale: 0.9,
		reset: true,
		mobile: true,
		useDelay: 'always',
		interval: 50,
	})
}
</script>

<style lang="scss">
@import "@/assets/animate/animate.min.css";
@import "@/assets/index.css";

/* 移动端通用样式 */
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 {
	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);
}

/* 移动端导航按钮 */
.nav-arrow {
	max-width: 30px;
	height: auto;
}

.logo-img {
	max-width: 120px;
	height: auto;
}

/* 橙色背景块 */
.orange-bg {
	background-color: rgba(252, 116, 40, 1);
	width: 100%;
	height: 100%;
	z-index: 1;
	position: absolute;
	right: -15px;
	bottom: -15px;
}

/* 业务部分 */
.business-container {
	flex-direction: column;
}

.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;
	left: 0;
	width: 100%;
	z-index: 100;
}

/* 响应式断点 */
@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;
	}

	.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>