榆钱落尽槿花稀
8faf9a16d6
在 `index.css` 中添加了 `.text-group_3` 和 `.text-group_3_3` 的悬停效果，修改了 `index.vue` 中的类名和样式，并添加了动态幻灯片指示器。在 `concatUs.vue` 中优化了招聘信息展示逻辑，使用动态数据渲染职位列表。
417 lines
9.1 KiB
Vue
417 lines
9.1 KiB
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 environment</span>
|
||
<div class="hbform">
|
||
<div class="flex boxgs">
|
||
<div v-for="(item, index) in typeList" @click="openType(item)" :class="typeId == item.id ? 'title active' : 'title'">{{ item.name
|
||
}}</div>
|
||
</div>
|
||
<div class="flex justify-center align-center flex-wrap" style="margin-top: 30px;">
|
||
<div v-for="item in list" class="flex-col box_18s" style="margin-bottom: 20px;">
|
||
<div class="titless">
|
||
<div class="a1s">{{ item.name}}</div>
|
||
<div class="a2s">任职要求请联系HR</div>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div class="bottomss">
|
||
<div>灵睿网络</div>
|
||
<div>{{ item.release_time_text }}</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()
|
||
})
|
||
getType();
|
||
})
|
||
const openType = (item: any) => {
|
||
typeId.value = item.id;
|
||
getList();
|
||
}
|
||
const typeId = ref(0)
|
||
const typeList = ref([])
|
||
const getType = () => {
|
||
$api.post("/api/home.recruitment_information/cate", { page: 1, size: 100 })
|
||
.then((res: any) => {
|
||
console.log(res);
|
||
typeId.value = res.data.data.list[0].id;
|
||
typeList.value = res.data.data.list;
|
||
getList();
|
||
})
|
||
.catch((err) => {
|
||
console.dir(err)
|
||
})
|
||
}
|
||
const list = ref([])
|
||
const getList = () => {
|
||
$api.get("/api/home.recruitment_information/index?cate_id="+typeId.value)
|
||
.then((res: any) => {
|
||
console.log(res)
|
||
list.value = res.data.data.list
|
||
})
|
||
.catch((err) => {
|
||
console.dir(err)
|
||
})
|
||
}
|
||
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%;
|
||
background: #F8F8F8;
|
||
justify-content: flex-center;
|
||
padding-bottom: 40px;
|
||
}
|
||
|
||
.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;
|
||
cursor: pointer;
|
||
|
||
&.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;
|
||
}
|
||
&:hover {
|
||
cursor: pointer;
|
||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
|
||
}
|
||
}
|
||
</style>
|