flower-mp/pages/garden/info.wxml

<!--pages/index/info.wxml-->
<view>
  <!-- top -->
  <view class="top" style="position: relative; z-index: 2;">
    <t-swiper style="width: 100vw;" height="640rpx" wx:if="{{info.pic}}" list="{{info.picList}}">
    </t-swiper>
    <image wx:else="" src="https://res.catter.cn/pub/2025/09/30/20250930150006852.png" style="width: 100vw; height: 680rpx;" mode="aspectFill"></image>
  </view>


  <!-- back -->
  <view style="z-index: 999;position: fixed; top: 110rpx; left: 32rpx;  background-color: #34343482 ; width: 60rpx  ; height: 60rpx; border-radius: 30rpx; " bind:tap="goBack">
    <view class="flex flex-center" style="width: 100%;height: 100%;">
      <t-icon name="chevron-left" size="48rpx" style="color: white;"></t-icon>
    </view>
  </view>

  <!-- info -->
  <view style="background-color:white;margin-top: -140rpx;z-index: 99;position: absolute; width: 100vw; border-top-right-radius: 50rpx; border-top-left-radius: 50rpx;">
    <view class="flex flex-center flex-justify-between" style="padding: 52rpx 32rpx 32rpx 32rpx">
      <view>
        <view class="font-16 bold ">{{info.name}}</view>
        <view class="font-12 grey mt-16">陪伴你第 {{info.plantDays}} 天 · 种植于 {{info.plantTimeStr}}</view>
      </view>
      <view style="width: 100rpx;" class="flex flex-center flex-justify-end" bind:tap="goEdit">
        <t-icon name="setting"></t-icon>
      </view>
    </view>
  </view>


  <view style="padding-bottom: 240rpx;">
    <view class="white-bg padding  flex flex-center flex-justify-between">
      <view class="font-12">
        <view>
          🌡 温度适宜：16–23°C
        </view>
        <view>
          🌞 今日光照：良好
        </view>
        <view>
          💧 湿度 适宜
        </view>
      </view>
      <view>
        <t-tag theme="primary" shape="round" variant="outline">记录此刻</t-tag>
      </view>
    </view>
    <view class="padding">
      <view>
        <view class="row padding">
          <view>养护事项</view>
          <view class="flex flex-center flex-justify-between mt-16">
            <view class="flex flex-justify-start flex-aligin-center mt-16">
              <view class="font-14 bold ml-16">{{info.growthHabit}}</view>
            </view>
          </view>
          <view>
            <view class="grid">
              <view wx:for="{{info.todayCares}}" class="full-width" data-item="{{item}}" bind:tap="make">
                <view style="background-color: #FAFAFA; border-radius: 16rpx; width: 100%; border: {{item.color}}3C 1px solid;">
                  <view class="flex flex-center flex-col  padding">
                    <view class="camera  flex flex-center" style="background-color:{{item.color ? item.color+'3C':'red'}};">
                      <t-icon name="{{item.icon}}" class="primary" style="color:{{item.color ? item.color:'red'}};" size="24"></t-icon>
                    </view>
                    <view class="mt-16">{{item.name}}</view>
                    <view class="mt-16 font-12 grey">每{{item.period}}天一次</view>
                    <view wx:if="{{item.status === 2}}">
                      <view class="mt-16 font-12 primary">已完成</view>
                    </view>
                    <view wx:else>
                      <view class="primary mt-16 font-12 " style="color: #DD524C;" wx:if="{{item.status === 4}}">已逾期{{item.expireDays}}天</view>
                      <view class="primary mt-16 font-12 " wx:if="{{item.expireDays === 0}}">今天</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="row padding mt-32">
          <view>养护记录</view>
          <view class="flex flex-center flex-justify-between mt-16">
            <view wx:if="{{info.careRecords.length > 0}}" class="full-width">
              <view wx:for="{{info.careRecords}}" class="full-width">
                <view class="flex full-width">
                  <view style="width: 10rpx;" class="flex flex-center flex-col ">
                    <view class="dot flex flex-center" style="background-color: {{item.color}}3c;">
                      <t-icon name="{{item.icon}}" style="color: {{item.color}};" size="20"></t-icon>
                    </view>
                    <view style="width: 1px; background-color: #F6F6F6; height: 65%; margin-top: 10rpx;margin-bottom: 10rpx;"></view>
                  </view>
                  <view class="ml-32 mt-16 full-width padding" style="background-color: #F9FAFB; border-radius: 16rpx;margin-left:50rpx;">
                    <view>
                      <view class="flex flex-center flex-justify-between">
                        <view>{{item.name}}</view>
                      <view class="font-12 grey  ml-16">{{item.careTimeStr}}</view>
                      </view>
                      <view wx:if="{{item.lastPeriod === 0}}" style="background-color: {{item.color}}3c; color: {{item.color}}; padding: 8rpx; border-radius: 30rpx;margin-top: 8rpx;font-size: 12px;">今天</view>
                      <view class="mt-16 font-12">{{item.remark}}</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="row padding mt-32">
          <view>植物知识卡</view>
        </view>

        <view class="row padding mt-32">
          <view>成就徽章</view>
        </view>
      </view>
    </view>
  </view>
</view>