127 lines
4.2 KiB
Plaintext
127 lines
4.2 KiB
Plaintext
|
<scroll-view class="home-page" scroll-y>
|
|||
|
|
<!-- 顶部 header -->
|
|||
|
|
<view class="home-header">
|
|||
|
|
<view class="header-top">
|
|||
|
|
<view class="header-title-wrap">
|
|||
|
|
<text class="header-title">画画怎么画</text>
|
|||
|
|
<text class="header-slogan">从零开始，画出属于你的世界 🎨</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 搜索框 -->
|
|||
|
|
<view class="search-bar">
|
|||
|
|
<text class="search-icon">🔍</text>
|
|||
|
|
<input
|
|||
|
|
class="search-input"
|
|||
|
|
placeholder="搜索课程…"
|
|||
|
|
placeholder-style="color:#BBBBBB"
|
|||
|
|
value="{{searchKeyword}}"
|
|||
|
|
bindinput="onSearchInput"
|
|||
|
|
bindconfirm="onSearchConfirm"
|
|||
|
|
confirm-type="search"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="home-body">
|
|||
|
|
<!-- 零基础入门路径 -->
|
|||
|
|
<view class="section">
|
|||
|
|
<view class="section-header">
|
|||
|
|
<text class="section-title">零基础入门路径</text>
|
|||
|
|
<text class="section-sub">按顺序学，稳稳起步</text>
|
|||
|
|
</view>
|
|||
|
|
<scroll-view class="path-scroll" scroll-x>
|
|||
|
|
<view class="path-list">
|
|||
|
|
<view
|
|||
|
|
class="path-card"
|
|||
|
|
wx:for="{{beginnerPath}}"
|
|||
|
|
wx:key="id"
|
|||
|
|
style="background:{{item.color}}"
|
|||
|
|
data-course-id="{{item.courseId}}"
|
|||
|
|
bindtap="onPathCardTap"
|
|||
|
|
>
|
|||
|
|
<text class="path-step">步骤 {{index + 1}}</text>
|
|||
|
|
<text class="path-icon">{{item.icon}}</text>
|
|||
|
|
<text class="path-title">{{item.title}}</text>
|
|||
|
|
<text class="path-desc">{{item.desc}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 课程分类入口 -->
|
|||
|
|
<view class="section">
|
|||
|
|
<view class="section-header">
|
|||
|
|
<text class="section-title">课程分类</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="category-grid">
|
|||
|
|
<view
|
|||
|
|
class="category-item"
|
|||
|
|
wx:for="{{categories}}"
|
|||
|
|
wx:key="*this"
|
|||
|
|
data-category="{{item}}"
|
|||
|
|
bindtap="onCategoryTap"
|
|||
|
|
>
|
|||
|
|
<text class="category-emoji">{{index === 0 ? '✏️' : index === 1 ? '🧍' : index === 2 ? '🐾' : index === 3 ? '🌿' : index === 4 ? '🌄' : '📐'}}</text>
|
|||
|
|
<text class="category-name">{{item}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 今日推荐 -->
|
|||
|
|
<view class="section">
|
|||
|
|
<view class="section-header">
|
|||
|
|
<text class="section-title">今日推荐</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="recommend-list">
|
|||
|
|
<view
|
|||
|
|
class="recommend-card"
|
|||
|
|
wx:for="{{dailyRecommend}}"
|
|||
|
|
wx:key="id"
|
|||
|
|
data-course-id="{{item.id}}"
|
|||
|
|
bindtap="onRecommendTap"
|
|||
|
|
>
|
|||
|
|
<view class="recommend-cover" style="background:{{item.coverColor}}">
|
|||
|
|
<text class="recommend-emoji">{{item.coverEmoji}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="recommend-info">
|
|||
|
|
<text class="recommend-title">{{item.title}}</text>
|
|||
|
|
<text class="recommend-desc">{{item.desc}}</text>
|
|||
|
|
<view class="recommend-meta">
|
|||
|
|
<text class="badge badge-blue">{{item.difficulty}}</text>
|
|||
|
|
<text class="recommend-lessons">{{item.lessons}}节课 · {{item.duration}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 最近学习记录 -->
|
|||
|
|
<view class="section" wx:if="{{recentHistory.length > 0}}">
|
|||
|
|
<view class="section-header">
|
|||
|
|
<text class="section-title">继续学习</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="history-list">
|
|||
|
|
<view
|
|||
|
|
class="history-item"
|
|||
|
|
wx:for="{{recentHistory}}"
|
|||
|
|
wx:key="courseId"
|
|||
|
|
data-course-id="{{item.courseId}}"
|
|||
|
|
bindtap="onHistoryTap"
|
|||
|
|
>
|
|||
|
|
<view class="history-cover" style="background:{{item.coverColor}}">
|
|||
|
|
<text class="history-emoji">{{item.coverEmoji}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="history-info">
|
|||
|
|
<text class="history-title">{{item.courseTitle}}</text>
|
|||
|
|
<text class="history-time">上次学习：第{{item.stepIndex + 1}}步</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="history-arrow">›</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 底部占位 -->
|
|||
|
|
<view style="height:40rpx"></view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|