R524809
209 lines
8.8 KiB
Plaintext
209 lines
8.8 KiB
Plaintext
<view class="home-page">
|
|
<nav-bar title="" />
|
|
|
|
<view class="home-body">
|
|
<!-- <view class="home-search-wrap">
|
|
<view class="home-search">
|
|
<van-icon
|
|
name="search"
|
|
size="36rpx"
|
|
color="rgba(50, 46, 37, 0.45)"
|
|
class="home-search__icon" />
|
|
<text class="home-search__placeholder"
|
|
>{{searchPlaceholder}}</text
|
|
>
|
|
</view>
|
|
</view> -->
|
|
|
|
<view class="home-tabs-wrap">
|
|
<category-tabs
|
|
tabs="{{tabs}}"
|
|
active-tab="{{activeTab}}"
|
|
bind:change="onTabChange" />
|
|
</view>
|
|
|
|
<swiper
|
|
class="home-hero-swiper"
|
|
previous-margin="80rpx"
|
|
next-margin="80rpx"
|
|
circular="{{featuredItems.length > 1 && !loading}}"
|
|
autoplay="{{!loading}}"
|
|
interval="{{4000}}"
|
|
duration="{{600}}"
|
|
easing-function="easeInOutCubic"
|
|
bindchange="onHeroSwiperChange">
|
|
<swiper-item
|
|
wx:for="{{featuredItems}}"
|
|
wx:key="id"
|
|
class="home-hero-swiper-item">
|
|
<view
|
|
class="home-hero-card-wrap {{heroSwiperCurrent === index ? 'home-hero-card-wrap--active' : ''}}">
|
|
<view
|
|
class="home-hero-card {{item.skeleton ? 'home-hero-card--skeleton' : ''}}"
|
|
data-title="{{item.title}}"
|
|
data-path="{{item.path}}"
|
|
bindtap="{{item.skeleton ? '' : 'onTapFeatured'}}">
|
|
<view class="home-hero-card__top">
|
|
<image
|
|
wx:if="{{!item.skeleton && item.previewImg}}"
|
|
class="home-hero-card__cover"
|
|
src="{{item.previewImg}}"
|
|
mode="aspectFill" />
|
|
<text
|
|
wx:if="{{!item.skeleton && !item.previewImg}}"
|
|
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
|
|
wx:if="{{!item.skeleton}}"
|
|
class="home-hero-card__meta"
|
|
>{{item.ageBand}}·{{item.difficulty}}</text
|
|
>
|
|
</view>
|
|
<text class="home-hero-card__sub"
|
|
>{{item.subtitle}}</text
|
|
>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<view class="home-section-panel">
|
|
<view class="home-section-head">
|
|
<text class="home-section-head__title">按年龄挑选</text>
|
|
<text class="home-section-head__more" bindtap="onTapAgeMore"
|
|
>查看全部</text
|
|
>
|
|
</view>
|
|
<scroll-view class="home-age-scroll" scroll-x enable-flex>
|
|
<view class="home-age-row">
|
|
<view
|
|
wx:for="{{ageBands}}"
|
|
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>
|
|
</view>
|
|
|
|
<view class="home-section-panel home-section-panel--hot">
|
|
<view class="home-section-head">
|
|
<text class="home-section-head__title">热门推荐</text>
|
|
<text class="home-section-head__more" bindtap="onTapHotMore"
|
|
>查看全部</text
|
|
>
|
|
</view>
|
|
<view class="home-hot-list">
|
|
<view
|
|
wx:for="{{hotRecommends}}"
|
|
wx:key="id"
|
|
class="home-hot-card {{item.skeleton ? 'home-hot-card--skeleton' : ''}}"
|
|
data-title="{{item.title}}"
|
|
data-path="{{item.path}}"
|
|
bindtap="{{item.skeleton ? '' : 'onTapHotRecommend'}}">
|
|
<view class="home-hot-card__thumb">
|
|
<image
|
|
wx:if="{{!item.skeleton && item.previewImg}}"
|
|
class="home-hot-card__thumb-img"
|
|
src="{{item.previewImg}}"
|
|
mode="aspectFill" />
|
|
<text
|
|
wx:if="{{!item.skeleton && !item.previewImg}}"
|
|
class="home-hot-card__thumb-emoji"
|
|
>{{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.subtitle}}</text
|
|
>
|
|
<view
|
|
wx:if="{{!item.skeleton}}"
|
|
class="home-hot-card__meta">
|
|
<text class="home-hot-card__tag"
|
|
>{{item.ageBand}}</text
|
|
>
|
|
<text class="home-hot-card__score"
|
|
>{{item.difficulty}}</text
|
|
>
|
|
</view>
|
|
</view>
|
|
<view
|
|
wx:if="{{!item.skeleton}}"
|
|
class="home-hot-card__action">
|
|
<toy-icon
|
|
name="arrow-right"
|
|
size="36rpx"
|
|
color="#2b2b2b" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<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"
|
|
>{{item.title}}</text
|
|
>
|
|
<text
|
|
wx:if="{{item.morePath}}"
|
|
class="home-section-head__more"
|
|
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">
|
|
<worksheet-card
|
|
wx:for="{{item.items}}"
|
|
wx:key="id"
|
|
class="home-track-card"
|
|
variant="track"
|
|
title="{{item.title}}"
|
|
subtitle="{{item.subtitle}}"
|
|
preview-img="{{item.previewImg}}"
|
|
icon="{{item.icon}}"
|
|
age-band="{{item.ageBand}}"
|
|
difficulty="{{item.difficulty}}"
|
|
path="{{item.path}}"
|
|
data-title="{{item.title}}"
|
|
data-path="{{item.path}}"
|
|
bindtap="onTapCard" />
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|