diff --git a/miniprogram/components/shared/category-tabs/category-tabs.json b/miniprogram/components3.0/category-tabs/category-tabs.json
similarity index 100%
rename from miniprogram/components/shared/category-tabs/category-tabs.json
rename to miniprogram/components3.0/category-tabs/category-tabs.json
diff --git a/miniprogram/components/shared/category-tabs/category-tabs.less b/miniprogram/components3.0/category-tabs/category-tabs.less
similarity index 96%
rename from miniprogram/components/shared/category-tabs/category-tabs.less
rename to miniprogram/components3.0/category-tabs/category-tabs.less
index 9e47e2f..6327bff 100644
--- a/miniprogram/components/shared/category-tabs/category-tabs.less
+++ b/miniprogram/components3.0/category-tabs/category-tabs.less
@@ -13,7 +13,7 @@
flex-direction: row;
align-items: center;
gap: 16rpx;
- padding: 30rpx 24rpx;
+ padding: 0 24rpx;
box-sizing: border-box;
}
diff --git a/miniprogram/components/shared/category-tabs/category-tabs.ts b/miniprogram/components3.0/category-tabs/category-tabs.ts
similarity index 100%
rename from miniprogram/components/shared/category-tabs/category-tabs.ts
rename to miniprogram/components3.0/category-tabs/category-tabs.ts
diff --git a/miniprogram/components/shared/category-tabs/category-tabs.wxml b/miniprogram/components3.0/category-tabs/category-tabs.wxml
similarity index 100%
rename from miniprogram/components/shared/category-tabs/category-tabs.wxml
rename to miniprogram/components3.0/category-tabs/category-tabs.wxml
diff --git a/miniprogram/components/shared/detail-card/detail-card.json b/miniprogram/components3.0/detail-card/detail-card.json
similarity index 100%
rename from miniprogram/components/shared/detail-card/detail-card.json
rename to miniprogram/components3.0/detail-card/detail-card.json
diff --git a/miniprogram/components/shared/detail-card/detail-card.less b/miniprogram/components3.0/detail-card/detail-card.less
similarity index 100%
rename from miniprogram/components/shared/detail-card/detail-card.less
rename to miniprogram/components3.0/detail-card/detail-card.less
diff --git a/miniprogram/components/shared/detail-card/detail-card.ts b/miniprogram/components3.0/detail-card/detail-card.ts
similarity index 100%
rename from miniprogram/components/shared/detail-card/detail-card.ts
rename to miniprogram/components3.0/detail-card/detail-card.ts
diff --git a/miniprogram/components/shared/detail-card/detail-card.wxml b/miniprogram/components3.0/detail-card/detail-card.wxml
similarity index 100%
rename from miniprogram/components/shared/detail-card/detail-card.wxml
rename to miniprogram/components3.0/detail-card/detail-card.wxml
diff --git a/miniprogram/components/shared/worksheet-card/worksheet-card.json b/miniprogram/components3.0/worksheet-card/worksheet-card.json
similarity index 100%
rename from miniprogram/components/shared/worksheet-card/worksheet-card.json
rename to miniprogram/components3.0/worksheet-card/worksheet-card.json
diff --git a/miniprogram/components/shared/worksheet-card/worksheet-card.less b/miniprogram/components3.0/worksheet-card/worksheet-card.less
similarity index 100%
rename from miniprogram/components/shared/worksheet-card/worksheet-card.less
rename to miniprogram/components3.0/worksheet-card/worksheet-card.less
diff --git a/miniprogram/components/shared/worksheet-card/worksheet-card.ts b/miniprogram/components3.0/worksheet-card/worksheet-card.ts
similarity index 100%
rename from miniprogram/components/shared/worksheet-card/worksheet-card.ts
rename to miniprogram/components3.0/worksheet-card/worksheet-card.ts
diff --git a/miniprogram/components/shared/worksheet-card/worksheet-card.wxml b/miniprogram/components3.0/worksheet-card/worksheet-card.wxml
similarity index 100%
rename from miniprogram/components/shared/worksheet-card/worksheet-card.wxml
rename to miniprogram/components3.0/worksheet-card/worksheet-card.wxml
diff --git a/miniprogram/pages/category/category.json b/miniprogram/pages/category/category.json
index c5b0815..2f4c910 100644
--- a/miniprogram/pages/category/category.json
+++ b/miniprogram/pages/category/category.json
@@ -4,7 +4,7 @@
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#F6F6F6",
"usingComponents": {
- "worksheet-card": "../../components/shared/worksheet-card/worksheet-card",
- "detail-card": "../../components/shared/detail-card/detail-card"
+ "worksheet-card": "../../components3.0/worksheet-card/worksheet-card",
+ "detail-card": "../../components3.0/detail-card/detail-card"
}
}
diff --git a/miniprogram/pages/home/home.json b/miniprogram/pages/home/home.json
index 4f4597e..fe829fc 100644
--- a/miniprogram/pages/home/home.json
+++ b/miniprogram/pages/home/home.json
@@ -6,7 +6,7 @@
"backgroundColor": "#FEF6E7",
"enablePullDownRefresh": false,
"usingComponents": {
- "category-tabs": "/components/shared/category-tabs/category-tabs",
+ "category-tabs": "/components3.0/category-tabs/category-tabs",
"van-icon": "@vant/weapp/icon/index"
}
}
diff --git a/miniprogram/pages/home/home.less b/miniprogram/pages/home/home.less
index 3b1b75e..32b4d36 100644
--- a/miniprogram/pages/home/home.less
+++ b/miniprogram/pages/home/home.less
@@ -1,6 +1,8 @@
@import '../../style/theme3.less';
@home-padding: 28rpx;
+@home-section-mt: 48rpx;
+@home-track-gap: 16rpx;
.home-page {
min-height: 100vh;
@@ -68,12 +70,12 @@
}
.home-tabs-wrap {
- // margin-top: 28rpx;
+ margin-top: 48rpx;
}
.home-hero-placeholder {
// margin: 8rpx auto 0;
- margin: 0 24rpx;
+ margin: 48rpx 24rpx 0;
// width: 684rpx;
height: 480rpx;
border-radius: 40rpx;
@@ -81,13 +83,13 @@
}
.home-section-panel {
- margin-top: 48rpx;
+ margin-top: @home-section-mt;
padding: 0 @home-padding;
box-sizing: border-box;
}
.home-section-panel--hot {
- margin-top: 32rpx;
+ margin-top: @home-section-mt;
}
.home-section-head {
@@ -107,6 +109,73 @@
color: @text-selected-btn;
}
+.home-section-head__title--module {
+ font-size: 28rpx;
+ font-weight: 700;
+}
+
+.home-track-scroll {
+ margin-top: 24rpx;
+ width: 100%;
+ white-space: nowrap;
+}
+
+.home-track-row {
+ display: inline-flex;
+ flex-direction: row;
+ gap: @home-track-gap;
+ padding-right: @home-padding;
+}
+
+/* 可视约 2.2 张：2*w + 2*gap + 0.2*w ≈ 屏宽减左右 padding */
+.home-track-card {
+ width: calc((750rpx - 2 * @home-padding - 2 * @home-track-gap) / 2.2);
+ flex-shrink: 0;
+ border-radius: 24rpx;
+ overflow: hidden;
+ background: #ffffff;
+ box-shadow: 0 6rpx 20rpx rgba(50, 46, 37, 0.06);
+}
+
+.home-track-card__top {
+ height: 200rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.home-track-card__icon {
+ font-size: 72rpx;
+ line-height: 1;
+}
+
+.home-track-card__body {
+ padding: 20rpx 18rpx 22rpx;
+ background: #ffffff;
+}
+
+.home-track-card__title {
+ font-size: 28rpx;
+ font-weight: 600;
+ color: @text-title;
+ line-height: 1.35;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ line-clamp: 2;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+}
+
+.home-track-card__sub {
+ margin-top: 8rpx;
+ font-size: 22rpx;
+ color: @text-gray;
+ line-height: 1.3;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
.home-age-scroll {
margin-top: 32rpx;
width: 100%;
@@ -116,12 +185,13 @@
.home-age-row {
display: inline-flex;
flex-direction: row;
- gap: 20rpx;
+ gap: 12rpx;
padding-right: @home-padding;
}
.home-age-item {
- width: calc((750rpx - 48rpx - 40rpx) / 3.2);
+ /* 目标：首屏露出 3.5 个（第 4 个露出约 50%） */
+ width: calc((750rpx - 48rpx - 36rpx) / 3.5);
display: flex;
flex-direction: column;
align-items: center;
diff --git a/miniprogram/pages/home/home.ts b/miniprogram/pages/home/home.ts
index 3d8f572..006cc9b 100644
--- a/miniprogram/pages/home/home.ts
+++ b/miniprogram/pages/home/home.ts
@@ -8,6 +8,90 @@ const CATEGORY_TABS = [
const AGE_BAND_ICONS = ['🌱', '🚀', '🎓', '🧠', '🏆'] as const;
+type HomeTrackCard = {
+ id: string;
+ title: string;
+ subtitle: string;
+ icon: string;
+ topBg: string;
+};
+
+const MOCK_MATH_TRACK: HomeTrackCard[] = [
+ {
+ id: 'm1',
+ title: '认识数字1-10',
+ subtitle: '启蒙第一课',
+ icon: '🔢',
+ topBg: '#fff3c4',
+ },
+ {
+ id: 'm2',
+ title: '形状对对碰',
+ subtitle: '空间感训练',
+ icon: '📐',
+ topBg: '#f5e6dc',
+ },
+ {
+ id: 'm3',
+ title: '数量比一比',
+ subtitle: '数感小游戏',
+ icon: '⚖️',
+ topBg: '#d8f0d0',
+ },
+ {
+ id: 'm4',
+ title: '规律找一找',
+ subtitle: '逻辑思维',
+ icon: '🔍',
+ topBg: '#e8f4ff',
+ },
+ {
+ id: 'm5',
+ title: '简单加减',
+ subtitle: '动手练一练',
+ icon: '➕',
+ topBg: '#fce4ec',
+ },
+];
+
+const MOCK_CHINESE_TRACK: HomeTrackCard[] = [
+ {
+ id: 'c1',
+ title: '基础笔画连连看',
+ subtitle: '书法初体验',
+ icon: '🖌',
+ topBg: '#f5e6dc',
+ },
+ {
+ id: 'c2',
+ title: '看图识汉字',
+ subtitle: '字形联想',
+ icon: '📖',
+ topBg: '#d8f0d0',
+ },
+ {
+ id: 'c3',
+ title: '拼音小闯关',
+ subtitle: '声母韵母',
+ icon: '🔤',
+ topBg: '#fff3c4',
+ },
+ {
+ id: 'c4',
+ title: '词语搭配',
+ subtitle: '词汇积累',
+ icon: '✏️',
+ topBg: '#e8f4ff',
+ },
+ {
+ id: 'c5',
+ title: '古诗诵读',
+ subtitle: '语感培养',
+ icon: '🎵',
+ topBg: '#fce4ec',
+ },
+];
+
const MOCK_HOT_RECOMMENDS = [
{
id: 'hot-1',
@@ -40,6 +124,8 @@ Page({
})),
activeAgeBand: AGE_BANDS[0].key as AgeBandKey,
hotRecommends: [...MOCK_HOT_RECOMMENDS],
+ mathTrackCards: MOCK_MATH_TRACK,
+ chineseTrackCards: MOCK_CHINESE_TRACK,
},
onTabChange(e: WechatMiniprogram.CustomEvent) {
@@ -66,6 +152,20 @@ Page({
wx.showToast({ title: '热门推荐 即将上线', icon: 'none' });
},
+ onTapTrackMore(e: WechatMiniprogram.TouchEvent) {
+ const category = e.currentTarget.dataset.category as string | undefined;
+ if (!category) return;
+ wx.navigateTo({
+ url: `/pages/category/category?category=${category}`,
+ });
+ },
+
+ onTapTrackCard(e: WechatMiniprogram.TouchEvent) {
+ const title = e.currentTarget.dataset.title as string | undefined;
+ if (!title) return;
+ wx.showToast({ title, icon: 'none' });
+ },
+
onShareAppMessage() {
return {
title: '涂鸦丫 - 快来生成宝宝的专属学习卡',
diff --git a/miniprogram/pages/home/home.wxml b/miniprogram/pages/home/home.wxml
index 767452f..6f3cd9e 100644
--- a/miniprogram/pages/home/home.wxml
+++ b/miniprogram/pages/home/home.wxml
@@ -90,4 +90,82 @@
+
+
+
+ 数感启蒙
+ 更多
+
+
+
+
+
+ {{item.icon}}
+
+
+ {{item.title}}
+ {{item.subtitle}}
+
+
+
+
+
+
+
+
+ 趣味中文
+ 更多
+
+
+
+
+
+ {{item.icon}}
+
+
+ {{item.title}}
+ {{item.subtitle}}
+
+
+
+
+