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="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: -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 ">
        <view>浇水</view>
        <view class="flex flex-justify-start flex-justify-start mt-16">
          <t-avatar shape="round" icon="color-invert" />
          <view class="font-14 bold ml-16">每{{info.careSchedules[season].wateringCycle}}天一次</view>
        </view>
      </view>

      <view class="row padding mt-32">
        <view>施肥</view>
        <view class="flex flex-justify-start flex-justify-start mt-16">
          <t-avatar shape="round" icon="color-invert" />
          <view>
            <view class="bold ml-16">每{{info.careSchedules[season].liquidFertilizerCycle}}天一次</view>
            <view class="ml-16 grey">液体肥料</view>
          </view>
        </view>
        <view class="flex flex-justify-start flex-justify-start mt-32">
          <t-avatar shape="round" icon="color-invert" />
          <view>
            <view class="bold ml-16">每{{info.careSchedules[season].slowReleaseFertilizerCycle}}天一次</view>
            <view class="ml-16 grey">缓释肥</view>
          </view>
        </view>
        <view class="mt-32">推荐肥料</view>

        <view class="mt-16">
          <t-tag theme="primary" >
            {{info.careSchedules[season].suitableFertilizer}}
          </t-tag>
        </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="color-invert" />
        <view class="ml-16">
          <view class="font-14 bold ">每{{info.careSchedules[season].pruningCycle}}天一次</view>
          <view class="font-12 grey">抵御病虫害、生长茂盛</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="color-invert" />
        <view class="ml-16">
          <view class="font-14 bold ">每{{info.careSchedules[season].rotationCycle}}天一次</view>
          <view class="font-12 grey">株形匀称</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 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>
      <t-button shape="round" theme="text" style="width: 80%; margin-top: 16rpx;">立即拥有</t-button>
    </view>
  </view>
</view>