diff --git a/miniprogram/assets/entrancePicture/english/letterTracing/letter-tracing-case-pairing.jpg b/miniprogram/assets/entrancePicture/english/letterTracing/letter-tracing-case-pairing.jpg new file mode 100644 index 0000000..facf830 Binary files /dev/null and b/miniprogram/assets/entrancePicture/english/letterTracing/letter-tracing-case-pairing.jpg differ diff --git a/miniprogram/assets/entrancePicture/english/letterTracing/letter-tracing-half.jpg b/miniprogram/assets/entrancePicture/english/letterTracing/letter-tracing-half.jpg new file mode 100644 index 0000000..f684662 Binary files /dev/null and b/miniprogram/assets/entrancePicture/english/letterTracing/letter-tracing-half.jpg differ diff --git a/miniprogram/assets/entrancePicture/english/letterTracing/letter-tracing-single.jpg b/miniprogram/assets/entrancePicture/english/letterTracing/letter-tracing-single.jpg new file mode 100644 index 0000000..dd0b41e Binary files /dev/null and b/miniprogram/assets/entrancePicture/english/letterTracing/letter-tracing-single.jpg differ diff --git a/miniprogram/assets/entrancePicture/english/letterTracing/letter-tracing-three.jpg b/miniprogram/assets/entrancePicture/english/letterTracing/letter-tracing-three.jpg new file mode 100644 index 0000000..f9b30cc Binary files /dev/null and b/miniprogram/assets/entrancePicture/english/letterTracing/letter-tracing-three.jpg differ diff --git a/miniprogram/assets/entrancePicture/english/letterTracing/letter-tracing-two-column.jpg b/miniprogram/assets/entrancePicture/english/letterTracing/letter-tracing-two-column.jpg new file mode 100644 index 0000000..77a4791 Binary files /dev/null and b/miniprogram/assets/entrancePicture/english/letterTracing/letter-tracing-two-column.jpg differ diff --git a/miniprogram/assets/entrancePicture/english/letterTracing/letter-tracing-upper-lower.jpg b/miniprogram/assets/entrancePicture/english/letterTracing/letter-tracing-upper-lower.jpg new file mode 100644 index 0000000..23122ea Binary files /dev/null and b/miniprogram/assets/entrancePicture/english/letterTracing/letter-tracing-upper-lower.jpg differ diff --git a/miniprogram/components3.0/category-tabs/category-tabs.less b/miniprogram/components3.0/category-tabs/category-tabs.less index 6327bff..4b7f779 100644 --- a/miniprogram/components3.0/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: 0 24rpx; + padding: 0 40rpx; box-sizing: border-box; } diff --git a/miniprogram/core/data/worksheets.ts b/miniprogram/core/data/worksheets.ts index 08d4241..db08a12 100644 --- a/miniprogram/core/data/worksheets.ts +++ b/miniprogram/core/data/worksheets.ts @@ -389,7 +389,7 @@ export const ALL_WORKSHEETS: WorksheetDefinition[] = [ ), sheet( { - id: 'letter-tracing-triple', + id: 'letter-tracing-three', title: '三字母精练', desc: '每页聚焦 3 个字母，大写 + 小写深度书写', category: 'english', @@ -412,7 +412,7 @@ export const ALL_WORKSHEETS: WorksheetDefinition[] = [ instructionText: '每页 3 个字母，逐字精练', }, generatorConfig: { - mode: 'letter-tracing-triple', + mode: 'letter-tracing-three', letterCase: 'both', repetitions: 5, fadePattern: 'gradient', @@ -422,7 +422,7 @@ export const ALL_WORKSHEETS: WorksheetDefinition[] = [ ), sheet( { - id: 'letter-tracing-single-line', + id: 'letter-tracing-half', title: '单字母逐行', desc: '每行一个字母，13 字母半表逐字练习', category: 'english', @@ -445,7 +445,7 @@ export const ALL_WORKSHEETS: WorksheetDefinition[] = [ instructionText: '每行一个字母，逐字反复练习', }, generatorConfig: { - mode: 'letter-tracing-single-line', + mode: 'letter-tracing-half', letterCase: 'both', alphabetHalf: 'A-M', repetitions: 5, diff --git a/miniprogram/englishPages/shared/draw/casePairingDraw.ts b/miniprogram/englishPages/letterTracing/draw/casePairingDraw.ts similarity index 97% rename from miniprogram/englishPages/shared/draw/casePairingDraw.ts rename to miniprogram/englishPages/letterTracing/draw/casePairingDraw.ts index 9323416..6796e7f 100644 --- a/miniprogram/englishPages/shared/draw/casePairingDraw.ts +++ b/miniprogram/englishPages/letterTracing/draw/casePairingDraw.ts @@ -3,14 +3,14 @@ import type { LetterTracingData, TracingRow, } from '../generators/letter-tracing-generator'; -import { fontFamilyOf } from '../data/fontProfiles'; +import { fontFamilyOf } from '../../shared/data/fontProfiles'; import { calcLetterFontSizes, drawFourLineGrid, drawLetterInFourLineGrid, FOUR_LINE_GRID_H, type LetterFontSizes, -} from './drawTools'; +} from '../../shared/draw/drawTools'; const COLOR_BLACK = '#1a1a1a'; const COLOR_LIGHT_RED = '#FF8E8E'; diff --git a/miniprogram/englishPages/shared/draw/letterTracingDraw.ts b/miniprogram/englishPages/letterTracing/draw/letterTracingDraw.ts similarity index 90% rename from miniprogram/englishPages/shared/draw/letterTracingDraw.ts rename to miniprogram/englishPages/letterTracing/draw/letterTracingDraw.ts index 0977695..5029235 100644 --- a/miniprogram/englishPages/shared/draw/letterTracingDraw.ts +++ b/miniprogram/englishPages/letterTracing/draw/letterTracingDraw.ts @@ -18,8 +18,8 @@ export default class LetterTracingDraw extends BaseDrawService { 'letter-tracing-upper-lower': UpperLowerDraw, 'letter-tracing-case-pairing': CasePairingDraw, 'letter-tracing-two-column': TwoColumnDraw, - 'letter-tracing-single-line': SingleLineDraw, - 'letter-tracing-triple': TripleDraw, + 'letter-tracing-half': SingleLineDraw, + 'letter-tracing-three': TripleDraw, }[data.mode]; const delegate = new DrawClass(this.canvas, this.ctx, this.options); diff --git a/miniprogram/englishPages/shared/draw/singleLetterDraw.ts b/miniprogram/englishPages/letterTracing/draw/singleLetterDraw.ts similarity index 99% rename from miniprogram/englishPages/shared/draw/singleLetterDraw.ts rename to miniprogram/englishPages/letterTracing/draw/singleLetterDraw.ts index 12137aa..e7e8d6d 100644 --- a/miniprogram/englishPages/shared/draw/singleLetterDraw.ts +++ b/miniprogram/englishPages/letterTracing/draw/singleLetterDraw.ts @@ -4,7 +4,7 @@ import type { LetterTracingData, HighlightGrid, } from '../generators/letter-tracing-generator'; -import { fontFamilyOf } from '../data/fontProfiles'; +import { fontFamilyOf } from '../../shared/data/fontProfiles'; import { calcLetterFontSizes, drawFourLineGrid, @@ -12,7 +12,7 @@ import { FOUR_LINE_GRID_H, getLetterFontSize, type LetterFontSizes, -} from './drawTools'; +} from '../../shared/draw/drawTools'; const LINE_INK_ALPHA = 'rgba(50, 46, 37, 1)'; const ACCENT_RED = 'rgba(252, 46, 0, 1)'; diff --git a/miniprogram/englishPages/shared/draw/singleLineDraw.ts b/miniprogram/englishPages/letterTracing/draw/singleLineDraw.ts similarity index 92% rename from miniprogram/englishPages/shared/draw/singleLineDraw.ts rename to miniprogram/englishPages/letterTracing/draw/singleLineDraw.ts index 5f65b2a..3ab927e 100644 --- a/miniprogram/englishPages/shared/draw/singleLineDraw.ts +++ b/miniprogram/englishPages/letterTracing/draw/singleLineDraw.ts @@ -6,7 +6,7 @@ import type { import { fontFamilyOf, PRINT_CLEARLY_DASHED, -} from '../data/fontProfiles'; +} from '../../shared/data/fontProfiles'; import { calcLetterFontSizes, drawFourLineGrid, @@ -14,14 +14,14 @@ import { FOUR_LINE_GRID_H, loadLetterFont, type LetterFontSizes, -} from './drawTools'; +} from '../../shared/draw/drawTools'; const SLOTS_PER_ROW = 6; const PAIR_GAP = 25; type SingleLineData = Extract< LetterTracingData, - { mode: 'letter-tracing-single-line' } + { mode: 'letter-tracing-half' } >; /** @@ -34,8 +34,10 @@ export default class SingleLineDraw extends BaseDrawService { private letterSizes: LetterFontSizes = calcLetterFontSizes(FOUR_LINE_GRID_H); - private dashedSizes: LetterFontSizes = - calcLetterFontSizes(FOUR_LINE_GRID_H, PRINT_CLEARLY_DASHED); + private dashedSizes: LetterFontSizes = calcLetterFontSizes( + FOUR_LINE_GRID_H, + PRINT_CLEARLY_DASHED, + ); async draw(data: SingleLineData) { this.prepareDraw(); diff --git a/miniprogram/englishPages/shared/draw/tripleDraw.ts b/miniprogram/englishPages/letterTracing/draw/tripleDraw.ts similarity index 96% rename from miniprogram/englishPages/shared/draw/tripleDraw.ts rename to miniprogram/englishPages/letterTracing/draw/tripleDraw.ts index c6cf6a3..e2c5fec 100644 --- a/miniprogram/englishPages/shared/draw/tripleDraw.ts +++ b/miniprogram/englishPages/letterTracing/draw/tripleDraw.ts @@ -4,7 +4,10 @@ import type { TripleSection, SingleLineRow, } from '../generators/letter-tracing-generator'; -import { fontFamilyOf, PRINT_CLEARLY_DASHED } from '../data/fontProfiles'; +import { + fontFamilyOf, + PRINT_CLEARLY_DASHED, +} from '../../shared/data/fontProfiles'; import { calcLetterFontSizes, drawFourLineGrid, @@ -12,7 +15,7 @@ import { FOUR_LINE_GRID_H, loadLetterFont, type LetterFontSizes, -} from './drawTools'; +} from '../../shared/draw/drawTools'; // 每行可容纳的格子数（用于三字母精练模板，一行展示 6 个位置） const SLOTS_PER_ROW = 6; @@ -23,7 +26,7 @@ const TRIPLE_ROW_GAP = 10; // 相邻两个字母区域之间的间距（px），大于 TRIPLE_ROW_GAP const TRIPLE_SECTION_GAP = 20; -type TripleData = Extract; +type TripleData = Extract; /** * 三字母精练绘制： diff --git a/miniprogram/englishPages/shared/draw/twoColumnDraw.ts b/miniprogram/englishPages/letterTracing/draw/twoColumnDraw.ts similarity index 97% rename from miniprogram/englishPages/shared/draw/twoColumnDraw.ts rename to miniprogram/englishPages/letterTracing/draw/twoColumnDraw.ts index 51de86b..9fae8f7 100644 --- a/miniprogram/englishPages/shared/draw/twoColumnDraw.ts +++ b/miniprogram/englishPages/letterTracing/draw/twoColumnDraw.ts @@ -3,14 +3,14 @@ import type { LetterTracingData, TracingRow, } from '../generators/letter-tracing-generator'; -import { fontFamilyOf } from '../data/fontProfiles'; +import { fontFamilyOf } from '../../shared/data/fontProfiles'; import { calcLetterFontSizes, drawFourLineGrid, drawLetterInFourLineGrid, FOUR_LINE_GRID_H, type LetterFontSizes, -} from './drawTools'; +} from '../../shared/draw/drawTools'; const COLOR_BLACK = '#1a1a1a'; const COLOR_LIGHT_RED = '#FF8E8E'; diff --git a/miniprogram/englishPages/shared/draw/upperLowerDraw.ts b/miniprogram/englishPages/letterTracing/draw/upperLowerDraw.ts similarity index 98% rename from miniprogram/englishPages/shared/draw/upperLowerDraw.ts rename to miniprogram/englishPages/letterTracing/draw/upperLowerDraw.ts index 3e539ef..f869e59 100644 --- a/miniprogram/englishPages/shared/draw/upperLowerDraw.ts +++ b/miniprogram/englishPages/letterTracing/draw/upperLowerDraw.ts @@ -4,7 +4,7 @@ import { PRINT_CLEARLY_BOLD, PRINT_CLEARLY_DASHED, fontFamilyOf, -} from '../data/fontProfiles'; +} from '../../shared/data/fontProfiles'; import { calcLetterFontSizes, drawFourLineGrid, @@ -12,7 +12,7 @@ import { FOUR_LINE_GRID_H, loadLetterFont, type LetterFontSizes, -} from './drawTools'; +} from '../../shared/draw/drawTools'; type UpperLowerData = Extract< LetterTracingData, diff --git a/miniprogram/englishPages/shared/generators/letter-tracing-generator.ts b/miniprogram/englishPages/letterTracing/generators/letter-tracing-generator.ts similarity index 94% rename from miniprogram/englishPages/shared/generators/letter-tracing-generator.ts rename to miniprogram/englishPages/letterTracing/generators/letter-tracing-generator.ts index 0a0ca09..cd56452 100644 --- a/miniprogram/englishPages/shared/generators/letter-tracing-generator.ts +++ b/miniprogram/englishPages/letterTracing/generators/letter-tracing-generator.ts @@ -1,4 +1,4 @@ -import { ALPHABET_BY_LETTER, LETTERS_UPPER } from '../data/alphabet'; +import { ALPHABET_BY_LETTER, LETTERS_UPPER } from '../../shared/data/alphabet'; /** 字母描红的布局模式（与产品文档六类练习一致） */ export type LetterTracingMode = @@ -11,9 +11,9 @@ export type LetterTracingMode = /** 4 分栏对照：半组字母，左栏大写、右栏小写，每行 4 个 */ | 'letter-tracing-two-column' /** 5 三字母精练：每页聚焦 3 个字母，每字母 4 行（2 行示范 + 2 行简练） */ - | 'letter-tracing-triple' + | 'letter-tracing-three' /** 6 单字母逐行：每行一个字母，13 字母半表（A–M 或 N–Z） */ - | 'letter-tracing-single-line'; + | 'letter-tracing-half'; /** 字母大小写模式（部分模式不使用） */ export type LetterCaseMode = 'upper' | 'lower' | 'both'; @@ -111,11 +111,11 @@ export type LetterTracingData = rightRows: TracingRow[]; } | { - mode: 'letter-tracing-single-line'; + mode: 'letter-tracing-half'; rows: SingleLineRow[]; } | { - mode: 'letter-tracing-triple'; + mode: 'letter-tracing-three'; sections: TripleSection[]; } | { @@ -239,8 +239,20 @@ function buildSingleLineCells(L: string): (SingleLineCell | null)[] { return [ { upper: L, lower, style: 'solid', color: _COLOR_BLACK, alpha: 1 }, { upper: L, lower, style: 'solid', color: _COLOR_LIGHT_RED, alpha: 1 }, - { upper: L, lower, style: 'solid', color: _COLOR_LIGHT_RED, alpha: 0.5 }, - { upper: L, lower, style: 'dashed', color: _COLOR_LIGHT_RED, alpha: 0.5 }, + { + upper: L, + lower, + style: 'solid', + color: _COLOR_LIGHT_RED, + alpha: 0.5, + }, + { + upper: L, + lower, + style: 'dashed', + color: _COLOR_LIGHT_RED, + alpha: 0.5, + }, null, null, ]; @@ -332,7 +344,7 @@ export function generateLetterTracing( }; } - if (mode === 'letter-tracing-triple') { + if (mode === 'letter-tracing-three') { const letters = config.tripleLetters ?? ['A', 'B', 'C']; const sections: TripleSection[] = letters.map((L) => { const filledRow: SingleLineRow = { @@ -348,10 +360,10 @@ export function generateLetterTracing( rows: [filledRow, filledRow, simpleRow, simpleRow], }; }); - return { mode: 'letter-tracing-triple', sections }; + return { mode: 'letter-tracing-three', sections }; } - if (mode === 'letter-tracing-single-line') { + if (mode === 'letter-tracing-half') { const half = config.alphabetHalf === 'N-Z' ? LETTERS_UPPER.slice(13) @@ -362,7 +374,7 @@ export function generateLetterTracing( cells: buildSingleLineCells(L), })); - return { mode: 'letter-tracing-single-line', rows }; + return { mode: 'letter-tracing-half', rows }; } // letter-tracing-upper-lower diff --git a/miniprogram/englishPages/letterTracing/letterTracing.ts b/miniprogram/englishPages/letterTracing/letterTracing.ts index f27b1e5..8593cb9 100644 --- a/miniprogram/englishPages/letterTracing/letterTracing.ts +++ b/miniprogram/englishPages/letterTracing/letterTracing.ts @@ -1,4 +1,4 @@ -import LetterTracingDraw from '../shared/draw/letterTracingDraw'; +import LetterTracingDraw from './draw/letterTracingDraw'; import { createPage, type CanvasDataState } from '../../base/pageMixin'; import { defaultShareConfig } from '../../config/config'; import { getWorksheetById } from '../../core/data/worksheets'; @@ -8,7 +8,7 @@ import { normalizeLetter, type LetterTracingGeneratorConfig, type LetterTracingMode, -} from '../shared/generators/letter-tracing-generator'; +} from './generators/letter-tracing-generator'; import { LETTERS_UPPER, LETTERS_PAIRS } from '../shared/data/alphabet'; import { DEFAULT_LETTER_PROFILE, @@ -45,13 +45,13 @@ const MODES = [ desc: '左 A–M、右 N–Z 配对描红', }, { - id: 'letter-tracing-single-line', + id: 'letter-tracing-half', icon: 'square-half', label: '13字母半表', desc: '每行一个字母，13 字母半表', }, { - id: 'letter-tracing-triple', + id: 'letter-tracing-three', icon: 'ABC-list', label: '三字母精练', desc: '每页聚焦 3 个字母深度书写', @@ -200,8 +200,8 @@ createPage( : 'upper'; const needsHalf = this.data.traceMode === 'letter-tracing-case-pairing' || - this.data.traceMode === 'letter-tracing-single-line'; - const isTriple = this.data.traceMode === 'letter-tracing-triple'; + this.data.traceMode === 'letter-tracing-half'; + const isTriple = this.data.traceMode === 'letter-tracing-three'; return mergeLetterTracingConfig(base, { selectedLetter: this.data.selectedLetter, letterCase, @@ -306,15 +306,15 @@ createPage( const showLetterPicker = traceMode === 'letter-tracing-single'; const showCaseToggle = traceMode === 'letter-tracing-case-pairing' || - traceMode === 'letter-tracing-single-line'; + traceMode === 'letter-tracing-half'; const showNextLetter = traceMode === 'letter-tracing-single'; - const showTripleGroupPicker = traceMode === 'letter-tracing-triple'; + const showTripleGroupPicker = traceMode === 'letter-tracing-three'; const selectedLetter = options?.preserveLetter ? (this.data.selectedLetter ?? 'A') : normalizeLetter(merged.selectedLetter ?? ''); const letterCaseLower = traceMode === 'letter-tracing-case-pairing' || - traceMode === 'letter-tracing-single-line' + traceMode === 'letter-tracing-half' ? merged.alphabetHalf === 'N-Z' : traceMode === 'letter-tracing-single' ? merged.letterCase === 'lower' diff --git a/miniprogram/englishPages/shared/draw/drawStyle.md b/miniprogram/englishPages/shared/draw/drawStyle.md deleted file mode 100644 index e69de29..0000000 diff --git a/miniprogram/englishPages/英语玩法产品设计.md b/miniprogram/englishPages/英语玩法产品设计.md new file mode 100644 index 0000000..a50362b --- /dev/null +++ b/miniprogram/englishPages/英语玩法产品设计.md @@ -0,0 +1,2 @@ +1. 字母排序 + 类似 数字排序 number-sort.png 中的玩法，输出大小写字母，来排序。 diff --git a/miniprogram/pages/home/home.data.ts b/miniprogram/pages/home/home.data.ts index 8e6a047..e9f2562 100644 --- a/miniprogram/pages/home/home.data.ts +++ b/miniprogram/pages/home/home.data.ts @@ -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', - }, - ], - }, ], }; diff --git a/miniprogram/pages/home/home.less b/miniprogram/pages/home/home.less index 28412a9..9f711b5 100644 --- a/miniprogram/pages/home/home.less +++ b/miniprogram/pages/home/home.less @@ -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; diff --git a/miniprogram/pages/home/home.wxml b/miniprogram/pages/home/home.wxml index acc72ba..b86066d 100644 --- a/miniprogram/pages/home/home.wxml +++ b/miniprogram/pages/home/home.wxml @@ -10,166 +10,192 @@ - - - - {{searchPlaceholder}} - - - - - - - - - - - - {{item.icon}} - {{item.badge}} - - - - {{item.title}} - {{item.ageBand}} · {{item.difficulty}} - - {{item.subtitle}} - + + + + {{searchPlaceholder}} - - - - 按年龄挑选 - 查看全部 + + - - - - - {{item.icon}} - - {{item.label}} - {{item.desc}} - - - - - - - 热门推荐 - 查看全部 - - - - - {{item.icon}} - - - {{item.title}} - {{item.subtitle}} - - {{item.ageBand}} - {{item.difficulty}} - - - › - - - - - - - {{item.title}} - 更多 - - {{item.subtitle}} - + + bindtap="onTapFeatured"> - {{item.icon}} + {{item.icon}} + {{item.badge}} - - {{item.title}} - + + {{item.title}} + {{item.ageBand}} · {{item.difficulty}} + + {{item.subtitle}} - {{item.ageBand}} · {{item.difficulty}} - + + + + 按年龄挑选 + 查看全部 + + + + + + {{item.icon}} + + {{item.label}} + {{item.desc}} + + + + + + + + 热门推荐 + 查看全部 + + + + + {{item.icon}} + + + {{item.title}} + {{item.subtitle}} + + {{item.ageBand}} + {{item.difficulty}} + + + › + + + + + + + {{item.title}} + 更多 + + + + + + + + {{item.icon}} + + {{item.ageBand}} + {{item.difficulty}} + + + + {{item.title}} + {{item.subtitle}} + + + + + diff --git a/miniprogram/style/tags.less b/miniprogram/style/tags.less new file mode 100644 index 0000000..1582b3f --- /dev/null +++ b/miniprogram/style/tags.less @@ -0,0 +1,27 @@ +/** + * 通用标签 / 胶囊样式 + * + * 用法：在页面 less 中 @import '../../style/tags.less'， + * 然后在 wxml 里直接用 class="tag tag--age" / class="tag tag--diff"。 + */ + +.tag { + display: inline-block; + font-size: 20rpx; + // line-height: 1; + line-height: 20rpx; + padding: 8rpx 10rpx; + border-radius: 10rpx; + font-weight: 600; + white-space: nowrap; +} + +.tag--age { + background: #ffd709; + color: #6c5a00; +} + +.tag--diff { + background: #6cc24a; + color: #ffffff; +} \ No newline at end of file diff --git a/miniprogram/assets/focusEntrance/code-connect.png b/miniprogram/supportPages/assets/focusEntrance/code-connect.png similarity index 100% rename from miniprogram/assets/focusEntrance/code-connect.png rename to miniprogram/supportPages/assets/focusEntrance/code-connect.png diff --git a/miniprogram/assets/focusEntrance/color-pattern.png b/miniprogram/supportPages/assets/focusEntrance/color-pattern.png similarity index 100% rename from miniprogram/assets/focusEntrance/color-pattern.png rename to miniprogram/supportPages/assets/focusEntrance/color-pattern.png diff --git a/miniprogram/assets/focusEntrance/color-shape-match.png b/miniprogram/supportPages/assets/focusEntrance/color-shape-match.png similarity index 100% rename from miniprogram/assets/focusEntrance/color-shape-match.png rename to miniprogram/supportPages/assets/focusEntrance/color-shape-match.png diff --git a/miniprogram/assets/focusEntrance/dot-connect.png b/miniprogram/supportPages/assets/focusEntrance/dot-connect.png similarity index 100% rename from miniprogram/assets/focusEntrance/dot-connect.png rename to miniprogram/supportPages/assets/focusEntrance/dot-connect.png diff --git a/miniprogram/assets/focusEntrance/grid-drawing-3x3.png b/miniprogram/supportPages/assets/focusEntrance/grid-drawing-3x3.png similarity index 100% rename from miniprogram/assets/focusEntrance/grid-drawing-3x3.png rename to miniprogram/supportPages/assets/focusEntrance/grid-drawing-3x3.png diff --git a/miniprogram/assets/focusEntrance/grid-drawing-5x5.png b/miniprogram/supportPages/assets/focusEntrance/grid-drawing-5x5.png similarity index 100% rename from miniprogram/assets/focusEntrance/grid-drawing-5x5.png rename to miniprogram/supportPages/assets/focusEntrance/grid-drawing-5x5.png diff --git a/miniprogram/assets/focusEntrance/grid-drawing-7x7.png b/miniprogram/supportPages/assets/focusEntrance/grid-drawing-7x7.png similarity index 100% rename from miniprogram/assets/focusEntrance/grid-drawing-7x7.png rename to miniprogram/supportPages/assets/focusEntrance/grid-drawing-7x7.png diff --git a/miniprogram/assets/focusEntrance/grid-reasoning.png b/miniprogram/supportPages/assets/focusEntrance/grid-reasoning.png similarity index 100% rename from miniprogram/assets/focusEntrance/grid-reasoning.png rename to miniprogram/supportPages/assets/focusEntrance/grid-reasoning.png diff --git a/miniprogram/assets/focusEntrance/line-recognition.png b/miniprogram/supportPages/assets/focusEntrance/line-recognition.png similarity index 100% rename from miniprogram/assets/focusEntrance/line-recognition.png rename to miniprogram/supportPages/assets/focusEntrance/line-recognition.png diff --git a/miniprogram/assets/focusEntrance/match-connect.png b/miniprogram/supportPages/assets/focusEntrance/match-connect.png similarity index 100% rename from miniprogram/assets/focusEntrance/match-connect.png rename to miniprogram/supportPages/assets/focusEntrance/match-connect.png diff --git a/miniprogram/assets/focusEntrance/position-coloring.png b/miniprogram/supportPages/assets/focusEntrance/position-coloring.png similarity index 100% rename from miniprogram/assets/focusEntrance/position-coloring.png rename to miniprogram/supportPages/assets/focusEntrance/position-coloring.png diff --git a/miniprogram/assets/focusEntrance/shape-recognition.png b/miniprogram/supportPages/assets/focusEntrance/shape-recognition.png similarity index 100% rename from miniprogram/assets/focusEntrance/shape-recognition.png rename to miniprogram/supportPages/assets/focusEntrance/shape-recognition.png diff --git a/miniprogram/assets/focusEntrance/shape-symbol.png b/miniprogram/supportPages/assets/focusEntrance/shape-symbol.png similarity index 100% rename from miniprogram/assets/focusEntrance/shape-symbol.png rename to miniprogram/supportPages/assets/focusEntrance/shape-symbol.png diff --git a/miniprogram/assets/mathEntrance/addition-10.png b/miniprogram/supportPages/assets/mathEntrance/addition-10.png similarity index 100% rename from miniprogram/assets/mathEntrance/addition-10.png rename to miniprogram/supportPages/assets/mathEntrance/addition-10.png diff --git a/miniprogram/assets/mathEntrance/addition-5.png b/miniprogram/supportPages/assets/mathEntrance/addition-5.png similarity index 100% rename from miniprogram/assets/mathEntrance/addition-5.png rename to miniprogram/supportPages/assets/mathEntrance/addition-5.png diff --git a/miniprogram/assets/mathEntrance/addition-subtraction-10.png b/miniprogram/supportPages/assets/mathEntrance/addition-subtraction-10.png similarity index 100% rename from miniprogram/assets/mathEntrance/addition-subtraction-10.png rename to miniprogram/supportPages/assets/mathEntrance/addition-subtraction-10.png diff --git a/miniprogram/assets/mathEntrance/borrow-ten.png b/miniprogram/supportPages/assets/mathEntrance/borrow-ten.png similarity index 100% rename from miniprogram/assets/mathEntrance/borrow-ten.png rename to miniprogram/supportPages/assets/mathEntrance/borrow-ten.png diff --git a/miniprogram/assets/mathEntrance/break-ten.png b/miniprogram/supportPages/assets/mathEntrance/break-ten.png similarity index 100% rename from miniprogram/assets/mathEntrance/break-ten.png rename to miniprogram/supportPages/assets/mathEntrance/break-ten.png diff --git a/miniprogram/assets/mathEntrance/compare.png b/miniprogram/supportPages/assets/mathEntrance/compare.png similarity index 100% rename from miniprogram/assets/mathEntrance/compare.png rename to miniprogram/supportPages/assets/mathEntrance/compare.png diff --git a/miniprogram/assets/mathEntrance/count-match.png b/miniprogram/supportPages/assets/mathEntrance/count-match.png similarity index 100% rename from miniprogram/assets/mathEntrance/count-match.png rename to miniprogram/supportPages/assets/mathEntrance/count-match.png diff --git a/miniprogram/assets/mathEntrance/counting-fill.png b/miniprogram/supportPages/assets/mathEntrance/counting-fill.png similarity index 100% rename from miniprogram/assets/mathEntrance/counting-fill.png rename to miniprogram/supportPages/assets/mathEntrance/counting-fill.png diff --git a/miniprogram/assets/mathEntrance/counting-select.png b/miniprogram/supportPages/assets/mathEntrance/counting-select.png similarity index 100% rename from miniprogram/assets/mathEntrance/counting-select.png rename to miniprogram/supportPages/assets/mathEntrance/counting-select.png diff --git a/miniprogram/assets/mathEntrance/flat-ten.png b/miniprogram/supportPages/assets/mathEntrance/flat-ten.png similarity index 100% rename from miniprogram/assets/mathEntrance/flat-ten.png rename to miniprogram/supportPages/assets/mathEntrance/flat-ten.png diff --git a/miniprogram/assets/mathEntrance/make-ten.png b/miniprogram/supportPages/assets/mathEntrance/make-ten.png similarity index 100% rename from miniprogram/assets/mathEntrance/make-ten.png rename to miniprogram/supportPages/assets/mathEntrance/make-ten.png diff --git a/miniprogram/assets/mathEntrance/missing-number.png b/miniprogram/supportPages/assets/mathEntrance/missing-number.png similarity index 100% rename from miniprogram/assets/mathEntrance/missing-number.png rename to miniprogram/supportPages/assets/mathEntrance/missing-number.png diff --git a/miniprogram/assets/mathEntrance/multiplication-table.png b/miniprogram/supportPages/assets/mathEntrance/multiplication-table.png similarity index 100% rename from miniprogram/assets/mathEntrance/multiplication-table.png rename to miniprogram/supportPages/assets/mathEntrance/multiplication-table.png diff --git a/miniprogram/assets/mathEntrance/number-coloring.png b/miniprogram/supportPages/assets/mathEntrance/number-coloring.png similarity index 100% rename from miniprogram/assets/mathEntrance/number-coloring.png rename to miniprogram/supportPages/assets/mathEntrance/number-coloring.png diff --git a/miniprogram/assets/mathEntrance/number-decompose-20.png b/miniprogram/supportPages/assets/mathEntrance/number-decompose-20.png similarity index 100% rename from miniprogram/assets/mathEntrance/number-decompose-20.png rename to miniprogram/supportPages/assets/mathEntrance/number-decompose-20.png diff --git a/miniprogram/assets/mathEntrance/number-decompose.png b/miniprogram/supportPages/assets/mathEntrance/number-decompose.png similarity index 100% rename from miniprogram/assets/mathEntrance/number-decompose.png rename to miniprogram/supportPages/assets/mathEntrance/number-decompose.png diff --git a/miniprogram/assets/mathEntrance/number-find.png b/miniprogram/supportPages/assets/mathEntrance/number-find.png similarity index 100% rename from miniprogram/assets/mathEntrance/number-find.png rename to miniprogram/supportPages/assets/mathEntrance/number-find.png diff --git a/miniprogram/assets/mathEntrance/number-object-fill.png b/miniprogram/supportPages/assets/mathEntrance/number-object-fill.png similarity index 100% rename from miniprogram/assets/mathEntrance/number-object-fill.png rename to miniprogram/supportPages/assets/mathEntrance/number-object-fill.png diff --git a/miniprogram/assets/mathEntrance/number-object-match.png b/miniprogram/supportPages/assets/mathEntrance/number-object-match.png similarity index 100% rename from miniprogram/assets/mathEntrance/number-object-match.png rename to miniprogram/supportPages/assets/mathEntrance/number-object-match.png diff --git a/miniprogram/assets/mathEntrance/number-sort.png b/miniprogram/supportPages/assets/mathEntrance/number-sort.png similarity index 100% rename from miniprogram/assets/mathEntrance/number-sort.png rename to miniprogram/supportPages/assets/mathEntrance/number-sort.png diff --git a/miniprogram/assets/mathEntrance/number-write.png b/miniprogram/supportPages/assets/mathEntrance/number-write.png similarity index 100% rename from miniprogram/assets/mathEntrance/number-write.png rename to miniprogram/supportPages/assets/mathEntrance/number-write.png diff --git a/miniprogram/assets/mathEntrance/one-digit-addition.png b/miniprogram/supportPages/assets/mathEntrance/one-digit-addition.png similarity index 100% rename from miniprogram/assets/mathEntrance/one-digit-addition.png rename to miniprogram/supportPages/assets/mathEntrance/one-digit-addition.png diff --git a/miniprogram/assets/mathEntrance/practice-addition.png b/miniprogram/supportPages/assets/mathEntrance/practice-addition.png similarity index 100% rename from miniprogram/assets/mathEntrance/practice-addition.png rename to miniprogram/supportPages/assets/mathEntrance/practice-addition.png diff --git a/miniprogram/assets/mathEntrance/practice-mixed.png b/miniprogram/supportPages/assets/mathEntrance/practice-mixed.png similarity index 100% rename from miniprogram/assets/mathEntrance/practice-mixed.png rename to miniprogram/supportPages/assets/mathEntrance/practice-mixed.png diff --git a/miniprogram/assets/mathEntrance/practice-subtraction.png b/miniprogram/supportPages/assets/mathEntrance/practice-subtraction.png similarity index 100% rename from miniprogram/assets/mathEntrance/practice-subtraction.png rename to miniprogram/supportPages/assets/mathEntrance/practice-subtraction.png diff --git a/miniprogram/assets/mathEntrance/subtraction-10.png b/miniprogram/supportPages/assets/mathEntrance/subtraction-10.png similarity index 100% rename from miniprogram/assets/mathEntrance/subtraction-10.png rename to miniprogram/supportPages/assets/mathEntrance/subtraction-10.png