From 8faf9a16d64164f1a51c38363e523a5532dd0400 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A6=86=E9=92=B1=E8=90=BD=E5=B0=BD=E6=A7=BF=E8=8A=B1?= =?UTF-8?q?=E7=A8=80?= <2675540038@qq.com> Date: Wed, 14 May 2025 18:10:58 +0800 Subject: [PATCH] =?UTF-8?q?feat(UI):=20=E6=B7=BB=E5=8A=A0=E6=82=AC?= =?UTF-8?q?=E5=81=9C=E6=95=88=E6=9E=9C=E5=92=8C=E5=8A=A8=E6=80=81=E5=B9=BB?= =?UTF-8?q?=E7=81=AF=E7=89=87=E6=8C=87=E7=A4=BA=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 在 `index.css` 中添加了 `.text-group_3` 和 `.text-group_3_3` 的悬停效果，修改了 `index.vue` 中的类名和样式，并添加了动态幻灯片指示器。在 `concatUs.vue` 中优化了招聘信息展示逻辑，使用动态数据渲染职位列表。 --- assets/index.css | 19 ++++ pages/concatUs.vue | 240 +++++++++++++++++++++++++-------------------- pages/index.vue | 42 ++++---- 3 files changed, 176 insertions(+), 125 deletions(-) diff --git a/assets/index.css b/assets/index.css index 8d6e821..e648967 100644 --- a/assets/index.css +++ b/assets/index.css @@ -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 { diff --git a/pages/concatUs.vue b/pages/concatUs.vue index 6068aca..5e89ceb 100644 --- a/pages/concatUs.vue +++ b/pages/concatUs.vue @@ -27,10 +27,10 @@
- +
- +
@@ -61,47 +61,24 @@ Company environment
-
影视类
-
技术开发类
-
商务类
+
{{ item.name + }}
-
-
+
+
-
移动端跨平台开发工程师
+
{{ item.name}}
任职要求请联系HR
灵睿网络
-
2025-04-06 14:30
-
-
-
-
-
移动端跨平台开发工程师
-
任职要求请联系HR
-
-
-
-
灵睿网络
-
2025-04-06 14:30
-
-
-
-
-
移动端跨平台开发工程师
-
任职要求请联系HR
-
-
-
-
灵睿网络
-
2025-04-06 14:30
+
{{ item.release_time_text }}
- +
@@ -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); + } } diff --git a/pages/index.vue b/pages/index.vue index bfac3e6..a914fd3 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -133,13 +133,13 @@
-
+
-
- 智慧化解决方案 - +
+ 智慧化解决方案 + 利用物联网、大数据、人工智能等前沿技术，提供智慧化解决方案
@@ -168,7 +168,7 @@
-
+
全媒体推广解决方案 覆盖各大主流平台定制【流量矩阵+内容策略+效果追踪】一体化方案 @@ -180,9 +180,9 @@
-
- 品牌账号代运营 - +
+ 品牌账号代运营 + 全链路赋能品牌增长，内容+策略+数据 · 打造品效合一的社交资产
@@ -192,7 +192,7 @@
-
+
线上线下活动策划 专业守护数据，防御威胁，护航企业数字安全 @@ -204,7 +204,7 @@
-
+
互联网新闻发布 整合全网权威渠道，依托海量优质媒体资源，定制新闻发布策略 @@ -212,19 +212,17 @@
-
+
-
- IP孵化与达人合作 - +
+ IP孵化与达人合作 + 深度孵化+精准匹配，内容资产×流量裂变 · 打造IP与达人的共生生态
- -
@@ -274,9 +272,10 @@
-->
-
-
-
+
+
@@ -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(); // 表单数据