lingrui-web/pages/index.vue

<template>
	<div style="width: 100%;">
		<!-- Swiper 容器 -->
		<div class="group_666" style="position: relative;height: 100vh;">
			<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/banner2.png" style="width: 100%;">
				</swiper-slide>
				<swiper-slide>
					<video class="video_1" autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline"
						src="public/img/1212.mp4"></video>
				</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 style="display: flex;justify-content: start;margin-top: 50px;">
							<div @click="openType(1)" :class="typeId == 1 ? 'text_9' : 'text_11'">公司简介</div>
							<div @click="openType(2)" :class="typeId == 2 ? 'text_9' : 'text_11'">运营方法论</div>
							<div @click="openType(3)" :class="typeId == 3 ? 'text_9' : 'text_11'">互联网营销</div>
						</div>
						<div class="box_3 flex-col" style="justify-content: start;">
							<div v-if="typeId ==1" class="box_4 flex-col"></div>
							<div v-if="typeId ==2" class="box_4 flex-col" style="margin-left: 135px;"></div>
							<div v-if="typeId ==3" class="box_4 flex-col" style="margin-left: 287px;"></div>
						</div>
						<div class="text_12" v-if="typeId == 1">
							洛阳灵睿网络技术有限公司
							<br>
							——智慧信息化与数字内容服务领航者
							<br>
							洛阳灵睿网络技术有限公司成立于2006年，深耕互联网行业，专注智慧信息化与数字内容服务领域19年。是集技术研发、创意策划、全媒体运营于一体的高新技术企业。公司以“技术赋能场景，内容驱动价值”为核心使命，专注于为大型公立医院、教育机构、企事业单位、品牌营销策略提供一站式智慧化解决方案与品牌数字化升级服务，助力客户实现效率提升、品牌增值与精准传播。
							<br>
							专注互联网领域，发散新媒体创思，执着深耕口碑服务，扎实落地品牌内容，共创新信息化与内容服务业态。
						</div>
						<div class="text_12" v-if="typeId == 2">
							
							在灵睿，我们的运营方法论是基于深入的<strong>市场洞察、用户需求分析</strong>和科学的<strong>数据驱动</strong>，通过系统化的策略为品牌赋能。我们从运营的<strong>江湖地位</strong>出发，帮助品牌在竞争激烈的市场中确立<strong>独特的定位和竞争力；</strong>通过精确的运营基本逻辑，确保每一项策略与品牌核心价值相匹配，推动<strong>可持续发展。</strong>
							我们将运营分为三大核心手段：<strong>内容运营、活动运营和用户运营</strong>。内容运营注重通过高质量、有共鸣的内容与受众建立深度联系；活动运营则通过创意和精准策划，提升品牌曝光和用户参与度；用户运营关注从触达到转化的全过程，通过个性化服务增强用户粘性与忠诚度。
							灵睿深知，运营不仅依赖直觉与经验，更依<strong>赖数据支持。</strong>我们通过精细化的<strong>数据统计与分析</strong>数据统计与分析，实时监测运营效果并做出策略调整，确保每个决策都有<strong>数据背书</strong>。通过这一整套运营体系，我们不仅能为客户提供行之有效的解决方案，更能帮助他们在数字化浪潮中领先一步，实现<strong>持续增长与价值创造。</strong>
						</div>
						<div class="text_12" v-if="typeId == 3">
							在灵睿，我们通过深度的<strong>数据分析</strong>和精确的<strong>用户洞察</strong>，帮助企业实现<strong>品牌的精准传播和长期增长。</strong>我们相信，成功的互联网营销不仅仅是提高曝光率，更是通过<strong>内容创作、活动策划和用户互动</strong>等手段，打造与受众的深层次连接，从而促进<strong>品牌的认知度和忠诚度。</strong>
我们帮助客户制定个性化的互联网营销策略，覆盖<strong>社交媒体、搜索引擎、视频内容</strong>等多个渠道，确保每个接触点都能精准传达品牌价值。在实际操作中，我们依托<strong>技术优势</strong>，结合行业<strong>最佳实践</strong>，为客户提供<strong>定制化的营销方案</strong>，推动<strong>线上线下的无缝连接。</strong>
灵睿的互联网营销不仅是单一的推广行为，更是一个以用户为中心的全方位战略，帮助企业在快速变化的市场中保持<strong>竞争力</strong>，实现<strong>持续增长。</strong>
						</div>
						<div class="text-wrapper_2 flex-col">
							<nuxt-link to="/aboutUs/" class="text_13">
								<span>查看全部</span>
							</nuxt-link>
						</div>
					</div>
					<div @click="videoShow = true"
						class="group_5 flex-col justify-center align-center rightBox cursor-pointer">
						<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" style="margin-top: 30px;">
					<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_7 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_3 flex-col justify-between">
								<span class="text_18">智慧化解决方案</span>
								<span class="text_19">
									利用物联网、大数据、人工智能等前沿技术，提供智慧化解决方案
								</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_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_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/xianshang.png" />
							</div>
							<div class="text-group_3_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_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/daren.png" />
							</div>
							<div class="text-group_3_3 flex-col justify-between">
								<span class="text_18">IP孵化与达人合作</span>
								<span class="text_19">
									深度孵化+精准匹配，内容资产×流量裂变 · 打造IP与达人的共生生态
								</span>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
		<div style="background-color: #ffffff;">
			<div class="box_7 flex-col">
			<span class="text_24 topBox">行业案例</span>
			<span class="text_15 topBox">Industry&nbsp;Cases</span>
			<div class="dswper">
				<swiper ref="swiper_exp" :slidesPerView="2" loop  :autoplay="false" 
					:modules="modules" :watchSlidesProgress="true" @swiper="onSwiperExp">
					<swiper-slide v-for="(item, index) in 14" :key="index">
						<img :src="`/img/home_al/op${item}.png`" style="width: 585px;height: 300px;    margin: 0 auto;">
					</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 v-for="(_, index) in 3" :key="index" style="width: 20px; height: 5px;"
						:style="{ backgroundColor: activeSlideIndex === index ? '#fc7428' : '#C1C1C1' }">
					</div>
				</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">news information</span>
			</div>
			<div class="box_12 flex-row justify-center" v-if="newsList.length > 0">
				<img @click="openUrl(newsList[0].id)" class="image_7 leftBoxTop" referrerpolicy="no-referrer"
					:src="newsList[0].image" style="cursor: pointer;;object-fit: cover;" />
				<div class="box_13 flex-col topBox" @click="openUrl(newsList[1].id)" style="cursor: pointer;">
					<div class="text-group_6">
						<div class="one-line-ellipsis" style="font-size: 18px;font-weight: 700;padding-top: 10px;">
							{{ newsList[1].title }}
						</div>
						<div class="two-line-ellipsis"
							style="color: #768597;font-size: 14px;font-weight: 400;margin-top: 20px;">
							{{ newsList[1].subtitle }}
						</div>
					</div>
					<div class="group_22 flex-row">
						<div class="section_6 flex-col"></div>
						<span class="text_44">{{ newsList[1].cate.name }}</span>
						<span class="text_45">{{ retTime(newsList[1].release_time_text) }}</span>
					</div>
				</div>
				<img @click="openUrl(newsList[2].id)" class="image_8 rightBox" referrerpolicy="no-referrer"
					:src="newsList[2].image" style="cursor: pointer;;object-fit: cover;" />
			</div>
			<div class="box_14 flex-row justify-center" v-if="newsList.length > 0">
				<div class="group_23 flex-col leftBoxTop" @click="openUrl(newsList[0].id)" style="cursor: pointer;">
					<div class="text-group_7">
						<div class="one-line-ellipsis" style="font-size: 18px;font-weight: 700;padding-top: 10px;">
							{{ newsList[0].title }}
						</div>
						<div class="two-line-ellipsis"
							style="color: #768597;font-size: 14px;font-weight: 400;margin-top: 20px;">
							{{ newsList[0].subtitle }}
						</div>
					</div>
					<div class="group_24 flex-row">
						<div class="group_25 flex-col"></div>
						<span class="text_47">{{ newsList[0].cate.name }}</span>
						<span class="text_48">{{ retTime(newsList[0].release_time_text) }}</span>
					</div>
				</div>

				<img @click="openUrl(newsList[1].id)" class="image_9 bottomBox" referrerpolicy="no-referrer"
					:src="newsList[1].image" style="cursor: pointer;;object-fit: cover;" />
				<div class="group_26 flex-col rightBox" @click="openUrl(newsList[2].id)" style="cursor: pointer;">
					<div class="text-group_8">
						<div class="text-group_7" style="margin: 0;">
							<div class="one-line-ellipsis" style="font-size: 18px;font-weight: 700;padding-top: 10px;">
								{{ newsList[2].title }}
							</div>
							<div class="two-line-ellipsis"
								style="color: #768597;font-size: 14px;font-weight: 400;margin-top: 20px;">
								{{ newsList[2].subtitle }}
							</div>
						</div>
					</div>
					<div class="box_15 flex-row">
						<div class="group_27 flex-col"></div>
						<span class="text_50">{{ newsList[2].cate.name }}</span>
						<span class="text_51">{{ retTime(newsList[2].release_time_text) }}</span>
					</div>
				</div>
			</div>
			<div class="box_16 flex-row">
				<div class="text-wrapper_12 flex-col">
					<nuxt-link to="/societyDutyNew/"  class="text_52">
						<span>查看更多</span>
					</nuxt-link>
				</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_29 grid grid-cols-6 gap-6 mr-auto">
				<div class="bottom_imgs topSj"></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 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="public/img/222.mp4"
					draggable="true"></video>
			</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 typeId = ref(1);

const openType = (type) => {
	console.log(type);
	typeId.value = type;
}

const videoShow = ref(false)

let newsSwiper: any = null
const onSwiperNews = (swiper: any) => {
	newsSwiper = swiper
}
const swiperOptionsNews = {
	autoplay: {
		delay: 4000,
		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
	// 监听幻灯片变化事件
	swiper.on('slideChange', () => {
		// 更新当前活动幻灯片索引
		activeSlideIndex.value = swiper.realIndex % 3
	})
}
const swiper_exp = ref();
const activeSlideIndex = ref(0);
// 表单数据
const formData = reactive({
	name: '',
	mobile: '',
	emil: '',
	message: ''
})
// 新闻数据
onMounted(() => {
	getIndexNews();
	nextTick(() => {
		// 初始化 ScrollReveal
		setTimeout(() => {
			animate()
		}, 500)
	})
})
// const numberAnimationInstRef = ref()
// const numberAnimationInstRefKH = ref()
// const numberAnimationInstRefJS = ref()
// const numberAnimationInstRefHY = ref()
const animate = () => {

	const sr = ScrollReveal();
	sr.reveal('.leftBoxTop', {
		origin: "left",
		distance: "1000px",
		duration: 1300,
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: true,
		mobile: true,
	})
	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('.group_29 ', {
		origin: "bottom",
		distance: "500px",
		opacity: 0,
		scale: 0.9,
		reset: false,
		mobile: true,
	})
}
// 表单提交方法
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 = ''
}
const newsList = ref([])
const getIndexNews = () => {
	$api.get("/api/home.news/index?page=1&limit=3")
		.then((res: any) => {
			console.log(res)
			newsList.value = res.data.data.list
		})
		.catch((err) => {
			console.dir(err)
		})
}

const retTime = (dateTimeStr) => {
	return dateTimeStr.split(' ')[0]; // 分割后取日期部分 
}
const openUrl = (id) => {
	window.open(`/info/${id}`)
}
</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);
	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;
}

.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: 0;
	right: -75px;
	width: 50px;
	height: 50px;
	background: url('/public/img/close.png') no-repeat 0 0;
	background-size: 100% auto;
	border: 6px solid #979797;
}

.pop_video_cont {
	width: 600px;
	border: 6px solid #979797;
	background: #000;
}

.pop_video_cont video {
	display: block;
	width: 100%;
	height: 100%;
}
strong{
}
</style>