1/fore-end/pages/home/home.wxml

<!--pages/home/home.wxml-->
<!-- 头部 -->
<view class="head">
    <!-- 头像 -->
    <view class="head-portrait-bg">
        <van-image width="100rpx" height="100rpx" fit="cover" src="/assets/home_img/head_portrait.jpg" radius="20rpx"></van-image>
    </view>
    <!-- 昵称 -->
    <view class="username">deter</view>
    <!-- 消息提示 -->
    <view>
        <van-icon name="bell" custom-style="margin" class="head_bell" size="50rpx" info="9" color="#FFC300"/>
    </view>
</view>
<!-- 搜索框 -->
<view class="search_box">
    <input type="search" name="" placeholder="搜索..." class="search_text" bind:tap="searchTo"/>
    <button class="search_button" plain="true">
        <van-icon class="search_icon" name="search" size="50rpx"/>
    </button>
</view>

<!-- 分类展示 -->
<view class="categories">
    <!-- categories -->
    <view style="position: relative;">
        <view class="text">categories</view>
        <view class="color_block categories_block "></view>
    </view>
    <!-- 点击前往分类页面 -->
    <view class="text_small" bind:tap="classifyTo">Browser more</view>
</view>

 <!-- 分类推荐 -->
<scroll-view scroll-x style='display: flex;white-space:nowrap; margin-top: 80rpx;'>
    <view class="categories_card" wx:for="{{classifyList}}" wx:key="item.Id">
        <van-image width="75" height="75" radius="20rpx" src="{{item.Pic}}" />
        <view class="name_show">{{item.Name}}</view>
    </view>
</scroll-view>

<!-- 商品展示 -->
<view style="position: relative;">
    <view class="display_text text">Recommend</view>
    <view class="color_block recommend_block"></view>
</view>

<!-- 商品卡片 -->
<commodity_card></commodity_card>

<van-toast id="van-toast" />