From 0fcc19f3f80136c5c4c2d16c78a9a9f1186a8ff4 Mon Sep 17 00:00:00 2001 From: xuxin <15279969124@163.com> Date: Wed, 3 Jun 2026 12:12:59 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5UI=E5=BE=AE=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/pages/home.scss | 35 ++++++++++++++++++------------- src/views/Home.vue | 22 ++++++++++++------- 2 files changed, 34 insertions(+), 23 deletions(-) diff --git a/src/assets/styles/pages/home.scss b/src/assets/styles/pages/home.scss index 97913bf..e36984a 100644 --- a/src/assets/styles/pages/home.scss +++ b/src/assets/styles/pages/home.scss @@ -24,7 +24,7 @@ // 导航内容容器 — 居中 12rem 宽 &__inner { - width: 12rem; + width: 12.40rem; margin: 0 auto; height: 0.72rem; padding: 0.2rem; @@ -454,7 +454,7 @@ box-shadow: 0 10px 40px rgba(82, 202, 209, 0.12); backdrop-filter: blur(100px); border-radius: 0.4rem; - padding: 0.64rem; + padding: 0.64rem 0; } // 岗位数量统计 — 横向排列 @@ -465,18 +465,16 @@ margin-bottom: 0.6rem; } - // 岗位滚动卡片容器 + // 岗位滚动卡片容器 — 无缝轮播 &__scroll { overflow: hidden; - >div{ + + .ticker-track { display: flex; gap: 0.16rem; - overflow-x: auto; - padding-bottom: 0.1rem; - &::-webkit-scrollbar { display: none; } - margin-left: -1.2rem; + width: max-content; + animation: ticker-scroll 20s linear infinite; } - } } @@ -484,7 +482,7 @@ .showcase-stat { text-align: center; &__num { - font-size: 0.6rem; + font-size: 0.48rem; line-height: 0.6rem; font-weight: 900; color: #1d1d1d; @@ -608,6 +606,12 @@ } } + // 无缝轮播关键帧 — 滚动半程（第一组内容宽度） + @keyframes ticker-scroll { + 0% { transform: translateX(0); } + 100% { transform: translateX(-50%); } + } + // ---- 功能1：匹配卡片 ---- .feature-match-card { background: rgba(255, 255, 255, 0.9); @@ -1260,7 +1264,7 @@ // ==================== 岗位搜索入口 ==================== .home-job-search { - padding: 0.8rem 0; + padding-bottom: 0.8rem; // 内容容器 &__inner { @@ -1272,14 +1276,14 @@ line-height: 0.36rem; font-weight: 600; text-align: center; - margin-bottom: 0.4rem; + margin-bottom: 0.6rem; } } // 筛选条件横向排列 &__filters { display: flex; - gap: 0.24rem; + gap: 0.60rem; justify-content: center; align-items: center; } @@ -1308,7 +1312,8 @@ // 搜索按钮 .filter-btn { - height: 0.48rem; + width: 1.84rem; + height: 0.56rem; padding: 0 0.4rem; border-radius: 0.16rem; background: #111; @@ -1431,7 +1436,7 @@ // ==================== 底部 CTA 行动号召 ==================== .home-cta { - padding: 0 0 1.2rem; + padding: 0 0 1.0rem; width: 100%; // CTA 内容区 diff --git a/src/views/Home.vue b/src/views/Home.vue index 41e478b..e671fd1 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -6,7 +6,7 @@
-
+