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

feat: 完成首页UI展示初版开发

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