feat: 完成 4 个TabBar 页面初版样式修改
This commit is contained in:
R524809
@@ -1,38 +1,216 @@
|
||||
<view class="favorites-page">
|
||||
<view class="favorites-page__title">我的收藏</view>
|
||||
|
||||
<view class="favorites-page__tabs">
|
||||
<view
|
||||
class="favorites-page__tab {{activeTab === 'favorites' ? 'favorites-page__tab--active' : ''}}"
|
||||
data-tab="favorites"
|
||||
bindtap="onTabSwitch"
|
||||
>
|
||||
收藏的题型
|
||||
</view>
|
||||
<view
|
||||
class="favorites-page__tab {{activeTab === 'downloads' ? 'favorites-page__tab--active' : ''}}"
|
||||
data-tab="downloads"
|
||||
bindtap="onTabSwitch"
|
||||
>
|
||||
下载历史
|
||||
<view class="fav-page">
|
||||
<view class="fav-nav" style="padding-top: {{statusBarHeight}}px;">
|
||||
<view class="fav-nav__inner">
|
||||
<text class="fav-nav__title">我的收藏</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{activeTab === 'favorites' && favoriteList.length === 0}}" class="favorites-page__empty">
|
||||
<text class="favorites-page__emoji">🦆</text>
|
||||
<view class="favorites-page__empty-msg">
|
||||
<text class="favorites-page__empty-line">鸭丫还没找到收藏呢</text>
|
||||
<text class="favorites-page__empty-line">去发现好玩的练习纸吧~</text>
|
||||
</view>
|
||||
<button class="favorites-page__btn" bindtap="onDiscoverTap">去发现</button>
|
||||
</view>
|
||||
<scroll-view
|
||||
class="fav-scroll"
|
||||
style="height: {{favScrollHeight}}px; margin-top: {{navBlockHeight}}px;"
|
||||
scroll-y
|
||||
enhanced
|
||||
show-scrollbar="{{false}}">
|
||||
<view class="fav-body">
|
||||
<view class="fav-seg">
|
||||
<view
|
||||
class="fav-seg__pill {{activeTab === 'favorites' ? 'fav-seg__pill--active' : ''}}"
|
||||
data-tab="favorites"
|
||||
bindtap="onTabSwitch">
|
||||
<text class="fav-seg__text">收藏的题型</text>
|
||||
</view>
|
||||
<view
|
||||
class="fav-seg__pill {{activeTab === 'downloads' ? 'fav-seg__pill--active' : ''}}"
|
||||
data-tab="downloads"
|
||||
bindtap="onTabSwitch">
|
||||
<text class="fav-seg__text">下载历史</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view wx:elif="{{activeTab === 'downloads' && downloadList.length === 0}}" class="favorites-page__empty">
|
||||
<text class="favorites-page__emoji">🦆</text>
|
||||
<view class="favorites-page__empty-msg">
|
||||
<text class="favorites-page__empty-line">还没有下载记录哦</text>
|
||||
<text class="favorites-page__empty-line">快去生成练习纸吧~</text>
|
||||
<!-- 收藏的题型 -->
|
||||
<block wx:if="{{activeTab === 'favorites'}}">
|
||||
<view wx:if="{{favoriteList.length === 0}}" class="fav-empty">
|
||||
<text class="fav-empty__emoji">🦆</text>
|
||||
<text class="fav-empty__msg">鸭丫还没找到收藏呢</text>
|
||||
<text class="fav-empty__sub">去发现好玩的练习纸吧~</text>
|
||||
<button class="fav-empty__btn" bindtap="onDiscoverTap">
|
||||
去发现
|
||||
</button>
|
||||
</view>
|
||||
<view wx:else class="fav-list">
|
||||
<block wx:for="{{favoriteList}}" wx:key="id">
|
||||
<view
|
||||
wx:if="{{item.variant === 'standard'}}"
|
||||
class="fav-card fav-card--row">
|
||||
<image
|
||||
class="fav-card__thumb"
|
||||
src="{{item.thumb}}"
|
||||
mode="aspectFill" />
|
||||
<view class="fav-card__main">
|
||||
<text class="fav-card__title"
|
||||
>{{item.title}}</text
|
||||
>
|
||||
<view class="fav-card__meta">
|
||||
<text class="fav-card__meta-text"
|
||||
>{{item.metaLine}}</text
|
||||
>
|
||||
<view
|
||||
class="fav-card__stars"
|
||||
aria-label="{{item.stars}} 星">
|
||||
<van-icon
|
||||
wx:if="{{item.stars >= 1}}"
|
||||
name="star"
|
||||
size="22rpx"
|
||||
color="#d4a900" />
|
||||
<van-icon
|
||||
wx:if="{{item.stars >= 2}}"
|
||||
name="star"
|
||||
size="22rpx"
|
||||
color="#d4a900" />
|
||||
<van-icon
|
||||
wx:if="{{item.stars >= 3}}"
|
||||
name="star"
|
||||
size="22rpx"
|
||||
color="#d4a900" />
|
||||
</view>
|
||||
</view>
|
||||
<text class="fav-card__badge"
|
||||
>{{item.timeBadge}}</text
|
||||
>
|
||||
</view>
|
||||
<view
|
||||
class="fav-card__heart"
|
||||
data-id="{{item.id}}"
|
||||
catchtap="onRemoveFavorite"
|
||||
aria-role="button"
|
||||
aria-label="取消收藏">
|
||||
<van-icon
|
||||
name="like"
|
||||
size="40rpx"
|
||||
color="#b02500" />
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
wx:elif="{{item.variant === 'featured'}}"
|
||||
class="fav-card fav-card--bento">
|
||||
<view class="fav-bento__content">
|
||||
<text class="fav-card__title fav-bento__title"
|
||||
>{{item.title}}</text
|
||||
>
|
||||
<text class="fav-bento__meta"
|
||||
>{{item.metaLine}}</text
|
||||
>
|
||||
<view class="fav-bento__tags">
|
||||
<text
|
||||
wx:for="{{item.tags}}"
|
||||
wx:for-item="tag"
|
||||
wx:key="*this"
|
||||
class="fav-bento__tag"
|
||||
># {{tag}}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<van-icon
|
||||
class="fav-bento__deco"
|
||||
name="font-o"
|
||||
size="200rpx"
|
||||
color="rgba(108, 90, 0, 0.12)" />
|
||||
<view
|
||||
class="fav-bento__heart"
|
||||
data-id="{{item.id}}"
|
||||
catchtap="onRemoveFavorite"
|
||||
aria-role="button">
|
||||
<van-icon
|
||||
name="like"
|
||||
size="40rpx"
|
||||
color="#b02500" />
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view wx:if="{{favoriteList.length > 0}}" class="fav-cta">
|
||||
<text class="fav-cta__hint">发现更多有趣的内容？</text>
|
||||
<button class="fav-cta__btn" bindtap="onDiscoverTap">
|
||||
去发现页看看
|
||||
</button>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 下载历史 -->
|
||||
<block wx:if="{{activeTab === 'downloads'}}">
|
||||
<view
|
||||
wx:if="{{downloadSections.length === 0}}"
|
||||
class="fav-empty">
|
||||
<van-icon
|
||||
name="clock"
|
||||
size="120rpx"
|
||||
color="#b3ac9f"
|
||||
class="fav-empty__icon" />
|
||||
<text class="fav-empty__msg">暂无下载记录</text>
|
||||
<button class="fav-empty__btn" bindtap="onDiscoverTap">
|
||||
去发现
|
||||
</button>
|
||||
</view>
|
||||
<view wx:else class="fav-dl">
|
||||
<block
|
||||
wx:for="{{downloadSections}}"
|
||||
wx:for-item="section"
|
||||
wx:key="key">
|
||||
<text class="fav-dl__section-label"
|
||||
>{{section.label}}</text
|
||||
>
|
||||
<view class="fav-dl__items">
|
||||
<view
|
||||
wx:for="{{section.items}}"
|
||||
wx:for-item="row"
|
||||
wx:key="id"
|
||||
class="fav-dl-row {{row.placeholder === 'draw' ? 'fav-dl-row--muted' : ''}}">
|
||||
<view
|
||||
wx:if="{{row.placeholder === 'draw'}}"
|
||||
class="fav-dl-row__thumb fav-dl-row__thumb--ph">
|
||||
<van-icon
|
||||
name="brush-o"
|
||||
size="56rpx"
|
||||
color="#6d5720" />
|
||||
</view>
|
||||
<image
|
||||
wx:else
|
||||
class="fav-dl-row__thumb"
|
||||
src="{{row.thumb}}"
|
||||
mode="aspectFill" />
|
||||
<view class="fav-dl-row__main">
|
||||
<text class="fav-dl-row__title"
|
||||
>{{row.title}}</text
|
||||
>
|
||||
<view class="fav-dl-row__meta">
|
||||
<van-icon
|
||||
name="clock"
|
||||
size="26rpx"
|
||||
color="#605b50" />
|
||||
<text class="fav-dl-row__time"
|
||||
>{{row.time}}</text
|
||||
>
|
||||
<view class="fav-dl-row__dot" />
|
||||
<text
|
||||
class="fav-dl-row__status {{row.statusHighlight ? 'fav-dl-row__status--hi' : ''}}"
|
||||
>{{row.status}}</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="fav-dl-row__more"
|
||||
data-id="{{row.id}}"
|
||||
catchtap="onDownloadMore">
|
||||
<van-icon
|
||||
name="ellipsis"
|
||||
size="40rpx"
|
||||
color="#7c766a" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<button class="favorites-page__btn" bindtap="onDiscoverTap">去发现</button>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user