lingrui-web/pages/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/images/banner.png" style="width: 100%;">
				</swiper-slide>
				<swiper-slide>
					<img src="public/images/banner.png" style="width: 100%;">
				</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="public/images/left.png" alt="">
					</div>
					<div style="margin: 0px 20px;">
						<img src="public/images/morse.png" alt="">
					</div>
					<div>
						<img src="public/images/right.png" alt="">
					</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">
					<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">
							<span class="text_9">公司简介</span>
							<span class="text_10">运营方法论</span>
							<span class="text_11">互联网营销</span>
						</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/images/bf.png" />
							</div>
						</div>
						<div
							style="background-color: rgba(252, 116, 40, 1);width: 549px;height: 508px;z-index: 1;position: absolute;right: -30px;bottom: -30px;;">
						</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-row justify-center align-center">
					<div class="leftBox">
						<img class="image_6" referrerpolicy="no-referrer" src="public/images/t3.png" />
					</div>
					<div class="rightBox section_2 flex-col">
						<div class="group_6 flex-col">
							<div class="box_6 flex-row justify-between">
								<div class="image-wrapper_3 flex-col align-center">
									<img class="label_1" referrerpolicy="no-referrer" src="public/images/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 justify-between">
							<div class="image-wrapper_5 flex-col">
								<img class="label_3" referrerpolicy="no-referrer" src="public/images/r4.png" />
							</div>
							<div class="text-group_3 flex-col justify-between">
								<span class="text_18">企业数字化自媒体托管专家</span>
								<span class="text_19">
									业团队代运营+AI智能内容生成+多平台精准投放，助您专注核心业务
								</span>
							</div>
						</div>
						<div class="group_10 flex-col"></div>
						<div class="group_7 flex-row justify-between">
							<div class="image-wrapper_5 flex-col">
								<img class="label_3" referrerpolicy="no-referrer" src="public/images/r3.png" />
							</div>
							<div class="text-group_3 flex-col justify-between">
								<span class="text_18">全流程抖音短视频制作服务</span>
								<span class="text_19">
									助您快速打造高播放量、高互动率的爆款短视频
								</span>
							</div>
						</div>
						<div class="group_12 flex-col"></div>
						<div class="group_13 flex-row justify-between">
							<div class="image-wrapper_5 flex-col">
								<img class="label_3" referrerpolicy="no-referrer" src="public/images/r2.png" />
							</div>
							<div class="text-group_5 flex-col justify-between">
								<span class="text_22">全栈H5开发解决方案</span>
								<span class="text_23">
									基于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="flex-row">
					<div class="text_25">
						<span>医疗</span>
						<div
							style="width: 100%;height: 1px;background-color: #fc7428;position: absolute;bottom: -21px;">
						</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="flex-row justify-center align-center">
					<div style="margin-right: 10px;">
						<span class="text_32">更多案例</span>
					</div>
					<div>
						<img src="public/images/anli.png" />
					</div>
				</div>
				<div class="group_15" style="flex: 0 0 100%;"></div>
			</div>

			<div class="dswper">
				<swiper ref="swiper_exp" :slidesPerView="3" loop :loopedSlides="3" :autoplay="false" centeredSlides
					:modules="modules" :watchSlidesProgress="true" @swiper="onSwiperExp" effect="coverflow">
					<swiper-slide>
						<img src="public/images/op1.png" style="width: 100%;">
					</swiper-slide>
					<swiper-slide>
						<img src="public/images/op1.png" style="width: 100%;">
					</swiper-slide>
					<swiper-slide>
						<img src="public/images/op1.png" style="width: 100%;">
					</swiper-slide>
					<swiper-slide>
						<img src="public/images/op1.png" style="width: 100%;">
					</swiper-slide>
					<swiper-slide>
						<img src="public/images/op1.png" style="width: 100%;">
					</swiper-slide>
				</swiper>
				<div class="dswper_left">
					<img src="public/images/opl.png">
				</div>
				<div class="dswper_right">
					<img src="public/images/opr.png">
				</div>
				<div class="flex-row justify-center align-center absolute w-full bottom-[-50px]" style="gap: 30px;">
					<div style="width: 25px;height:5px;background-color: #fc7428;"></div>
					<div style="width: 25px;height:5px;background-color: #C1C1C1;"></div>
					<div style="width: 25px;height:5px;background-color: #C1C1C1;"></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="box_12 flex-row justify-center">
				<img class="image_7 leftBox" referrerpolicy="no-referrer" src="public/images/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">
							为深入学习贯彻党的二十大精神，落实省、市委决策，
							<br />
							充分发挥民营企业的凝聚力、向心力和创造力，赴..
						</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/images/news2.png" />
			</div>
			<div class="box_14 flex-row justify-center">
				<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">
							为深入学习贯彻党的二十大精神，落实省、市委决策，
							<br />
							充分发挥民营企业的凝聚力、向心力和创造力，赴..
						</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/images/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">
							为深入学习贯彻党的二十大精神，落实省、市委决策，
							<br />
							充分发挥民营企业的凝聚力、向心力和创造力，赴..
						</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="group_28 flex-row justify-center numberTopBox">
				<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 class="section_7 flex-col"></div>
				<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 class="section_8 flex-col"></div>
				<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 class="section_9 flex-col"></div>
				<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 class="group_29 grid grid-cols-6 gap-6 mr-auto">
				<div v-for="item in 18" class="">
					<img class="image_11 topSj" referrerpolicy="no-referrer" src="public/images/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();

// 新闻数据
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">
@import "@/assets/animate/animate.min.css";
@import "@/assets/index.css";

: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);
}

</style>