首页UI微调

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;
+        width: max-content;
-        padding-bottom: 0.1rem;
+        animation: ticker-scroll 20s linear infinite;
-        &::-webkit-scrollbar { display: none; }
-        margin-left: -1.2rem;
       }
-
     }
   }
 
@@ -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 内容区

src/views/Home.vue

@@ -6,7 +6,7 @@
       <div class="home-hero__orb home-hero__orb--top"></div>
       <div class="home-hero__orb home-hero__orb--bottom"></div>
       <!-- 顶部导航栏 -->
-      <header class="home-nav mt32">
+      <header class="home-nav mt0">
         <div class="home-nav__inner" :class="{ 'home-nav__inner--scorlled': isScrolled }">
           <div class="home-nav__logo">
             <!-- 导航栏Logo图片 -->
@@ -82,17 +82,22 @@
         <div class="home-jobs-showcase__box">
           <div class="home-jobs-showcase__stats">
             <div class="showcase-stat">
-              <div class="showcase-stat__num"><span class="accent">40</span><span class="accent">万</span>+</div>
+              <div class="showcase-stat__num"><span><span class="accent">40</span><span class="accent">万</span></span><span class="fs32">+</span></div>
               <div class="showcase-stat__label">岗位总数</div>
             </div>
             <div class="showcase-stat">
-              <div class="showcase-stat__num"><span class="accent">{{ dailyJobCount }}</span>个岗位</div>
+              <div class="showcase-stat__num"><span class="accent">{{ dailyJobCount }}</span><span class="fs32">个</span></div>
               <div class="showcase-stat__label">今日更新</div>
             </div>
           </div>
           <div class="home-jobs-showcase__scroll">
-            <div>
+            <!-- 无缝轮播：两组相同内容拼接，动画滚完第一组后无缝衔接 -->
-              <div class="job-ticker" v-for="(job, i) in tickerJobs" :key="i">
+            <div class="ticker-track">
+              <div class="job-ticker" v-for="(job, i) in tickerJobs" :key="'a' + i">
+                <span class="job-ticker__company">{{ job.company }}·{{ job.time }}</span>
+                <span class="job-ticker__title">{{ job.title }}</span>
+              </div>
+              <div class="job-ticker" v-for="(job, i) in tickerJobs" :key="'b' + i">
                 <span class="job-ticker__company">{{ job.company }}·{{ job.time }}</span>
                 <span class="job-ticker__title">{{ job.title }}</span>
               </div>
@@ -222,7 +227,7 @@
       <div class="home-feature__inner">
         <div class="home-feature__text">
           <h2>名企内推<br/>人脉直通</h2>
-          <p>实实时获取名企最新内推信息，自动填写网申内推<br/>码，简历更快到达HR。</p>
+          <p>实时获取名企最新内推信息，自动填写网申内推<br/>码，简历更快到达HR。</p>
           <button class="home-feature__btn" @click="router.push('/jobs')">
             <img class="w20 h20" src="@/assets/images/home/blue-horn-icon-01.png" alt="">
             <span>立即投递</span>
@@ -556,8 +561,9 @@ const homeCategoryIds = computed<number[]>(() => store.state.jobIntention.catego
 
 /** 选择器触发按钮样式 — 匹配首页 .filter-select 的外观 */
 const filterTriggerStyle = {
-  width: '2.35rem',
+  width: '2.80rem',
-  height: '0.48rem',
+  'max-width': 'none',
+  height: '0.56rem',
   'border-radius': '0.16rem',
   border: '1px solid #e5e7eb',
   padding: '0 0.2rem',