Compare commits
4 Commits
e838b617b9
...
8faf9a16d6
| Author | SHA1 | Date | |
|---|---|---|---|
| 8faf9a16d6 | |||
| 626e876e4f | |||
| 0690de572c | |||
| 25ab79e93d |
@ -478,6 +478,25 @@
|
||||
.text-group_3 {
|
||||
width: 427px;
|
||||
height: 63px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.text-group_3:hover .text_18{
|
||||
color: #0256FF!important;
|
||||
}
|
||||
.text-group_3:hover .text_19{
|
||||
color: #0256FF!important;
|
||||
}
|
||||
|
||||
.text-group_3_3 {
|
||||
width: 427px;
|
||||
height: 63px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.text-group_3_3:hover .text_18{
|
||||
color: #FC7428!important;
|
||||
}
|
||||
.text-group_3_3:hover .text_19{
|
||||
color: #FC7428!important;
|
||||
}
|
||||
|
||||
.text_18 {
|
||||
|
||||
@ -27,10 +27,10 @@
|
||||
<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">
|
||||
@ -61,47 +61,24 @@
|
||||
<span class="text_54">Company environment</span>
|
||||
<div class="hbform">
|
||||
<div class="flex boxgs">
|
||||
<div class="title active">影视类</div>
|
||||
<div class="title">技术开发类</div>
|
||||
<div class="title">商务类</div>
|
||||
<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" style="margin-top: 30px;">
|
||||
<div class="flex-col box_18s">
|
||||
<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">移动端跨平台开发工程师</div>
|
||||
<div class="a1s">{{ item.name}}</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>{{ item.release_time_text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -110,10 +87,10 @@
|
||||
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 { 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];
|
||||
let modules = [Autoplay, A11y, EffectCoverflow, EffectFade];
|
||||
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
@ -143,7 +120,7 @@ const swiperOptionsNews = {
|
||||
speed: 500,
|
||||
effect: 'fade',
|
||||
loop: true,
|
||||
modules: [EffectFade,Autoplay,Navigation],
|
||||
modules: [EffectFade, Autoplay, Navigation],
|
||||
navigation: {
|
||||
nextEl: '#swipen_prev',
|
||||
prevEl: '#swipen_next',
|
||||
@ -161,7 +138,37 @@ 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()
|
||||
@ -253,41 +260,47 @@ const animate = () => {
|
||||
}
|
||||
|
||||
.group_666 .swiper-slide img {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
height: auto;
|
||||
transition: 1s linear 2s;
|
||||
transform: scale(1.1, 1.1);
|
||||
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);
|
||||
transition: 6s linear;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
.bottom_imgs{
|
||||
|
||||
.bottom_imgs {
|
||||
background: url(/public/img/qall.png);
|
||||
width: 1230px;
|
||||
height: 272px;
|
||||
background-size: 100%;
|
||||
height: 272px;
|
||||
background-size: 100%;
|
||||
}
|
||||
.content_box{
|
||||
background: url(/public/img/m1.png);;
|
||||
width: 561px;height: 521px;
|
||||
|
||||
.content_box {
|
||||
background: url(/public/img/m1.png);
|
||||
;
|
||||
width: 561px;
|
||||
height: 521px;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: -12px;
|
||||
bottom: -13px;
|
||||
background-size: 100%;
|
||||
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;
|
||||
height: 360px;
|
||||
background: url(public/img/allpeople.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 585px;
|
||||
z-index: 10;
|
||||
}
|
||||
.text_13s{
|
||||
|
||||
.text_13s {
|
||||
width: 261px;
|
||||
height: 48px;
|
||||
line-height: 44px;
|
||||
@ -299,33 +312,37 @@ const animate = () => {
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
margin-right:22px;
|
||||
margin-right: 22px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
.imgs{
|
||||
|
||||
.imgs {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.box_17s {
|
||||
width: 100%;
|
||||
height: 490px;
|
||||
background: #F8F8F8;
|
||||
justify-content: flex-center;
|
||||
width: 100%;
|
||||
background: #F8F8F8;
|
||||
justify-content: flex-center;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.hbform{
|
||||
.hbform {
|
||||
width: 100%;
|
||||
}
|
||||
.boxgs{
|
||||
|
||||
.boxgs {
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.title{
|
||||
|
||||
.title {
|
||||
width: 130px;
|
||||
height: 48px;
|
||||
background: #FFFFFF;
|
||||
@ -336,53 +353,64 @@ const animate = () => {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: #222222;
|
||||
&.active{
|
||||
background: linear-gradient( 360deg, #FC7428 0%, #FF9357 100%);
|
||||
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;
|
||||
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;
|
||||
}
|
||||
.a2s{
|
||||
margin: 20px 0;
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
|
||||
.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;
|
||||
|
||||
}
|
||||
}
|
||||
.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>
|
||||
|
||||
@ -133,13 +133,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="group_10 flex-col"></div>
|
||||
<div class="group_13 flex-row justify-between">
|
||||
<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_5 flex-col justify-between">
|
||||
<span class="text_22">智慧化解决方案</span>
|
||||
<span class="text_23">
|
||||
<div class="text-group_3 flex-col justify-between">
|
||||
<span class="text_18">智慧化解决方案</span>
|
||||
<span class="text_19">
|
||||
利用物联网、大数据、人工智能等前沿技术，提供智慧化解决方案
|
||||
</span>
|
||||
</div>
|
||||
@ -168,7 +168,7 @@
|
||||
<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">
|
||||
<div class="text-group_3_3 flex-col justify-between">
|
||||
<span class="text_18">全媒体推广解决方案</span>
|
||||
<span class="text_19">
|
||||
覆盖各大主流平台定制【流量矩阵+内容策略+效果追踪】一体化方案
|
||||
@ -180,9 +180,9 @@
|
||||
<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;">
|
||||
<div class="text-group_3_3 flex-col justify-between">
|
||||
<span class="text_18">品牌账号代运营</span>
|
||||
<span class="text_19">
|
||||
全链路赋能品牌增长，内容+策略+数据 · 打造品效合一的社交资产
|
||||
</span>
|
||||
</div>
|
||||
@ -192,7 +192,7 @@
|
||||
<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">
|
||||
<div class="text-group_3_3 flex-col justify-between">
|
||||
<span class="text_18">线上线下活动策划</span>
|
||||
<span class="text_19">
|
||||
专业守护数据，防御威胁，护航企业数字安全
|
||||
@ -204,7 +204,7 @@
|
||||
<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">
|
||||
<div class="text-group_3_3 flex-col justify-between">
|
||||
<span class="text_18">互联网新闻发布</span>
|
||||
<span class="text_19">
|
||||
整合全网权威渠道，依托海量优质媒体资源，定制新闻发布策略
|
||||
@ -212,19 +212,17 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="group_10 flex-col"></div>
|
||||
<div class="group_13 flex-row justify-between">
|
||||
<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_5 flex-col justify-between">
|
||||
<span class="text_22">IP孵化与达人合作</span>
|
||||
<span class="text_23">
|
||||
<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>
|
||||
@ -274,9 +272,10 @@
|
||||
<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 v-for="(_, index) in 3" :key="index"
|
||||
style="width: 25px; height: 5px;"
|
||||
:style="{ backgroundColor: activeSlideIndex === index ? '#fc7428' : '#C1C1C1' }">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -492,6 +491,11 @@ const swiperOptionsNews = {
|
||||
let vesSwiper: any = null
|
||||
const onSwiperExp = (swiper: any) => {
|
||||
vesSwiper = swiper
|
||||
// 监听幻灯片变化事件
|
||||
swiper.on('slideChange', () => {
|
||||
// 更新当前活动幻灯片索引
|
||||
activeSlideIndex.value = swiper.realIndex % 3
|
||||
})
|
||||
}
|
||||
const swiper_exp = ref();
|
||||
// 表单数据
|
||||
|
||||
@ -1129,13 +1129,12 @@ const animate = () => {
|
||||
mobile: true,
|
||||
})
|
||||
//service-item
|
||||
sr.reveal('.service-item', {
|
||||
duration: 800,
|
||||
sr.reveal('.service-container', {
|
||||
origin: 'bottom',
|
||||
delay: 300,
|
||||
opacity: 0,
|
||||
scale: 0.5,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user