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

feat: 完成 4 个TabBar 页面初版样式修改

Browse Source
This commit is contained in:
R524809
2026-04-02 17:05:55 +08:00
parent b18dbcb0d1
commit 206c44cf6d
61 changed files with 4670 additions and 996 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/age/age.wxml
+104 -25
View File
@@ -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>