flower-mp/pages/add/info.wxml

<!--pages/add/info.wxml-->
<view>
  <view wx:if="{{info}}">
    <!-- top -->
    <view class="top" style="position: relative; z-index: 2;">
      <image src="{{info.oss.url}}" 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: -130rpx;z-index: 99;position: absolute; width: 100vw; border-top-right-radius: 50rpx; border-top-left-radius: 50rpx;">
      <view class="flex flex-center flex-justify-start" style="padding: 52rpx 0 10rpx 32rpx">
        <view class="font-16 bold ">{{info.name}}</view>
        <view class="font-12 grey ml-16">{{info.genus}}</view>
      </view>
      <view style="padding: 0rpx 0 10rpx 32rpx">{{info.latinName}}</view>
    </view>
  </view>

  <view class="padding white-bg ">

    <view class="flex flex-center flex-justify-start font-12">
      <view>常用名：</view>
      <view class="bold">{{info.aliases}}</view>
    </view>
    <view class="grey" style="margin-top: 10rpx;" class="font-12">{{info.growthHabit}}</view>
  </view>

  <view class="padding" style="padding-bottom: 240rpx;">
    <view>
      <view class="row padding mb-32" wx:for="{{info.careSchedules[season].items}}">
        <view>{{item.name}}</view>
        <view class="flex flex-justify-start flex-center mt-16">
          <t-avatar shape="round" icon="color-invert" />
          <view class="ml-16">
            <view class="font-14 bold ">每{{item.cycleDays}}天一次</view>
            <view class="font-12 grey">
              {{item.desc}}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="row padding mt-32">
      <view>光照</view>
      <view class="flex flex-justify-start flex-center mt-16">
        <t-avatar shape="round" icon="sunny" />
        <view class="ml-16">
          <view class="font-14 bold ">{{info.lightIntensity}}、{{info.lightType}}</view>
          <view class="font-12 grey">最佳光照</view>
        </view>
      </view>
    </view>

    <view class="row padding mt-32">
      <view>温度</view>
      <view class="mt-16">
        <view class="font-14 grey">适应温度</view>
        <view class="flex flex-center flex-justify-start mt-5">
          <view>{{info.hardyTempMin}} ℃</view>
          <view class="ml-16 mr-16"> ~ </view>
          <view>{{info.hardyTempMax}} ℃</view>
        </view>
        <view class="font-14 grey mt-16">最佳温度</view>
        <view class="flex flex-center flex-justify-start mt-5">
          <view>{{info.optimalTempMin}} ℃</view>
          <view class="ml-16 mr-16"> ~ </view>
          <view>{{info.optimalTempMax}} ℃</view>
        </view>
      </view>
    </view>

    <view class="row padding mt-32">
      <view>常见病害/虫害</view>
      <view style="margin-top: 16rpx;">
        <t-tag class="margin-16" wx:for="{{info.pestsList}}" theme="danger" style="margin-right: 10rpx;" variant="light">{{item}}</t-tag>
      </view>
    </view>


    <view class="row padding mt-32">
      <view>特征</view>
      <view style="margin-top: 16rpx;">
        <view class="flex flex-justify-start flex-center mt-16">
          <t-avatar shape="round" icon="color-invert" />
          <view class="font-14 bold ml-16">
            <view>
              {{info.lifeCycle}}
            </view>
            <view class="font-12 grey">
              生命周期
            </view>
          </view>
        </view>
      </view>

      <view class="flex flex-justify-start flex-center mt-32">
        <t-avatar shape="round" icon="color-invert" />
        <view class="font-14 bold ml-16">
          <view>
            {{info.flowerDiameter}} mm
          </view>
          <view class="font-12 grey">
            花直径
          </view>
        </view>
      </view>

      <view class="flex flex-justify-start flex-center mt-32">
        <t-avatar shape="round" icon="color-invert" />
        <view class="font-14 bold ml-16">
          <view>
            {{info.floweringColor}}
          </view>
          <view class="font-12 grey">
            花色
          </view>
        </view>
      </view>

      <view class="flex flex-justify-start flex-center mt-32">
        <t-avatar shape="round" icon="color-invert" />
        <view class="font-14 bold ml-16">
          <view>
            {{info.floweringPeriod}}
          </view>
          <view class="font-12 grey">
            花期
          </view>
        </view>
      </view>

      
    </view>
  </view>

  <view class="bottom">
    <view class="flex flex-center flex-col">
      <t-button shape="round" theme="primary" style="width: 80%;" bind:tap="add">获取养护日程</t-button>
    </view>
  </view>
</view>