qingcheng-xiaochengxu/pages/course/homepage/homepage.wxml

<view class="flex-col page">
  <view class="flex-col self-stretch group">
    <view class="flex-row justify-center items-center section" bind:tap="gotoSearch">
      <image
        class="image"
        src="./image/sousuo.png"
      />
      <text class="text ml-3">搜索更多好课</text>
    </view>
    <swiper class="swiper" autoplay="true" circular="true"></swiper>
  </view>
  <view class="flex-row equal-division">
    <view class="flex-col items-center group_2 group_1" bind:tap="gotoCourseList" data-type="{{ '考公考研' }}">
      <image
        class="image_3"
        src="./image/kgky.png"
      />
      <text class="font text_1 mt-12">考公考研</text>
    </view>
    <view class="flex-col items-center group_2 group_3" bind:tap="gotoCourseList" data-type="{{ '自媒体' }}">
      <image
        class="image_3"
        src="./image/zmt.png"
      />
      <text class="font text_3 mt-12">自媒体</text>
    </view>
    <view class="flex-col items-center group_2 group_4" bind:tap="gotoCourseList" data-type="{{ '财经' }}">
      <image
        class="image_3"
        src="./image/cj.png"
      />
      <text class="font text_4 mt-12">财经</text>
    </view>
  </view>
  <text class="self-start text_2">热门课程</text>
  <view class="flex-col self-stretch list">
    <!-- items 数组循环 -->
    <view
      class="flex-row relative group_5"
      wx:for="{{courseList}}"
      wx:for-item="item"
      wx:for-index="index"
      wx:key="item.id"
    >
      <view bind:tap="gotoCourseDetail" data-id="{{item.id}}">
        <view class="list-divider pos_3"></view>
        <!-- 绑定课程封面图 -->
        <image class="image_4 pos" src="{{ globalImgUrl + item.image}}" />
        <view class="flex-col group_6 pos_2">
          <!-- 绑定课程名称 -->
          <text class="font_2">{{item.name}}</text>
          <view class="flex-row justify-between items-baseline mt-17">
            <!-- 绑定卷后价格 -->
            <text class="font_3">券后{{item.discountPrice}}元起</text>
            <!-- 绑定下单/学习人数 -->
            <text class="font_4">{{item.orderCount}}人学习</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>