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/favorites/favorites.json
+6 -2
View File
@@ -1,6 +1,10 @@
{
"navigationStyle": "custom",
"navigationBarTitleText": "我的收藏",
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#F6F6F6"
"navigationBarBackgroundColor": "#F8F0E0",
"backgroundColor": "#FEF6E7",
"usingComponents": {
"van-icon": "@vant/weapp/icon/index"
}
}
miniprogram/pages/favorites/favorites.less
+417 -53
View File
@@ -1,88 +1,452 @@
.favorites-page {
@import '../../style/theme3.less';
@fav-seg-track: #f0e7d6;
@fav-thumb-placeholder: #e5dcc9;
@fav-secondary-cta-bg: #ffc697;
@fav-secondary-cta-text: #6d3b00;
@fav-heart: #b02500;
.fav-page {
min-height: 100vh;
background: #f6f6f6;
background: @bg-page;
box-sizing: border-box;
}
.favorites-page__title {
padding: 32rpx 32rpx 24rpx;
font-size: 40rpx;
font-weight: 600;
color: #333;
background: #fff;
.fav-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
flex-shrink: 0;
background: fade(@bg-header, 82%);
backdrop-filter: blur(40rpx);
-webkit-backdrop-filter: blur(40rpx);
box-shadow: 0 2rpx 12rpx rgba(50, 46, 37, 0.05);
}
.favorites-page__tabs {
.fav-nav__inner {
height: @nav-inner-height;
display: flex;
flex-direction: row;
background: #fff;
border-bottom: 1rpx solid #eee;
align-items: center;
justify-content: flex-start;
padding: 0 @page-padding-x;
box-sizing: border-box;
}
.favorites-page__tab {
flex: 1;
text-align: center;
padding: 24rpx 0;
font-size: 30rpx;
color: #666;
position: relative;
.fav-nav__title {
font-size: @fs-nav-title;
font-weight: @fw-nav-title;
color: @color-nav-title;
letter-spacing: @ls-nav-title;
}
.favorites-page__tab--active {
color: #333;
.fav-nav__actions {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
min-width: 120rpx;
}
.fav-nav__icon-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 8rpx;
border-radius: 50%;
}
.fav-nav__clear {
font-size: 26rpx;
font-weight: 600;
color: fade(@text-selected-btn, 65%);
padding: 12rpx 20rpx;
border-radius: 999rpx;
}
.favorites-page__tab--active::after {
content: '';
.fav-scroll {
box-sizing: border-box;
width: 100%;
}
.fav-body {
padding: @section-gap-xs @page-padding-x;
padding-bottom: calc(48rpx + env(safe-area-inset-bottom) + 120rpx);
box-sizing: border-box;
}
/* Segmented（Stitch 胶囊） */
.fav-seg {
display: flex;
flex-direction: row;
align-items: stretch;
padding: 12rpx;
margin-bottom: @section-gap-sm;
border-radius: 999rpx;
background: @fav-seg-track;
box-shadow: @shadow;
box-sizing: border-box;
}
.fav-seg__pill {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 22rpx 16rpx;
border-radius: 999rpx;
box-sizing: border-box;
}
.fav-seg__pill--active {
background: @brand;
box-shadow: @shadow;
}
.fav-seg__text {
font-size: 26rpx;
font-weight: 700;
color: @text-secondary;
}
.fav-seg__pill--active .fav-seg__text {
color: @text-selected-btn;
}
/* 收藏列表卡片 */
.fav-list {
display: flex;
flex-direction: column;
gap: 32rpx;
}
.fav-card {
border-radius: @radius-lg;
box-sizing: border-box;
}
.fav-card--row {
display: flex;
flex-direction: row;
align-items: center;
gap: 32rpx;
padding: 32rpx;
background: @bg-header;
box-shadow: @shadow;
}
.fav-card__thumb {
width: 160rpx;
height: 160rpx;
border-radius: @radius;
flex-shrink: 0;
background: @fav-thumb-placeholder;
}
.fav-card__main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8rpx;
}
.fav-card__title {
font-size: 32rpx;
font-weight: 700;
color: @text-title;
line-height: 1.25;
}
.fav-card__meta {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 4rpx;
}
.fav-card__meta-text {
font-size: 22rpx;
color: @text-secondary;
}
.fav-card__stars {
display: flex;
flex-direction: row;
align-items: center;
gap: 2rpx;
}
.fav-card__badge {
margin-top: 4rpx;
font-size: 18rpx;
font-weight: 600;
color: @text-gray;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 6rpx 16rpx;
border-radius: 999rpx;
background: @fav-seg-track;
}
.fav-card__heart {
flex-shrink: 0;
width: 80rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
/* Bento 大卡 */
.fav-card--bento {
position: relative;
overflow: hidden;
padding: 48rpx 140rpx 48rpx 40rpx;
background: @fav-seg-track;
box-shadow: @shadow;
}
.fav-bento__content {
position: relative;
z-index: 1;
}
.fav-bento__title {
font-size: 36rpx;
}
.fav-bento__meta {
font-size: 26rpx;
color: @text-secondary;
margin-top: 8rpx;
margin-bottom: 28rpx;
line-height: 1.4;
}
.fav-bento__tags {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 16rpx;
}
.fav-bento__tag {
padding: 8rpx 22rpx;
border-radius: 999rpx;
font-size: 20rpx;
font-weight: 700;
color: @fav-secondary-cta-text;
background: rgba(255, 255, 255, 0.55);
}
.fav-bento__deco {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #f7ee47;
border-radius: 3rpx;
right: -40rpx;
bottom: -48rpx;
z-index: 0;
pointer-events: none;
}
.favorites-page__empty {
.fav-bento__heart {
position: absolute;
top: 40rpx;
right: 32rpx;
z-index: 2;
width: 80rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
/* 底部去发现 */
.fav-cta {
margin-top: @section-gap;
padding: 48rpx 0 24rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 120rpx 48rpx 0;
}
.favorites-page__emoji {
font-size: 96rpx;
line-height: 1.2;
.fav-cta__hint {
font-size: 26rpx;
font-weight: 600;
color: @text-gray;
}
.fav-cta__btn {
margin-top: 32rpx;
padding: 22rpx 64rpx;
border-radius: 999rpx;
font-size: 26rpx;
font-weight: 700;
background: @fav-secondary-cta-bg !important;
color: @fav-secondary-cta-text !important;
border: none !important;
box-shadow: @shadow;
}
.fav-cta__btn::after {
border: none;
}
/* 下载历史 */
.fav-dl {
display: flex;
flex-direction: column;
gap: 16rpx;
}
.fav-dl__section-label {
display: block;
font-size: 22rpx;
font-weight: 700;
color: @text-gray;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 8rpx 16rpx 16rpx;
}
.fav-dl__items {
display: flex;
flex-direction: column;
gap: 32rpx;
margin-bottom: 32rpx;
}
.favorites-page__empty-msg {
margin-bottom: 48rpx;
.fav-dl-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 32rpx;
padding: 32rpx;
background: @bg-header;
border-radius: @radius-lg;
box-shadow: @shadow;
box-sizing: border-box;
}
.favorites-page__empty-line {
display: block;
font-size: 28rpx;
color: #666;
text-align: center;
line-height: 1.6;
margin-bottom: 8rpx;
.fav-dl-row--muted {
opacity: 0.92;
}
.favorites-page__btn {
width: 280rpx;
height: 80rpx;
line-height: 80rpx;
background: #f7ee47;
color: #333;
.fav-dl-row__thumb {
width: 160rpx;
height: 160rpx;
border-radius: @radius;
flex-shrink: 0;
background: @fav-thumb-placeholder;
}
.fav-dl-row__thumb--ph {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, @fav-secondary-cta-bg 0%, fade(@brand, 35%) 100%);
}
.fav-dl-row__main {
flex: 1;
min-width: 0;
}
.fav-dl-row__title {
font-size: 32rpx;
font-weight: 700;
color: @text-title;
line-height: 1.25;
margin-bottom: 12rpx;
}
.fav-dl-row__meta {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 12rpx;
font-size: 26rpx;
color: fade(@text-secondary, 88%);
}
.fav-dl-row__time {
color: fade(@text-secondary, 88%);
}
.fav-dl-row__dot {
width: 8rpx;
height: 8rpx;
border-radius: 50%;
background: @text-gray;
opacity: 0.45;
}
.fav-dl-row__status {
color: fade(@text-secondary, 65%);
}
.fav-dl-row__status--hi {
color: #006b1b;
font-weight: 600;
}
.fav-dl-row__more {
flex-shrink: 0;
width: 72rpx;
height: 72rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
/* 空状态 */
.fav-empty {
display: flex;
flex-direction: column;
align-items: center;
padding: 120rpx 32rpx 64rpx;
}
.fav-empty__emoji {
font-size: 100rpx;
margin-bottom: 24rpx;
}
.fav-empty__icon {
margin-bottom: 24rpx;
}
.fav-empty__msg {
font-size: 30rpx;
font-weight: 600;
border-radius: 40rpx;
color: @text-title;
margin-bottom: 12rpx;
}
.fav-empty__sub {
font-size: 26rpx;
color: @text-secondary;
margin-bottom: 40rpx;
text-align: center;
}
.fav-empty__btn {
padding: 20rpx 56rpx;
border-radius: 999rpx;
font-size: 28rpx;
font-weight: 700;
background: @brand;
color: @text-selected-btn;
border: none;
}
.favorites-page__btn::after {
.fav-empty__btn::after {
border: none;
}
}
miniprogram/pages/favorites/favorites.ts
+157 -2
View File
@@ -1,10 +1,136 @@
import { NAV_INNER_PX } from '../../utils/navMetrics';
type FavoritesTab = 'favorites' | 'downloads';
type FavoriteItem =
| {
id: string;
variant: 'standard';
title: string;
metaLine: string;
stars: number;
timeBadge: string;
thumb: string;
}
| {
id: string;
variant: 'featured';
title: string;
metaLine: string;
tags: string[];
};
type DownloadRow = {
id: string;
title: string;
time: string;
status: string;
statusHighlight: boolean;
thumb?: string;
placeholder?: 'draw';
};
type DownloadSection = {
key: string;
label: string;
items: DownloadRow[];
};
const MOCK_FAVORITES: FavoriteItem[] = [
{
id: '1',
variant: 'standard',
title: '10以内加法',
metaLine: '数学启蒙 · 4-6岁 · ',
stars: 2,
timeBadge: '收藏于 3 天前',
thumb: 'https://lh3.googleusercontent.com/aida-public/AB6AXuD7khp0rJABfa9yFrMt9ZgIhAPyN44XmJ2pXNBgCzbgBvwA5ptFZVty013JedVzbE9_VvCQnToN7QETLDKjtiX22igzK-a5h4E8wjKrembFW4eVuk1RsJIbHjx3_cCz0hJ7_t76hF8t-Qdod_5R9sNMor1ZEjf6dGNp6UI_eIBjsN9b22iCTJ2VB-IEh0Rmil6_iC4Og-4I03IcQDV2rTHYIXcZxjiay1IiYGXw3wJ3bfo2SF2N7ZFT00akTgYU-9JyF7xJ6n15Yzc',
},
{
id: '2',
variant: 'standard',
title: '图形连连看',
metaLine: '逻辑思维 · 3-5岁 · ',
stars: 1,
timeBadge: '收藏于 5 天前',
thumb: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBY_0Rr153ZBT4IHcMyFtrcgl-y2ZRyVnOuGecnn7f4PZKoAx2lOuCorsMmfRa72s0JmbXrt4XT3QU1x7cIbZUyhv_EXwCfMaNxtkHc-ymIBIQ5jqm5oiQebrEWH4kjv14JdkCiziT4xzac4TdVN5yqpk7Wlg80QBl_ldDmAQqIgcUeN2PvlVvhmpOYmFeWE2HS3I_e4vV1J8s_cfV9_4g7y8SbxlSfnTmgQNeXrVbcdwaNEAGQWp92Iif0d2pVIqdfuUHO1pTw8oQ',
},
{
id: '3',
variant: 'standard',
title: '拼音字母认读',
metaLine: '语文基础 · 5-7岁 · ',
stars: 3,
timeBadge: '收藏于 1 周前',
thumb: 'https://lh3.googleusercontent.com/aida-public/AB6AXuC54mXQ8620XwIsWmUHBHJGdmpF8uE4cSYxwR2NLJTsa6gYdTCHz2tqrKbGOye-y0CGgCPPWwJXzEuB2ZYrQ3CWWPlamvbjhTUDYf8yoA9Lyapll1t2w17AqzSHrbBPNFrq931IUCis64b51kslQZoq3c0KslZsBQiky-YSnuE7xUuNsgiF4hOak_ReFFufWE53h1sPkjHFeRM-H34b-e1MCNxGObGPhI0mNlJ_qz0c8aCuS-jdnDocSvIYda-iVcJLWcIT-mO6klw',
},
{
id: '4',
variant: 'featured',
title: '趣味英语单词卡',
metaLine: '语言学习 · 4-8岁 · ⭐⭐⭐',
tags: ['畅销经典', '全彩打印'],
},
];
const MOCK_DOWNLOADS: DownloadSection[] = [
{
key: 'today',
label: '今天',
items: [
{
id: 'd1',
title: '拼音描红 · 声母表',
time: '14:32',
status: '已保存相册',
statusHighlight: true,
thumb: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBCm6X4rhibw2_WxP-U0dDyOsiYol3y12OnEXHRkPONZYMQBUcr3Grqo1IbwH3sdWPg5jIUeIbr_AEwv_hFwUOMMz9jTIIMc6Pke1bzSvlQcgdDq-zMEIU4A--IQFX59ac-8BscCajXZcd4v8rE6JEZFf1-aztKclPTkE_Rrgj-nbVCy5V6bOE6yDOB67VdTbcqiOdaFN18ju_MgWVo3FQZLwIUZOBahkPl0vDIKA0mkiaGK9eiFpfnERYxkYG3eWJZ40umTYp46Jo',
},
{
id: 'd2',
title: '趣味口算题卡',
time: '09:15',
status: '已下载 PDF',
statusHighlight: false,
thumb: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBxNORxN_vftYMLaMjZVscL-o9bZnBrfUi7IAqOrFATIztGV12_0ggwgae-fmk0cORWtysZWJJDcAzj0NEyniFxbREoGDuq9U4kytprJkA70_k0MCzPgStmq0bRwu1Gx1j4peglFam8PH6IlPvOMbiHQ7-fMFfYTSBtA1p7Dp06NDOzS2VrMlF8VxjEgihVmhHUrHePVvXlktUkXBKNzrXEXrogO3iOyouTUKyvJh0TeChKUv3KohMoD5ol7C3fjBhdHf7QD4StOQ4',
},
],
},
{
key: 'yesterday',
label: '昨天',
items: [
{
id: 'd3',
title: '汉字笔画基础训练',
time: '16:40',
status: '已发送邮件',
statusHighlight: false,
placeholder: 'draw',
},
],
},
];
Page({
data: {
statusBarHeight: 0,
navBlockHeight: 0,
/** 纵向 scroll-view 可视高度（窗口高 − 顶栏占位，避免内容滚入导航下） */
favScrollHeight: 0,
activeTab: 'favorites' as FavoritesTab,
favoriteList: [] as unknown[],
downloadList: [] as unknown[],
favoriteList: MOCK_FAVORITES as FavoriteItem[],
downloadSections: MOCK_DOWNLOADS as DownloadSection[],
},
onLoad() {
const win = wx.getWindowInfo();
const navBlockHeight = win.statusBarHeight + NAV_INNER_PX;
this.setData({
statusBarHeight: win.statusBarHeight,
navBlockHeight,
favScrollHeight: win.windowHeight - navBlockHeight,
});
},
onShow() {
@@ -24,4 +150,33 @@ Page({
onDiscoverTap() {
wx.switchTab({ url: '/pages/home/home' });
},
onSearchTap() {
wx.showToast({ title: '搜索功能开发中', icon: 'none' });
},
onRemoveFavorite(e: WechatMiniprogram.TouchEvent) {
const id = e.currentTarget.dataset.id as string | undefined;
if (!id) return;
const list = (this.data.favoriteList as FavoriteItem[]).filter((item) => item.id !== id);
this.setData({ favoriteList: list });
wx.showToast({ title: '已取消收藏', icon: 'none' });
},
onClearHistory() {
wx.showModal({
title: '清空下载历史',
content: '确定清空本地展示的历史记录吗？',
success: (res) => {
if (!res.confirm) return;
this.setData({ downloadSections: [] });
wx.showToast({ title: '已清空', icon: 'none' });
},
});
},
onDownloadMore(e: WechatMiniprogram.TouchEvent) {
const id = e.currentTarget.dataset.id as string | undefined;
wx.showToast({ title: id ? `更多操作：${id}` : '更多', icon: 'none' });
},
});
miniprogram/pages/favorites/favorites.wxml
+210 -32
View File
@@ -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>