lingrui-web/pages/concatUs.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/joinus.png" style="width: 100%;">
				</swiper-slide>
				<swiper-slide>
					<img src="public/img/joinus.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_5 flex-col justify-center align-center rightBox">
						<div class="section_1s flex-col"></div>
						
					</div>

					<div class="group_4 flex-col leftBox">
						<div class="text-group_1 flex-col justify-between">
							<span class="text_7">洛阳灵睿网络技术有限公司</span>
						</div>
						<span class="text_12">
							从一支年轻的创业团队，慢慢发展成为业务遍及全国的信息化，内容支持型互联网公司，我们仍旧保持着始终创业的心态，每一天努力向前，如果你也愿意加入我们，请联系我们的HR，期待与你的会面。
						</span>
						<div class="flex" style="margin-top: 0px;">
							<span class="text_13s">
								<img src="public/img/telphone.png" alt="" class="imgs">
								联系电话：11245123262
							</span>
							<span class="text_13s">
								<img src="public/img/wechat.png" alt="" class="imgs">
								微信：11245123262
							</span>
						</div>
					</div>

				</div>
			</div>
		</div>

		<div class="box_17s flex-col" style="overflow: hidden;">
			<span class="text_53">热门岗位</span>
			<span class="text_54">Company&nbsp;environment</span>
			<div class="hbform">
				<div class="flex boxgs">
					<div class="title active">影视类</div>
					<div class="title">技术开发类</div>
					<div class="title">商务类</div>
				</div>
				<div class="flex justify-center align-center" style="margin-top: 30px;">
					<div class="flex-col box_18s">
						<div class="titless">
							<div class="a1s">移动端跨平台开发工程师</div>
							<div class="a2s">任职要求请联系HR</div>
						</div>
						<div class="line"></div>
						<div class="bottomss">
							<div>灵睿网络</div>
							<div>2025-04-06  14:30</div>
						</div>
					</div>
					<div class="flex-col box_18s">
						<div class="titless">
							<div class="a1s">移动端跨平台开发工程师</div>
							<div class="a2s">任职要求请联系HR</div>
						</div>
						<div class="line"></div>
						<div class="bottomss">
							<div>灵睿网络</div>
							<div>2025-04-06  14:30</div>
						</div>
					</div>
					<div class="flex-col box_18s">
						<div class="titless">
							<div class="a1s">移动端跨平台开发工程师</div>
							<div class="a2s">任职要求请联系HR</div>
						</div>
						<div class="line"></div>
						<div class="bottomss">
							<div>灵睿网络</div>
							<div>2025-04-06  14:30</div>
						</div>
					</div>
				</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);
}
.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%;
}
.section_1s {
  height: 360px;
  background: url(public/img/allpeople.png) 100% no-repeat;
  background-size: 100% 100%;
  width: 585px;
  z-index: 10;
}
.text_13s{
	width: 261px;
	height: 48px;
	line-height: 44px;
	border-radius: 4px 4px 4px 4px;
	border: 1px solid #768597;
	color: #768597;
	font-size: 16px;
	font-family: Microsoft YaHei UI-Regular;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	margin-right:22px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	.imgs{
		width: 24px;
		height: 24px;
		margin-right: 10px;
	}
}
.box_17s {
  width: 100%;
  height: 490px;
  background: #F8F8F8;
  justify-content: flex-center;
}

.hbform{
	width: 100%;
}
.boxgs{
	width: 100%;
	margin-top: 30px;
	justify-content: center;
	align-items: center;
	.title{
		width: 130px;
		height: 48px;
		background: #FFFFFF;
		border-radius: 78px 78px 78px 78px;
		margin: 0 20px;
		line-height: 48px;
		text-align: center;
		font-weight: 400;
		font-size: 18px;
		color: #222222;
		&.active{
			background: linear-gradient( 360deg, #FC7428 0%, #FF9357 100%);
			color: #FFFFFF;
		}
	}
}
.box_18s {
  width: 387px;
  height: 149px;
  background: url(public/img/lianxiyp.png) 100% no-repeat;
  z-index: 10;
  justify-content: center;
//   align-items: center;
  margin-right: 20px;
  .line{
	width: 347px;
	height: 1px;
	background: #D8D8D8;
	margin: 0 auto;
  }
  .titless{
	width: 100%;
	padding-top:20px;
	padding-left: 20px;
	.a1s{
		font-family: Microsoft YaHei, Microsoft YaHei;
		font-weight: 700;
		font-size: 18px;
		color: #3D3D3D;
	}
	.a2s{
		margin: 20px 0;
		font-family: Microsoft YaHei, Microsoft YaHei;
		font-weight: 400;
		font-size: 12px;
		color: #768597;
	
	}
  }
  .bottomss{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	color: #768597;
  }
  
}
</style>