feat: 完成 4 个TabBar 页面初版样式修改
This commit is contained in:
R524809
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user