feat:更新core 和首页代码
This commit is contained in:
R524809
@@ -1,4 +1,7 @@
|
||||
import type { WorksheetType } from '../../core/models/worksheet';
|
||||
import type {
|
||||
WorksheetDefinition,
|
||||
WorksheetType,
|
||||
} from '../../core/models/worksheet';
|
||||
import {
|
||||
getWorksheetPath,
|
||||
getWorksheetsByAge,
|
||||
@@ -63,7 +66,7 @@ function toDisplayList(list: WorksheetType[]): DisplayItem[] {
|
||||
Page({
|
||||
data: {
|
||||
title: '分类',
|
||||
sourceItems: [] as WorksheetType[],
|
||||
sourceItems: [] as WorksheetDefinition[],
|
||||
items: [] as DisplayItem[],
|
||||
ageFilters: [
|
||||
{ key: 'all', label: '全部' },
|
||||
@@ -95,13 +98,11 @@ Page({
|
||||
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, WorksheetType>();
|
||||
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),
|
||||
);
|
||||
getWorksheetsByAge(base, age).forEach((w) => map.set(w.id, w));
|
||||
}
|
||||
base = Array.from(map.values());
|
||||
}
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
{
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "涂鸦丫",
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarBackgroundColor": "#FEF6E7",
|
||||
"backgroundColor": "#FEF6E7",
|
||||
"enablePullDownRefresh": false,
|
||||
"usingComponents": {
|
||||
"worksheet-card": "/components/shared/worksheet-card/worksheet-card",
|
||||
"category-tabs": "/components/shared/category-tabs/category-tabs"
|
||||
"category-tabs": "/components/shared/category-tabs/category-tabs",
|
||||
"van-icon": "@vant/weapp/icon/index"
|
||||
}
|
||||
}
|
||||
|
||||
+196
-111
@@ -1,172 +1,257 @@
|
||||
/* 首页体验配色：主题 #FFD709 / 正文 #605B50 / 底 #FEF6E7 / 按钮字 #322E25 / 标签 #91F78E */
|
||||
@import '../../style/theme3.less';
|
||||
|
||||
@home-padding: 28rpx;
|
||||
|
||||
.home-page {
|
||||
min-height: 100vh;
|
||||
background: #fef6e7;
|
||||
background: @bg-page;
|
||||
padding-bottom: 48rpx;
|
||||
box-sizing: border-box;
|
||||
color: #605b50;
|
||||
color: @text-secondary;
|
||||
// padding: 0 24rpx 48rpx;
|
||||
}
|
||||
|
||||
.home-header {
|
||||
background: #fef6e7;
|
||||
padding: 24rpx 24rpx 20rpx;
|
||||
.home-nav {
|
||||
background: @bg-header;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.home-brand {
|
||||
.home-nav__inner {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.home-nav__logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.home-nav__name {
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
color: @text-title;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.home-search-wrap {
|
||||
margin-top: 28rpx;
|
||||
padding: 0 @home-padding;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.home-search {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.home-brand__duck {
|
||||
font-size: 48rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.home-brand__name {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #322e25;
|
||||
}
|
||||
|
||||
.home-search {
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
border-radius: 40rpx;
|
||||
background: #e5dcc9;
|
||||
border-radius: 999rpx;
|
||||
padding: 22rpx 32rpx;
|
||||
border: 1rpx solid rgba(255, 215, 9, 0.35);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.home-search__icon {
|
||||
flex-shrink: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.home-search__placeholder {
|
||||
font-size: 28rpx;
|
||||
color: rgba(96, 91, 80, 0.55);
|
||||
color: rgba(50, 46, 37, 0.45);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.home-body {
|
||||
padding: 24rpx 24rpx 0;
|
||||
.home-tabs-wrap {
|
||||
// margin-top: 28rpx;
|
||||
}
|
||||
|
||||
.home-section {
|
||||
margin-bottom: 40rpx;
|
||||
.home-hero-placeholder {
|
||||
// margin: 8rpx auto 0;
|
||||
margin: 0 24rpx;
|
||||
// width: 684rpx;
|
||||
height: 480rpx;
|
||||
border-radius: 40rpx;
|
||||
background: rgba(50, 46, 37, 0.04);
|
||||
}
|
||||
|
||||
.home-section--hot {
|
||||
margin-bottom: 32rpx;
|
||||
.home-section-panel {
|
||||
margin-top: 48rpx;
|
||||
padding: 0 @home-padding;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.home-section__title-row {
|
||||
margin-bottom: 20rpx;
|
||||
.home-section-panel--hot {
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.home-section__title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #605b50;
|
||||
}
|
||||
|
||||
.home-section__head {
|
||||
.home-section-head {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.home-section__head-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.home-section__icon {
|
||||
font-size: 36rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.home-section__name {
|
||||
.home-section-head__title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #605b50;
|
||||
color: @text-title;
|
||||
}
|
||||
|
||||
.home-section__more {
|
||||
font-size: 26rpx;
|
||||
color: #322e25;
|
||||
font-weight: 500;
|
||||
.home-section-head__more {
|
||||
font-size: 24rpx;
|
||||
color: @text-selected-btn;
|
||||
}
|
||||
|
||||
.home-hot__scroll {
|
||||
.home-age-scroll {
|
||||
margin-top: 32rpx;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.home-hot__row {
|
||||
.home-age-row {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
gap: 24rpx;
|
||||
padding-bottom: 8rpx;
|
||||
gap: 20rpx;
|
||||
padding-right: @home-padding;
|
||||
}
|
||||
|
||||
.home-hot__item {
|
||||
display: inline-block;
|
||||
width: 240rpx;
|
||||
vertical-align: top;
|
||||
.home-age-item {
|
||||
width: calc((750rpx - 48rpx - 40rpx) / 3.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.home-hot__card-wrap {
|
||||
width: 240rpx;
|
||||
padding: 4rpx;
|
||||
border-radius: 28rpx;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(145deg, rgba(255, 215, 9, 0.85), rgba(254, 246, 231, 0.95));
|
||||
.home-age-item__icon-wrap {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(248, 240, 224, 0.85);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.home-age-item__icon-wrap--active {
|
||||
background: rgba(255, 215, 9, 0.28);
|
||||
}
|
||||
|
||||
.home-age-item__icon {
|
||||
font-size: 44rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.home-age-item__label {
|
||||
margin-top: 12rpx;
|
||||
font-size: 26rpx;
|
||||
color: @text-title;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.home-hot-list {
|
||||
margin-top: 36rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 28rpx;
|
||||
}
|
||||
|
||||
.home-hot-card {
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.home-hot-card__thumb {
|
||||
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;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.home-hot-card__thumb-emoji {
|
||||
font-size: 56rpx;
|
||||
}
|
||||
|
||||
.home-hot-card__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.home-hot-card__title {
|
||||
font-size: 30rpx;
|
||||
color: #2f2f2f;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.home-hot-card__desc {
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #616161;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.home-hot-card__meta {
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.home-hot-card__tag {
|
||||
font-size: 22rpx;
|
||||
color: @text-selected-btn;
|
||||
background: #ffd709;
|
||||
border-radius: 999rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
}
|
||||
|
||||
.home-hot-card__score {
|
||||
font-size: 24rpx;
|
||||
color: #6b6b6b;
|
||||
}
|
||||
|
||||
.home-hot-card__action {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 50%;
|
||||
background: #ffd709;
|
||||
color: #2b2b2b;
|
||||
font-size: 36rpx;
|
||||
line-height: 56rpx;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* category-tabs：仅首页通过 apply-shared + .home-page 生效 */
|
||||
.home-page .category-tabs {
|
||||
background: #fef6e7;
|
||||
background: @bg-page;
|
||||
}
|
||||
|
||||
.home-page .category-tabs__pill {
|
||||
background: rgba(96, 91, 80, 0.08);
|
||||
color: #605b50;
|
||||
color: @text-secondary;
|
||||
}
|
||||
|
||||
.home-page .category-tabs__pill--active {
|
||||
background: #ffd709;
|
||||
color: #322e25;
|
||||
color: @text-selected-btn;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* worksheet-card：仅首页 */
|
||||
.home-page .worksheet-card {
|
||||
box-shadow: 0 8rpx 28rpx rgba(50, 46, 37, 0.08);
|
||||
}
|
||||
|
||||
.home-page .worksheet-card__title {
|
||||
color: #605b50;
|
||||
}
|
||||
|
||||
.home-page .worksheet-card__preview-text {
|
||||
color: #605b50;
|
||||
}
|
||||
|
||||
.home-page .worksheet-card__tag--age,
|
||||
.home-page .worksheet-card__tag--diff {
|
||||
background: #91f78e;
|
||||
color: #322e25;
|
||||
}
|
||||
|
||||
.home-grid {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.home-grid__cell {
|
||||
width: calc((100% - 40rpx) / 3);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
@@ -1,81 +1,77 @@
|
||||
import { ALL_WORKSHEETS, getWorksheetsByCategory, getWorksheetPath } from '../../core/data/worksheets';
|
||||
import { CATEGORIES } from '../../core/data/categories';
|
||||
import { WorksheetType } from '../../core/models/worksheet';
|
||||
import { AGE_BANDS, AgeBandKey } from '../../core/data/difficulty';
|
||||
|
||||
const CATEGORY_TABS = [
|
||||
{ id: 'all', name: '全部' },
|
||||
...CATEGORIES.map((c) => ({ id: c.id, name: c.name })),
|
||||
];
|
||||
|
||||
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 { statusBarHeight } = wx.getWindowInfo();
|
||||
|
||||
Page({
|
||||
data: {
|
||||
statusBarHeight,
|
||||
tabs: CATEGORY_TABS,
|
||||
activeTab: 'all',
|
||||
sections: [] as Array<{ title: string; icon: string; category: string; items: WorksheetType[] }>,
|
||||
hotItems: [] as WorksheetType[],
|
||||
filteredItems: null as WorksheetType[] | null,
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
const sections = CATEGORIES.filter((cat) => {
|
||||
const items = getWorksheetsByCategory(cat.id);
|
||||
return items.length > 0;
|
||||
}).map((cat) => ({
|
||||
title: cat.name,
|
||||
icon: cat.icon,
|
||||
category: cat.id,
|
||||
items: getWorksheetsByCategory(cat.id).slice(0, 3),
|
||||
}));
|
||||
|
||||
const hotItems = ALL_WORKSHEETS.filter((w) => w.page).slice(0, 4);
|
||||
|
||||
this.setData({ sections, hotItems });
|
||||
ageBands: AGE_BANDS.map((item, idx) => ({
|
||||
...item,
|
||||
icon: AGE_BAND_ICONS[idx] || '🌟',
|
||||
})),
|
||||
activeAgeBand: AGE_BANDS[0].key as AgeBandKey,
|
||||
hotRecommends: [...MOCK_HOT_RECOMMENDS],
|
||||
},
|
||||
|
||||
onTabChange(e: WechatMiniprogram.CustomEvent) {
|
||||
const activeTab = e.detail.id;
|
||||
if (activeTab === 'all') {
|
||||
this.setData({ activeTab, filteredItems: null });
|
||||
} else {
|
||||
const filteredItems = getWorksheetsByCategory(activeTab);
|
||||
this.setData({ activeTab, filteredItems });
|
||||
}
|
||||
this.setData({ activeTab: e.detail.id });
|
||||
},
|
||||
|
||||
onCardTap(e: WechatMiniprogram.TouchEvent) {
|
||||
const id = e.currentTarget.dataset.id as string | undefined;
|
||||
if (!id) return;
|
||||
const item = ALL_WORKSHEETS.find((w) => w.id === id);
|
||||
if (!item) return;
|
||||
const path = getWorksheetPath(item);
|
||||
if (path) {
|
||||
wx.navigateTo({ url: path });
|
||||
}
|
||||
onTapAgeBand(e: WechatMiniprogram.TouchEvent) {
|
||||
const key = e.currentTarget.dataset.key as AgeBandKey | undefined;
|
||||
if (!key) return;
|
||||
this.setData({ activeAgeBand: key });
|
||||
},
|
||||
|
||||
onHotCardTap(e: WechatMiniprogram.TouchEvent) {
|
||||
const id = e.currentTarget.dataset.id as string | undefined;
|
||||
if (!id) return;
|
||||
const item = ALL_WORKSHEETS.find((w) => w.id === id);
|
||||
if (!item) return;
|
||||
const path = getWorksheetPath(item);
|
||||
if (path) {
|
||||
wx.navigateTo({ url: path });
|
||||
}
|
||||
onTapHotRecommend(e: WechatMiniprogram.TouchEvent) {
|
||||
const title = e.currentTarget.dataset.title as string | undefined;
|
||||
if (!title) return;
|
||||
wx.showToast({ title: `已选择：${title}`, icon: 'none' });
|
||||
},
|
||||
|
||||
onSeeMore(e: WechatMiniprogram.TouchEvent) {
|
||||
const { category } = e.currentTarget.dataset;
|
||||
wx.navigateTo({
|
||||
url: `/pages/category/category?category=${category}`,
|
||||
});
|
||||
onTapAgeMore() {
|
||||
wx.showToast({ title: '分龄全部 即将上线', icon: 'none' });
|
||||
},
|
||||
|
||||
onTapHotMore() {
|
||||
wx.showToast({ title: '热门推荐 即将上线', icon: 'none' });
|
||||
},
|
||||
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '涂鸦丫 - 快来生成宝宝的专属学习卡',
|
||||
path: '/pages/home/home',
|
||||
imageUrl: 'https://cdn.joeyone.cn/doodle/share-img/index-share-v2.png',
|
||||
imageUrl:
|
||||
'https://cdn.joeyone.cn/doodle/share-img/index-share-v2.png',
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
@@ -1,105 +1,93 @@
|
||||
<wxs module="fmt">
|
||||
function ageLabel(arr) {
|
||||
if (!arr || arr.length < 2) {
|
||||
return '';
|
||||
}
|
||||
return arr[0] + '-' + arr[1] + '岁';
|
||||
}
|
||||
module.exports.ageLabel = ageLabel;
|
||||
</wxs>
|
||||
|
||||
<view class="home-page">
|
||||
<view class="home-header">
|
||||
<view class="home-brand">
|
||||
<text class="home-brand__duck">🦆</text>
|
||||
<text class="home-brand__name">涂鸦丫</text>
|
||||
</view>
|
||||
<view class="home-search">
|
||||
<text class="home-search__placeholder">搜索练习单（即将上线）</text>
|
||||
<view class="home-nav" style="padding-top: {{statusBarHeight}}px;">
|
||||
<view class="home-nav__inner">
|
||||
<image
|
||||
src="/assets/imgs/doodle-logo.png"
|
||||
mode="aspectFill"
|
||||
class="home-nav__logo" />
|
||||
<text class="home-nav__name">涂鸦丫</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<category-tabs tabs="{{tabs}}" active-tab="{{activeTab}}" bind:change="onTabChange" />
|
||||
<view class="home-search-wrap">
|
||||
<view class="home-search">
|
||||
<van-icon
|
||||
name="search"
|
||||
size="36rpx"
|
||||
color="rgba(50, 46, 37, 0.45)"
|
||||
class="home-search__icon" />
|
||||
<text class="home-search__placeholder">搜索你喜欢的练习册...</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="home-body">
|
||||
<block wx:if="{{activeTab != 'all'}}">
|
||||
<view class="home-grid">
|
||||
<view class="home-tabs-wrap">
|
||||
<category-tabs
|
||||
tabs="{{tabs}}"
|
||||
active-tab="{{activeTab}}"
|
||||
bind:change="onTabChange" />
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="home-hero-placeholder"
|
||||
aria-role="img"
|
||||
aria-label="推荐位占位" />
|
||||
|
||||
<view class="home-section-panel">
|
||||
<view class="home-section-head">
|
||||
<text class="home-section-head__title">按年龄挑选</text>
|
||||
<text class="home-section-head__more" bindtap="onTapAgeMore"
|
||||
>查看全部</text
|
||||
>
|
||||
</view>
|
||||
<scroll-view class="home-age-scroll" scroll-x enable-flex>
|
||||
<view class="home-age-row">
|
||||
<view
|
||||
wx:for="{{filteredItems}}"
|
||||
wx:key="id"
|
||||
class="home-grid__cell"
|
||||
bindtap="onCardTap"
|
||||
data-id="{{item.id}}"
|
||||
>
|
||||
<worksheet-card
|
||||
title="{{item.title}}"
|
||||
preview-bg="{{item.previewBg}}"
|
||||
preview-text="{{item.previewText}}"
|
||||
img="{{item.img}}"
|
||||
age-range="{{fmt.ageLabel(item.ageRange)}}"
|
||||
difficulty="{{item.difficulty}}"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<block wx:else>
|
||||
<view class="home-section home-section--hot">
|
||||
<view class="home-section__title-row">
|
||||
<text class="home-section__title">🔥 热门下载</text>
|
||||
</view>
|
||||
<scroll-view class="home-hot__scroll" scroll-x enable-flex>
|
||||
<view class="home-hot__row">
|
||||
<view
|
||||
wx:for="{{hotItems}}"
|
||||
wx:key="id"
|
||||
class="home-hot__item"
|
||||
bindtap="onHotCardTap"
|
||||
data-id="{{item.id}}"
|
||||
>
|
||||
<view class="home-hot__card-wrap">
|
||||
<worksheet-card
|
||||
title="{{item.title}}"
|
||||
preview-bg="{{item.previewBg}}"
|
||||
preview-text="{{item.previewText}}"
|
||||
img="{{item.img}}"
|
||||
age-range="{{fmt.ageLabel(item.ageRange)}}"
|
||||
difficulty="{{item.difficulty}}"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view wx:for="{{sections}}" wx:key="category" class="home-section">
|
||||
<view class="home-section__head">
|
||||
<view class="home-section__head-left">
|
||||
<text class="home-section__icon">{{item.icon}}</text>
|
||||
<text class="home-section__name">{{item.title}}</text>
|
||||
</view>
|
||||
<text class="home-section__more" bindtap="onSeeMore" data-category="{{item.category}}">更多</text>
|
||||
</view>
|
||||
<view class="home-grid">
|
||||
wx:for="{{ageBands}}"
|
||||
wx:key="key"
|
||||
class="home-age-item"
|
||||
data-key="{{item.key}}"
|
||||
bindtap="onTapAgeBand">
|
||||
<view
|
||||
wx:for="{{item.items}}"
|
||||
wx:for-item="w"
|
||||
wx:key="id"
|
||||
class="home-grid__cell"
|
||||
bindtap="onCardTap"
|
||||
data-id="{{w.id}}"
|
||||
>
|
||||
<worksheet-card
|
||||
title="{{w.title}}"
|
||||
preview-bg="{{w.previewBg}}"
|
||||
preview-text="{{w.previewText}}"
|
||||
img="{{w.img}}"
|
||||
age-range="{{fmt.ageLabel(w.ageRange)}}"
|
||||
difficulty="{{w.difficulty}}"
|
||||
/>
|
||||
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>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="home-section-panel home-section-panel--hot">
|
||||
<view class="home-section-head">
|
||||
<text class="home-section-head__title">热门推荐</text>
|
||||
<text class="home-section-head__more" bindtap="onTapHotMore"
|
||||
>查看全部</text
|
||||
>
|
||||
</view>
|
||||
<view class="home-hot-list">
|
||||
<view
|
||||
wx:for="{{hotRecommends}}"
|
||||
wx:key="id"
|
||||
class="home-hot-card"
|
||||
data-title="{{item.title}}"
|
||||
bindtap="onTapHotRecommend">
|
||||
<view class="home-hot-card__thumb">
|
||||
<text class="home-hot-card__thumb-emoji"
|
||||
>{{item.emoji}}</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>
|
||||
<view class="home-hot-card__meta">
|
||||
<text class="home-hot-card__tag">{{item.tag}}</text>
|
||||
<text class="home-hot-card__score"
|
||||
>{{item.score}} ★</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view class="home-hot-card__action">+</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user