nova-trip/nova-tourism/components/template2/home/index.wxml

<nav type="location" title="首页" frontColor="#ffffff" background-color="#f39283" />
<view class="flexd">
  <view class="nav-background"></view>
  <view class="v-search">
    <van-search bindtap="goUrl" data-url="/nova-tourism/pages/template-2/searching/index" 
      left-icon="https://file.ruixiuauto.com/cDBRXuM6Xh/20230807/1314fo040350926.png" background="transparent"
      placeholder="搜索你想要的生活" shape="round" disabled use-action-slot>
    </van-search>
  </view>
</view>

<swiper class="swiper" indicator-dots="true" autoplay="true">
  <swiper-item wx:for="{{banner}}" wx:key="index">
    <image src="{{item.image}}" class="slide-image" mode="aspectFill" />
  </swiper-item>
</swiper>

<view class="tabs">
  <!-- 导航条 -->
  <view class="navBar">
    <block wx:for="{{tabs}}" wx:key="item">
      <view class="navItem" bindtap="tabsGoUrl" data-index="{{index}}">
        <view class="navItemIcon">
          <image src="{{item.icon}}" />
        </view>
        <view class="navItemTitle">{{item.title}}</view>
      </view>
    </block>
  </view>
</view>

<swiper class="rank" indicator-dots="true" autoplay="true">
  <swiper-item wx:for="{{rankList}}" wx:key="index">
    <view class="item-title">
      <view>
        <image src="https://file.ruixiuauto.com/cDBRXuM6Xh/20230807/1tcj18050717954.png"
          style="width:30rpx;height:30rpx;" />
      </view>
      <view class="text">{{item.title}}推荐榜</view>
    </view>
    <van-loading custom-class="loading" wx:if="{{!item.contents.length}}" type="spinner" color="#f39283" />
    <view class="content">
      <block wx:for="{{item.contents}}" wx:if="{{idx<4}}" wx:for-item="content" wx:key="*this" wx:for-index="idx">
        <view class="card" bindtap="rankToDetail" data-key="{{item.title}}" data-id="{{content.objectId}}">
          <view class="left">
            <view class="ranking">NO.{{idx+1}}</view>
            <image src="{{content.bgImg||content.cover}}" />
          </view>
          <view class="right">
            <view class="h1">{{item.title=='村落'?content.name:content.storeName}}</view>
            <view class="h3">{{content.shortname||content.storeAddress}}</view>
            <view class="h2" wx:if="{{index!=0}}">
              <view>{{content.score}}评分推荐</view>
              <view class="light">{{content.perCapita}}RMB/人</view>
            </view>
            <view wx:else class="h2">
              <view class="light">{{content.peopleAll}}人</view>
            </view>
          </view>
        </view>
      </block>
    </view>
  </swiper-item>
</swiper>

<view class="play-around">
  <view class="play-left">游玩推荐</view>
  <view class="play-right" bindtap="goUrl" data-url="/nova-tourism/pages/template-2/searching/index">
    <view>更多</view>
    <view>
      <image src="https://file.ruixiuauto.com/cDBRXuM6Xh/20230807/htl1c8054104079.png"
        style="width: 10rpx;height: 19rpx;"></image>
    </view>
  </view>
</view>
<view class="play-list">
  <block wx:for="{{village}}" wx:key="index">
    <view class="play-item" bindtap="goUrl" data-url="/nova-tourism/pages/home/village/village-details/index?id={{item.objectId}}">
      <view class="item-img">
        <view class="item-ranking">HOT</view>
        <image src="{{item.bgImg}}"
          style="width: 332rpx;height: 308rpx;" />
      </view>
      <view class="body">
        <view class="item-text">
          {{item.name}}</view>
          
        <view class="label">
          <block wx:for="{{item.related}}" wx:for-item="tag" wx:key="*this">
            <view>{{tag}}</view>
          </block>
        </view>
        <view class="detail">
          <view class="d-light">{{item.peopleAll}}人</view>
          <view>距离 {{item.distances}}km</view>
        </view>
      </view>
    </view>
  </block>
</view>