feat: 完成 4 个TabBar 页面初版样式修改
This commit is contained in:
R524809
@@ -1,8 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "分龄推荐",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"backgroundColor": "#F5F5F5",
|
||||
"navigationBarBackgroundColor": "#FEF6E7",
|
||||
"backgroundColor": "#FEF6E7",
|
||||
"enablePullDownRefresh": false,
|
||||
"usingComponents": {}
|
||||
}
|
||||
|
||||
+373
-69
@@ -1,108 +1,412 @@
|
||||
@import '../../style/theme3.less';
|
||||
|
||||
@age-tab-gap: 32rpx;
|
||||
@age-tab-w: 226rpx;
|
||||
@age-tab-h: 156rpx;
|
||||
@age-badge-current: #005e17;
|
||||
/* 选中态 box-shadow + scale 外溢；内层留白 + 外层负 margin 抵消，整体上下不占更多间距 */
|
||||
@age-tab-shadow-bleed-t: 36rpx;
|
||||
@age-tab-shadow-bleed-b: 52rpx;
|
||||
|
||||
.age-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 48rpx;
|
||||
background: @bg-page;
|
||||
padding-bottom: calc(48rpx + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.age-hero {
|
||||
background: #fff;
|
||||
padding: 40rpx 32rpx 36rpx;
|
||||
margin-bottom: 24rpx;
|
||||
.age-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
background: fade(@bg-header, 85%);
|
||||
backdrop-filter: blur(40rpx);
|
||||
-webkit-backdrop-filter: blur(40rpx);
|
||||
box-shadow: 0 2rpx 12rpx rgba(50, 46, 37, 0.05);
|
||||
}
|
||||
|
||||
.age-hero__title {
|
||||
display: block;
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.age-hero__subtitle {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.5;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.age-grid {
|
||||
.age-nav__inner {
|
||||
height: @nav-inner-height;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 24rpx;
|
||||
padding: 0 24rpx;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 0 @page-padding-x;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.age-card {
|
||||
width: calc((100% - 24rpx) / 2);
|
||||
background: #fff;
|
||||
border-radius: 32rpx;
|
||||
.age-nav__title {
|
||||
font-size: @fs-nav-title;
|
||||
font-weight: @fw-nav-title;
|
||||
color: @color-nav-title;
|
||||
letter-spacing: @ls-nav-title;
|
||||
}
|
||||
|
||||
.age-body {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 横向年龄 Tab — Stitch 为你推荐版 */
|
||||
.age-tab-scroll {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
padding: @section-gap-sm 0 @section-gap-xs;
|
||||
box-sizing: border-box;
|
||||
margin-top: -@age-tab-shadow-bleed-t;
|
||||
margin-bottom: -@age-tab-shadow-bleed-b;
|
||||
}
|
||||
|
||||
.age-tab-scroll__inner {
|
||||
padding: @age-tab-shadow-bleed-t 0 @age-tab-shadow-bleed-b;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.age-tab-row {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: @age-tab-gap;
|
||||
padding: 0 @page-padding-x;
|
||||
}
|
||||
|
||||
.age-tab {
|
||||
position: relative;
|
||||
width: @age-tab-w;
|
||||
height: @age-tab-h;
|
||||
flex-shrink: 0;
|
||||
padding: 24rpx 16rpx;
|
||||
border-radius: @radius-lg;
|
||||
background: @bg-muted;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
border: 2rpx solid transparent;
|
||||
}
|
||||
|
||||
.age-tab--active {
|
||||
background: @brand;
|
||||
border-color: @bg-white;
|
||||
box-shadow: 0 16rpx 48rpx rgba(255, 215, 9, 0.38);
|
||||
transform: scale(1.05);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.age-tab__current {
|
||||
position: absolute;
|
||||
top: -8rpx;
|
||||
right: -8rpx;
|
||||
padding: 4rpx 14rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 18rpx;
|
||||
font-weight: 700;
|
||||
color: @text-white;
|
||||
background: @age-badge-current;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.age-tab__range {
|
||||
font-size: 36rpx;
|
||||
font-weight: 800;
|
||||
color: @text-title;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.age-tab--active .age-tab__range {
|
||||
color: @text-selected-btn;
|
||||
}
|
||||
|
||||
.age-tab__sub {
|
||||
font-size: 22rpx;
|
||||
color: @text-light;
|
||||
line-height: 1.3;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.age-tab--active .age-tab__sub {
|
||||
color: fade(@text-selected-btn, 85%);
|
||||
}
|
||||
|
||||
.age-panel {
|
||||
margin: 0 @page-padding-x;
|
||||
background: @bg-white;
|
||||
border-radius: @radius-lg;
|
||||
border: 1rpx solid fade(@bg-gray, 90%);
|
||||
box-shadow: @shadow;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.age-goal-panel {
|
||||
padding: 36rpx @page-padding-x 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.age-card__art {
|
||||
height: 160rpx;
|
||||
.age-goal-head {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-bottom: @section-gap-sm;
|
||||
}
|
||||
|
||||
.age-goal-head__icon-wrap {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 50%;
|
||||
background: @brand-light;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.age-card__emoji {
|
||||
font-size: 72rpx;
|
||||
.age-goal-head__icon {
|
||||
font-size: 28rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.age-card__body {
|
||||
padding: 24rpx 24rpx 28rpx;
|
||||
.age-goal-head__title {
|
||||
font-size: @fs-section-head-title;
|
||||
font-weight: 800;
|
||||
color: @text-selected-btn;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.age-card__label {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
margin-bottom: 8rpx;
|
||||
.age-goal-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.age-card__desc {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-bottom: 12rpx;
|
||||
.age-goal-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12rpx;
|
||||
padding: 28rpx @page-padding-inner-x;
|
||||
border-radius: @radius;
|
||||
background: @bg-header;
|
||||
box-sizing: border-box;
|
||||
border: 1rpx solid rgba(229, 220, 201, 0.55);
|
||||
}
|
||||
|
||||
.age-card__count {
|
||||
display: block;
|
||||
font-size: 22rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.age-tip {
|
||||
margin: 40rpx 24rpx 0;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 28rpx 24rpx;
|
||||
.age-goal-item__top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
gap: 20rpx;
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.age-tip__duck {
|
||||
font-size: 64rpx;
|
||||
.age-goal-item__emoji {
|
||||
font-size: 40rpx;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.age-tip__text {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.55;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
.age-goal-item__title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: @text-selected-btn;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.age-goal-item__desc {
|
||||
font-size: 24rpx;
|
||||
line-height: 1.5;
|
||||
color: @text-secondary;
|
||||
}
|
||||
|
||||
.age-path-head {
|
||||
margin: @section-gap-lg @page-padding-x @section-gap-xs;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.age-path-head__left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.age-path-head__bar {
|
||||
width: 16rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 999rpx;
|
||||
background: @text-selected-btn;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.age-path-head__title {
|
||||
font-size: 40rpx;
|
||||
font-weight: 800;
|
||||
color: @text-title;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.age-path-head__badge {
|
||||
flex-shrink: 0;
|
||||
font-size: 20rpx;
|
||||
font-weight: 700;
|
||||
color: @text-secondary;
|
||||
background: @bg-header;
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 999rpx;
|
||||
border: @border;
|
||||
}
|
||||
|
||||
.age-week-list {
|
||||
padding: 0 @page-padding-x;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: @section-gap-lg;
|
||||
}
|
||||
|
||||
.age-week-card {
|
||||
background: @bg-white;
|
||||
border-radius: @radius-lg;
|
||||
overflow: hidden;
|
||||
border: 1rpx solid rgba(50, 46, 37, 0.08);
|
||||
box-shadow: @shadow;
|
||||
}
|
||||
|
||||
.age-week-card__head {
|
||||
padding: 28rpx @page-padding-x;
|
||||
background: @bg-week-head;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.age-week-card__week {
|
||||
font-size: @fs-section-head-title;
|
||||
font-weight: 800;
|
||||
color: @text-title;
|
||||
}
|
||||
|
||||
.age-week-card__theme {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: @text-gray;
|
||||
}
|
||||
|
||||
.age-week-card__body {
|
||||
padding: 0 @page-padding-x 8rpx;
|
||||
}
|
||||
|
||||
.age-week-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
padding: 32rpx 0;
|
||||
border-bottom: 1rpx solid #f2f2f2;
|
||||
}
|
||||
|
||||
.age-week-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.age-week-row__title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: @text-title;
|
||||
}
|
||||
|
||||
.age-week-row__btn {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 14rpx 28rpx;
|
||||
border-radius: 999rpx;
|
||||
background: @brand;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
color: @text-selected-btn;
|
||||
box-shadow: 0 4rpx 12rpx rgba(255, 215, 9, 0.35);
|
||||
}
|
||||
|
||||
.age-week-row__btn-arrow {
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* [为你推荐] — Stitch 栅格 */
|
||||
.age-rec {
|
||||
margin-top: @section-gap-lg;
|
||||
padding: 0 @page-padding-x @section-gap-xs;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.age-rec__head {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: @section-gap-xs;
|
||||
}
|
||||
|
||||
.age-rec__title {
|
||||
font-size: @fs-section-head-title;
|
||||
font-weight: 800;
|
||||
color: @text-title;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.age-rec__more {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: @text-selected-btn;
|
||||
padding: 8rpx 0 8rpx 24rpx;
|
||||
}
|
||||
|
||||
.age-rec__grid {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
row-gap: 32rpx;
|
||||
}
|
||||
|
||||
.age-rec__card {
|
||||
width: calc(50% - 16rpx);
|
||||
background: @bg-white;
|
||||
border-radius: @radius-lg;
|
||||
overflow: hidden;
|
||||
border: 1rpx solid rgba(50, 46, 37, 0.08);
|
||||
box-shadow: @shadow;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.age-rec__img {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
display: block;
|
||||
background: fade(@brand, 15%);
|
||||
}
|
||||
|
||||
.age-rec__body {
|
||||
padding: 20rpx 20rpx 24rpx;
|
||||
}
|
||||
|
||||
.age-rec__card-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: @text-title;
|
||||
line-height: 1.35;
|
||||
}
|
||||
+230
-31
@@ -1,44 +1,243 @@
|
||||
import { ALL_WORKSHEETS, getWorksheetsByAge } from '../../core/data/worksheets';
|
||||
import { AGE_BANDS, AgeBandKey } from '../../core/data/difficulty';
|
||||
import { NAV_INNER_PX } from '../../utils/navMetrics';
|
||||
|
||||
interface AgeGroup {
|
||||
label: string;
|
||||
type AbilityItem = {
|
||||
icon: string;
|
||||
title: string;
|
||||
desc: string;
|
||||
emoji: string;
|
||||
minAge: number;
|
||||
maxAge: number;
|
||||
count: number;
|
||||
gradient: string;
|
||||
}
|
||||
};
|
||||
|
||||
type WeekExercise = {
|
||||
title: string;
|
||||
};
|
||||
|
||||
type WeekPlan = {
|
||||
week: number;
|
||||
theme: string;
|
||||
exercises: WeekExercise[];
|
||||
};
|
||||
|
||||
const AGE_TAB_SUB: Record<AgeBandKey, string> = {
|
||||
'3-4': '启蒙认知',
|
||||
'4-5': '基础练习',
|
||||
'5-6': '能力提升',
|
||||
'6-7': '幼小衔接',
|
||||
'7-8': '知识拓展',
|
||||
};
|
||||
|
||||
/** Stitch「为你推荐」占位图（需在小程序后台配置 download 合法域名含 lh3.googleusercontent.com） */
|
||||
const RECOMMENDED_FROM_STITCH: { title: string; image: string }[] = [
|
||||
{
|
||||
title: '10以内加减法',
|
||||
image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuD-3lADhclTGODN9WtNh5v8bQPLysbllbKNkH40bAmVyE5d54PwfTBOiX9nER1hpE4rzHAfsmM_JhVnsE4EbdA914rYIb3S3e4r9QKFjUqYmj2XpE4MlYr_vLkG4oeMnvnHOqGC96nLGrPSOq-fpIddV7RSlYLDeNccBs0G2oUOy-6jIMujzTuEGk4nnxme5rpxs7rYjwcvVsqM5dlkpJthY42e4B3lSPH7ezx187WRSk--m4ZiWmAI52mMOiygzTSWoNormlvfvdM',
|
||||
},
|
||||
{
|
||||
title: '拼音描红',
|
||||
image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBYS4O7PyflR5q8M6oXKwj_8QHzex3OL3YvdHBncutm7a_bjlZj83-8UBpGUQvJO20V0BnAdU3iKEoLlUqwpS60CiPhVyxYaHEAqv52P5YUhJdjf0hpLir1Li4rdI_-eqGkPTasYl-5kD2r8-RjUokKg_HiW5_TF72UbxFXHQh4BefYJZfl0Oc9-aTQvkbFL0C3tagi9Qv1jRsgQldMFU4M7cHt8KkxhO1QDF7-R85ZFORJM0RiqV2l-jn0c-UscKtuWtroiX6UUKk',
|
||||
},
|
||||
{
|
||||
title: '趣味找不同',
|
||||
image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBSafbTyucs8JLpTgibRWwAJsHukrklTAuEnaAzax_Kr1RNCwHjqpQjta0Q-h47ClufzEmaHPgCIOlm_a2lL4gNlgBDyraCwzRU7aWCf_Fj_dM1cLGzROJmtqrdHKjQzTbCp0_Da8BvXi4a4H2X4RAYVPnLbZVmbgPXrTvpKgEI605kIMmr3n0--WojJQRsF4B_xCho80gABbIaMTHJHrs9xdEY6fZKg8ArQx7lRbJ6_EsLLB_C5a5crZ_begwruXKr3pmdU6KneC8',
|
||||
},
|
||||
{
|
||||
title: '走迷宫大挑战',
|
||||
image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuAOZHI1Dz6ax4iFUb3QYL-EWp2euA_3kyUeCcu6V57BBCzarMwKnFzcpJxJn4X4woklWFB08Ii1w6zsk0H5eDaPdgUYmsvY0NFqvAhKN_IbZGZjZnclZlBHkLRcX64Nl767L2pg01FQu9Tp6nq2p3lAuYeEQ2fiIdXh4j-QHyikbmx4_aDlx5X5fC0fqMMxWykhwLNkDzl2Rs3ucXj7zYnUP-dNNY-aj_JvqkY4pqoXQDt9ZJcfSeL0dWes7nvD5U2C_JFhrk1bVkw',
|
||||
},
|
||||
{
|
||||
title: '数字点连线',
|
||||
image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuD-3lADhclTGODN9WtNh5v8bQPLysbllbKNkH40bAmVyE5d54PwfTBOiX9nER1hpE4rzHAfsmM_JhVnsE4EbdA914rYIb3S3e4r9QKFjUqYmj2XpE4MlYr_vLkG4oeMnvnHOqGC96nLGrPSOq-fpIddV7RSlYLDeNccBs0G2oUOy-6jIMujzTuEGk4nnxme5rpxs7rYjwcvVsqM5dlkpJthY42e4B3lSPH7ezx187WRSk--m4ZiWmAI52mMOiygzTSWoNormlvfvdM',
|
||||
},
|
||||
{
|
||||
title: '方格推理高手',
|
||||
image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBYS4O7PyflR5q8M6oXKwj_8QHzex3OL3YvdHBncutm7a_bjlZj83-8UBpGUQvJO20V0BnAdU3iKEoLlUqwpS60CiPhVyxYaHEAqv52P5YUhJdjf0hpLir1Li4rdI_-eqGkPTasYl-5kD2r8-RjUokKg_HiW5_TF72UbxFXHQh4BefYJZfl0Oc9-aTQvkbFL0C3tagi9Qv1jRsgQldMFU4M7cHt8KkxhO1QDF7-R85ZFORJM0RiqV2l-jn0c-UscKtuWtroiX6UUKk',
|
||||
},
|
||||
];
|
||||
|
||||
/** 各年龄段能力目标（Mock） */
|
||||
const MOCK_ABILITY: Record<AgeBandKey, AbilityItem[]> = {
|
||||
'3-4': [
|
||||
{
|
||||
icon: '🔢',
|
||||
title: '数感',
|
||||
desc: '认读 1-5、点数对应',
|
||||
},
|
||||
{
|
||||
icon: '✏️',
|
||||
title: '书写',
|
||||
desc: '涂鸦线条、简单描红',
|
||||
},
|
||||
{
|
||||
icon: '🧩',
|
||||
title: '思维',
|
||||
desc: '找相同、简单配对',
|
||||
},
|
||||
],
|
||||
'4-5': [
|
||||
{
|
||||
icon: '🔢',
|
||||
title: '数感',
|
||||
desc: '10 以内数数、比大小',
|
||||
},
|
||||
{
|
||||
icon: '✏️',
|
||||
title: '书写',
|
||||
desc: '笔画模仿、图形描边',
|
||||
},
|
||||
{
|
||||
icon: '🧩',
|
||||
title: '思维',
|
||||
desc: '规律排序、图形分类',
|
||||
},
|
||||
],
|
||||
'5-6': [
|
||||
{
|
||||
icon: '🔢',
|
||||
title: '数感',
|
||||
desc: '10以内加减法、凑十法',
|
||||
},
|
||||
{
|
||||
icon: '✏️',
|
||||
title: '书写',
|
||||
desc: '练字帖、拼音入门',
|
||||
},
|
||||
{
|
||||
icon: '🧩',
|
||||
title: '思维',
|
||||
desc: '方格推理、格子仿画 5×5',
|
||||
},
|
||||
],
|
||||
'6-7': [
|
||||
{
|
||||
icon: '🔢',
|
||||
title: '数感',
|
||||
desc: '20 以内运算、应用题启蒙',
|
||||
},
|
||||
{
|
||||
icon: '✏️',
|
||||
title: '书写',
|
||||
desc: '常用字书写、词语积累',
|
||||
},
|
||||
{
|
||||
icon: '🧩',
|
||||
title: '思维',
|
||||
desc: '逻辑填空、空间想象',
|
||||
},
|
||||
],
|
||||
'7-8': [
|
||||
{
|
||||
icon: '🔢',
|
||||
title: '数感',
|
||||
desc: '乘除启蒙、巧算练习',
|
||||
},
|
||||
{
|
||||
icon: '✏️',
|
||||
title: '书写',
|
||||
desc: '段落抄写、古诗诵读',
|
||||
},
|
||||
{
|
||||
icon: '🧩',
|
||||
title: '思维',
|
||||
desc: '数独入门、综合推理',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
/** 4 周路线（各年龄段共用结构，内容 Mock） */
|
||||
const MOCK_WEEKS: WeekPlan[] = [
|
||||
{
|
||||
week: 1,
|
||||
theme: '数感启蒙',
|
||||
exercises: [
|
||||
{ title: '找数字涂一涂' },
|
||||
{ title: '5 以内加法' },
|
||||
{ title: '数数连一连' },
|
||||
],
|
||||
},
|
||||
{
|
||||
week: 2,
|
||||
theme: '形状与连线',
|
||||
exercises: [
|
||||
{ title: '识别形状' },
|
||||
{ title: '线条识别' },
|
||||
{ title: '数字点连线' },
|
||||
],
|
||||
},
|
||||
{
|
||||
week: 3,
|
||||
theme: '趣味专注',
|
||||
exercises: [
|
||||
{ title: '颜色找规律' },
|
||||
{ title: '方格推理' },
|
||||
{ title: '格子仿画' },
|
||||
],
|
||||
},
|
||||
{
|
||||
week: 4,
|
||||
theme: '综合练习',
|
||||
exercises: [
|
||||
{ title: '10以内加减法' },
|
||||
{ title: '识字卡' },
|
||||
{ title: '连连看' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const DEFAULT_AGE: AgeBandKey = '5-6';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
ageGroups: [] as AgeGroup[],
|
||||
statusBarHeight: 0,
|
||||
navBlockHeight: 0,
|
||||
ageTabs: AGE_BANDS.map((b) => ({
|
||||
key: b.key,
|
||||
rangeText: b.label.replace(/\s*岁\s*$/, ''),
|
||||
subLabel: AGE_TAB_SUB[b.key],
|
||||
})),
|
||||
activeAgeKey: DEFAULT_AGE,
|
||||
goalTitle: '',
|
||||
abilityItems: [] as AbilityItem[],
|
||||
weekPlans: MOCK_WEEKS,
|
||||
recommendedItems: RECOMMENDED_FROM_STITCH,
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
const groups = [
|
||||
{ label: '3-4 岁', desc: '启蒙认知', emoji: '👶', minAge: 3, maxAge: 4, gradient: 'linear-gradient(135deg, #fff9c4, #fff176)' },
|
||||
{ label: '4-5 岁', desc: '基础练习', emoji: '🧒', minAge: 4, maxAge: 5, gradient: 'linear-gradient(135deg, #c8e6c9, #81c784)' },
|
||||
{ label: '5-6 岁', desc: '能力提升', emoji: '👦', minAge: 5, maxAge: 6, gradient: 'linear-gradient(135deg, #bbdefb, #64b5f6)' },
|
||||
{ label: '6-7 岁', desc: '幼小衔接', emoji: '👧', minAge: 6, maxAge: 7, gradient: 'linear-gradient(135deg, #e1bee7, #ba68c8)' },
|
||||
{ label: '7-8 岁', desc: '巩固挑战', emoji: '🎒', minAge: 7, maxAge: 8, gradient: 'linear-gradient(135deg, #ffccbc, #ff8a65)' },
|
||||
];
|
||||
|
||||
const ageGroups = groups.map((g) => ({
|
||||
...g,
|
||||
count: getWorksheetsByAge(ALL_WORKSHEETS, g.minAge).length,
|
||||
}));
|
||||
|
||||
this.setData({ ageGroups });
|
||||
const win = wx.getWindowInfo();
|
||||
this.setData({
|
||||
statusBarHeight: win.statusBarHeight,
|
||||
navBlockHeight: win.statusBarHeight + NAV_INNER_PX,
|
||||
});
|
||||
this.applyAge(DEFAULT_AGE);
|
||||
},
|
||||
|
||||
onAgeCardTap(e: WechatMiniprogram.TouchEvent) {
|
||||
const minAge = Number(e.currentTarget.dataset.minAge);
|
||||
const maxAge = Number(e.currentTarget.dataset.maxAge);
|
||||
if (Number.isNaN(minAge) || Number.isNaN(maxAge)) return;
|
||||
const title = `${minAge}-${maxAge}岁推荐`;
|
||||
wx.navigateTo({
|
||||
url: `/pages/category/category?minAge=${minAge}&maxAge=${maxAge}&title=${encodeURIComponent(title)}`,
|
||||
applyAge(key: AgeBandKey) {
|
||||
const band = AGE_BANDS.find((b) => b.key === key);
|
||||
const goalTitle = band ? `${band.label}能力目标` : '能力目标';
|
||||
this.setData({
|
||||
activeAgeKey: key,
|
||||
goalTitle,
|
||||
abilityItems: MOCK_ABILITY[key],
|
||||
});
|
||||
},
|
||||
|
||||
onAgeTabTap(e: WechatMiniprogram.TouchEvent) {
|
||||
const key = e.currentTarget.dataset.key as AgeBandKey | undefined;
|
||||
if (!key) return;
|
||||
this.applyAge(key);
|
||||
},
|
||||
|
||||
onPracticeTap(e: WechatMiniprogram.TouchEvent) {
|
||||
const title = e.currentTarget.dataset.title as string | undefined;
|
||||
if (!title) return;
|
||||
wx.showToast({ title: `即将前往：${title}`, icon: 'none' });
|
||||
},
|
||||
|
||||
onRecommendMore() {
|
||||
wx.switchTab({ url: '/pages/home/home' });
|
||||
},
|
||||
|
||||
onRecommendTap(e: WechatMiniprogram.TouchEvent) {
|
||||
const title = e.currentTarget.dataset.title as string | undefined;
|
||||
if (!title) return;
|
||||
wx.showToast({ title: `去看看：${title}`, icon: 'none' });
|
||||
},
|
||||
});
|
||||
|
||||
+104
-25
@@ -1,31 +1,110 @@
|
||||
<view class="age-page">
|
||||
<view class="age-hero">
|
||||
<text class="age-hero__title">分龄推荐</text>
|
||||
<text class="age-hero__subtitle">按年龄段挑选适合的练习单，循序渐进更省心</text>
|
||||
</view>
|
||||
|
||||
<view class="age-grid">
|
||||
<view
|
||||
wx:for="{{ageGroups}}"
|
||||
wx:key="label"
|
||||
class="age-card"
|
||||
bindtap="onAgeCardTap"
|
||||
data-min-age="{{item.minAge}}"
|
||||
data-max-age="{{item.maxAge}}"
|
||||
>
|
||||
<view class="age-card__art" style="background: {{item.gradient}}">
|
||||
<text class="age-card__emoji">{{item.emoji}}</text>
|
||||
</view>
|
||||
<view class="age-card__body">
|
||||
<text class="age-card__label">{{item.label}}</text>
|
||||
<text class="age-card__desc">{{item.desc}}</text>
|
||||
<text class="age-card__count">{{item.count}} 个练习</text>
|
||||
</view>
|
||||
<view class="age-nav" style="padding-top: {{statusBarHeight}}px;">
|
||||
<view class="age-nav__inner">
|
||||
<text class="age-nav__title">按年龄学</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="age-tip">
|
||||
<text class="age-tip__duck">🦆</text>
|
||||
<text class="age-tip__text">建议家长根据孩子当前能力微调难度，不必严格按年龄划分哦～</text>
|
||||
<view class="age-body" style="padding-top: {{navBlockHeight}}px;">
|
||||
<scroll-view class="age-tab-scroll" scroll-x enable-flex>
|
||||
<view class="age-tab-scroll__inner">
|
||||
<view class="age-tab-row">
|
||||
<view
|
||||
wx:for="{{ageTabs}}"
|
||||
wx:key="key"
|
||||
class="age-tab {{activeAgeKey === item.key ? 'age-tab--active' : ''}}"
|
||||
data-key="{{item.key}}"
|
||||
bindtap="onAgeTabTap">
|
||||
<text class="age-tab__range">{{item.rangeText}}</text>
|
||||
<text class="age-tab__sub">{{item.subLabel}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="age-panel age-goal-panel">
|
||||
<view class="age-goal-head">
|
||||
<view class="age-goal-head__icon-wrap">
|
||||
<text class="age-goal-head__icon" aria-hidden="true"
|
||||
>⭐</text
|
||||
>
|
||||
</view>
|
||||
<text class="age-goal-head__title">{{goalTitle}}</text>
|
||||
</view>
|
||||
<view class="age-goal-list">
|
||||
<view
|
||||
wx:for="{{abilityItems}}"
|
||||
wx:key="title"
|
||||
class="age-goal-item">
|
||||
<view class="age-goal-item__top">
|
||||
<text class="age-goal-item__emoji">{{item.icon}}</text>
|
||||
<text class="age-goal-item__title">{{item.title}}</text>
|
||||
</view>
|
||||
<text class="age-goal-item__desc">{{item.desc}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="age-path-head">
|
||||
<view class="age-path-head__left">
|
||||
<view class="age-path-head__bar" />
|
||||
<text class="age-path-head__title">4 周推荐学习路线</text>
|
||||
</view>
|
||||
<view class="age-path-head__badge">4 周 · 每周 3 练</view>
|
||||
</view>
|
||||
|
||||
<view class="age-week-list">
|
||||
<view wx:for="{{weekPlans}}" wx:key="week" class="age-week-card">
|
||||
<view class="age-week-card__head">
|
||||
<text class="age-week-card__week">第 {{item.week}} 周</text>
|
||||
<text class="age-week-card__theme">{{item.theme}}</text>
|
||||
</view>
|
||||
<view class="age-week-card__body">
|
||||
<view
|
||||
wx:for="{{item.exercises}}"
|
||||
wx:for-item="ex"
|
||||
wx:key="title"
|
||||
class="age-week-row">
|
||||
<text class="age-week-row__title">{{ex.title}}</text>
|
||||
<view
|
||||
class="age-week-row__btn"
|
||||
data-title="{{ex.title}}"
|
||||
catchtap="onPracticeTap">
|
||||
<text>去练习</text>
|
||||
<text
|
||||
class="age-week-row__btn-arrow"
|
||||
aria-hidden="true"
|
||||
>→</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="age-rec">
|
||||
<view class="age-rec__head">
|
||||
<text class="age-rec__title">为你推荐</text>
|
||||
<text class="age-rec__more" bindtap="onRecommendMore"
|
||||
>更多</text
|
||||
>
|
||||
</view>
|
||||
<view class="age-rec__grid">
|
||||
<view
|
||||
wx:for="{{recommendedItems}}"
|
||||
wx:key="title"
|
||||
class="age-rec__card"
|
||||
data-title="{{item.title}}"
|
||||
bindtap="onRecommendTap">
|
||||
<image
|
||||
class="age-rec__img"
|
||||
src="{{item.image}}"
|
||||
mode="aspectFill" />
|
||||
<view class="age-rec__body">
|
||||
<text class="age-rec__card-title">{{item.title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"navigationBarTitleText": "分类",
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"backgroundColor": "#F6F6F6",
|
||||
"usingComponents": {
|
||||
"worksheet-card": "../../components3.0/worksheet-card/worksheet-card",
|
||||
"detail-card": "../../components3.0/detail-card/detail-card"
|
||||
}
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
.category-page {
|
||||
min-height: 100vh;
|
||||
background: #f6f6f6;
|
||||
padding-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.category-page__header {
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.category-page__header-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.category-page__filters {
|
||||
background: #fff;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.category-page__filter-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.category-page__filter-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.category-page__filter-label {
|
||||
flex-shrink: 0;
|
||||
width: 72rpx;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
line-height: 56rpx;
|
||||
}
|
||||
|
||||
.category-page__pills {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.category-page__pill {
|
||||
font-size: 24rpx;
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 24rpx;
|
||||
background: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.category-page__pill--active {
|
||||
background: #f7ee47;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.category-page__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.category-page__card-wrap {
|
||||
margin: 0 24rpx 24rpx;
|
||||
}
|
||||
|
||||
.category-page__empty {
|
||||
padding: 120rpx 48rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.category-page__empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
@@ -1,161 +0,0 @@
|
||||
import type {
|
||||
WorksheetDefinition,
|
||||
WorksheetType,
|
||||
} from '../../core/models/worksheet';
|
||||
import {
|
||||
getWorksheetPath,
|
||||
getWorksheetsByAge,
|
||||
getWorksheetsByCategory,
|
||||
} from '../../core/data/worksheets';
|
||||
|
||||
type AgeFilterKey = 'all' | '3-4' | '4-5' | '5-6' | '6-7' | '7-8';
|
||||
type DiffFilterKey = 'all' | 'beginner' | 'basic' | 'intermediate';
|
||||
|
||||
const AGE_BAND: Record<Exclude<AgeFilterKey, 'all'>, [number, number]> = {
|
||||
'3-4': [3, 4],
|
||||
'4-5': [4, 5],
|
||||
'5-6': [5, 6],
|
||||
'6-7': [6, 7],
|
||||
'7-8': [7, 8],
|
||||
};
|
||||
|
||||
const DIFF_LABEL: Record<string, string> = {
|
||||
beginner: '入门',
|
||||
basic: '基础',
|
||||
intermediate: '进阶',
|
||||
advanced: '进阶+',
|
||||
};
|
||||
|
||||
type DisplayItem = WorksheetType & {
|
||||
ageRangeLabel: string;
|
||||
difficultyLabel: string;
|
||||
};
|
||||
|
||||
function filterByAgeBand(
|
||||
list: WorksheetType[],
|
||||
band: AgeFilterKey,
|
||||
): WorksheetType[] {
|
||||
if (band === 'all') return list;
|
||||
const [lo, hi] = AGE_BAND[band];
|
||||
const map = new Map<string, WorksheetType>();
|
||||
for (let age = lo; age <= hi; age += 1) {
|
||||
getWorksheetsByAge(list, age).forEach((w) => map.set(w.id, w));
|
||||
}
|
||||
return Array.from(map.values());
|
||||
}
|
||||
|
||||
function filterByDifficulty(
|
||||
list: WorksheetType[],
|
||||
diff: DiffFilterKey,
|
||||
): WorksheetType[] {
|
||||
if (diff === 'all') return list;
|
||||
return list.filter((w) => w.difficulty === diff);
|
||||
}
|
||||
|
||||
function toDisplayList(list: WorksheetType[]): DisplayItem[] {
|
||||
return list.map((w) => ({
|
||||
...w,
|
||||
ageRangeLabel:
|
||||
w.ageRange && w.ageRange.length === 2
|
||||
? `${w.ageRange[0]}-${w.ageRange[1]}岁`
|
||||
: '',
|
||||
difficultyLabel: w.difficulty ? DIFF_LABEL[w.difficulty] || '' : '',
|
||||
}));
|
||||
}
|
||||
|
||||
Page({
|
||||
data: {
|
||||
title: '分类',
|
||||
sourceItems: [] as WorksheetDefinition[],
|
||||
items: [] as DisplayItem[],
|
||||
ageFilters: [
|
||||
{ key: 'all', label: '全部' },
|
||||
{ key: '3-4', label: '3-4岁' },
|
||||
{ key: '4-5', label: '4-5岁' },
|
||||
{ key: '5-6', label: '5-6岁' },
|
||||
{ key: '6-7', label: '6-7岁' },
|
||||
{ key: '7-8', label: '7-8岁' },
|
||||
],
|
||||
diffFilters: [
|
||||
{ key: 'all', label: '全部' },
|
||||
{ key: 'beginner', label: '⭐ 入门' },
|
||||
{ key: 'basic', label: '⭐⭐ 基础' },
|
||||
{ key: 'intermediate', label: '⭐⭐⭐ 进阶' },
|
||||
],
|
||||
activeAge: 'all' as AgeFilterKey,
|
||||
activeDiff: 'all' as DiffFilterKey,
|
||||
},
|
||||
|
||||
onLoad(options: {
|
||||
category?: string;
|
||||
minAge?: string;
|
||||
maxAge?: string;
|
||||
title?: string;
|
||||
}) {
|
||||
const category = options.category || 'all';
|
||||
let base = getWorksheetsByCategory(category);
|
||||
|
||||
const minAge = options.minAge != null ? Number(options.minAge) : NaN;
|
||||
const maxAge = options.maxAge != null ? Number(options.maxAge) : NaN;
|
||||
if (!Number.isNaN(minAge) && !Number.isNaN(maxAge)) {
|
||||
const map = new Map<string, WorksheetDefinition>();
|
||||
const lo = Math.min(minAge, maxAge);
|
||||
const hi = Math.max(minAge, maxAge);
|
||||
for (let age = lo; age <= hi; age += 1) {
|
||||
getWorksheetsByAge(base, age).forEach((w) => map.set(w.id, w));
|
||||
}
|
||||
base = Array.from(map.values());
|
||||
}
|
||||
|
||||
const title = options.title
|
||||
? decodeURIComponent(options.title)
|
||||
: '分类';
|
||||
|
||||
this.setData({
|
||||
title,
|
||||
sourceItems: base,
|
||||
});
|
||||
wx.setNavigationBarTitle({ title });
|
||||
this.applyFilters();
|
||||
},
|
||||
|
||||
applyFilters() {
|
||||
const { sourceItems, activeAge, activeDiff } = this.data;
|
||||
let next = filterByAgeBand(sourceItems, activeAge);
|
||||
next = filterByDifficulty(next, activeDiff);
|
||||
this.setData({ items: toDisplayList(next) });
|
||||
},
|
||||
|
||||
onAgeFilter(e: WechatMiniprogram.TouchEvent) {
|
||||
const key = e.currentTarget.dataset.key as AgeFilterKey;
|
||||
if (!key) return;
|
||||
this.setData({ activeAge: key }, () => this.applyFilters());
|
||||
},
|
||||
|
||||
onDiffFilter(e: WechatMiniprogram.TouchEvent) {
|
||||
const key = e.currentTarget.dataset.key as DiffFilterKey;
|
||||
if (!key) return;
|
||||
this.setData({ activeDiff: key }, () => this.applyFilters());
|
||||
},
|
||||
|
||||
buildWorksheetUrl(w: WorksheetType): string {
|
||||
let url = getWorksheetPath(w);
|
||||
if (!url) return '';
|
||||
if (w.mode) {
|
||||
url += url.includes('?') ? `&mode=${w.mode}` : `?mode=${w.mode}`;
|
||||
}
|
||||
return url;
|
||||
},
|
||||
|
||||
onCardTap(e: WechatMiniprogram.TouchEvent) {
|
||||
const id = e.currentTarget.dataset.id as string;
|
||||
const w = this.data.items.find((item) => item.id === id);
|
||||
if (!w) return;
|
||||
const url = this.buildWorksheetUrl(w);
|
||||
if (!url) {
|
||||
wx.showToast({ title: '暂无法打开', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
wx.navigateTo({ url });
|
||||
},
|
||||
});
|
||||
@@ -1,58 +0,0 @@
|
||||
<view class="category-page">
|
||||
<view class="category-page__header">
|
||||
<text class="category-page__header-title">{{title}}</text>
|
||||
</view>
|
||||
|
||||
<view class="category-page__filters">
|
||||
<view class="category-page__filter-row">
|
||||
<text class="category-page__filter-label">年龄</text>
|
||||
<view class="category-page__pills">
|
||||
<view
|
||||
wx:for="{{ageFilters}}"
|
||||
wx:key="key"
|
||||
class="category-page__pill {{activeAge === item.key ? 'category-page__pill--active' : ''}}"
|
||||
data-key="{{item.key}}"
|
||||
bindtap="onAgeFilter"
|
||||
>
|
||||
{{item.label}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="category-page__filter-row">
|
||||
<text class="category-page__filter-label">难度</text>
|
||||
<view class="category-page__pills">
|
||||
<view
|
||||
wx:for="{{diffFilters}}"
|
||||
wx:key="key"
|
||||
class="category-page__pill {{activeDiff === item.key ? 'category-page__pill--active' : ''}}"
|
||||
data-key="{{item.key}}"
|
||||
bindtap="onDiffFilter"
|
||||
>
|
||||
{{item.label}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{items.length}}" class="category-page__list">
|
||||
<view
|
||||
wx:for="{{items}}"
|
||||
wx:key="id"
|
||||
class="category-page__card-wrap"
|
||||
>
|
||||
<detail-card
|
||||
title="{{item.title}}"
|
||||
preview-bg="{{item.previewBg}}"
|
||||
preview-text="{{item.previewText}}"
|
||||
age-range="{{item.ageRangeLabel}}"
|
||||
difficulty="{{item.difficultyLabel}}"
|
||||
data-id="{{item.id}}"
|
||||
bind:tap="onCardTap"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view wx:else class="category-page__empty">
|
||||
<text class="category-page__empty-text">暂无符合条件的练习纸</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -1,6 +1,10 @@
|
||||
{
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "我的收藏",
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"backgroundColor": "#F6F6F6"
|
||||
"navigationBarBackgroundColor": "#F8F0E0",
|
||||
"backgroundColor": "#FEF6E7",
|
||||
"usingComponents": {
|
||||
"van-icon": "@vant/weapp/icon/index"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,88 +1,452 @@
|
||||
.favorites-page {
|
||||
@import '../../style/theme3.less';
|
||||
|
||||
@fav-seg-track: #f0e7d6;
|
||||
@fav-thumb-placeholder: #e5dcc9;
|
||||
@fav-secondary-cta-bg: #ffc697;
|
||||
@fav-secondary-cta-text: #6d3b00;
|
||||
@fav-heart: #b02500;
|
||||
|
||||
.fav-page {
|
||||
min-height: 100vh;
|
||||
background: #f6f6f6;
|
||||
background: @bg-page;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.favorites-page__title {
|
||||
padding: 32rpx 32rpx 24rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
.fav-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
flex-shrink: 0;
|
||||
background: fade(@bg-header, 82%);
|
||||
backdrop-filter: blur(40rpx);
|
||||
-webkit-backdrop-filter: blur(40rpx);
|
||||
box-shadow: 0 2rpx 12rpx rgba(50, 46, 37, 0.05);
|
||||
}
|
||||
|
||||
.favorites-page__tabs {
|
||||
.fav-nav__inner {
|
||||
height: @nav-inner-height;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: #fff;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 0 @page-padding-x;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.favorites-page__tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 24rpx 0;
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
position: relative;
|
||||
.fav-nav__title {
|
||||
font-size: @fs-nav-title;
|
||||
font-weight: @fw-nav-title;
|
||||
color: @color-nav-title;
|
||||
letter-spacing: @ls-nav-title;
|
||||
}
|
||||
|
||||
.favorites-page__tab--active {
|
||||
color: #333;
|
||||
.fav-nav__actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-width: 120rpx;
|
||||
}
|
||||
|
||||
.fav-nav__icon-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.fav-nav__clear {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: fade(@text-selected-btn, 65%);
|
||||
padding: 12rpx 20rpx;
|
||||
border-radius: 999rpx;
|
||||
}
|
||||
|
||||
.favorites-page__tab--active::after {
|
||||
content: '';
|
||||
.fav-scroll {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fav-body {
|
||||
padding: @section-gap-xs @page-padding-x;
|
||||
padding-bottom: calc(48rpx + env(safe-area-inset-bottom) + 120rpx);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Segmented（Stitch 胶囊） */
|
||||
.fav-seg {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
padding: 12rpx;
|
||||
margin-bottom: @section-gap-sm;
|
||||
border-radius: 999rpx;
|
||||
background: @fav-seg-track;
|
||||
box-shadow: @shadow;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fav-seg__pill {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 22rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fav-seg__pill--active {
|
||||
background: @brand;
|
||||
box-shadow: @shadow;
|
||||
}
|
||||
|
||||
.fav-seg__text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: @text-secondary;
|
||||
}
|
||||
|
||||
.fav-seg__pill--active .fav-seg__text {
|
||||
color: @text-selected-btn;
|
||||
}
|
||||
|
||||
/* 收藏列表卡片 */
|
||||
.fav-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.fav-card {
|
||||
border-radius: @radius-lg;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fav-card--row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 32rpx;
|
||||
padding: 32rpx;
|
||||
background: @bg-header;
|
||||
box-shadow: @shadow;
|
||||
}
|
||||
|
||||
.fav-card__thumb {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: @radius;
|
||||
flex-shrink: 0;
|
||||
background: @fav-thumb-placeholder;
|
||||
}
|
||||
|
||||
.fav-card__main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.fav-card__title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: @text-title;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.fav-card__meta {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
.fav-card__meta-text {
|
||||
font-size: 22rpx;
|
||||
color: @text-secondary;
|
||||
}
|
||||
|
||||
.fav-card__stars {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 2rpx;
|
||||
}
|
||||
|
||||
.fav-card__badge {
|
||||
margin-top: 4rpx;
|
||||
font-size: 18rpx;
|
||||
font-weight: 600;
|
||||
color: @text-gray;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
background: @fav-seg-track;
|
||||
}
|
||||
|
||||
.fav-card__heart {
|
||||
flex-shrink: 0;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Bento 大卡 */
|
||||
.fav-card--bento {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 48rpx 140rpx 48rpx 40rpx;
|
||||
background: @fav-seg-track;
|
||||
box-shadow: @shadow;
|
||||
}
|
||||
|
||||
.fav-bento__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fav-bento__title {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.fav-bento__meta {
|
||||
font-size: 26rpx;
|
||||
color: @text-secondary;
|
||||
margin-top: 8rpx;
|
||||
margin-bottom: 28rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.fav-bento__tags {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.fav-bento__tag {
|
||||
padding: 8rpx 22rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 700;
|
||||
color: @fav-secondary-cta-text;
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
.fav-bento__deco {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
width: 48rpx;
|
||||
height: 6rpx;
|
||||
background: #f7ee47;
|
||||
border-radius: 3rpx;
|
||||
right: -40rpx;
|
||||
bottom: -48rpx;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.favorites-page__empty {
|
||||
.fav-bento__heart {
|
||||
position: absolute;
|
||||
top: 40rpx;
|
||||
right: 32rpx;
|
||||
z-index: 2;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* 底部去发现 */
|
||||
.fav-cta {
|
||||
margin-top: @section-gap;
|
||||
padding: 48rpx 0 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 48rpx 0;
|
||||
}
|
||||
|
||||
.favorites-page__emoji {
|
||||
font-size: 96rpx;
|
||||
line-height: 1.2;
|
||||
.fav-cta__hint {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: @text-gray;
|
||||
}
|
||||
|
||||
.fav-cta__btn {
|
||||
margin-top: 32rpx;
|
||||
padding: 22rpx 64rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
background: @fav-secondary-cta-bg !important;
|
||||
color: @fav-secondary-cta-text !important;
|
||||
border: none !important;
|
||||
box-shadow: @shadow;
|
||||
}
|
||||
|
||||
.fav-cta__btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 下载历史 */
|
||||
.fav-dl {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.fav-dl__section-label {
|
||||
display: block;
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
color: @text-gray;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
padding: 8rpx 16rpx 16rpx;
|
||||
}
|
||||
|
||||
.fav-dl__items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.favorites-page__empty-msg {
|
||||
margin-bottom: 48rpx;
|
||||
.fav-dl-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 32rpx;
|
||||
padding: 32rpx;
|
||||
background: @bg-header;
|
||||
border-radius: @radius-lg;
|
||||
box-shadow: @shadow;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.favorites-page__empty-line {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 8rpx;
|
||||
.fav-dl-row--muted {
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.favorites-page__btn {
|
||||
width: 280rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
background: #f7ee47;
|
||||
color: #333;
|
||||
.fav-dl-row__thumb {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: @radius;
|
||||
flex-shrink: 0;
|
||||
background: @fav-thumb-placeholder;
|
||||
}
|
||||
|
||||
.fav-dl-row__thumb--ph {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(145deg, @fav-secondary-cta-bg 0%, fade(@brand, 35%) 100%);
|
||||
}
|
||||
|
||||
.fav-dl-row__main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.fav-dl-row__title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: @text-title;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.fav-dl-row__meta {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
font-size: 26rpx;
|
||||
color: fade(@text-secondary, 88%);
|
||||
}
|
||||
|
||||
.fav-dl-row__time {
|
||||
color: fade(@text-secondary, 88%);
|
||||
}
|
||||
|
||||
.fav-dl-row__dot {
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 50%;
|
||||
background: @text-gray;
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.fav-dl-row__status {
|
||||
color: fade(@text-secondary, 65%);
|
||||
}
|
||||
|
||||
.fav-dl-row__status--hi {
|
||||
color: #006b1b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.fav-dl-row__more {
|
||||
flex-shrink: 0;
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.fav-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 120rpx 32rpx 64rpx;
|
||||
}
|
||||
|
||||
.fav-empty__emoji {
|
||||
font-size: 100rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.fav-empty__icon {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.fav-empty__msg {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
border-radius: 40rpx;
|
||||
color: @text-title;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.fav-empty__sub {
|
||||
font-size: 26rpx;
|
||||
color: @text-secondary;
|
||||
margin-bottom: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fav-empty__btn {
|
||||
padding: 20rpx 56rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
background: @brand;
|
||||
color: @text-selected-btn;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.favorites-page__btn::after {
|
||||
.fav-empty__btn::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,136 @@
|
||||
import { NAV_INNER_PX } from '../../utils/navMetrics';
|
||||
|
||||
type FavoritesTab = 'favorites' | 'downloads';
|
||||
|
||||
type FavoriteItem =
|
||||
| {
|
||||
id: string;
|
||||
variant: 'standard';
|
||||
title: string;
|
||||
metaLine: string;
|
||||
stars: number;
|
||||
timeBadge: string;
|
||||
thumb: string;
|
||||
}
|
||||
| {
|
||||
id: string;
|
||||
variant: 'featured';
|
||||
title: string;
|
||||
metaLine: string;
|
||||
tags: string[];
|
||||
};
|
||||
|
||||
type DownloadRow = {
|
||||
id: string;
|
||||
title: string;
|
||||
time: string;
|
||||
status: string;
|
||||
statusHighlight: boolean;
|
||||
thumb?: string;
|
||||
placeholder?: 'draw';
|
||||
};
|
||||
|
||||
type DownloadSection = {
|
||||
key: string;
|
||||
label: string;
|
||||
items: DownloadRow[];
|
||||
};
|
||||
|
||||
const MOCK_FAVORITES: FavoriteItem[] = [
|
||||
{
|
||||
id: '1',
|
||||
variant: 'standard',
|
||||
title: '10以内加法',
|
||||
metaLine: '数学启蒙 · 4-6岁 · ',
|
||||
stars: 2,
|
||||
timeBadge: '收藏于 3 天前',
|
||||
thumb: 'https://lh3.googleusercontent.com/aida-public/AB6AXuD7khp0rJABfa9yFrMt9ZgIhAPyN44XmJ2pXNBgCzbgBvwA5ptFZVty013JedVzbE9_VvCQnToN7QETLDKjtiX22igzK-a5h4E8wjKrembFW4eVuk1RsJIbHjx3_cCz0hJ7_t76hF8t-Qdod_5R9sNMor1ZEjf6dGNp6UI_eIBjsN9b22iCTJ2VB-IEh0Rmil6_iC4Og-4I03IcQDV2rTHYIXcZxjiay1IiYGXw3wJ3bfo2SF2N7ZFT00akTgYU-9JyF7xJ6n15Yzc',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
variant: 'standard',
|
||||
title: '图形连连看',
|
||||
metaLine: '逻辑思维 · 3-5岁 · ',
|
||||
stars: 1,
|
||||
timeBadge: '收藏于 5 天前',
|
||||
thumb: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBY_0Rr153ZBT4IHcMyFtrcgl-y2ZRyVnOuGecnn7f4PZKoAx2lOuCorsMmfRa72s0JmbXrt4XT3QU1x7cIbZUyhv_EXwCfMaNxtkHc-ymIBIQ5jqm5oiQebrEWH4kjv14JdkCiziT4xzac4TdVN5yqpk7Wlg80QBl_ldDmAQqIgcUeN2PvlVvhmpOYmFeWE2HS3I_e4vV1J8s_cfV9_4g7y8SbxlSfnTmgQNeXrVbcdwaNEAGQWp92Iif0d2pVIqdfuUHO1pTw8oQ',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
variant: 'standard',
|
||||
title: '拼音字母认读',
|
||||
metaLine: '语文基础 · 5-7岁 · ',
|
||||
stars: 3,
|
||||
timeBadge: '收藏于 1 周前',
|
||||
thumb: 'https://lh3.googleusercontent.com/aida-public/AB6AXuC54mXQ8620XwIsWmUHBHJGdmpF8uE4cSYxwR2NLJTsa6gYdTCHz2tqrKbGOye-y0CGgCPPWwJXzEuB2ZYrQ3CWWPlamvbjhTUDYf8yoA9Lyapll1t2w17AqzSHrbBPNFrq931IUCis64b51kslQZoq3c0KslZsBQiky-YSnuE7xUuNsgiF4hOak_ReFFufWE53h1sPkjHFeRM-H34b-e1MCNxGObGPhI0mNlJ_qz0c8aCuS-jdnDocSvIYda-iVcJLWcIT-mO6klw',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
variant: 'featured',
|
||||
title: '趣味英语单词卡',
|
||||
metaLine: '语言学习 · 4-8岁 · ⭐⭐⭐',
|
||||
tags: ['畅销经典', '全彩打印'],
|
||||
},
|
||||
];
|
||||
|
||||
const MOCK_DOWNLOADS: DownloadSection[] = [
|
||||
{
|
||||
key: 'today',
|
||||
label: '今天',
|
||||
items: [
|
||||
{
|
||||
id: 'd1',
|
||||
title: '拼音描红 · 声母表',
|
||||
time: '14:32',
|
||||
status: '已保存相册',
|
||||
statusHighlight: true,
|
||||
thumb: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBCm6X4rhibw2_WxP-U0dDyOsiYol3y12OnEXHRkPONZYMQBUcr3Grqo1IbwH3sdWPg5jIUeIbr_AEwv_hFwUOMMz9jTIIMc6Pke1bzSvlQcgdDq-zMEIU4A--IQFX59ac-8BscCajXZcd4v8rE6JEZFf1-aztKclPTkE_Rrgj-nbVCy5V6bOE6yDOB67VdTbcqiOdaFN18ju_MgWVo3FQZLwIUZOBahkPl0vDIKA0mkiaGK9eiFpfnERYxkYG3eWJZ40umTYp46Jo',
|
||||
},
|
||||
{
|
||||
id: 'd2',
|
||||
title: '趣味口算题卡',
|
||||
time: '09:15',
|
||||
status: '已下载 PDF',
|
||||
statusHighlight: false,
|
||||
thumb: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBxNORxN_vftYMLaMjZVscL-o9bZnBrfUi7IAqOrFATIztGV12_0ggwgae-fmk0cORWtysZWJJDcAzj0NEyniFxbREoGDuq9U4kytprJkA70_k0MCzPgStmq0bRwu1Gx1j4peglFam8PH6IlPvOMbiHQ7-fMFfYTSBtA1p7Dp06NDOzS2VrMlF8VxjEgihVmhHUrHePVvXlktUkXBKNzrXEXrogO3iOyouTUKyvJh0TeChKUv3KohMoD5ol7C3fjBhdHf7QD4StOQ4',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'yesterday',
|
||||
label: '昨天',
|
||||
items: [
|
||||
{
|
||||
id: 'd3',
|
||||
title: '汉字笔画基础训练',
|
||||
time: '16:40',
|
||||
status: '已发送邮件',
|
||||
statusHighlight: false,
|
||||
placeholder: 'draw',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
Page({
|
||||
data: {
|
||||
statusBarHeight: 0,
|
||||
navBlockHeight: 0,
|
||||
/** 纵向 scroll-view 可视高度（窗口高 − 顶栏占位，避免内容滚入导航下） */
|
||||
favScrollHeight: 0,
|
||||
activeTab: 'favorites' as FavoritesTab,
|
||||
favoriteList: [] as unknown[],
|
||||
downloadList: [] as unknown[],
|
||||
favoriteList: MOCK_FAVORITES as FavoriteItem[],
|
||||
downloadSections: MOCK_DOWNLOADS as DownloadSection[],
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
const win = wx.getWindowInfo();
|
||||
const navBlockHeight = win.statusBarHeight + NAV_INNER_PX;
|
||||
this.setData({
|
||||
statusBarHeight: win.statusBarHeight,
|
||||
navBlockHeight,
|
||||
favScrollHeight: win.windowHeight - navBlockHeight,
|
||||
});
|
||||
},
|
||||
|
||||
onShow() {
|
||||
@@ -24,4 +150,33 @@ Page({
|
||||
onDiscoverTap() {
|
||||
wx.switchTab({ url: '/pages/home/home' });
|
||||
},
|
||||
|
||||
onSearchTap() {
|
||||
wx.showToast({ title: '搜索功能开发中', icon: 'none' });
|
||||
},
|
||||
|
||||
onRemoveFavorite(e: WechatMiniprogram.TouchEvent) {
|
||||
const id = e.currentTarget.dataset.id as string | undefined;
|
||||
if (!id) return;
|
||||
const list = (this.data.favoriteList as FavoriteItem[]).filter((item) => item.id !== id);
|
||||
this.setData({ favoriteList: list });
|
||||
wx.showToast({ title: '已取消收藏', icon: 'none' });
|
||||
},
|
||||
|
||||
onClearHistory() {
|
||||
wx.showModal({
|
||||
title: '清空下载历史',
|
||||
content: '确定清空本地展示的历史记录吗？',
|
||||
success: (res) => {
|
||||
if (!res.confirm) return;
|
||||
this.setData({ downloadSections: [] });
|
||||
wx.showToast({ title: '已清空', icon: 'none' });
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
onDownloadMore(e: WechatMiniprogram.TouchEvent) {
|
||||
const id = e.currentTarget.dataset.id as string | undefined;
|
||||
wx.showToast({ title: id ? `更多操作：${id}` : '更多', icon: 'none' });
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,38 +1,216 @@
|
||||
<view class="favorites-page">
|
||||
<view class="favorites-page__title">我的收藏</view>
|
||||
|
||||
<view class="favorites-page__tabs">
|
||||
<view
|
||||
class="favorites-page__tab {{activeTab === 'favorites' ? 'favorites-page__tab--active' : ''}}"
|
||||
data-tab="favorites"
|
||||
bindtap="onTabSwitch"
|
||||
>
|
||||
收藏的题型
|
||||
</view>
|
||||
<view
|
||||
class="favorites-page__tab {{activeTab === 'downloads' ? 'favorites-page__tab--active' : ''}}"
|
||||
data-tab="downloads"
|
||||
bindtap="onTabSwitch"
|
||||
>
|
||||
下载历史
|
||||
<view class="fav-page">
|
||||
<view class="fav-nav" style="padding-top: {{statusBarHeight}}px;">
|
||||
<view class="fav-nav__inner">
|
||||
<text class="fav-nav__title">我的收藏</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{activeTab === 'favorites' && favoriteList.length === 0}}" class="favorites-page__empty">
|
||||
<text class="favorites-page__emoji">🦆</text>
|
||||
<view class="favorites-page__empty-msg">
|
||||
<text class="favorites-page__empty-line">鸭丫还没找到收藏呢</text>
|
||||
<text class="favorites-page__empty-line">去发现好玩的练习纸吧~</text>
|
||||
</view>
|
||||
<button class="favorites-page__btn" bindtap="onDiscoverTap">去发现</button>
|
||||
</view>
|
||||
<scroll-view
|
||||
class="fav-scroll"
|
||||
style="height: {{favScrollHeight}}px; margin-top: {{navBlockHeight}}px;"
|
||||
scroll-y
|
||||
enhanced
|
||||
show-scrollbar="{{false}}">
|
||||
<view class="fav-body">
|
||||
<view class="fav-seg">
|
||||
<view
|
||||
class="fav-seg__pill {{activeTab === 'favorites' ? 'fav-seg__pill--active' : ''}}"
|
||||
data-tab="favorites"
|
||||
bindtap="onTabSwitch">
|
||||
<text class="fav-seg__text">收藏的题型</text>
|
||||
</view>
|
||||
<view
|
||||
class="fav-seg__pill {{activeTab === 'downloads' ? 'fav-seg__pill--active' : ''}}"
|
||||
data-tab="downloads"
|
||||
bindtap="onTabSwitch">
|
||||
<text class="fav-seg__text">下载历史</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view wx:elif="{{activeTab === 'downloads' && downloadList.length === 0}}" class="favorites-page__empty">
|
||||
<text class="favorites-page__emoji">🦆</text>
|
||||
<view class="favorites-page__empty-msg">
|
||||
<text class="favorites-page__empty-line">还没有下载记录哦</text>
|
||||
<text class="favorites-page__empty-line">快去生成练习纸吧~</text>
|
||||
<!-- 收藏的题型 -->
|
||||
<block wx:if="{{activeTab === 'favorites'}}">
|
||||
<view wx:if="{{favoriteList.length === 0}}" class="fav-empty">
|
||||
<text class="fav-empty__emoji">🦆</text>
|
||||
<text class="fav-empty__msg">鸭丫还没找到收藏呢</text>
|
||||
<text class="fav-empty__sub">去发现好玩的练习纸吧~</text>
|
||||
<button class="fav-empty__btn" bindtap="onDiscoverTap">
|
||||
去发现
|
||||
</button>
|
||||
</view>
|
||||
<view wx:else class="fav-list">
|
||||
<block wx:for="{{favoriteList}}" wx:key="id">
|
||||
<view
|
||||
wx:if="{{item.variant === 'standard'}}"
|
||||
class="fav-card fav-card--row">
|
||||
<image
|
||||
class="fav-card__thumb"
|
||||
src="{{item.thumb}}"
|
||||
mode="aspectFill" />
|
||||
<view class="fav-card__main">
|
||||
<text class="fav-card__title"
|
||||
>{{item.title}}</text
|
||||
>
|
||||
<view class="fav-card__meta">
|
||||
<text class="fav-card__meta-text"
|
||||
>{{item.metaLine}}</text
|
||||
>
|
||||
<view
|
||||
class="fav-card__stars"
|
||||
aria-label="{{item.stars}} 星">
|
||||
<van-icon
|
||||
wx:if="{{item.stars >= 1}}"
|
||||
name="star"
|
||||
size="22rpx"
|
||||
color="#d4a900" />
|
||||
<van-icon
|
||||
wx:if="{{item.stars >= 2}}"
|
||||
name="star"
|
||||
size="22rpx"
|
||||
color="#d4a900" />
|
||||
<van-icon
|
||||
wx:if="{{item.stars >= 3}}"
|
||||
name="star"
|
||||
size="22rpx"
|
||||
color="#d4a900" />
|
||||
</view>
|
||||
</view>
|
||||
<text class="fav-card__badge"
|
||||
>{{item.timeBadge}}</text
|
||||
>
|
||||
</view>
|
||||
<view
|
||||
class="fav-card__heart"
|
||||
data-id="{{item.id}}"
|
||||
catchtap="onRemoveFavorite"
|
||||
aria-role="button"
|
||||
aria-label="取消收藏">
|
||||
<van-icon
|
||||
name="like"
|
||||
size="40rpx"
|
||||
color="#b02500" />
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
wx:elif="{{item.variant === 'featured'}}"
|
||||
class="fav-card fav-card--bento">
|
||||
<view class="fav-bento__content">
|
||||
<text class="fav-card__title fav-bento__title"
|
||||
>{{item.title}}</text
|
||||
>
|
||||
<text class="fav-bento__meta"
|
||||
>{{item.metaLine}}</text
|
||||
>
|
||||
<view class="fav-bento__tags">
|
||||
<text
|
||||
wx:for="{{item.tags}}"
|
||||
wx:for-item="tag"
|
||||
wx:key="*this"
|
||||
class="fav-bento__tag"
|
||||
># {{tag}}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<van-icon
|
||||
class="fav-bento__deco"
|
||||
name="font-o"
|
||||
size="200rpx"
|
||||
color="rgba(108, 90, 0, 0.12)" />
|
||||
<view
|
||||
class="fav-bento__heart"
|
||||
data-id="{{item.id}}"
|
||||
catchtap="onRemoveFavorite"
|
||||
aria-role="button">
|
||||
<van-icon
|
||||
name="like"
|
||||
size="40rpx"
|
||||
color="#b02500" />
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view wx:if="{{favoriteList.length > 0}}" class="fav-cta">
|
||||
<text class="fav-cta__hint">发现更多有趣的内容？</text>
|
||||
<button class="fav-cta__btn" bindtap="onDiscoverTap">
|
||||
去发现页看看
|
||||
</button>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 下载历史 -->
|
||||
<block wx:if="{{activeTab === 'downloads'}}">
|
||||
<view
|
||||
wx:if="{{downloadSections.length === 0}}"
|
||||
class="fav-empty">
|
||||
<van-icon
|
||||
name="clock"
|
||||
size="120rpx"
|
||||
color="#b3ac9f"
|
||||
class="fav-empty__icon" />
|
||||
<text class="fav-empty__msg">暂无下载记录</text>
|
||||
<button class="fav-empty__btn" bindtap="onDiscoverTap">
|
||||
去发现
|
||||
</button>
|
||||
</view>
|
||||
<view wx:else class="fav-dl">
|
||||
<block
|
||||
wx:for="{{downloadSections}}"
|
||||
wx:for-item="section"
|
||||
wx:key="key">
|
||||
<text class="fav-dl__section-label"
|
||||
>{{section.label}}</text
|
||||
>
|
||||
<view class="fav-dl__items">
|
||||
<view
|
||||
wx:for="{{section.items}}"
|
||||
wx:for-item="row"
|
||||
wx:key="id"
|
||||
class="fav-dl-row {{row.placeholder === 'draw' ? 'fav-dl-row--muted' : ''}}">
|
||||
<view
|
||||
wx:if="{{row.placeholder === 'draw'}}"
|
||||
class="fav-dl-row__thumb fav-dl-row__thumb--ph">
|
||||
<van-icon
|
||||
name="brush-o"
|
||||
size="56rpx"
|
||||
color="#6d5720" />
|
||||
</view>
|
||||
<image
|
||||
wx:else
|
||||
class="fav-dl-row__thumb"
|
||||
src="{{row.thumb}}"
|
||||
mode="aspectFill" />
|
||||
<view class="fav-dl-row__main">
|
||||
<text class="fav-dl-row__title"
|
||||
>{{row.title}}</text
|
||||
>
|
||||
<view class="fav-dl-row__meta">
|
||||
<van-icon
|
||||
name="clock"
|
||||
size="26rpx"
|
||||
color="#605b50" />
|
||||
<text class="fav-dl-row__time"
|
||||
>{{row.time}}</text
|
||||
>
|
||||
<view class="fav-dl-row__dot" />
|
||||
<text
|
||||
class="fav-dl-row__status {{row.statusHighlight ? 'fav-dl-row__status--hi' : ''}}"
|
||||
>{{row.status}}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="fav-dl-row__more"
|
||||
data-id="{{row.id}}"
|
||||
catchtap="onDownloadMore">
|
||||
<van-icon
|
||||
name="ellipsis"
|
||||
size="40rpx"
|
||||
color="#7c766a" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<button class="favorites-page__btn" bindtap="onDiscoverTap">去发现</button>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
@@ -0,0 +1,748 @@
|
||||
import { AGE_BANDS } from '../../core/data/difficulty';
|
||||
|
||||
export type HomeDisplayItem = {
|
||||
id: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
description?: string;
|
||||
category: 'math' | 'chinese' | 'english' | 'puzzle' | 'craft';
|
||||
ageBand: string;
|
||||
difficulty: '入门' | '基础' | '进阶' | '挑战';
|
||||
icon: string;
|
||||
badge?: string;
|
||||
path: string;
|
||||
available: boolean;
|
||||
source?: string;
|
||||
};
|
||||
|
||||
export type HomeDisplaySection = {
|
||||
id: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
morePath?: string;
|
||||
items: HomeDisplayItem[];
|
||||
};
|
||||
|
||||
export type HomeDisplayDataset = {
|
||||
searchPlaceholder: string;
|
||||
categoryTabs: Array<{
|
||||
id: string;
|
||||
name: string;
|
||||
path?: string;
|
||||
}>;
|
||||
ageBands: Array<{
|
||||
key: string;
|
||||
label: string;
|
||||
desc: string;
|
||||
path: string;
|
||||
}>;
|
||||
featured: HomeDisplayItem[];
|
||||
hot: HomeDisplayItem[];
|
||||
sections: HomeDisplaySection[];
|
||||
};
|
||||
|
||||
const HOME_CATEGORY_TABS = [
|
||||
{ id: 'all', name: '全部' },
|
||||
{ id: 'math', name: '数感启蒙' },
|
||||
{ id: 'puzzle', name: '益智游戏' },
|
||||
{ id: 'chinese', name: '趣味识字' },
|
||||
{ id: 'english', name: '英语启蒙' },
|
||||
{ id: 'craft', name: '创意手工' },
|
||||
] as const;
|
||||
|
||||
const HOME_AGE_BANDS = AGE_BANDS.map((item, index) => ({
|
||||
key: item.key,
|
||||
label: item.label,
|
||||
desc: ['启蒙认知', '基础练习', '能力提升', '幼小衔接', '知识拓展'][index],
|
||||
path: '/pages/age/age',
|
||||
}));
|
||||
|
||||
export const HOME_PRODUCT_TARGET_DATA: HomeDisplayDataset = {
|
||||
searchPlaceholder: '搜索你喜欢的练习册...',
|
||||
categoryTabs: [...HOME_CATEGORY_TABS],
|
||||
ageBands: HOME_AGE_BANDS,
|
||||
featured: [
|
||||
{
|
||||
id: 'target-featured-1',
|
||||
title: '圣诞主题涂色卡',
|
||||
subtitle: '节日限定创意内容',
|
||||
description: '首页推荐位示例，强调季节热点与真实打印效果。',
|
||||
category: 'craft',
|
||||
ageBand: '3-8岁',
|
||||
difficulty: '入门',
|
||||
icon: '🎄',
|
||||
badge: 'NEW',
|
||||
path: '',
|
||||
available: false,
|
||||
source: '产品设计文档 5.1 今日推荐',
|
||||
},
|
||||
{
|
||||
id: 'target-featured-2',
|
||||
title: '走迷宫大挑战',
|
||||
subtitle: '热门趣味训练',
|
||||
description: '产品规划中的高趣味内容，用于首页焦点推荐。',
|
||||
category: 'puzzle',
|
||||
ageBand: '4-7岁',
|
||||
difficulty: '进阶',
|
||||
icon: '🌀',
|
||||
badge: 'HOT',
|
||||
path: '',
|
||||
available: false,
|
||||
source: '产品设计文档 P2-22',
|
||||
},
|
||||
{
|
||||
id: 'target-featured-3',
|
||||
title: '拼音描红',
|
||||
subtitle: '幼小衔接高频内容',
|
||||
description: '语文模块重点新增内容，适合推荐位曝光。',
|
||||
category: 'chinese',
|
||||
ageBand: '5-7岁',
|
||||
difficulty: '基础',
|
||||
icon: '🔤',
|
||||
badge: '推荐',
|
||||
path: '',
|
||||
available: false,
|
||||
source: '产品设计文档 P1-12',
|
||||
},
|
||||
],
|
||||
hot: [
|
||||
{
|
||||
id: 'target-hot-1',
|
||||
title: '迷宫',
|
||||
subtitle: '高趣味路径探索',
|
||||
category: 'puzzle',
|
||||
ageBand: '4-7岁',
|
||||
difficulty: '进阶',
|
||||
icon: '🧭',
|
||||
badge: '热门',
|
||||
path: '',
|
||||
available: false,
|
||||
source: '产品设计文档 5.1 热门下载',
|
||||
},
|
||||
{
|
||||
id: 'target-hot-2',
|
||||
title: '涂色卡',
|
||||
subtitle: '动物与节日主题',
|
||||
category: 'craft',
|
||||
ageBand: '3-6岁',
|
||||
difficulty: '入门',
|
||||
icon: '🎨',
|
||||
badge: '热门',
|
||||
path: '',
|
||||
available: false,
|
||||
source: '产品设计文档 P3-29',
|
||||
},
|
||||
{
|
||||
id: 'target-hot-3',
|
||||
title: '加减法',
|
||||
subtitle: '家长高频打印内容',
|
||||
category: 'math',
|
||||
ageBand: '5-7岁',
|
||||
difficulty: '基础',
|
||||
icon: '➕',
|
||||
badge: '热门',
|
||||
path: '/mathPages/addition/addition',
|
||||
available: true,
|
||||
source: '现有加减法页面可承接',
|
||||
},
|
||||
],
|
||||
sections: [
|
||||
{
|
||||
id: 'math',
|
||||
title: '数学启蒙',
|
||||
subtitle: '数字认知、计数练习、加减运算、时钟与形状',
|
||||
morePath: '/pages/mathIndex/mathIndex',
|
||||
items: [
|
||||
{
|
||||
id: 'target-math-1',
|
||||
title: '数字认知',
|
||||
subtitle: '认识数字 1-10',
|
||||
category: 'math',
|
||||
ageBand: '3-4岁',
|
||||
difficulty: '入门',
|
||||
icon: '🔢',
|
||||
path: '/mathPages/numberFind/numberFind',
|
||||
available: true,
|
||||
source: '现有 找数字/写数字 能力',
|
||||
},
|
||||
{
|
||||
id: 'target-math-2',
|
||||
title: '计数练习',
|
||||
subtitle: '数一数、连一连、选一选',
|
||||
category: 'math',
|
||||
ageBand: '4-5岁',
|
||||
difficulty: '基础',
|
||||
icon: '🧮',
|
||||
path: '/mathPages/countMatch/countMatch',
|
||||
available: true,
|
||||
source: '现有 countMatch/countingSelect',
|
||||
},
|
||||
{
|
||||
id: 'target-math-3',
|
||||
title: '加减运算',
|
||||
subtitle: '从 5 以内到 100 以内',
|
||||
category: 'math',
|
||||
ageBand: '5-7岁',
|
||||
difficulty: '基础',
|
||||
icon: '➕',
|
||||
path: '/mathPages/addition/addition',
|
||||
available: true,
|
||||
source: '现有 addition/calculationPractice',
|
||||
},
|
||||
{
|
||||
id: 'target-math-4',
|
||||
title: '时钟练习',
|
||||
subtitle: '认识钟表与时间',
|
||||
category: 'math',
|
||||
ageBand: '5-7岁',
|
||||
difficulty: '进阶',
|
||||
icon: '🕒',
|
||||
path: '',
|
||||
available: false,
|
||||
source: '产品设计文档 P1-7',
|
||||
},
|
||||
{
|
||||
id: 'target-math-5',
|
||||
title: '形状认知',
|
||||
subtitle: '图形分类与空间感',
|
||||
category: 'math',
|
||||
ageBand: '3-5岁',
|
||||
difficulty: '入门',
|
||||
icon: '📐',
|
||||
path: '',
|
||||
available: false,
|
||||
source: '产品设计文档 3.1 信息架构',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'chinese',
|
||||
title: '语文启蒙',
|
||||
subtitle: '识字、练字、拼音、表达训练',
|
||||
morePath: '/pages/index/index',
|
||||
items: [
|
||||
{
|
||||
id: 'target-chinese-1',
|
||||
title: '识字卡',
|
||||
subtitle: '自定义汉字卡片',
|
||||
category: 'chinese',
|
||||
ageBand: '3-6岁',
|
||||
difficulty: '入门',
|
||||
icon: '📖',
|
||||
path: '/pages/index/index',
|
||||
available: true,
|
||||
source: '现有识字页',
|
||||
},
|
||||
{
|
||||
id: 'target-chinese-2',
|
||||
title: '练字帖',
|
||||
subtitle: '田字格笔顺练习',
|
||||
category: 'chinese',
|
||||
ageBand: '4-7岁',
|
||||
difficulty: '基础',
|
||||
icon: '✏️',
|
||||
path: '/pages/copyBook/copyBook',
|
||||
available: true,
|
||||
source: '现有练字页',
|
||||
},
|
||||
{
|
||||
id: 'target-chinese-3',
|
||||
title: '拼音练习',
|
||||
subtitle: '声母韵母描红',
|
||||
category: 'chinese',
|
||||
ageBand: '5-7岁',
|
||||
difficulty: '基础',
|
||||
icon: '🔤',
|
||||
path: '',
|
||||
available: false,
|
||||
source: '产品设计文档 P1-12',
|
||||
},
|
||||
{
|
||||
id: 'target-chinese-4',
|
||||
title: '看图说话',
|
||||
subtitle: '图片引导表达',
|
||||
category: 'chinese',
|
||||
ageBand: '5-7岁',
|
||||
difficulty: '进阶',
|
||||
icon: '🗣️',
|
||||
path: '',
|
||||
available: false,
|
||||
source: '产品设计文档 P1-15',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'english',
|
||||
title: '英语启蒙',
|
||||
subtitle: '字母学习、闪卡、描红与自然拼读',
|
||||
items: [
|
||||
{
|
||||
id: 'target-english-1',
|
||||
title: '字母描红',
|
||||
subtitle: 'A-Z 大小写练习',
|
||||
category: 'english',
|
||||
ageBand: '4-6岁',
|
||||
difficulty: '入门',
|
||||
icon: '🔠',
|
||||
path: '',
|
||||
available: false,
|
||||
source: '产品设计文档 P1-17',
|
||||
},
|
||||
{
|
||||
id: 'target-english-2',
|
||||
title: '字母闪卡',
|
||||
subtitle: '字母与单词联想',
|
||||
category: 'english',
|
||||
ageBand: '3-6岁',
|
||||
difficulty: '入门',
|
||||
icon: '🪪',
|
||||
path: '',
|
||||
available: false,
|
||||
source: '产品设计文档 P1-18',
|
||||
},
|
||||
{
|
||||
id: 'target-english-3',
|
||||
title: '自然拼读练习纸',
|
||||
subtitle: 'CVC 单词启蒙',
|
||||
category: 'english',
|
||||
ageBand: '5-7岁',
|
||||
difficulty: '进阶',
|
||||
icon: '🔡',
|
||||
path: '',
|
||||
available: false,
|
||||
source: '产品设计文档 P1-21',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'puzzle',
|
||||
title: '益智游戏',
|
||||
subtitle: '迷宫、找不同、连线、数独与控笔',
|
||||
morePath: '/pages/focusIndex/focusIndex',
|
||||
items: [
|
||||
{
|
||||
id: 'target-puzzle-1',
|
||||
title: '迷宫',
|
||||
subtitle: '不同难度路径挑战',
|
||||
category: 'puzzle',
|
||||
ageBand: '4-7岁',
|
||||
difficulty: '进阶',
|
||||
icon: '🌀',
|
||||
path: '',
|
||||
available: false,
|
||||
source: '产品设计文档 P2-22',
|
||||
},
|
||||
{
|
||||
id: 'target-puzzle-2',
|
||||
title: '找不同',
|
||||
subtitle: '观察力与专注力训练',
|
||||
category: 'puzzle',
|
||||
ageBand: '4-7岁',
|
||||
difficulty: '进阶',
|
||||
icon: '🔍',
|
||||
path: '',
|
||||
available: false,
|
||||
source: '产品设计文档 P2-23',
|
||||
},
|
||||
{
|
||||
id: 'target-puzzle-3',
|
||||
title: '连线题',
|
||||
subtitle: '数字点连线与物品连线',
|
||||
category: 'puzzle',
|
||||
ageBand: '4-6岁',
|
||||
difficulty: '基础',
|
||||
icon: '🧵',
|
||||
path: '/focusPages/dotConnect/dotConnect',
|
||||
available: true,
|
||||
source: '现有 dotConnect/matchConnect',
|
||||
},
|
||||
{
|
||||
id: 'target-puzzle-4',
|
||||
title: '数独入门',
|
||||
subtitle: '4x4 / 6x6 逻辑启蒙',
|
||||
category: 'puzzle',
|
||||
ageBand: '6-8岁',
|
||||
difficulty: '挑战',
|
||||
icon: '🧠',
|
||||
path: '',
|
||||
available: false,
|
||||
source: '产品设计文档 P2-24',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'craft',
|
||||
title: '创意手工',
|
||||
subtitle: '涂色卡、折纸、贴纸和主题手工',
|
||||
items: [
|
||||
{
|
||||
id: 'target-craft-1',
|
||||
title: '涂色卡',
|
||||
subtitle: '动物、交通、节日主题',
|
||||
category: 'craft',
|
||||
ageBand: '3-6岁',
|
||||
difficulty: '入门',
|
||||
icon: '🎨',
|
||||
path: '',
|
||||
available: false,
|
||||
source: '产品设计文档 P3-29',
|
||||
},
|
||||
{
|
||||
id: 'target-craft-2',
|
||||
title: '折纸模板',
|
||||
subtitle: '打印后即可折叠',
|
||||
category: 'craft',
|
||||
ageBand: '4-7岁',
|
||||
difficulty: '基础',
|
||||
icon: '🪭',
|
||||
path: '',
|
||||
available: false,
|
||||
source: '产品设计文档 P3-30',
|
||||
},
|
||||
{
|
||||
id: 'target-craft-3',
|
||||
title: '贴纸打印',
|
||||
subtitle: '奖励贴纸与装饰贴纸',
|
||||
category: 'craft',
|
||||
ageBand: '3-8岁',
|
||||
difficulty: '入门',
|
||||
icon: '⭐',
|
||||
path: '',
|
||||
available: false,
|
||||
source: '产品设计文档 P3-33',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export const HOME_CURRENT_CAPABILITY_DATA: HomeDisplayDataset = {
|
||||
searchPlaceholder: '搜索你喜欢的练习册...',
|
||||
categoryTabs: [...HOME_CATEGORY_TABS],
|
||||
ageBands: HOME_AGE_BANDS,
|
||||
featured: [
|
||||
{
|
||||
id: 'current-featured-1',
|
||||
title: '10以内加减法',
|
||||
subtitle: '最适合首页推荐的高频内容',
|
||||
description: '现有数学能力中最接近产品文档“热门下载”的内容。',
|
||||
category: 'math',
|
||||
ageBand: '5-6岁',
|
||||
difficulty: '基础',
|
||||
icon: '➕',
|
||||
badge: 'HOT',
|
||||
path: '/mathPages/addition/addition',
|
||||
available: true,
|
||||
source: '现有功能清单 addition',
|
||||
},
|
||||
{
|
||||
id: 'current-featured-2',
|
||||
title: '涂色识字卡',
|
||||
subtitle: '兼顾识字与趣味涂色',
|
||||
description: '当前最接近创意内容的主包能力，可承接语文与创意入口。',
|
||||
category: 'chinese',
|
||||
ageBand: '3-6岁',
|
||||
difficulty: '入门',
|
||||
icon: '📚',
|
||||
badge: '推荐',
|
||||
path: '/pages/index/index',
|
||||
available: true,
|
||||
source: '现有识字页',
|
||||
},
|
||||
{
|
||||
id: 'current-featured-3',
|
||||
title: '数字点连线',
|
||||
subtitle: '用连点成图提升专注力',
|
||||
description: '能承担产品文档中“益智游戏”内容氛围。',
|
||||
category: 'puzzle',
|
||||
ageBand: '4-6岁',
|
||||
difficulty: '基础',
|
||||
icon: '🔗',
|
||||
badge: '热门',
|
||||
path: '/focusPages/dotConnect/dotConnect',
|
||||
available: true,
|
||||
source: '现有功能清单 dot-connect',
|
||||
},
|
||||
],
|
||||
hot: [
|
||||
{
|
||||
id: 'current-hot-1',
|
||||
title: '找数字，涂一涂',
|
||||
subtitle: '低龄启蒙高频内容',
|
||||
category: 'math',
|
||||
ageBand: '3-4岁',
|
||||
difficulty: '入门',
|
||||
icon: '🔢',
|
||||
badge: '热门',
|
||||
path: '/mathPages/numberFind/numberFind',
|
||||
available: true,
|
||||
source: 'number-find',
|
||||
},
|
||||
{
|
||||
id: 'current-hot-2',
|
||||
title: '数一数，连一连',
|
||||
subtitle: '点数和数字对应',
|
||||
category: 'math',
|
||||
ageBand: '4-5岁',
|
||||
difficulty: '基础',
|
||||
icon: '🧮',
|
||||
badge: '热门',
|
||||
path: '/mathPages/countMatch/countMatch',
|
||||
available: true,
|
||||
source: 'counting-matching',
|
||||
},
|
||||
{
|
||||
id: 'current-hot-3',
|
||||
title: '格子仿画 5×5',
|
||||
subtitle: '图形观察与耐心训练',
|
||||
category: 'puzzle',
|
||||
ageBand: '5-7岁',
|
||||
difficulty: '进阶',
|
||||
icon: '🟨',
|
||||
badge: '热门',
|
||||
path: '/focusPages/gridDrawing/gridDrawing',
|
||||
available: true,
|
||||
source: 'grid-drawing-5x5',
|
||||
},
|
||||
],
|
||||
sections: [
|
||||
{
|
||||
id: 'math',
|
||||
title: '数感启蒙',
|
||||
subtitle: '优先展示现有高价值、高覆盖的数感与运算内容',
|
||||
morePath: '/pages/mathIndex/mathIndex',
|
||||
items: [
|
||||
{
|
||||
id: 'current-math-1',
|
||||
title: '数字认知',
|
||||
subtitle: '找数字、写数字',
|
||||
category: 'math',
|
||||
ageBand: '3-4岁',
|
||||
difficulty: '入门',
|
||||
icon: '🔢',
|
||||
path: '/mathPages/numberFind/numberFind',
|
||||
available: true,
|
||||
source: 'number-find / number-write',
|
||||
},
|
||||
{
|
||||
id: 'current-math-2',
|
||||
title: '计数练习',
|
||||
subtitle: '数一数、连一连、选一选',
|
||||
category: 'math',
|
||||
ageBand: '4-5岁',
|
||||
difficulty: '基础',
|
||||
icon: '🧮',
|
||||
path: '/mathPages/countMatch/countMatch',
|
||||
available: true,
|
||||
source: 'countMatch / countingSelect',
|
||||
},
|
||||
{
|
||||
id: 'current-math-3',
|
||||
title: '数字序列',
|
||||
subtitle: '数字排序与缺失填空',
|
||||
category: 'math',
|
||||
ageBand: '4-5岁',
|
||||
difficulty: '基础',
|
||||
icon: '📈',
|
||||
path: '/mathPages/numberSort/numberSort',
|
||||
available: true,
|
||||
source: 'numberSort / missingNumber',
|
||||
},
|
||||
{
|
||||
id: 'current-math-4',
|
||||
title: '加减运算',
|
||||
subtitle: '5以内到100以内逐步进阶',
|
||||
category: 'math',
|
||||
ageBand: '5-7岁',
|
||||
difficulty: '基础',
|
||||
icon: '➕',
|
||||
path: '/mathPages/addition/addition',
|
||||
available: true,
|
||||
source: 'addition / calculationPractice',
|
||||
},
|
||||
{
|
||||
id: 'current-math-5',
|
||||
title: '乘法口诀',
|
||||
subtitle: '九九乘法表启蒙',
|
||||
category: 'math',
|
||||
ageBand: '7-8岁',
|
||||
difficulty: '挑战',
|
||||
icon: '✖️',
|
||||
path: '/mathPages/multiplicationTable/multiplicationTable',
|
||||
available: true,
|
||||
source: 'multiplicationTable',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'chinese',
|
||||
title: '趣味识字',
|
||||
subtitle: '用现有识字与练字能力先覆盖核心语文场景',
|
||||
morePath: '/pages/index/index',
|
||||
items: [
|
||||
{
|
||||
id: 'current-chinese-1',
|
||||
title: '识字卡',
|
||||
subtitle: '最多 6 个汉字，自定义颜色',
|
||||
category: 'chinese',
|
||||
ageBand: '3-6岁',
|
||||
difficulty: '入门',
|
||||
icon: '📖',
|
||||
path: '/pages/index/index',
|
||||
available: true,
|
||||
source: 'pages/index/index',
|
||||
},
|
||||
{
|
||||
id: 'current-chinese-2',
|
||||
title: '找一找识字',
|
||||
subtitle: '识字 find 模板，更接近游戏化练习',
|
||||
category: 'chinese',
|
||||
ageBand: '4-6岁',
|
||||
difficulty: '基础',
|
||||
icon: '🔍',
|
||||
path: '/pages/index/index',
|
||||
available: true,
|
||||
source: '识字页 find 模板',
|
||||
},
|
||||
{
|
||||
id: 'current-chinese-3',
|
||||
title: '笔顺练字帖',
|
||||
subtitle: '田字格与笔顺描红',
|
||||
category: 'chinese',
|
||||
ageBand: '4-7岁',
|
||||
difficulty: '基础',
|
||||
icon: '✏️',
|
||||
path: '/pages/copyBook/copyBook',
|
||||
available: true,
|
||||
source: 'pages/copyBook/copyBook',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'puzzle',
|
||||
title: '益智游戏',
|
||||
subtitle: '从现有专注力模块中抽取最符合产品重设计的内容',
|
||||
morePath: '/pages/focusIndex/focusIndex',
|
||||
items: [
|
||||
{
|
||||
id: 'current-puzzle-1',
|
||||
title: '数字点连线',
|
||||
subtitle: '按顺序连点成图',
|
||||
category: 'puzzle',
|
||||
ageBand: '4-6岁',
|
||||
difficulty: '基础',
|
||||
icon: '🔗',
|
||||
path: '/focusPages/dotConnect/dotConnect',
|
||||
available: true,
|
||||
source: 'dot-connect',
|
||||
},
|
||||
{
|
||||
id: 'current-puzzle-2',
|
||||
title: '连连看',
|
||||
subtitle: '物品配对与关系匹配',
|
||||
category: 'puzzle',
|
||||
ageBand: '4-6岁',
|
||||
difficulty: '基础',
|
||||
icon: '🧵',
|
||||
path: '/focusPages/matchConnect/matchConnect',
|
||||
available: true,
|
||||
source: 'match-connect',
|
||||
},
|
||||
{
|
||||
id: 'current-puzzle-3',
|
||||
title: '颜色找规律',
|
||||
subtitle: '模式识别与推理',
|
||||
category: 'puzzle',
|
||||
ageBand: '4-6岁',
|
||||
difficulty: '基础',
|
||||
icon: '🌈',
|
||||
path: '/focusPages/colorPattern/colorPattern',
|
||||
available: true,
|
||||
source: 'color-pattern',
|
||||
},
|
||||
{
|
||||
id: 'current-puzzle-4',
|
||||
title: '方格推理',
|
||||
subtitle: '逻辑关系与观察力',
|
||||
category: 'puzzle',
|
||||
ageBand: '5-7岁',
|
||||
difficulty: '进阶',
|
||||
icon: '🧠',
|
||||
path: '/focusPages/gridReasoning/gridReasoning',
|
||||
available: true,
|
||||
source: 'grid-reasoning',
|
||||
},
|
||||
{
|
||||
id: 'current-puzzle-5',
|
||||
title: '格子仿画',
|
||||
subtitle: '3×3 / 5×5 / 7×7 逐级挑战',
|
||||
category: 'puzzle',
|
||||
ageBand: '4-7岁',
|
||||
difficulty: '进阶',
|
||||
icon: '🟨',
|
||||
path: '/focusPages/gridDrawing/gridDrawing',
|
||||
available: true,
|
||||
source: 'grid-drawing',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'craft',
|
||||
title: '创意手工',
|
||||
subtitle: '暂用最接近创意表达的现有能力承接展示位',
|
||||
morePath: '/pages/index/index',
|
||||
items: [
|
||||
{
|
||||
id: 'current-craft-1',
|
||||
title: '涂色识字卡',
|
||||
subtitle: '在识字场景里提供涂色表达',
|
||||
category: 'craft',
|
||||
ageBand: '3-6岁',
|
||||
difficulty: '入门',
|
||||
icon: '🎨',
|
||||
path: '/pages/index/index',
|
||||
available: true,
|
||||
source: '现有识字卡着色能力',
|
||||
},
|
||||
{
|
||||
id: 'current-craft-2',
|
||||
title: '字帖打印',
|
||||
subtitle: '打印后可反复练习',
|
||||
category: 'craft',
|
||||
ageBand: '4-7岁',
|
||||
difficulty: '基础',
|
||||
icon: '🖌️',
|
||||
path: '/pages/copyBook/copyBook',
|
||||
available: true,
|
||||
source: '练字页打印能力',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'english',
|
||||
title: '英语启蒙',
|
||||
subtitle:
|
||||
'当前暂无真实英语页面，先保留结构占位，便于首页保持完整信息架构',
|
||||
items: [
|
||||
{
|
||||
id: 'current-english-1',
|
||||
title: '英语启蒙即将上线',
|
||||
subtitle: '字母描红、闪卡、自然拼读',
|
||||
category: 'english',
|
||||
ageBand: '4-7岁',
|
||||
difficulty: '入门',
|
||||
icon: '🔤',
|
||||
badge: 'Soon',
|
||||
path: '',
|
||||
available: false,
|
||||
source: '产品目标结构保留位',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export const HOME_DISPLAY_DATA = {
|
||||
productTarget: HOME_PRODUCT_TARGET_DATA,
|
||||
currentCapability: HOME_CURRENT_CAPABILITY_DATA,
|
||||
} as const;
|
||||
@@ -1,7 +1,5 @@
|
||||
@import '../../style/theme3.less';
|
||||
|
||||
@home-padding: 28rpx;
|
||||
@home-section-mt: 48rpx;
|
||||
@home-track-gap: 16rpx;
|
||||
|
||||
.home-page {
|
||||
@@ -10,16 +8,23 @@
|
||||
padding-bottom: 48rpx;
|
||||
box-sizing: border-box;
|
||||
color: @text-secondary;
|
||||
// padding: 0 24rpx 48rpx;
|
||||
}
|
||||
|
||||
.home-nav {
|
||||
background: @bg-header;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
background: fade(@bg-header, 85%);
|
||||
backdrop-filter: blur(40rpx);
|
||||
-webkit-backdrop-filter: blur(40rpx);
|
||||
box-shadow: 0 2rpx 12rpx rgba(50, 46, 37, 0.05);
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.home-nav__inner {
|
||||
height: 44px;
|
||||
height: @nav-inner-height;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
@@ -35,15 +40,21 @@
|
||||
}
|
||||
|
||||
.home-nav__name {
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
color: @text-title;
|
||||
font-size: @fs-nav-title;
|
||||
font-weight: @fw-nav-title;
|
||||
color: @color-nav-title;
|
||||
letter-spacing: @ls-nav-title;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.home-body {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.home-search-wrap {
|
||||
margin-top: 28rpx;
|
||||
padding: 0 @home-padding;
|
||||
margin-top: @section-gap-xs;
|
||||
padding: 0 @page-padding-x;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -70,26 +81,117 @@
|
||||
}
|
||||
|
||||
.home-tabs-wrap {
|
||||
margin-top: 48rpx;
|
||||
margin-top: @section-gap;
|
||||
}
|
||||
|
||||
.home-hero-placeholder {
|
||||
// margin: 8rpx auto 0;
|
||||
margin: 48rpx 24rpx 0;
|
||||
// width: 684rpx;
|
||||
margin: @section-gap @page-padding-x 0;
|
||||
height: 480rpx;
|
||||
border-radius: 40rpx;
|
||||
background: rgba(50, 46, 37, 0.04);
|
||||
}
|
||||
|
||||
.home-section-panel {
|
||||
margin-top: @home-section-mt;
|
||||
padding: 0 @home-padding;
|
||||
box-sizing: border-box;
|
||||
.home-track-row--hero {
|
||||
padding-left: @page-padding-x;
|
||||
padding-top: 24rpx;
|
||||
padding-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.home-section-panel--hot {
|
||||
margin-top: @home-section-mt;
|
||||
.home-hero-card {
|
||||
width: 560rpx;
|
||||
flex-shrink: 0;
|
||||
border-radius: 32rpx;
|
||||
/* 让阴影不被自身 overflow: hidden 裁切 */
|
||||
overflow: visible;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 10rpx 28rpx rgba(50, 46, 37, 0.08);
|
||||
}
|
||||
|
||||
.home-hero-card__top {
|
||||
height: 260rpx;
|
||||
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;
|
||||
}
|
||||
|
||||
.home-hero-card__icon {
|
||||
font-size: 96rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.home-hero-card__badge {
|
||||
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: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
/* 允许 flex 子项在文本过长时正确截断 */
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.home-hero-card__title {
|
||||
font-size: 34rpx;
|
||||
line-height: 1.35;
|
||||
color: @text-title;
|
||||
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-card__meta {
|
||||
margin: 0;
|
||||
font-size: 22rpx;
|
||||
color: @text-gray;
|
||||
/* meta 也做单行截断，防止极端长文本把布局挤爆 */
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.home-section-panel {
|
||||
margin-top: @section-gap;
|
||||
padding: 0 @page-padding-x;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.home-section-head {
|
||||
@@ -99,7 +201,7 @@
|
||||
}
|
||||
|
||||
.home-section-head__title {
|
||||
font-size: 32rpx;
|
||||
font-size: @fs-section-head-title;
|
||||
font-weight: 700;
|
||||
color: @text-title;
|
||||
}
|
||||
@@ -110,26 +212,27 @@
|
||||
}
|
||||
|
||||
.home-section-head__title--module {
|
||||
font-size: 28rpx;
|
||||
font-size: @fs-section-head-title;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.home-track-scroll {
|
||||
margin-top: 24rpx;
|
||||
margin-top: @section-gap-sm;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
padding: 16rpx 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.home-track-row {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
gap: @home-track-gap;
|
||||
padding-right: @home-padding;
|
||||
gap: @section-gap-sm;
|
||||
padding-right: @page-padding-x;
|
||||
}
|
||||
|
||||
/* 可视约 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);
|
||||
width: calc((750rpx - 2 * @page-padding-x - 2 * @home-track-gap) / 2.2);
|
||||
flex-shrink: 0;
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
@@ -150,7 +253,7 @@
|
||||
}
|
||||
|
||||
.home-track-card__body {
|
||||
padding: 20rpx 18rpx 22rpx;
|
||||
padding: 20rpx @page-padding-inner-x 22rpx;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
@@ -177,7 +280,7 @@
|
||||
}
|
||||
|
||||
.home-age-scroll {
|
||||
margin-top: 32rpx;
|
||||
margin-top: @section-gap-sm;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -186,12 +289,11 @@
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
gap: 12rpx;
|
||||
padding-right: @home-padding;
|
||||
padding-right: @page-padding-x;
|
||||
}
|
||||
|
||||
.home-age-item {
|
||||
/* 目标：首屏露出 3.5 个（第 4 个露出约 50%） */
|
||||
width: calc((750rpx - 48rpx - 36rpx) / 3.5);
|
||||
width: calc((750rpx - 2 * @page-padding-x - 36rpx) / 3.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -225,17 +327,24 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.home-age-item__desc {
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: @text-gray;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.home-hot-list {
|
||||
margin-top: 36rpx;
|
||||
margin-top: @section-gap-sm;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 28rpx;
|
||||
gap: @section-gap-stack;
|
||||
}
|
||||
|
||||
.home-hot-card {
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
padding: 24rpx @page-padding-inner-x;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
@@ -246,7 +355,6 @@
|
||||
width: 144rpx;
|
||||
height: 144rpx;
|
||||
border-radius: 24rpx;
|
||||
background: linear-gradient(140deg, #ad060f 0%, #d93b0d 40%, #a20606 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -289,7 +397,7 @@
|
||||
.home-hot-card__tag {
|
||||
font-size: 22rpx;
|
||||
color: @text-selected-btn;
|
||||
background: #ffd709;
|
||||
background: @brand;
|
||||
border-radius: 999rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
}
|
||||
@@ -303,7 +411,7 @@
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 50%;
|
||||
background: #ffd709;
|
||||
background: @brand;
|
||||
color: #2b2b2b;
|
||||
font-size: 36rpx;
|
||||
line-height: 56rpx;
|
||||
@@ -311,6 +419,22 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.home-section-panel__sub {
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.5;
|
||||
color: @text-gray;
|
||||
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;
|
||||
}
|
||||
@@ -321,7 +445,7 @@
|
||||
}
|
||||
|
||||
.home-page .category-tabs__pill--active {
|
||||
background: #ffd709;
|
||||
background: @brand;
|
||||
color: @text-selected-btn;
|
||||
font-weight: 600;
|
||||
}
|
||||
+140
-124
@@ -1,169 +1,185 @@
|
||||
import { CATEGORIES } from '../../core/data/categories';
|
||||
import { AGE_BANDS, AgeBandKey } from '../../core/data/difficulty';
|
||||
import { NAV_INNER_PX } from '../../utils/navMetrics';
|
||||
import {
|
||||
HOME_CURRENT_CAPABILITY_DATA,
|
||||
type HomeDisplayItem,
|
||||
type HomeDisplaySection,
|
||||
} from './home.data';
|
||||
|
||||
const CATEGORY_TABS = [
|
||||
{ id: 'all', name: '全部' },
|
||||
...CATEGORIES.map((c) => ({ id: c.id, name: c.name })),
|
||||
];
|
||||
type AgeBandKey = string;
|
||||
|
||||
const AGE_BAND_ICONS = ['🌱', '🚀', '🎓', '🧠', '🏆'] as const;
|
||||
|
||||
type HomeTrackCard = {
|
||||
type HomeTab = {
|
||||
id: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
type HomeAgeBandView = {
|
||||
key: string;
|
||||
label: string;
|
||||
desc: string;
|
||||
path: string;
|
||||
icon: string;
|
||||
};
|
||||
|
||||
type HomeDisplayItemView = HomeDisplayItem & {
|
||||
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',
|
||||
},
|
||||
];
|
||||
type HomeDisplaySectionView = HomeDisplaySection & {
|
||||
anchorId: string;
|
||||
items: HomeDisplayItemView[];
|
||||
};
|
||||
|
||||
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 AGE_BAND_ICONS = ['🌱', '🚀', '🎓', '🧠', '🏆'] as const;
|
||||
|
||||
const MOCK_HOT_RECOMMENDS = [
|
||||
{
|
||||
id: 'hot-1',
|
||||
title: '100以内的加减法',
|
||||
desc: '让算术变得像游戏一样简单',
|
||||
tag: '数学',
|
||||
score: '4.8',
|
||||
emoji: '🍊',
|
||||
},
|
||||
{
|
||||
id: 'hot-2',
|
||||
title: '创意涂鸦大作战',
|
||||
desc: '释放孩子的艺术想象力',
|
||||
tag: '艺术',
|
||||
score: '4.9',
|
||||
emoji: '🎨',
|
||||
},
|
||||
] as const;
|
||||
const CATEGORY_TOP_BG: Record<HomeDisplayItem['category'], string> = {
|
||||
math: '#fff3c4',
|
||||
chinese: '#d8f0d0',
|
||||
english: '#e8f4ff',
|
||||
puzzle: '#f5e6dc',
|
||||
craft: '#fce4ec',
|
||||
};
|
||||
|
||||
const { statusBarHeight } = wx.getWindowInfo();
|
||||
const SECTION_ANCHOR_PREFIX = 'section-';
|
||||
const TAB_BAR_PATHS = new Set([
|
||||
'/pages/home/home',
|
||||
'/pages/age/age',
|
||||
'/pages/favorites/favorites',
|
||||
'/pages/profile/profile',
|
||||
]);
|
||||
|
||||
function toItemView(item: HomeDisplayItem): HomeDisplayItemView {
|
||||
return {
|
||||
...item,
|
||||
topBg: CATEGORY_TOP_BG[item.category],
|
||||
};
|
||||
}
|
||||
|
||||
function sortSectionsByTabs(
|
||||
tabs: readonly { id: string }[],
|
||||
sections: HomeDisplaySection[],
|
||||
): HomeDisplaySectionView[] {
|
||||
const orderMap = tabs.reduce<Record<string, number>>((acc, tab, index) => {
|
||||
acc[tab.id] = index;
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
return [...sections]
|
||||
.sort((a, b) => {
|
||||
const aOrder = orderMap[a.id];
|
||||
const bOrder = orderMap[b.id];
|
||||
// 注意：0 需要保留（不能用 || 进行兜底）
|
||||
return (aOrder ?? 999) - (bOrder ?? 999);
|
||||
})
|
||||
.map((section) => ({
|
||||
...section,
|
||||
anchorId: `${SECTION_ANCHOR_PREFIX}${section.id}`,
|
||||
items: section.items.map(toItemView),
|
||||
}));
|
||||
}
|
||||
|
||||
function navigateByPath(path?: string, fallbackTitle?: string) {
|
||||
if (!path) {
|
||||
wx.showToast({
|
||||
title: fallbackTitle ? `${fallbackTitle} 即将上线` : '即将上线',
|
||||
icon: 'none',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (TAB_BAR_PATHS.has(path)) {
|
||||
wx.switchTab({ url: path });
|
||||
return;
|
||||
}
|
||||
|
||||
wx.navigateTo({ url: path });
|
||||
}
|
||||
|
||||
const win = wx.getWindowInfo();
|
||||
const HOME_DATA = HOME_CURRENT_CAPABILITY_DATA;
|
||||
const HOME_TABS: HomeTab[] = HOME_DATA.categoryTabs.map((item) => ({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
}));
|
||||
const HOME_SECTIONS = sortSectionsByTabs(HOME_TABS, HOME_DATA.sections);
|
||||
console.log('HOME_DATA', HOME_DATA);
|
||||
console.log('HOME_SECTIONS', HOME_SECTIONS);
|
||||
|
||||
Page({
|
||||
data: {
|
||||
statusBarHeight,
|
||||
tabs: CATEGORY_TABS,
|
||||
statusBarHeight: win.statusBarHeight,
|
||||
navBlockHeight: win.statusBarHeight + NAV_INNER_PX,
|
||||
searchPlaceholder: HOME_DATA.searchPlaceholder,
|
||||
tabs: HOME_TABS,
|
||||
activeTab: 'all',
|
||||
ageBands: AGE_BANDS.map((item, idx) => ({
|
||||
ageBands: HOME_DATA.ageBands.map((item, idx) => ({
|
||||
...item,
|
||||
icon: AGE_BAND_ICONS[idx] || '🌟',
|
||||
})),
|
||||
activeAgeBand: AGE_BANDS[0].key as AgeBandKey,
|
||||
hotRecommends: [...MOCK_HOT_RECOMMENDS],
|
||||
mathTrackCards: MOCK_MATH_TRACK,
|
||||
chineseTrackCards: MOCK_CHINESE_TRACK,
|
||||
})) as HomeAgeBandView[],
|
||||
activeAgeBand: HOME_DATA.ageBands[0]?.key || ('3-4' as AgeBandKey),
|
||||
featuredItems: HOME_DATA.featured.map(toItemView),
|
||||
hotRecommends: HOME_DATA.hot.map(toItemView),
|
||||
sections: HOME_SECTIONS,
|
||||
},
|
||||
|
||||
onTabChange(e: WechatMiniprogram.CustomEvent) {
|
||||
this.setData({ activeTab: e.detail.id });
|
||||
const id = e.detail.id as string | undefined;
|
||||
if (!id) return;
|
||||
|
||||
this.setData({ activeTab: id });
|
||||
|
||||
if (id === 'all') {
|
||||
wx.pageScrollTo({
|
||||
scrollTop: 0,
|
||||
duration: 400,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
wx.pageScrollTo({
|
||||
selector: `#${SECTION_ANCHOR_PREFIX}${id}`,
|
||||
duration: 400,
|
||||
offsetTop: -(win.statusBarHeight + NAV_INNER_PX + 24),
|
||||
});
|
||||
},
|
||||
|
||||
onTapAgeBand(e: WechatMiniprogram.TouchEvent) {
|
||||
const key = e.currentTarget.dataset.key as AgeBandKey | undefined;
|
||||
const path = e.currentTarget.dataset.path as string | undefined;
|
||||
if (!key) return;
|
||||
this.setData({ activeAgeBand: key });
|
||||
navigateByPath(path, '分龄内容');
|
||||
},
|
||||
|
||||
onTapFeatured(e: WechatMiniprogram.TouchEvent) {
|
||||
const path = e.currentTarget.dataset.path as string | undefined;
|
||||
const title = e.currentTarget.dataset.title as string | undefined;
|
||||
navigateByPath(path, title);
|
||||
},
|
||||
|
||||
onTapHotRecommend(e: WechatMiniprogram.TouchEvent) {
|
||||
const path = e.currentTarget.dataset.path as string | undefined;
|
||||
const title = e.currentTarget.dataset.title as string | undefined;
|
||||
if (!title) return;
|
||||
wx.showToast({ title: `已选择：${title}`, icon: 'none' });
|
||||
navigateByPath(path, title);
|
||||
},
|
||||
|
||||
onTapAgeMore() {
|
||||
wx.showToast({ title: '分龄全部 即将上线', icon: 'none' });
|
||||
wx.switchTab({ url: '/pages/age/age' });
|
||||
},
|
||||
|
||||
onTapHotMore() {
|
||||
wx.showToast({ title: '热门推荐 即将上线', icon: 'none' });
|
||||
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}`,
|
||||
});
|
||||
const path = e.currentTarget.dataset.path as string | undefined;
|
||||
const title = e.currentTarget.dataset.title as string | undefined;
|
||||
navigateByPath(path, title);
|
||||
},
|
||||
|
||||
onTapTrackCard(e: WechatMiniprogram.TouchEvent) {
|
||||
const path = e.currentTarget.dataset.path as string | undefined;
|
||||
const title = e.currentTarget.dataset.title as string | undefined;
|
||||
if (!title) return;
|
||||
wx.showToast({ title, icon: 'none' });
|
||||
navigateByPath(path, title);
|
||||
},
|
||||
|
||||
onShareAppMessage() {
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="home-body" style="padding-top: {{navBlockHeight}}px;">
|
||||
<view class="home-search-wrap">
|
||||
<view class="home-search">
|
||||
<van-icon
|
||||
@@ -16,7 +17,7 @@
|
||||
size="36rpx"
|
||||
color="rgba(50, 46, 37, 0.45)"
|
||||
class="home-search__icon" />
|
||||
<text class="home-search__placeholder">搜索你喜欢的练习册...</text>
|
||||
<text class="home-search__placeholder">{{searchPlaceholder}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -27,10 +28,35 @@
|
||||
bind:change="onTabChange" />
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="home-hero-placeholder"
|
||||
aria-role="img"
|
||||
aria-label="推荐位占位" />
|
||||
<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>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="home-section-panel">
|
||||
<view class="home-section-head">
|
||||
@@ -46,12 +72,14 @@
|
||||
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>
|
||||
@@ -70,47 +98,58 @@
|
||||
wx:key="id"
|
||||
class="home-hot-card"
|
||||
data-title="{{item.title}}"
|
||||
data-path="{{item.path}}"
|
||||
bindtap="onTapHotRecommend">
|
||||
<view class="home-hot-card__thumb">
|
||||
<view
|
||||
class="home-hot-card__thumb"
|
||||
style="background-color: {{item.topBg}}">
|
||||
<text class="home-hot-card__thumb-emoji"
|
||||
>{{item.emoji}}</text
|
||||
>{{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.desc}}</text>
|
||||
<text class="home-hot-card__desc">{{item.subtitle}}</text>
|
||||
<view class="home-hot-card__meta">
|
||||
<text class="home-hot-card__tag">{{item.tag}}</text>
|
||||
<text class="home-hot-card__tag">{{item.ageBand}}</text>
|
||||
<text class="home-hot-card__score"
|
||||
>{{item.score}} ★</text
|
||||
>{{item.difficulty}}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view class="home-hot-card__action">+</view>
|
||||
<view class="home-hot-card__action">›</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="home-section-panel">
|
||||
<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"
|
||||
>数感启蒙</text
|
||||
>{{item.title}}</text
|
||||
>
|
||||
<text
|
||||
wx:if="{{item.morePath}}"
|
||||
class="home-section-head__more"
|
||||
data-category="math"
|
||||
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="{{mathTrackCards}}"
|
||||
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"
|
||||
@@ -124,48 +163,13 @@
|
||||
<text class="home-track-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 home-section-head__title--module"
|
||||
>趣味中文</text
|
||||
>
|
||||
<text
|
||||
class="home-section-head__more"
|
||||
data-category="chinese"
|
||||
bindtap="onTapTrackMore"
|
||||
>更多</text
|
||||
>
|
||||
</view>
|
||||
<scroll-view class="home-track-scroll" scroll-x enable-flex>
|
||||
<view class="home-track-row">
|
||||
<view
|
||||
wx:for="{{chineseTrackCards}}"
|
||||
wx:key="id"
|
||||
class="home-track-card"
|
||||
data-title="{{item.title}}"
|
||||
bindtap="onTapTrackCard">
|
||||
<view
|
||||
class="home-track-card__top"
|
||||
style="background-color: {{item.topBg}}">
|
||||
<text class="home-track-card__icon">{{item.icon}}</text>
|
||||
</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>
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
{
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "我的",
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"backgroundColor": "#F6F6F6"
|
||||
"navigationBarBackgroundColor": "#F8F0E0",
|
||||
"backgroundColor": "#F8F0E0",
|
||||
"usingComponents": {
|
||||
"van-icon": "@vant/weapp/icon/index"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,115 +1,357 @@
|
||||
@import '../../style/theme3.less';
|
||||
|
||||
@profile-premium-bg: #2d2a26;
|
||||
|
||||
/* 整页滚动：避免 scroll-view 在真机因未给出明确高度而高度为 0 */
|
||||
page {
|
||||
min-height: 100%;
|
||||
background: @bg-header;
|
||||
}
|
||||
|
||||
.profile-page {
|
||||
min-height: 100vh;
|
||||
background: #f6f6f6;
|
||||
padding-bottom: 48rpx;
|
||||
background: @bg-header;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.profile-page__header {
|
||||
/* 顶栏：固定于顶部，正文区独立滚动 */
|
||||
.profile-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
flex-shrink: 0;
|
||||
background: fade(@bg-header, 85%);
|
||||
backdrop-filter: blur(40rpx);
|
||||
-webkit-backdrop-filter: blur(40rpx);
|
||||
box-shadow: 0 2rpx 12rpx rgba(50, 46, 37, 0.05);
|
||||
}
|
||||
|
||||
.profile-nav__inner {
|
||||
height: @nav-inner-height;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background: #f7ee47;
|
||||
padding: 48rpx 32rpx;
|
||||
justify-content: flex-start;
|
||||
padding: 0 @page-padding-x;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.profile-page__avatar {
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 56rpx;
|
||||
flex-shrink: 0;
|
||||
.profile-nav__title {
|
||||
font-size: @fs-nav-title;
|
||||
font-weight: @fw-nav-title;
|
||||
color: @color-nav-title;
|
||||
letter-spacing: @ls-nav-title;
|
||||
}
|
||||
|
||||
.profile-page__header-info {
|
||||
margin-left: 28rpx;
|
||||
.profile-nav__brand {
|
||||
font-size: 40rpx;
|
||||
font-weight: 800;
|
||||
color: @brand;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.profile-body {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.profile-main {
|
||||
padding: @section-gap-xs @page-padding-x;
|
||||
padding-bottom: calc(32rpx + env(safe-area-inset-bottom) + 120rpx);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 用户主卡 */
|
||||
.profile-hero {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.profile-page__name {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.profile-page__stat {
|
||||
font-size: 26rpx;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.profile-page__group {
|
||||
background: #fff;
|
||||
border-radius: 32rpx;
|
||||
margin: 24rpx 24rpx 0;
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profile-page__item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 28rpx 32rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
padding: 80rpx @page-padding-inner-x 64rpx;
|
||||
background: @bg-white;
|
||||
border-radius: @radius-xl;
|
||||
border: 1rpx solid rgba(124, 118, 106, 0.12);
|
||||
box-shadow: @shadow;
|
||||
overflow: hidden;
|
||||
margin-bottom: @section-gap-xs;
|
||||
}
|
||||
|
||||
.profile-page__item--last {
|
||||
border-bottom: none;
|
||||
.profile-hero__tint {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 192rpx;
|
||||
background: @brand;
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.profile-page__icon {
|
||||
font-size: 36rpx;
|
||||
margin-right: 20rpx;
|
||||
width: 44rpx;
|
||||
.profile-hero__avatar-wrap {
|
||||
position: relative;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.profile-hero__avatar {
|
||||
width: 256rpx;
|
||||
height: 256rpx;
|
||||
border-radius: 50%;
|
||||
border: 8rpx solid @bg-white;
|
||||
background: @bg-gray;
|
||||
box-shadow: @shadow;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.profile-hero__avatar-emoji {
|
||||
font-size: 112rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.profile-hero__avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.profile-hero__edit-badge {
|
||||
position: absolute;
|
||||
right: 8rpx;
|
||||
bottom: 8rpx;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 50%;
|
||||
background: @brand;
|
||||
border: 8rpx solid @bg-white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: @shadow;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.profile-hero__name {
|
||||
margin-top: 32rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: @text-title;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.profile-page__label {
|
||||
.profile-hero__stats {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
margin-top: 64rpx;
|
||||
padding: 0 @page-padding-inner-x;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.profile-hero__stat {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
background: @bg-header;
|
||||
border-radius: @radius;
|
||||
border: 1rpx solid rgba(124, 118, 106, 0.12);
|
||||
padding: 32rpx 24rpx;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.profile-page__badge {
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
background: #ff4757;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 12rpx;
|
||||
.profile-hero__stat+.profile-hero__stat {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.profile-page__arrow {
|
||||
.profile-hero__stat-num {
|
||||
display: block;
|
||||
font-size: 36rpx;
|
||||
color: #ccc;
|
||||
font-weight: 300;
|
||||
font-weight: 800;
|
||||
color: @text-title;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.profile-page__footer {
|
||||
.profile-hero__stat-label {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 600;
|
||||
color: @text-secondary;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* 双格 */
|
||||
.profile-grid {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: @section-gap-xs;
|
||||
}
|
||||
|
||||
.profile-grid__cell {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 64rpx 32rpx 32rpx;
|
||||
padding: 48rpx 24rpx;
|
||||
background: @bg-white;
|
||||
border-radius: @radius-xl;
|
||||
border: 1rpx solid rgba(124, 118, 106, 0.12);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.profile-page__footer-emoji {
|
||||
font-size: 72rpx;
|
||||
margin-bottom: 16rpx;
|
||||
.profile-grid__cell+.profile-grid__cell {
|
||||
margin-left: 32rpx;
|
||||
}
|
||||
|
||||
.profile-page__footer-slogan {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin-bottom: 12rpx;
|
||||
.profile-grid__icon-wrap {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 50%;
|
||||
background: @brand;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 32rpx;
|
||||
box-shadow: @shadow;
|
||||
}
|
||||
|
||||
.profile-page__footer-version {
|
||||
.profile-grid__title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: @text-title;
|
||||
}
|
||||
|
||||
.profile-grid__sub {
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: #ccc;
|
||||
color: @text-secondary;
|
||||
text-align: center;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
/* 圆角列表 */
|
||||
.profile-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: @section-gap-xs;
|
||||
}
|
||||
|
||||
.profile-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 40rpx 40rpx;
|
||||
background: @bg-white;
|
||||
border-radius: 999rpx;
|
||||
border: 1rpx solid rgba(124, 118, 106, 0.12);
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.profile-row--last {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.profile-row__left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.profile-row__icon-bg {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background: fade(@brand, 18%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 32rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.profile-row__label {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: @text-title;
|
||||
}
|
||||
|
||||
.profile-row__chevron {
|
||||
font-size: 40rpx;
|
||||
color: @text-gray;
|
||||
font-weight: 300;
|
||||
flex-shrink: 0;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
/* 专业版卡 */
|
||||
.profile-upsell {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: @profile-premium-bg;
|
||||
border-radius: @radius-xl;
|
||||
padding: 64rpx 48rpx;
|
||||
box-shadow: @shadow-lg;
|
||||
margin-bottom: @section-gap-sm;
|
||||
}
|
||||
|
||||
.profile-upsell__deco {
|
||||
position: absolute;
|
||||
top: -24rpx;
|
||||
right: -32rpx;
|
||||
pointer-events: none;
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.profile-upsell__body {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.profile-upsell__title {
|
||||
display: block;
|
||||
font-size: 36rpx;
|
||||
font-weight: 800;
|
||||
color: @text-white;
|
||||
}
|
||||
|
||||
.profile-upsell__desc {
|
||||
display: block;
|
||||
margin-top: 16rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.45;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
max-width: 400rpx;
|
||||
}
|
||||
|
||||
.profile-upsell__btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 48rpx;
|
||||
padding: 24rpx 64rpx;
|
||||
border-radius: 999rpx;
|
||||
background: @brand;
|
||||
color: @text-selected-btn;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
box-shadow: @shadow-lg;
|
||||
}
|
||||
|
||||
.profile-version {
|
||||
text-align: center;
|
||||
padding: 24rpx 0 0;
|
||||
}
|
||||
|
||||
.profile-version__text {
|
||||
font-size: 20rpx;
|
||||
font-weight: 600;
|
||||
color: @text-secondary;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -1,13 +1,38 @@
|
||||
import { getTodayDownloadCount } from '../../utils/downloadPrint';
|
||||
import { NAV_INNER_PX } from '../../utils/navMetrics';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
generateCount: 0,
|
||||
statusBarHeight: 0,
|
||||
/** 状态栏 + 导航条高度，用于固定顶栏占位 */
|
||||
navBlockHeight: 0,
|
||||
userName: '微信用户',
|
||||
avatarUrl: '',
|
||||
printCount: 0,
|
||||
favoriteCount: 0,
|
||||
version: '',
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
const win = wx.getWindowInfo();
|
||||
const info = wx.getAccountInfoSync();
|
||||
const version = info.miniProgram.version || '开发版';
|
||||
this.setData({ version });
|
||||
this.setData({
|
||||
statusBarHeight: win.statusBarHeight,
|
||||
navBlockHeight: win.statusBarHeight + NAV_INNER_PX,
|
||||
version,
|
||||
});
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.refreshStats();
|
||||
},
|
||||
|
||||
refreshStats() {
|
||||
const printCount = getTodayDownloadCount();
|
||||
// 收藏数待与收藏页数据源打通后接入
|
||||
const favoriteCount = 0;
|
||||
this.setData({ printCount, favoriteCount });
|
||||
},
|
||||
|
||||
onGoToDownloads() {
|
||||
@@ -20,14 +45,6 @@ Page({
|
||||
wx.switchTab({ url: '/pages/favorites/favorites' });
|
||||
},
|
||||
|
||||
onGoToPrintPlan() {
|
||||
wx.showToast({ title: '功能开发中', icon: 'none' });
|
||||
},
|
||||
|
||||
onGoToStats() {
|
||||
wx.showToast({ title: '功能开发中', icon: 'none' });
|
||||
},
|
||||
|
||||
onGoToGuide() {
|
||||
wx.navigateTo({ url: '/pages/guide/guide' });
|
||||
},
|
||||
@@ -36,6 +53,10 @@ Page({
|
||||
wx.showToast({ title: '功能开发中', icon: 'none' });
|
||||
},
|
||||
|
||||
onGoToSettings() {
|
||||
wx.showToast({ title: '功能开发中', icon: 'none' });
|
||||
},
|
||||
|
||||
onGoToFeedback() {
|
||||
wx.showToast({ title: '功能开发中', icon: 'none' });
|
||||
},
|
||||
@@ -43,4 +64,8 @@ Page({
|
||||
onGoToAbout() {
|
||||
wx.showToast({ title: '涂鸦丫练习纸', icon: 'none' });
|
||||
},
|
||||
|
||||
onGoToPremium() {
|
||||
wx.showToast({ title: '功能开发中', icon: 'none' });
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,62 +1,145 @@
|
||||
<view class="profile-page">
|
||||
<view class="profile-page__header">
|
||||
<view class="profile-page__avatar">🦆</view>
|
||||
<view class="profile-page__header-info">
|
||||
<text class="profile-page__name">微信用户</text>
|
||||
<text class="profile-page__stat">已生成 {{generateCount}} 张练习纸</text>
|
||||
<view class="profile-nav" style="padding-top: {{statusBarHeight}}px;">
|
||||
<view class="profile-nav__inner">
|
||||
<text class="profile-nav__title">个人中心</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="profile-page__group">
|
||||
<view class="profile-page__item" bindtap="onGoToDownloads">
|
||||
<text class="profile-page__icon">📥</text>
|
||||
<text class="profile-page__label">下载历史</text>
|
||||
<text class="profile-page__arrow">›</text>
|
||||
</view>
|
||||
<view class="profile-page__item" bindtap="onGoToFavorites">
|
||||
<text class="profile-page__icon">❤️</text>
|
||||
<text class="profile-page__label">我的收藏</text>
|
||||
<text class="profile-page__arrow">›</text>
|
||||
</view>
|
||||
<view class="profile-page__item" bindtap="onGoToPrintPlan">
|
||||
<text class="profile-page__icon">📋</text>
|
||||
<text class="profile-page__label">每日打印计划</text>
|
||||
<view class="profile-page__badge">即将上线</view>
|
||||
<text class="profile-page__arrow">›</text>
|
||||
</view>
|
||||
<view class="profile-page__item profile-page__item--last" bindtap="onGoToStats">
|
||||
<text class="profile-page__icon">📊</text>
|
||||
<text class="profile-page__label">学习统计</text>
|
||||
<text class="profile-page__arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="profile-body" style="padding-top: {{navBlockHeight}}px;">
|
||||
<view class="profile-main">
|
||||
<!-- 用户卡（Stitch：白底大圆角 + 顶条淡黄） -->
|
||||
<view class="profile-hero">
|
||||
<view class="profile-hero__tint"></view>
|
||||
<view class="profile-hero__avatar-wrap">
|
||||
<view class="profile-hero__avatar">
|
||||
<text
|
||||
class="profile-hero__avatar-emoji"
|
||||
wx:if="{{!avatarUrl}}"
|
||||
>🦆</text
|
||||
>
|
||||
<image
|
||||
wx:else
|
||||
class="profile-hero__avatar-img"
|
||||
src="{{avatarUrl}}"
|
||||
mode="aspectFill" />
|
||||
</view>
|
||||
<view
|
||||
class="profile-hero__edit-badge"
|
||||
aria-role="button"
|
||||
aria-label="编辑头像">
|
||||
<van-icon name="edit" size="28rpx" color="#6c5a00" />
|
||||
</view>
|
||||
</view>
|
||||
<text class="profile-hero__name">{{userName}}</text>
|
||||
<view class="profile-hero__stats">
|
||||
<view class="profile-hero__stat">
|
||||
<text class="profile-hero__stat-num"
|
||||
>{{printCount}}</text
|
||||
>
|
||||
<text class="profile-hero__stat-label">打印</text>
|
||||
</view>
|
||||
<view class="profile-hero__stat">
|
||||
<text class="profile-hero__stat-num"
|
||||
>{{favoriteCount}}</text
|
||||
>
|
||||
<text class="profile-hero__stat-label">收藏</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="profile-page__group">
|
||||
<view class="profile-page__item" bindtap="onGoToGuide">
|
||||
<text class="profile-page__icon">🖨️</text>
|
||||
<text class="profile-page__label">打印指南</text>
|
||||
<text class="profile-page__arrow">›</text>
|
||||
</view>
|
||||
<view class="profile-page__item" bindtap="onGoToPrintSettings">
|
||||
<text class="profile-page__icon">⚙️</text>
|
||||
<text class="profile-page__label">打印设置</text>
|
||||
<text class="profile-page__arrow">›</text>
|
||||
</view>
|
||||
<view class="profile-page__item" bindtap="onGoToFeedback">
|
||||
<text class="profile-page__icon">💬</text>
|
||||
<text class="profile-page__label">意见反馈</text>
|
||||
<text class="profile-page__arrow">›</text>
|
||||
</view>
|
||||
<view class="profile-page__item profile-page__item--last" bindtap="onGoToAbout">
|
||||
<text class="profile-page__icon">ℹ️</text>
|
||||
<text class="profile-page__label">关于涂鸦丫</text>
|
||||
<text class="profile-page__arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 双格入口 -->
|
||||
<view class="profile-grid">
|
||||
<view class="profile-grid__cell" bindtap="onGoToFavorites">
|
||||
<view class="profile-grid__icon-wrap">
|
||||
<van-icon name="like" size="44rpx" color="#6c5a00" />
|
||||
</view>
|
||||
<text class="profile-grid__title">我的收藏</text>
|
||||
<text class="profile-grid__sub">已保存的练习题</text>
|
||||
</view>
|
||||
<view class="profile-grid__cell" bindtap="onGoToDownloads">
|
||||
<view class="profile-grid__icon-wrap">
|
||||
<van-icon name="down" size="44rpx" color="#6c5a00" />
|
||||
</view>
|
||||
<text class="profile-grid__title">下载历史</text>
|
||||
<text class="profile-grid__sub">查看历史文件</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="profile-page__footer">
|
||||
<text class="profile-page__footer-emoji">🦆</text>
|
||||
<text class="profile-page__footer-slogan">陪孩子一起，把学习变成游戏</text>
|
||||
<text class="profile-page__footer-version">v{{version}}</text>
|
||||
<!-- 圆角列表行 -->
|
||||
<view class="profile-rows">
|
||||
<view class="profile-row" bindtap="onGoToGuide">
|
||||
<view class="profile-row__left">
|
||||
<view class="profile-row__icon-bg">
|
||||
<van-icon
|
||||
name="printer"
|
||||
size="40rpx"
|
||||
color="#322e25" />
|
||||
</view>
|
||||
<text class="profile-row__label">打印指南</text>
|
||||
</view>
|
||||
<text class="profile-row__chevron">›</text>
|
||||
</view>
|
||||
<view class="profile-row" bindtap="onGoToFeedback">
|
||||
<view class="profile-row__left">
|
||||
<view class="profile-row__icon-bg">
|
||||
<van-icon
|
||||
name="chat-o"
|
||||
size="40rpx"
|
||||
color="#322e25" />
|
||||
</view>
|
||||
<text class="profile-row__label">提交反馈</text>
|
||||
</view>
|
||||
<text class="profile-row__chevron">›</text>
|
||||
</view>
|
||||
<view class="profile-row" bindtap="onGoToSettings">
|
||||
<view class="profile-row__left">
|
||||
<view class="profile-row__icon-bg">
|
||||
<van-icon
|
||||
name="setting-o"
|
||||
size="40rpx"
|
||||
color="#322e25" />
|
||||
</view>
|
||||
<text class="profile-row__label">设置</text>
|
||||
</view>
|
||||
<text class="profile-row__chevron">›</text>
|
||||
</view>
|
||||
<view
|
||||
class="profile-row profile-row--last"
|
||||
bindtap="onGoToAbout">
|
||||
<view class="profile-row__left">
|
||||
<view class="profile-row__icon-bg">
|
||||
<van-icon
|
||||
name="info-o"
|
||||
size="40rpx"
|
||||
color="#322e25" />
|
||||
</view>
|
||||
<text class="profile-row__label">关于涂鸦丫</text>
|
||||
</view>
|
||||
<text class="profile-row__chevron">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 专业版推广（Stitch 深色卡） -->
|
||||
<view class="profile-upsell" bindtap="onGoToPremium">
|
||||
<van-icon
|
||||
name="gem-o"
|
||||
class="profile-upsell__deco"
|
||||
size="200rpx"
|
||||
color="rgba(255,255,255,0.12)" />
|
||||
<view class="profile-upsell__body">
|
||||
<text class="profile-upsell__title">升级专业版</text>
|
||||
<text class="profile-upsell__desc"
|
||||
>解锁 500+ 精选教育模板并获得优先体验。</text
|
||||
>
|
||||
<view class="profile-upsell__btn">立即升级</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="profile-version">
|
||||
<text class="profile-version__text"
|
||||
>Doodle Mini v{{version}}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user