feat:作业纸

2026-10-23 16:53:22 +08:00
parent fe1074e3f0
commit 98dc338848
14 changed files with 757 additions and 247 deletions
@@ -77,7 +77,7 @@ export const HOME_NOTICES: HomeNotice[] = [
    },
    {
        id: `update-${APP_VERSION}`,
-        text: `${APP_VERSION} 上线：新增幼儿认识时钟，连线练习题`,
+        text: `${APP_VERSION} 上线：新增作业纸`,
        path: '/mathPages/clockReading/clockReading?id=clock-connect',
    },
 ];
@@ -134,18 +134,17 @@
    }
 }

-.home-hero-placeholder {
-    margin: @section-gap @page-padding-x 0;
-    height: 450rpx;
-    border-radius: 40rpx;
-    background: rgba(50, 46, 37, 0.04);
+/** 紧凑预览轮播：按发布时仅裁头部后的比例展示，标题悬浮于图内。 */
+.home-hero-gallery {
+    margin-top: 16rpx;
+    background: radial-gradient(ellipse at center, #f3e8cc 0%, @bg-page 70%);
 }

-/** 首页顶部「精选」swiper 轮播 */
 .home-hero-swiper {
-    margin-top: 16rpx;
    width: 100%;
-    height: 450rpx;
+    // 单张宽 750 - 156 * 2 - 16 * 2 = 406rpx；裁头后预览约高 500rpx。
+    // 包含上下阴影留白，不再给副标题、年龄等信息预留高度。
+    height: 548rpx;
 }

 .home-hero-swiper-item {
@@ -153,115 +152,134 @@
 }

 .home-hero-card-wrap {
-    padding: 24rpx;
+    padding: 16rpx 16rpx 28rpx;
    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;
+    transform-origin: center center;
+    transform: translateY(12rpx) scale(0.88);
+    opacity: 0.55;
+    transition:
+        transform 0.45s ease,
+        opacity 0.45s ease;
 }

 .home-hero-card-wrap--active {
-    transform: scale(1);
+    transform: translateY(0) scale(1);
    opacity: 1;
 }

 .home-hero-card {
    width: 100%;
-    border-radius: 32rpx;
-    overflow: visible;
+    position: relative;
+    border-radius: 16rpx;
+    overflow: hidden;
    background: #ffffff;
-    box-shadow: 0 10rpx 28rpx rgba(50, 46, 37, 0.08);
+    box-shadow:
+        0 12rpx 30rpx rgba(96, 75, 33, 0.12),
+        0 2rpx 6rpx rgba(96, 75, 33, 0.06);
 }

 .home-hero-card__top {
-    height: 260rpx;
+    width: 100%;
+    height: 0;
+    // 与 debugPublish 的 header-only 一致：595 × (842 - 110)。
+    padding-top: 123.02521%;
    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    /* 顶部背景用自身圆角裁切，替代 card 的 overflow: hidden */
-    border-top-left-radius: 32rpx;
-    border-top-right-radius: 32rpx;
    overflow: hidden;
-    border-bottom: 1rpx solid rgba(50, 46, 37, 0.08);
-    background: #f5edd8;
+    background: #ffffff;
 }

 .home-hero-card__cover {
+    position: absolute;
+    left: 0;
+    top: 0;
    width: 100%;
    height: 100%;
    display: block;
-    object-fit: cover;
+    object-fit: contain;
+}
+
+.home-hero-card__fallback {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 24rpx;
+    background: #fffdf7;
 }

 .home-hero-card__icon {
-    font-size: 96rpx;
-    line-height: 1;
+    font-size: 100rpx;
+    line-height: 1.2;
 }

-.home-hero-card__badge {
+.home-hero-card__title-overlay {
    position: absolute;
-    top: 24rpx;
-    right: 24rpx;
-    padding: 8rpx 18rpx;
-    border-radius: 999rpx;
-    background: rgba(50, 46, 37, 0.12);
-    font-size: 22rpx;
-    color: @text-title;
-    font-weight: 600;
-}
-
-.home-hero-card__body {
-    padding: 28rpx @page-padding-inner-x 30rpx;
-}
-
-.home-hero-card__title-row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    gap: 16rpx;
-    /* 允许 flex 子项在文本过长时正确截断 */
-    min-width: 0;
+    left: 12rpx;
+    right: 12rpx;
+    bottom: 12rpx;
+    padding: 10rpx 16rpx;
+    border-radius: 12rpx;
+    background: rgba(255, 252, 244, 0.94);
+    box-shadow: 0 2rpx 12rpx rgba(50, 46, 37, 0.08);
+    pointer-events: none;
 }

 .home-hero-card__title {
-    font-size: 34rpx;
-    line-height: 1.35;
+    display: block;
    color: @text-title;
+    font-size: 28rpx;
+    line-height: 40rpx;
    font-weight: 700;
-    margin: 0;
-    flex: 1;
-    min-width: 0;
-    /* 标题与 meta 同行：超出后省略号（避免高度抖动） */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
 }

-.home-hero-card__sub {
-    margin-top: 10rpx;
-    font-size: 24rpx;
-    line-height: 1.4;
-    color: @text-secondary;
-    /* 第二行：超出后省略号 */
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+.home-hero-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16rpx;
+    height: 32rpx;
 }

+.home-hero-pagination__dots {
+    display: flex;
+    align-items: center;
+}

-.home-hero-card__meta {
-    margin: 0;
-    font-size: 22rpx;
+.home-hero-pagination__target {
+    min-width: 32rpx;
+    height: 40rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.home-hero-pagination__dot {
+    width: 8rpx;
+    height: 8rpx;
+    border-radius: 999rpx;
+    background: #d5c9ad;
+    transition:
+        width 0.3s ease,
+        background 0.3s ease;
+}
+
+.home-hero-pagination__dot--active {
+    width: 28rpx;
+    background: @text-title;
+}
+
+.home-hero-pagination__count {
    color: @text-gray;
-    /* meta 也做单行截断，防止极端长文本把布局挤爆 */
-    flex: 0 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    font-size: 20rpx;
+    line-height: 28rpx;
 }

 .home-section-panel {
@@ -477,7 +495,6 @@
    display: block;
 }

-
 .home-page .category-tabs {
    background: @bg-page;
 }
@@ -512,11 +529,11 @@
    pointer-events: none;

    .home-hero-card__top {
+        background: #f3efe5;
        animation: home-skeleton-pulse 1.5s ease-in-out infinite;
    }

-    .home-hero-card__title,
-    .home-hero-card__sub {
+    .home-hero-card__title {
        background: #e8e2d5;
        border-radius: 8rpx;
        color: transparent;
@@ -527,11 +544,6 @@
        width: 50%;
        height: 36rpx;
    }
-
-    .home-hero-card__sub {
-        width: 70%;
-        height: 26rpx;
-    }
 }

 .home-hot-card--skeleton {
@@ -558,4 +570,4 @@
        width: 65%;
        height: 24rpx;
    }
-}
+}
@@ -279,6 +279,19 @@ Page({
        this.setData({ heroSwiperCurrent: e.detail.current });
    },

+    /** 指示点与手势共用 swiper current，单张内容不自动轮播。 */
+    onTapHeroDot(e: WechatMiniprogram.TouchEvent) {
+        const index = Number(e.currentTarget.dataset.index);
+        if (
+            this.data.loading ||
+            !Number.isInteger(index) ||
+            index < 0 ||
+            index >= this.data.featuredItems.length
+        )
+            return;
+        this.setData({ heroSwiperCurrent: index });
+    },
+
    onTabChange(e: WechatMiniprogram.CustomEvent) {
        const id = e.detail.id as string | undefined;
        if (!id) return;
@@ -59,63 +59,76 @@
            </view>
        </view>

-        <swiper
-            class="home-hero-swiper"
-            previous-margin="80rpx"
-            next-margin="80rpx"
-            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
+            wx:if="{{loading || featuredItems.length > 0}}"
+            class="home-hero-gallery">
+            <!-- 按发布时仅裁页眉后的画幅展示，标题悬浮，不额外占用卡片高度。 -->
+            <swiper
+                class="home-hero-swiper"
+                previous-margin="156rpx"
+                next-margin="156rpx"
+                current="{{heroSwiperCurrent}}"
+                circular="{{featuredItems.length > 1 && !loading}}"
+                autoplay="{{featuredItems.length > 1 && !loading}}"
+                interval="{{5200}}"
+                duration="{{500}}"
+                easing-function="easeInOutCubic"
+                bindchange="onHeroSwiperChange">
+                <swiper-item
+                    wx:for="{{featuredItems}}"
+                    wx:key="id"
+                    class="home-hero-swiper-item">
                    <view
-                        class="home-hero-card {{item.skeleton ? 'home-hero-card--skeleton' : ''}}"
-                        data-title="{{item.title}}"
-                        data-path="{{item.path}}"
-                        bindtap="{{item.skeleton ? '' : 'onTapFeatured'}}">
-                        <view class="home-hero-card__top">
-                            <image
-                                wx:if="{{!item.skeleton && item.previewImg}}"
-                                class="home-hero-card__cover"
-                                src="{{item.previewImg}}"
-                                mode="aspectFill" />
-                            <text
-                                wx:if="{{!item.skeleton && !item.previewImg}}"
-                                class="home-hero-card__icon"
-                                >{{item.icon}}</text
-                            >
-                            <text
-                                wx:if="{{item.badge}}"
-                                class="home-hero-card__badge"
-                                >{{item.badge}}</text
-                            >
-                        </view>
-                        <view class="home-hero-card__body">
-                            <view class="home-hero-card__title-row">
+                        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}}"
+                            bindtap="{{item.skeleton ? '' : 'onTapFeatured'}}">
+                            <view class="home-hero-card__top">
+                                <image
+                                    wx:if="{{!item.skeleton && item.previewImg}}"
+                                    class="home-hero-card__cover"
+                                    src="{{item.previewImg}}"
+                                    mode="aspectFit" />
+                                <view
+                                    wx:if="{{!item.skeleton && !item.previewImg}}"
+                                    class="home-hero-card__fallback">
+                                    <text class="home-hero-card__icon"
+                                        >{{item.icon}}</text
+                                    >
+                                </view>
+                            </view>
+                            <view class="home-hero-card__title-overlay">
                                <text class="home-hero-card__title"
                                    >{{item.title}}</text
                                >
-                                <text
-                                    wx:if="{{!item.skeleton}}"
-                                    class="home-hero-card__meta"
-                                    >{{item.ageBand}}·{{item.difficulty}}</text
-                                >
                            </view>
-                            <text class="home-hero-card__sub"
-                                >{{item.subtitle}}</text
-                            >
                        </view>
                    </view>
+                </swiper-item>
+            </swiper>
+            <view
+                wx:if="{{!loading && featuredItems.length > 1}}"
+                class="home-hero-pagination">
+                <view class="home-hero-pagination__dots">
+                    <view
+                        wx:for="{{featuredItems}}"
+                        wx:key="id"
+                        class="home-hero-pagination__target"
+                        data-index="{{index}}"
+                        bindtap="onTapHeroDot"
+                        aria-role="button"
+                        aria-label="{{'查看第' + (index + 1) + '张练习纸'}}">
+                        <view
+                            class="home-hero-pagination__dot {{heroSwiperCurrent === index ? 'home-hero-pagination__dot--active' : ''}}" />
+                    </view>
                </view>
-            </swiper-item>
-        </swiper>
+                <text class="home-hero-pagination__count"
+                    >{{heroSwiperCurrent + 1}} / {{featuredItems.length}}</text
+                >
+            </view>
+        </view>

        <view class="home-section-panel">
            <view class="home-section-head">