lingrui-web/pages/aboutUs.vue

<template>
	<div style="width: 100%;">
		<!-- Swiper 容器 -->
		<div class="group_666" style="position: relative;height: 550px;">
			<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
				<swiper-slide>
					<img :src="`${cdnUrl}/img/abus.png`" style="width: 100%;">
				</swiper-slide>
				<swiper-slide>
					<img :src="`${cdnUrl}/img/abus.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="`${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">
				<div class="group_3 flex-row justify-center" style="background: #ffffff;height: 480px;gap: 30px;">

					<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-top: 40px;">
						<div class="text-group_1 flex-col justify-between" style="width: 100%;">
							<span class="text_7" style="width: 432px;position: relative;">
								洛阳灵睿网络技术有限公司
								<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;">
								智慧信息化与数字内容服务领航者
							</span>
						</div>

						<span class="text_12" style="height: auto;font-size: 14px;margin-top: 40px;">
							洛阳灵睿网络技术有限公司成立于2006年，深耕互联网行业，专注智慧信息化与数字内容服务领域19年。是集技术研发、创意策划、全媒体运营于一体的高新技术企业。公司以“技术赋能场景，内容驱动价值”为核心使命，专注于为大型公立医院、教育机构、企事业单位、品牌营销策略提供一站式智慧化解决方案与品牌数字化升级服务，助力客户实现效率提升、品牌增值与精准传播。
						</span>
						<span class="textss13">
							专注互联网领域，发散新媒体创思，执着深耕口碑服务，扎实落地品牌内容，共创新信息化与内容服务业态。
						</span>
						<div class="group_28 flex-row  justify-between numberTopBox"
							style="width: 592px;text-align: center;">
							<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="19"></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="100"></n-number-animation>+</span>
								<span class="">覆盖行业</span>
							</div>


							<div class="text-group_12 flex-col justify-between" style="width: auto;height: 80px;">
								<span class="text_64"
									style="font-size: 32px;text-align: center;width: auto;"><n-number-animation
										:duration="5000" ref="numberAnimationInstRefHY" :active="false" :from="0"
										:to="30"></n-number-animation>+</span>
								<span class="">技术团队</span>
							</div>

						</div>
					</div>
				</div>
				<div class="flex rongyu1s bottomBox">
					<div class="flex" style="width: 14%;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;">

					<div class="group_4 flex-col leftBox">
						<div class="text-group_1 flex-col justify-between" style="width: 100%;">
							<span class="text_7" style="width: 242px;position: relative;">
								睿创团队介绍
								<img :src="`${cdnUrl}/img/about/xing.png`" alt=""
									style="position: absolute;top: -10px; right: 0;" />
							</span>
						</div>

						<span class="text_12" style="height: auto;font-size: 14px;">
							灵睿基因一直是一群年轻的青年人组成，我们致力打造专业的团队化运营模式，集合程序猿、设计狗、运营喵的创作者联盟。年轻不是资本，敢重新定义年轻才是，在互联网领域，我们致力做一支专业，积极，上进的年轻团队；80后主导，90后主力，00后紧随。以“为客户创造价值 用互联网思维打造品牌”为使命。以“正直诚信、实干勇敢、协作共赢、创业精神”为价值观。努力发展，破茧成蝶。
						</span>


					</div>

					<div class="group_5 flex-col justify-center align-center rightBox">
						<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;">
				<swiper ref="swiper_exp" :slidesPerView="5" loop :loopedSlides="3" :autoplay="{ delay: 2000 }"
					centeredSlides :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="dswper_left">
					<img :src="`${cdnUrl}/img/opl.png">
				</div>
				<div class="dswper_right">
					<img :src="`${cdnUrl}/img/opr.png">
				</div> -->
				<div class="flex-row justify-center align-center absolute w-full bottom-[-50px]" 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 class="box_17 flex-col" style="overflow: hidden;">
			<span class="text_53">部分伙伴</span>
			<span class="text_54" style="margin-top: 30px;">Our&nbsp;Business&nbsp;</span>
			<div class="group_29 grid grid-cols-6 gap-6 mr-auto">
				<div class="bottom_imgs topSj"></div>
				<!-- <div v-for="item in 18" class="">
					<img class="image_11 topSj" referrerpolicy="no-referrer" :src="`${cdnUrl}/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, 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);
	width: 1230px;
	height: 272px;
	background-size: 100%;
}



.section_1sa {
	height: 410px;
	background: var(--t1a) 100% no-repeat;
	width: 576px;
	z-index: 10;
}

.section_1sb {
	height: 410px;
	background: var(--t1b) 100% no-repeat;
	width: 576px;
	z-index: 10;
}


.textss13 {
	width: 584px;
	font-weight: 600;
	font-size: 14px;
	color: #768597;
	line-height: 22px;
	font-family: Microsoft YaHei UI-Regular;
}

.rongyu1s {
	width: 63%;
	height: 68px;
	background: #F8F8F8;
	border-radius: 0px 0px 0px 0px;
	align-items: center;
	margin: 0 auto;
	margin-bottom: 70px;

	.spanst {
		width: 90px;
		height: 32px;
		font-family: Microsoft YaHei UI, Microsoft YaHei UI;
		font-weight: bold;
		font-size: 18px;
		color: #3D3D3D;
		line-height: 32px;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-left: 20px;
	}

	.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;
}
</style>