joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 开发英语启蒙的入口页

Browse Source
This commit is contained in:
R524809
2026-04-21 15:03:38 +08:00
parent 8c1d7e0657
commit b2f5b203f8
62 changed files with 392 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/home/home.data.ts
+89 -55
View File
@@ -9,6 +9,8 @@ export type HomeDisplayItem = {
ageBand: string;
difficulty: '入门' | '基础' | '进阶' | '挑战';
icon: string;
/** 横向滑动卡片顶部图，有则优先展示，可与 icon 二选一 */
img?: string;
badge?: string;
path: string;
available: boolean;
@@ -275,6 +277,7 @@ export const HOME_PRODUCT_TARGET_DATA: HomeDisplayDataset = {
id: 'english',
title: '英语启蒙',
subtitle: '字母学习、闪卡、描红与自然拼读',
morePath: '/englishPages/letterTracing/letterTracing',
items: [
{
id: 'target-english-1',
@@ -686,6 +689,92 @@ export const HOME_CURRENT_CAPABILITY_DATA: HomeDisplayDataset = {
},
],
},
{
id: 'english',
title: '英语启蒙',
subtitle: '多种描红版式，认读与书写循序渐进',
morePath: '/englishPages/letterTracing/letterTracing',
items: [
{
id: 'current-english-1',
title: '默认字帖',
subtitle: '配图例句，逐字描红',
category: 'english',
ageBand: '4-7岁',
difficulty: '入门',
icon: '',
img: '/assets/entrancePicture/english/letterTracing/letter-tracing-single.jpg',
path: '/englishPages/letterTracing/letterTracing?id=letter-tracing-single',
available: true,
source: 'letter-tracing-single',
},
{
id: 'current-english-2',
title: '基础描红',
subtitle: '26 字母大小写速览',
category: 'english',
ageBand: '4-7岁',
difficulty: '入门',
icon: '',
img: '/assets/entrancePicture/english/letterTracing/letter-tracing-upper-lower.jpg',
path: '/englishPages/letterTracing/letterTracing?id=letter-tracing-upper-lower',
available: true,
source: 'letter-tracing-upper-lower',
},
{
id: 'current-english-3',
title: '大小写对照',
subtitle: '左大右小，逐行对照',
category: 'english',
ageBand: '4-7岁',
difficulty: '入门',
icon: '',
img: '/assets/entrancePicture/english/letterTracing/letter-tracing-case-pairing.jpg',
path: '/englishPages/letterTracing/letterTracing?id=letter-tracing-case-pairing',
available: true,
source: 'letter-tracing-case-pairing',
},
{
id: 'current-english-4',
title: '两列描红',
subtitle: 'Aa 配对，左右分列',
category: 'english',
ageBand: '4-7岁',
difficulty: '入门',
icon: '',
img: '/assets/entrancePicture/english/letterTracing/letter-tracing-two-column.jpg',
path: '/englishPages/letterTracing/letterTracing?id=letter-tracing-two-column',
available: true,
source: 'letter-tracing-two-column',
},
{
id: 'current-english-5',
title: '13字母半表',
subtitle: '每行一字，逐字专练',
category: 'english',
ageBand: '4-7岁',
difficulty: '入门',
icon: '',
img: '/assets/entrancePicture/english/letterTracing/letter-tracing-half.jpg',
path: '/englishPages/letterTracing/letterTracing?id=letter-tracing-half',
available: true,
source: 'letter-tracing-half',
},
{
id: 'current-english-6',
title: '三字母精练',
subtitle: '每页三字，深度书写',
category: 'english',
ageBand: '4-7岁',
difficulty: '入门',
icon: '',
img: '/assets/entrancePicture/english/letterTracing/letter-tracing-three.jpg',
path: '/englishPages/letterTracing/letterTracing?id=letter-tracing-three',
available: true,
source: 'letter-tracing-three',
},
],
},
{
id: 'craft',
title: '创意手工',
@@ -718,61 +807,6 @@ export const HOME_CURRENT_CAPABILITY_DATA: HomeDisplayDataset = {
},
],
},
{
id: 'english',
title: '英语启蒙',
subtitle: '字母描红等已上线，其余能力持续补充',
items: [
{
id: 'current-english-1',
title: '字母学习页',
subtitle: '单字母配图与描红',
category: 'english',
ageBand: '4-7岁',
difficulty: '入门',
icon: '🔠',
path: '/englishPages/letterTracing/letterTracing?id=letter-tracing-single',
available: true,
source: 'letter-tracing-single',
},
{
id: 'current-english-2',
title: '26 字母描红',
subtitle: '整页四线三格练习',
category: 'english',
ageBand: '4-7岁',
difficulty: '入门',
icon: '🔤',
path: '/englishPages/letterTracing/letterTracing?id=letter-tracing-two-column',
available: true,
source: 'letter-tracing-two-column',
},
{
id: 'current-english-3',
title: '大小写字母对照',
subtitle: '一页认识 A-Z 与 a-z',
category: 'english',
ageBand: '4-7岁',
difficulty: '入门',
icon: '🔡',
path: '/englishPages/letterTracing/letterTracing?id=letter-tracing-upper-lower',
available: true,
source: 'letter-tracing-upper-lower',
},
{
id: 'current-english-4',
title: '字母描红（两列）',
subtitle: 'A–M / N–Z',
category: 'english',
ageBand: '4-7岁',
difficulty: '入门',
icon: '✏️',
path: '/englishPages/letterTracing/letterTracing?id=letter-tracing-case-pairing',
available: true,
source: 'letter-tracing-case-pairing',
},
],
},
],
};
miniprogram/pages/home/home.less
+46 -19
View File
@@ -1,4 +1,5 @@
@import '../../style/theme.less';
@import '../../style/tags.less';
@home-track-gap: 16rpx;
@@ -91,10 +92,12 @@
background: rgba(50, 46, 37, 0.04);
}
.home-track-row--hero {
padding-left: @page-padding-x;
padding-top: 24rpx;
padding-bottom: 24rpx;
/** 首页顶部「精选」横滑行（与下方模块 track 列表的 .home-track-row 区分） */
.home-hero-row {
display: inline-flex;
flex-direction: row;
gap: @section-gap-sm;
padding: 24rpx @page-padding-x;
}
.home-hero-card {
@@ -190,7 +193,6 @@
.home-section-panel {
margin-top: @section-gap;
padding: 0 @page-padding-x;
box-sizing: border-box;
}
@@ -198,6 +200,7 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 @page-padding-x;
}
.home-section-head__title {
@@ -220,7 +223,7 @@
margin-top: @section-gap-sm;
width: 100%;
white-space: nowrap;
padding: 16rpx 0 20rpx;
// padding: 16rpx 0 20rpx;
box-sizing: border-box;
}
@@ -228,7 +231,8 @@
display: inline-flex;
flex-direction: row;
gap: @section-gap-sm;
padding-right: @page-padding-x;
// padding-right: @page-padding-x;
padding: 16rpx @page-padding-x 20rpx;
}
.home-track-card {
@@ -241,23 +245,46 @@
}
.home-track-card__top {
height: 200rpx;
/* 与 supportPages/mathIndex .function-item-img-wrapper 一致 */
height: 270rpx;
flex-shrink: 0;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
align-items: flex-start;
justify-content: center;
}
.home-track-card__cover {
width: 100%;
display: block;
}
.home-track-card__icon {
font-size: 72rpx;
line-height: 1;
}
.home-track-card__tags {
position: absolute;
right: 12rpx;
bottom: 12rpx;
display: flex;
gap: 10rpx;
}
.home-track-card__body {
box-sizing: border-box;
width: 100%;
padding: 20rpx @page-padding-inner-x 22rpx;
background: #ffffff;
white-space: normal;
border-top: 1rpx solid #c5c5c5;
}
.home-track-card__title {
box-sizing: border-box;
width: 100%;
font-size: 28rpx;
font-weight: 600;
color: @text-title;
@@ -267,16 +294,22 @@
line-clamp: 2;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-word;
}
.home-track-card__sub {
box-sizing: border-box;
width: 100%;
margin-top: 8rpx;
font-size: 22rpx;
color: @text-gray;
line-height: 1.3;
line-height: 1.45;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-word;
}
.home-age-scroll {
@@ -336,6 +369,7 @@
.home-hot-list {
margin-top: @section-gap-sm;
padding: 0 @page-padding-x;
display: flex;
flex-direction: column;
gap: @section-gap-stack;
@@ -427,13 +461,6 @@
display: block;
}
.home-track-card__meta {
margin-top: 12rpx;
font-size: 22rpx;
color: @text-gray;
line-height: 1.3;
display: block;
}
.home-page .category-tabs {
background: @bg-page;
miniprogram/pages/home/home.wxml
+168 -142
View File
@@ -10,166 +10,192 @@
</view>
<view class="home-body" style="padding-top: {{navBlockHeight}}px;">
<view class="home-search-wrap">
<view class="home-search">
<van-icon
name="search"
size="36rpx"
color="rgba(50, 46, 37, 0.45)"
class="home-search__icon" />
<text class="home-search__placeholder">{{searchPlaceholder}}</text>
</view>
</view>
<view class="home-tabs-wrap">
<category-tabs
tabs="{{tabs}}"
active-tab="{{activeTab}}"
bind:change="onTabChange" />
</view>
<scroll-view class="home-track-scroll" scroll-x enable-flex>
<view class="home-track-row home-track-row--hero">
<view
wx:for="{{featuredItems}}"
wx:key="id"
class="home-hero-card"
data-title="{{item.title}}"
data-path="{{item.path}}"
bindtap="onTapFeatured">
<view
class="home-hero-card__top"
style="background-color: {{item.topBg}}">
<text 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">
<text class="home-hero-card__title">{{item.title}}</text>
<text class="home-hero-card__meta"
>{{item.ageBand}} · {{item.difficulty}}</text
>
</view>
<text class="home-hero-card__sub">{{item.subtitle}}</text>
</view>
<view class="home-search-wrap">
<view class="home-search">
<van-icon
name="search"
size="36rpx"
color="rgba(50, 46, 37, 0.45)"
class="home-search__icon" />
<text class="home-search__placeholder"
>{{searchPlaceholder}}</text
>
</view>
</view>
</scroll-view>
<view class="home-section-panel">
<view class="home-section-head">
<text class="home-section-head__title">按年龄挑选</text>
<text class="home-section-head__more" bindtap="onTapAgeMore"
>查看全部</text
>
<view class="home-tabs-wrap">
<category-tabs
tabs="{{tabs}}"
active-tab="{{activeTab}}"
bind:change="onTabChange" />
</view>
<scroll-view class="home-age-scroll" scroll-x enable-flex>
<view class="home-age-row">
<view
wx:for="{{ageBands}}"
wx:key="key"
class="home-age-item"
data-key="{{item.key}}"
data-path="{{item.path}}"
bindtap="onTapAgeBand">
<view
class="home-age-item__icon-wrap {{activeAgeBand === item.key ? 'home-age-item__icon-wrap--active' : ''}}">
<text class="home-age-item__icon">{{item.icon}}</text>
</view>
<text class="home-age-item__label">{{item.label}}</text>
<text class="home-age-item__desc">{{item.desc}}</text>
</view>
</view>
</scroll-view>
</view>
<view class="home-section-panel home-section-panel--hot">
<view class="home-section-head">
<text class="home-section-head__title">热门推荐</text>
<text class="home-section-head__more" bindtap="onTapHotMore"
>查看全部</text
>
</view>
<view class="home-hot-list">
<view
wx:for="{{hotRecommends}}"
wx:key="id"
class="home-hot-card"
data-title="{{item.title}}"
data-path="{{item.path}}"
bindtap="onTapHotRecommend">
<view
class="home-hot-card__thumb"
style="background-color: {{item.topBg}}">
<text class="home-hot-card__thumb-emoji"
>{{item.icon}}</text
>
</view>
<view class="home-hot-card__content">
<text class="home-hot-card__title">{{item.title}}</text>
<text class="home-hot-card__desc">{{item.subtitle}}</text>
<view class="home-hot-card__meta">
<text class="home-hot-card__tag">{{item.ageBand}}</text>
<text class="home-hot-card__score"
>{{item.difficulty}}</text
>
</view>
</view>
<view class="home-hot-card__action">›</view>
</view>
</view>
</view>
<view
wx:for="{{sections}}"
wx:key="id"
id="{{item.anchorId}}"
class="home-section-panel">
<view class="home-section-head">
<text
class="home-section-head__title home-section-head__title--module"
>{{item.title}}</text
>
<text
wx:if="{{item.morePath}}"
class="home-section-head__more"
data-title="{{item.title}}"
data-path="{{item.morePath}}"
bindtap="onTapTrackMore"
>更多</text
>
</view>
<text class="home-section-panel__sub">{{item.subtitle}}</text>
<scroll-view class="home-track-scroll" scroll-x enable-flex>
<view class="home-track-row">
<view class="home-hero-row">
<view
wx:for="{{item.items}}"
wx:for="{{featuredItems}}"
wx:key="id"
class="home-track-card"
class="home-hero-card"
data-title="{{item.title}}"
data-path="{{item.path}}"
bindtap="onTapTrackCard">
bindtap="onTapFeatured">
<view
class="home-track-card__top"
class="home-hero-card__top"
style="background-color: {{item.topBg}}">
<text class="home-track-card__icon">{{item.icon}}</text>
<text 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-track-card__body">
<text class="home-track-card__title"
>{{item.title}}</text
>
<text class="home-track-card__sub"
<view class="home-hero-card__body">
<view class="home-hero-card__title-row">
<text class="home-hero-card__title"
>{{item.title}}</text
>
<text class="home-hero-card__meta"
>{{item.ageBand}} · {{item.difficulty}}</text
>
</view>
<text class="home-hero-card__sub"
>{{item.subtitle}}</text
>
<text class="home-track-card__meta"
>{{item.ageBand}} · {{item.difficulty}}</text
>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="home-section-panel">
<view class="home-section-head">
<text class="home-section-head__title">按年龄挑选</text>
<text class="home-section-head__more" bindtap="onTapAgeMore"
>查看全部</text
>
</view>
<scroll-view class="home-age-scroll" scroll-x enable-flex>
<view class="home-age-row">
<view
wx:for="{{ageBands}}"
wx:key="key"
class="home-age-item"
data-key="{{item.key}}"
data-path="{{item.path}}"
bindtap="onTapAgeBand">
<view
class="home-age-item__icon-wrap {{activeAgeBand === item.key ? 'home-age-item__icon-wrap--active' : ''}}">
<text class="home-age-item__icon"
>{{item.icon}}</text
>
</view>
<text class="home-age-item__label">{{item.label}}</text>
<text class="home-age-item__desc">{{item.desc}}</text>
</view>
</view>
</scroll-view>
</view>
<view class="home-section-panel home-section-panel--hot">
<view class="home-section-head">
<text class="home-section-head__title">热门推荐</text>
<text class="home-section-head__more" bindtap="onTapHotMore"
>查看全部</text
>
</view>
<view class="home-hot-list">
<view
wx:for="{{hotRecommends}}"
wx:key="id"
class="home-hot-card"
data-title="{{item.title}}"
data-path="{{item.path}}"
bindtap="onTapHotRecommend">
<view
class="home-hot-card__thumb"
style="background-color: {{item.topBg}}">
<text class="home-hot-card__thumb-emoji"
>{{item.icon}}</text
>
</view>
<view class="home-hot-card__content">
<text class="home-hot-card__title">{{item.title}}</text>
<text class="home-hot-card__desc"
>{{item.subtitle}}</text
>
<view class="home-hot-card__meta">
<text class="home-hot-card__tag"
>{{item.ageBand}}</text
>
<text class="home-hot-card__score"
>{{item.difficulty}}</text
>
</view>
</view>
<view class="home-hot-card__action">›</view>
</view>
</view>
</view>
<view
wx:for="{{sections}}"
wx:key="id"
id="{{item.anchorId}}"
class="home-section-panel">
<view class="home-section-head">
<text
class="home-section-head__title home-section-head__title--module"
>{{item.title}}</text
>
<text
wx:if="{{item.morePath}}"
class="home-section-head__more"
data-title="{{item.title}}"
data-path="{{item.morePath}}"
bindtap="onTapTrackMore"
>更多</text
>
</view>
<!-- <text class="home-section-panel__sub">{{item.subtitle}}</text> -->
<scroll-view class="home-track-scroll" scroll-x enable-flex>
<view class="home-track-row">
<view
wx:for="{{item.items}}"
wx:key="id"
class="home-track-card"
data-title="{{item.title}}"
data-path="{{item.path}}"
bindtap="onTapTrackCard">
<view
class="home-track-card__top"
style="background-color: {{item.topBg}}">
<image
wx:if="{{item.img}}"
class="home-track-card__cover"
src="{{item.img}}"
mode="widthFix" />
<text wx:else class="home-track-card__icon"
>{{item.icon}}</text
>
<view class="home-track-card__tags">
<text class="tag tag--age"
>{{item.ageBand}}</text
>
<text class="tag tag--diff"
>{{item.difficulty}}</text
>
</view>
</view>
<view class="home-track-card__body">
<text class="home-track-card__title"
>{{item.title}}</text
>
<text class="home-track-card__sub"
>{{item.subtitle}}</text
>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</view>