flower-mp/pages/index/index.wxml

<!--pages/garden/index.wxml-->
<view>
  <!-- top -->
  <view class="top primary-bg">
    <view style="padding-top: 128rpx; min-height: 200rpx; padding-left: 32rpx;" class="white">
      <view class="bold font-16" wx:if="{{info}}">{{info.weather}} {{info.windDirection}}风{{info.windPower}}级</view>
      <view wx:if="{{info}}">
        <view class="flex flex-center flex-justify-start flex-aligin-center mt-16">
          <t-icon wx:if="{{info.weather === '雾'}}" name="fog" size="34"></t-icon>
          <t-icon wx:if="{{info.weather === '多云'}}" name="cloud" size="34"></t-icon>
          <view class="bold  ml-16" style="font-size: 40px;" >{{info.temperature}} ℃</view>
        </view>
        <view wx:if="{{leftList.length > 0}}" bind:tap="goTask" class="flex flex-center flex-justify-start">
          <view> 今日需养护 {{needCare}} 株植物</view>
          <t-icon name="chevron-right" class="ml-5"></t-icon>
        </view>
      </view>
    </view>
  </view>
  <view style="height: 89vh;" wx:if="{{list.length > 0}}">
    <view class="waterfall" scroll-y="{{true}}">
      <view class="column">
        <block wx:for="{{leftList}}" wx:key="id">
          <view class="card mb-16" data-id="{{item.id}}" bind:tap="goInfo">
            <view class="img-wrapper">
              <image src="{{item.pic}}" mode="widthFix" class="img"></image>
              <view class="overlay" style="margin-bottom: 26rpx;">
                <view class="font-14 bold">{{item.name}}</view>
                <view class="flex flex-center flex-justify-start mt-5">
                  <t-icon name="heart" size="12"></t-icon>
                  <text class="small ml-5">陪伴 · {{item.plantDays}} 天</text>
                </view>
              </view>
            </view>
            <view class="info font-12">
              <view wx:if="{{item.needCare}}" class="flex flex-center flex-justify-start">
                <t-icon name="saturation" style="color: #4B84EE;"></t-icon>
                <view class="ml-5 small">
                  今日需养护
                </view>
              </view>
              <view wx:else class="flex flex-center flex-justify-start">
                <t-icon name="saturation" style="color: #4FAB5F;"></t-icon>
                <view class="small ml-5">
                  今日无需养护
                </view>
              </view>
              <view class="mt-5 grey small">上次养护：{{item.lastPeriod ? item.lastPeriod:'-' }} </view>
            </view>
          </view>
        </block>
      </view>

      <view class="column">
        <block wx:for="{{rightList}}" wx:key="id">
          <view class="card mb-16" data-id="{{item.id}}" bind:tap="goInfo">
            <view class="img-wrapper">
              <image src="{{item.pic}}" mode="widthFix" class="img"></image>
              <view class="overlay" style="margin-bottom: 26rpx;">
                <view class="font-14 bold">{{item.name}}</view>
                <view class="flex flex-center flex-justify-start mt-5">
                  <t-icon name="heart" size="12"></t-icon>
                  <text class="small ml-5">陪伴 · {{item.plantDays}} 天</text>
                </view>
              </view>
            </view>
            <view class="info font-12">
              <view wx:if="{{item.needCare === 1}}" class="flex flex-center flex-justify-start">
                <t-icon name="saturation" style="color: #4B84EE;"></t-icon>
                <view class="ml-5 small">
                  今日需养护
                </view>
              </view>
              <view wx:else class="flex flex-center flex-justify-start">
                <t-icon name="saturation" style="color: #4FAB5F;"></t-icon>
                <view class="ml-5 small">
                  今日无需养护
                </view>
              </view>
              <view class="mt-5 grey small">上次养护：{{item.lastPeriod ? item.lastPeriod:'-' }}</view>
            </view>
          </view>
        </block>
      </view>
    </view>
  </view>
  <view wx:else>
    <view class="flex flex-center flex-col " style="margin-top: 60rpx;">
      <view class="empty flex flex-center flex-col">
      </view>
      <view class="mt-16 flex flex-center flex-col">
        <view class="font-14 bold">欢迎来到你的秘密花园 🌿~</view>
        <view class="font-12 grey mt-16">从添加第一盆植物开始你的养花之旅吧</view>
      </view>
      <view style="width: 100vw; margin-top: 32rpx; " class="flex flex-center flex-col">
        <t-button theme="primary" style="width: 60%;" size="small" shape="round" bind:tap="goAdd">添加我的第一盆植物</t-button>
      </view>
      <view class="mt-32 white-bg padding row">
        <view class="flex flex-center font-12 grey">您还可以从以下热门植物中，免费领取</view>
        <view class="grid  mt-32">
          <view wx:for="{{hotList}}">
            <image src="{{item.pic}}" style="width:40vw;height: 40vw; border-top-left-radius: 12rpx;border-top-right-radius: 12rpx;" mode="widthFix"></image>
            <view>
              <view class="flex flex-center flex-justify-start">
                <view class="font-16 bold">{{item.name}}</view>
                <t-tag theme="primary" class="ml-16" size="small">{{item.genus}}</t-tag>
              </view>
              <view class="font-12 grey">{{item.lifeCycle}} {{item.lightIntensity}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <t-fab icon="add" bind:click="goAdd" aria-label="增加"></t-fab>

</view>