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/img/banner.png" style="width: 100%;">
				</swiper-slide>
				<swiper-slide>
					<img src="public/img/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/img/left.png" alt="">
					</div>
					<div style="margin: 0px 20px;">
						<img src="public/img/morse.png" alt="">
					</div>
					<div>
						<img src="public/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 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/img/bf.png" />
							</div>
						</div>
						<div class="content_box"></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">
					Our&nbsp;BusinessWay
				</span>
				<div class="flex-row justify-center align-center">
					<div class="leftBox section_2s flex-col" style="margin-right: 30px;">
						<div class="group_6 flex-col">
							<div class="box_6 flex-row align-center justify-between">
								<div class="text-group_2 flex-col justify-between">
									<span class="text_17" style="color: #0256FF;">
										专业技术服务
									</span>
									<span class="text_16" style="color: #0256FF;">
										专业提供互联网技术支持，助力企业高效发展
									</span>
								</div>
								<div class="image-wrapper_3s flex-col align-center">
									<img class="label_1s" referrerpolicy="no-referrer" src="public/img/u1s.png" />
								</div>
								
							</div>
						</div>
						<div class="group_10s 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/img/aiyingyong.png" />
							</div>
							<div class="text-group_3 flex-col justify-between">
								<span class="text_18">AI应用与落地</span>
								<span class="text_19">
									从模型选型、数据处理、算法优化到应用集成与部署的全栈服务
								</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/img/kaifapeizhi.png" />
							</div>
							<div class="text-group_3 flex-col justify-between">
								<span class="text_18">定制软件开发</span>
								<span class="text_19">
									为您打造用户体验出色、性能稳定可靠的Web应用、移动App及小程序
								</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/img/a-yunweishuju1x.png" />
							</div>
							<div class="text-group_3 flex-col justify-between">
								<span class="text_18">IT运维服务</span>
								<span class="text_19">
									专业守护数据，防御威胁，护航企业数字安全
								</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/img/wangluoanquanshebei.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_10 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/img/yekuogongdianfangan.png" />
							</div>
							<div class="text-group_5 flex-col justify-between">
								<span class="text_22">智慧化解决方案</span>
								<span class="text_23">
									利用物联网、大数据、人工智能等前沿技术，提供智慧化解决方案
								</span>
							</div>
						</div>
					</div>

					<div class="rightBox section_2sa flex-col">
						<div class="group_6s flex-col">
							<div class="box_6 flex-row align-center justify-between">
								<div class="text-group_2 flex-col justify-between">
									<span class="text_17" >
										内容创作与运营
									</span>
									<span class="text_16" style="color: #FC7428;">
										构建全域影响力，赋能品牌长效增长
									</span>
								</div>
								<div class="image-wrapper_3s flex-col align-center">
									<img class="label_1s" referrerpolicy="no-referrer" src="public/img/u1.png" />
								</div>
								
							</div>
						</div>
						<div class="group_10s 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/img/quanmeiti.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_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/img/pingpai.png" />
							</div>
							<div class="text-group_3 flex-col justify-between">
								<span class="text_18" style="color: #FC7428;">品牌账号代运营</span>
								<span class="text_19" style="color: #FC7428;">
									全链路赋能品牌增长，内容+策略+数据 · 打造品效合一的社交资产
								</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/img/xianshang.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_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/img/news.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_10 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/img/daren.png" />
							</div>
							<div class="text-group_5 flex-col justify-between">
								<span class="text_22">IP孵化与达人合作</span>
								<span class="text_23">
									深度孵化+精准匹配，内容资产×流量裂变 · 打造IP与达人的共生生态
								</span>
							</div>
						</div>
						
						
					</div>

				</div>
			</div>
		</div>
		<div class="box_7 flex-col">
			<span class="text_24 topBox">行业案例</span>
			<span class="text_15 topBox">Industry&nbsp;Cases</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/img/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/img/op1.png" style="width: 100%;">
					</swiper-slide>
					<swiper-slide>
						<img src="public/img/op2.png" style="width: 100%;">
					</swiper-slide>
					<swiper-slide>
						<img src="public/img/op1.png" style="width: 100%;">
					</swiper-slide>
					 <swiper-slide>
						<img src="public/img/op2.png" style="width: 100%;">
					</swiper-slide>
					<swiper-slide>
						<img src="public/img/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]" 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/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">
							为深入学习贯彻党的二十大精神，落实省、市委决策，
							<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/img/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/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">
							为深入学习贯彻党的二十大精神，落实省、市委决策，
							<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 class="bottom_imgs topSj"></div>
				<!-- <div v-for="item in 18" class="">
					<img class="image_11 topSj" referrerpolicy="no-referrer" src="public/img/q1.png" />
				</div> -->
			</div>
		</div>
		<div class="box_18 flex-col" style="overflow: hidden;">
			<span class="text_53" style="color: #fff;">联系我们</span>
			<span class="text_54" style="color: #fff;">cooperative&nbsp;partner&nbsp;</span>
			
			<div class="numberTopBox" style="margin:0 auto;">
				<form class="contactForm mt-6 w-full" @submit.prevent="submitForm">
					<div class="inputform">
						<input 
                v-model="formData.name"
                class="contactInput  mt-[15px] md:mt-[30px] w-full md:w-[700px]" 
                type="text" 
                placeholder="输入您的姓名"
              />
              <input 
                v-model="formData.mobile"
                class="contactInput mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[700px]" 
                type="text" 
                placeholder="请输入您的联系电话"
              />
			  <input 
                v-model="formData.emil"
                class="contactInput mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[700px]" 
                type="text" 
                placeholder="请输入您的邮箱"
              />
					</div>
              <div class="relative mt-4 md:mt-8 w-full md:w-[1200px]">
                <textarea 
                  v-model="formData.message"
                  id="myTextarea" 
                  placeholder="为了更好地帮助您，请尽量提供详细的信息" 
                  rows="5"
                  maxlength="100"
                  class="w-full md:w-[1200px]"
                ></textarea>
				<button 
                  type="submit"
                  class="contactBut"
                >
                  {{ '提交' }}
                </button>
              </div>
            </form>
			</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 formData = reactive({
  name: '',
  mobile: '',
  emil:'',
  message: ''
})
// 新闻数据
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,
	})
}
// 表单提交方法
const submitForm = () => {
  console.log(formData);
  
  // 这里可以添加表单验证逻辑
  if (!formData.name) {
    alert('请输入您的姓名')
    return
  }
  
  if (!formData.mobile) {
    alert('请输入您的手机号码')
    return
  }
  
  if (!formData.message) {
    alert('请输入您的留言内容')
    return
  }
  $api.post("/api/home.leave_word/add" , formData)
		.then((res: any) => {
			console.log(res)
      if(res.status == 200){
        alert('留言成功')
      }else{
        alert('失败')
      }
      formData.name = '';
      formData.mobile = '';
      formData.emil = '';
      formData.message = '';
		})
		.catch((err) => {
			console.dir(err)
		})
  // 重置表单
  // formData.name = ''
  // formData.mobile = ''
  // formData.content = ''
}
</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);
}
.bottom_imgs{
	background: url(/public/img/qall.png);
	width: 1230px;
    height: 272px;
    background-size: 100%;
}
.content_box{
	background: url(/public/img/m1.png);;
	width: 561px;height: 521px;
	z-index: 1;
	position: absolute;
    right: -12px;
    bottom: -13px;
    background-size: 100%;
}
.contactForm{
	width: 100%;
	.inputform{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 1200px;
	}
    
}
.contactInput{
	width: 380px;
height: 50px;
background: #FFFFFF;
border-radius: 6px 6px 6px 6px;
padding-left: 20px;
}
.contactInput::placeholder {color: #768597; }
.contactInput:focus {outline: none;}
#myTextarea{
	width: 1200px;
	height: 167px;
	background: #FFFFFF;
	border-radius: 6px 6px 6px 6px;
	opacity: 0.8;
	padding-left: 20px;padding-top: 20px;
	resize: none;
}
#myTextarea::placeholder {color: #768597; }
#myTextarea:focus {outline: none;}
.char-count {position: absolute;bottom: 5px; /* 根据需要调整距离底部的位置 */right: 10px; /* 根据需要调整距离右侧的位置 */font-size: 12px; /* 根据需要调整字体大小 */color: #A8CBFF;}
@media (max-width: 768px) {
  .contactInput {
    font-size: 18px;
    height: 40px;
  }
}
.contactBut{width: 108px;
	border-radius: 4px 4px 4px 4px;
	    position: absolute;
    bottom: 20px;
    right: 30px;
height: 36px; background-color: #222222; border: none; font-weight: 400;font-size: 16px;line-height: 28px;color: #FFFFFF;}
</style>