doodle-mini/miniprogram/pages/home/home.wxml

<view class="home-page">
    <view class="home-nav" style="padding-top: {{statusBarHeight}}px;">
        <view class="home-nav__inner">
            <image
                src="/assets/imgs/doodle-logo.png"
                mode="aspectFill"
                class="home-nav__logo" />
            <text class="home-nav__name">涂鸦丫</text>
        </view>
    </view>

    <view class="home-body" style="padding-top: {{navBlockHeight}}px;">
    <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>

    <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">
            <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"
                data-title="{{item.title}}"
                data-path="{{item.path}}"
                bindtap="onTapHotRecommend">
                <view
                    class="home-hot-card__thumb"
                    style="background-color: {{item.topBg}}">
                    <text 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 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 class="home-hot-card__action">›</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">
                <view
                    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"
                        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
                        >
                        <text class="home-track-card__meta"
                            >{{item.ageBand}} · {{item.difficulty}}</text
                        >
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
    </view>
</view>