Files
doodle-mini/miniprogram/pages/age/age.wxml
T
2026-04-03 15:21:04 +08:00

107 lines
4.2 KiB
Plaintext

<view class="age-page">
<nav-bar title="按年龄学" />
<view class="age-body">
<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>