wo123/lingrui-web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(UI): 添加悬停效果和动态幻灯片指示器

Browse Source 
在 `index.css` 中添加了 `.text-group_3` 和 `.text-group_3_3` 的悬停效果，修改了 `index.vue` 中的类名和样式，并添加了动态幻灯片指示器。在 `concatUs.vue` 中优化了招聘信息展示逻辑，使用动态数据渲染职位列表。
This commit is contained in:
王创世 2025-05-14 18:10:58 +08:00
parent 626e876e4f
commit 8faf9a16d6
3 changed files with 176 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
assets/index.css
View File

@ -478,6 +478,25 @@
.text-group_3 { .text-group_3 {
width: 427px; width: 427px;
height: 63px; 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 { .text_18 {

234
pages/concatUs.vue
View File

@ -61,42 +61,19 @@
<span class="text_54">Company&nbsp;environment</span> <span class="text_54">Company&nbsp;environment</span>
<div class="hbform"> <div class="hbform">
<div class="flex boxgs"> <div class="flex boxgs">
<div class="title active">影视类</div> <div v-for="(item, index) in typeList" @click="openType(item)" :class="typeId == item.id ? 'title active' : 'title'">{{ item.name
<div class="title">技术开发类</div> }}</div>
<div class="title">商务类</div>
</div> </div>
<div class="flex justify-center align-center" style="margin-top: 30px;"> <div class="flex justify-center align-center flex-wrap" style="margin-top: 30px;">
<div class="flex-col box_18s"> <div v-for="item in list" class="flex-col box_18s" style="margin-bottom: 20px;">
<div class="titless"> <div class="titless">
<div class="a1s">移动端跨平台开发工程师</div> <div class="a1s">{{ item.name}}</div>
<div class="a2s">任职要求请联系HR</div> <div class="a2s">任职要求请联系HR</div>
</div> </div>
<div class="line"></div> <div class="line"></div>
<div class="bottomss"> <div class="bottomss">
<div>灵睿网络</div> <div>灵睿网络</div>
<div>2025-04-06 14:30</div> <div>{{ item.release_time_text }}</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>
@ -110,10 +87,10 @@
import { Swiper, SwiperSlide } from 'swiper/vue' import { Swiper, SwiperSlide } from 'swiper/vue'
import { nextTick, ref } from 'vue' import { nextTick, ref } from 'vue'
import 'swiper/css' 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 ScrollReveal from 'scrollreveal';
import { NNumberAnimation } from 'naive-ui' import { NNumberAnimation } from 'naive-ui'
let modules = [Autoplay, A11y, EffectCoverflow,EffectFade]; let modules = [Autoplay, A11y, EffectCoverflow, EffectFade];
import "swiper/css"; import "swiper/css";
import "swiper/css/navigation"; import "swiper/css/navigation";
@ -143,7 +120,7 @@ const swiperOptionsNews = {
speed: 500, speed: 500,
effect: 'fade', effect: 'fade',
loop: true, loop: true,
modules: [EffectFade,Autoplay,Navigation], modules: [EffectFade, Autoplay, Navigation],
navigation: { navigation: {
nextEl: '#swipen_prev', nextEl: '#swipen_prev',
prevEl: '#swipen_next', prevEl: '#swipen_next',
@ -161,7 +138,37 @@ onMounted(() => {
nextTick(() => { nextTick(() => {
animate() 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 numberAnimationInstRef = ref()
const numberAnimationInstRefKH = ref() const numberAnimationInstRefKH = ref()
const numberAnimationInstRefJS = ref() const numberAnimationInstRefJS = ref()
@ -253,41 +260,47 @@ const animate = () => {
} }
.group_666 .swiper-slide img { .group_666 .swiper-slide img {
width: 100%; width: 100%;
height: 500px; height: 500px;
height: auto; height: auto;
transition: 1s linear 2s; transition: 1s linear 2s;
transform: scale(1.1, 1.1); transform: scale(1.1, 1.1);
} }
.group_666 .swiper-slide-active img, .group_666 .swiper-slide-active img,
.swiper-slide-duplicate-active img { .swiper-slide-duplicate-active img {
transition: 6s linear; transition: 6s linear;
transform: scale(1, 1); transform: scale(1, 1);
} }
.bottom_imgs{
.bottom_imgs {
background: url(/public/img/qall.png); background: url(/public/img/qall.png);
width: 1230px; width: 1230px;
height: 272px; height: 272px;
background-size: 100%; background-size: 100%;
} }
.content_box{
background: url(/public/img/m1.png);; .content_box {
width: 561px;height: 521px; background: url(/public/img/m1.png);
;
width: 561px;
height: 521px;
z-index: 1; z-index: 1;
position: absolute; position: absolute;
right: -12px; right: -12px;
bottom: -13px; bottom: -13px;
background-size: 100%; background-size: 100%;
} }
.section_1s { .section_1s {
height: 360px; height: 360px;
background: url(public/img/allpeople.png) 100% no-repeat; background: url(public/img/allpeople.png) 100% no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 585px; width: 585px;
z-index: 10; z-index: 10;
} }
.text_13s{
.text_13s {
width: 261px; width: 261px;
height: 48px; height: 48px;
line-height: 44px; line-height: 44px;
@ -299,33 +312,37 @@ const animate = () => {
font-weight: 400; font-weight: 400;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
margin-right:22px; margin-right: 22px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
.imgs{
.imgs {
width: 24px; width: 24px;
height: 24px; height: 24px;
margin-right: 10px; margin-right: 10px;
} }
} }
.box_17s { .box_17s {
width: 100%; width: 100%;
height: 490px; background: #F8F8F8;
background: #F8F8F8; justify-content: flex-center;
justify-content: flex-center; padding-bottom: 40px;
} }
.hbform{ .hbform {
width: 100%; width: 100%;
} }
.boxgs{
.boxgs {
width: 100%; width: 100%;
margin-top: 30px; margin-top: 30px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.title{
.title {
width: 130px; width: 130px;
height: 48px; height: 48px;
background: #FFFFFF; background: #FFFFFF;
@ -336,53 +353,64 @@ const animate = () => {
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
color: #222222; color: #222222;
&.active{ cursor: pointer;
background: linear-gradient( 360deg, #FC7428 0%, #FF9357 100%);
&.active {
background: linear-gradient(360deg, #FC7428 0%, #FF9357 100%);
color: #FFFFFF; color: #FFFFFF;
} }
} }
} }
.box_18s { .box_18s {
width: 387px; width: 387px;
height: 149px; height: 149px;
background: url(public/img/lianxiyp.png) 100% no-repeat; background: url(public/img/lianxiyp.png) 100% no-repeat;
z-index: 10; z-index: 10;
justify-content: center; justify-content: center;
// align-items: center; // align-items: center;
margin-right: 20px; margin-right: 20px;
.line{
width: 347px; .line {
height: 1px; width: 347px;
background: #D8D8D8; height: 1px;
margin: 0 auto; 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; .titless {
font-family: Microsoft YaHei, Microsoft YaHei; width: 100%;
font-weight: 400; padding-top: 20px;
font-size: 12px; 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; color: #768597;
} }
} &:hover {
.bottomss{ cursor: pointer;
width: 100%; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
display: flex; }
justify-content: space-between;
align-items: center;
padding: 20px;
color: #768597;
}
} }
</style> </style>

42
pages/index.vue
View File

@ -133,13 +133,13 @@
</div> </div>
</div> </div>
<div class="group_10 flex-col"></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"> <div class="image-wrapper_5 flex-col">
<img class="label_3" referrerpolicy="no-referrer" src="public/img/yekuogongdianfangan.png" /> <img class="label_3" referrerpolicy="no-referrer" src="public/img/yekuogongdianfangan.png" />
</div> </div>
<div class="text-group_5 flex-col justify-between"> <div class="text-group_3 flex-col justify-between">
<span class="text_22">智慧化解决方案</span> <span class="text_18">智慧化解决方案</span>
<span class="text_23"> <span class="text_19">
利用物联网、大数据、人工智能等前沿技术，提供智慧化解决方案 利用物联网、大数据、人工智能等前沿技术，提供智慧化解决方案
</span> </span>
</div> </div>
@ -168,7 +168,7 @@
<div class="image-wrapper_5 flex-col"> <div class="image-wrapper_5 flex-col">
<img class="label_3" referrerpolicy="no-referrer" src="public/img/quanmeiti.png" /> <img class="label_3" referrerpolicy="no-referrer" src="public/img/quanmeiti.png" />
</div> </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_18">全媒体推广解决方案</span>
<span class="text_19"> <span class="text_19">
覆盖各大主流平台定制【流量矩阵+内容策略+效果追踪】一体化方案 覆盖各大主流平台定制【流量矩阵+内容策略+效果追踪】一体化方案
@ -180,9 +180,9 @@
<div class="image-wrapper_5 flex-col"> <div class="image-wrapper_5 flex-col">
<img class="label_3" referrerpolicy="no-referrer" src="public/img/pingpai.png" /> <img class="label_3" referrerpolicy="no-referrer" src="public/img/pingpai.png" />
</div> </div>
<div class="text-group_3 flex-col justify-between"> <div class="text-group_3_3 flex-col justify-between">
<span class="text_18" style="color: #FC7428;">品牌账号代运营</span> <span class="text_18">品牌账号代运营</span>
<span class="text_19" style="color: #FC7428;"> <span class="text_19">
全链路赋能品牌增长，内容+策略+数据 · 打造品效合一的社交资产 全链路赋能品牌增长，内容+策略+数据 · 打造品效合一的社交资产
</span> </span>
</div> </div>
@ -192,7 +192,7 @@
<div class="image-wrapper_5 flex-col"> <div class="image-wrapper_5 flex-col">
<img class="label_3" referrerpolicy="no-referrer" src="public/img/xianshang.png" /> <img class="label_3" referrerpolicy="no-referrer" src="public/img/xianshang.png" />
</div> </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_18">线上线下活动策划</span>
<span class="text_19"> <span class="text_19">
专业守护数据，防御威胁，护航企业数字安全 专业守护数据，防御威胁，护航企业数字安全
@ -204,7 +204,7 @@
<div class="image-wrapper_5 flex-col"> <div class="image-wrapper_5 flex-col">
<img class="label_3" referrerpolicy="no-referrer" src="public/img/news.png" /> <img class="label_3" referrerpolicy="no-referrer" src="public/img/news.png" />
</div> </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_18">互联网新闻发布</span>
<span class="text_19"> <span class="text_19">
整合全网权威渠道，依托海量优质媒体资源，定制新闻发布策略 整合全网权威渠道，依托海量优质媒体资源，定制新闻发布策略
@ -212,19 +212,17 @@
</div> </div>
</div> </div>
<div class="group_10 flex-col"></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"> <div class="image-wrapper_5 flex-col">
<img class="label_3" referrerpolicy="no-referrer" src="public/img/daren.png" /> <img class="label_3" referrerpolicy="no-referrer" src="public/img/daren.png" />
</div> </div>
<div class="text-group_5 flex-col justify-between"> <div class="text-group_3_3 flex-col justify-between">
<span class="text_22">IP孵化与达人合作</span> <span class="text_18">IP孵化与达人合作</span>
<span class="text_23"> <span class="text_19">
深度孵化+精准匹配，内容资产×流量裂变 · 打造IP与达人的共生生态 深度孵化+精准匹配，内容资产×流量裂变 · 打造IP与达人的共生生态
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -274,9 +272,10 @@
<img src="public/img/opr.png"> <img src="public/img/opr.png">
</div> --> </div> -->
<div class="flex-row justify-center align-center absolute w-full bottom-[-50px]" style="gap: 30px;"> <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 v-for="(_, index) in 3" :key="index"
<div style="width: 25px;height:5px;background-color: #C1C1C1;"></div> style="width: 25px; height: 5px;"
<div style="width: 25px;height:5px;background-color: #C1C1C1;"></div> :style="{ backgroundColor: activeSlideIndex === index ? '#fc7428' : '#C1C1C1' }">
</div>
</div> </div>
</div> </div>
</div> </div>
@ -492,6 +491,11 @@ const swiperOptionsNews = {
let vesSwiper: any = null let vesSwiper: any = null
const onSwiperExp = (swiper: any) => { const onSwiperExp = (swiper: any) => {
vesSwiper = swiper vesSwiper = swiper
// 监听幻灯片变化事件
swiper.on('slideChange', () => {
// 更新当前活动幻灯片索引
activeSlideIndex.value = swiper.realIndex % 3
})
} }
const swiper_exp = ref(); const swiper_exp = ref();
// 表单数据 // 表单数据