feat: 完成首页修改

miniprogram/pages/home/home.less

@@ -45,29 +45,44 @@
 }
 
 .home-tabs-wrap {
-    margin-top: @section-gap;
+    margin-top: 48rpx;
 }
 
 .home-hero-placeholder {
     margin: @section-gap @page-padding-x 0;
-    height: 480rpx;
+    height: 450rpx;
     border-radius: 40rpx;
     background: rgba(50, 46, 37, 0.04);
 }
 
-/** 首页顶部「精选」横滑行（与下方模块 track 列表的 .home-track-row 区分） */
-.home-hero-row {
-    display: inline-flex;
-    flex-direction: row;
-    gap: @section-gap-sm;
-    padding: 24rpx @page-padding-x;
+/** 首页顶部「精选」swiper 轮播 */
+.home-hero-swiper {
+    margin-top: 16rpx;
+    width: 100%;
+    height: 450rpx;
+}
+
+.home-hero-swiper-item {
+    box-sizing: border-box;
+}
+
+.home-hero-card-wrap {
+    padding: 24rpx;
+    box-sizing: border-box;
+    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+        opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transform: scale(0.9);
+    opacity: 0.5;
+}
+
+.home-hero-card-wrap--active {
+    transform: scale(1);
+    opacity: 1;
 }
 
 .home-hero-card {
-    width: 560rpx;
-    flex-shrink: 0;
+    width: 100%;
     border-radius: 32rpx;
-    /* 让阴影不被自身 overflow: hidden 裁切 */
     overflow: visible;
     background: #ffffff;
     box-shadow: 0 10rpx 28rpx rgba(50, 46, 37, 0.08);
@@ -118,7 +133,7 @@
 .home-hero-card__title-row {
     display: flex;
     flex-direction: row;
-    align-items: baseline;
+    align-items: center;
     justify-content: space-between;
     gap: 16rpx;
     /* 允许 flex 子项在文本过长时正确截断 */

miniprogram/pages/home/home.ts

@@ -145,6 +145,7 @@ Page({
         activeTab: 'all',
         ageBands: [] as HomeAgeBandView[],
         activeAgeBand: '3-4' as AgeBandKey,
+        heroSwiperCurrent: 0,
         featuredItems: SKELETON_FEATURED,
         hotRecommends: SKELETON_HOT,
         sections: [] as HomeDisplaySectionView[],
@@ -197,6 +198,10 @@ Page({
 
     // ── Tab & Navigation ──
 
+    onHeroSwiperChange(e: WechatMiniprogram.SwiperChange) {
+        this.setData({ heroSwiperCurrent: e.detail.current });
+    },
+
     onTabChange(e: WechatMiniprogram.CustomEvent) {
         const id = e.detail.id as string | undefined;
         if (!id) return;

miniprogram/pages/home/home.wxml

@@ -2,7 +2,7 @@
     <nav-bar title="" />
 
     <view class="home-body">
-        <view class="home-search-wrap">
+        <!-- <view class="home-search-wrap">
             <view class="home-search">
                 <van-icon
                     name="search"
@@ -13,7 +13,7 @@
                     >{{searchPlaceholder}}</text
                 >
             </view>
-        </view>
+        </view> -->
 
         <view class="home-tabs-wrap">
             <category-tabs
@@ -22,11 +22,23 @@
                 bind:change="onTabChange" />
         </view>
 
-        <scroll-view class="home-track-scroll" scroll-x enable-flex>
-            <view class="home-hero-row">
-                <view
+        <swiper
+            class="home-hero-swiper"
+            previous-margin="100rpx"
+            next-margin="100rpx"
+            circular="{{featuredItems.length > 1 && !loading}}"
+            autoplay="{{!loading}}"
+            interval="{{4000}}"
+            duration="{{600}}"
+            easing-function="easeInOutCubic"
+            bindchange="onHeroSwiperChange">
+            <swiper-item
                 wx:for="{{featuredItems}}"
                 wx:key="id"
+                class="home-hero-swiper-item">
+                <view
+                    class="home-hero-card-wrap {{heroSwiperCurrent === index ? 'home-hero-card-wrap--active' : ''}}">
+                    <view
                         class="home-hero-card {{item.skeleton ? 'home-hero-card--skeleton' : ''}}"
                         data-title="{{item.title}}"
                         data-path="{{item.path}}"
@@ -56,7 +68,7 @@
                                 <text
                                     wx:if="{{!item.skeleton}}"
                                     class="home-hero-card__meta"
-                                >{{item.ageBand}} · {{item.difficulty}}</text
+                                    >{{item.ageBand}}·{{item.difficulty}}</text
                                 >
                             </view>
                             <text class="home-hero-card__sub"
@@ -65,7 +77,8 @@
                         </view>
                     </view>
                 </view>
-        </scroll-view>
+            </swiper-item>
+        </swiper>
 
         <view class="home-section-panel">
             <view class="home-section-head">
@@ -141,9 +154,11 @@
                     </view>
                     <view
                         wx:if="{{!item.skeleton}}"
-                        class="home-hot-card__action"
-                        >
-                        <toy-icon name="arrow-right" size="36rpx" color="#2b2b2b" />
+                        class="home-hot-card__action">
+                        <toy-icon
+                            name="arrow-right"
+                            size="36rpx"
+                            color="#2b2b2b" />
                     </view>
                 </view>
             </view>