sundynix-plant-mp/pages/wiki/detail/index.wxml

<!--pages/wiki/detail/index.wxml-->
<view class="wiki-detail">
  <!-- Header Area -->
  <view class="wd-header">
    <view class="wd-gallery-container">
      <t-swiper
        t-class="custom-swiper"
        current="{{activeImageIndex}}"
        bind:change="onSwiperChange"
        height="500rpx"
        list="{{swiperList}}"
        navigation="{{ { type: '' } }}"
      />
      <!-- Gradient applied externally to match plant-detail if needed or just rely on image -->
      <view class="wd-gradient-overlay"></view>
    </view>
    
    <!-- Custom Indicators -->
    <view class="wd-indicators" wx:if="{{swiperList.length > 1}}">
      <view 
        wx:for="{{swiperList}}" 
        wx:key="index" 
        class="wd-dot {{index === activeImageIndex ? 'active' : ''}}"
      ></view>
    </view>

    <!-- Header Overlay Info -->
    <view class="wd-overlay">
      <view class="wd-title">
        <text class="wd-name">{{plant.name}}</text>
        <text class="wd-scientific">{{plant.scientificName}}</text>
      </view>
      <view class="wd-badges">
        <text class="wd-badge">{{plant.family}}</text>
        <text class="wd-badge">{{plant.category}}</text>
        <text class="wd-badge">难度: {{plant.difficulty || 'Easy'}}</text>
      </view>
    </view>
  </view>

  <!-- Content Area -->
  <view class="wd-content-wrapper">
    <scroll-view class="wd-content" scroll-y enhanced show-scrollbar="{{false}}">
      <!-- Description Section -->
      <section class="wd-section">
        <view class="wd-card">
          <text class="wd-text">{{plant.description}}</text>
        </view>
      </section>

      <!-- Basic Info Section -->
      <section class="wd-section">
        <view class="section-title">
          <t-icon name="info-circle" size="40rpx" color="#558B2F" />
          <text>基础档案</text>
        </view>
        <view class="wd-card">
          <view class="wd-grid">
            <view class="wd-stat-item">
              <text class="wd-label">原产地</text>
              <text class="wd-value">{{plant.origin}}</text>
            </view>
            <view class="wd-stat-item">
              <text class="wd-label">毒性</text>
              <text class="wd-value">{{plant.toxicity}}</text>
            </view>
          </view>
        </view>
      </section>

      <!-- Care Guide Section -->
      <section class="wd-section">
        <view class="section-title">
          <t-icon name="sprout" size="40rpx" color="#558B2F" />
          <text>养护指南</text>
        </view>
        <view class="wd-card">
          <!-- Light -->
          <view class="requirement-item">
            <view class="req-icon">
              <t-icon name="sunny" size="40rpx" color="#558B2F" />
            </view>
            <view class="req-content">
              <text class="req-title">光照 ({{plant.light.level}})</text>
              <text class="req-desc">{{plant.light.description}}</text>
            </view>
          </view>

          <!-- Water -->
          <view class="requirement-item">
            <view class="req-icon">
              <t-icon name="water" size="40rpx" color="#558B2F" />
            </view>
            <view class="req-content">
              <text class="req-title">水分 ({{plant.water.frequency}})</text>
              <text class="req-desc">{{plant.water.description}}</text>
            </view>
          </view>

          <!-- Environment -->
          <view class="requirement-item">
            <view class="req-icon">
              <t-icon name="temperate" size="40rpx" color="#558B2F" />
            </view>
            <view class="req-content">
              <text class="req-title">环境</text>
              <text class="req-desc">温度: {{plant.temperature}}</text>
              <text class="req-desc" style="display: block; margin-top: 4rpx;">湿度: {{plant.humidity}}</text>
            </view>
          </view>

          <!-- Soil & Fertilizer -->
          <view class="requirement-item">
            <view class="req-icon">
              <t-icon name="layers" size="40rpx" color="#558B2F" />
            </view>
            <view class="req-content">
              <text class="req-title">土壤与肥料</text>
              <text class="req-desc">土: {{plant.soil}}</text>
              <text class="req-desc" style="display: block; margin-top: 4rpx;">肥: {{plant.fertilizer}}</text>
            </view>
          </view>
        </view>
      </section>

      <!-- FAQ Section -->
      <section class="wd-section">
        <view class="section-title">
          <t-icon name="error-circle" size="40rpx" color="#558B2F" />
          <text>常见问题</text>
        </view>
        <view class="wd-card">
          <view class="pest-section">
            <text class="wd-label" style="display: block; margin-bottom: 16rpx;">易发病虫害</text>
            <view class="pest-tags">
              <text wx:for="{{plant.commonPests}}" wx:key="*this" class="pest-tag">{{item}}</text>
            </view>
          </view>
          <view class="tips-section">
            <text class="wd-label" style="display: block; margin-bottom: 16rpx; margin-top: 32rpx;">专家提示</text>
            <view class="care-tips-list">
              <view wx:for="{{plant.careTips}}" wx:key="*this" class="tip-item">
                <view class="tip-dot"></view>
                <text class="tip-text">{{item}}</text>
              </view>
            </view>
          </view>
        </view>
      </section>

      <!-- Bottom Spacer -->
      <view style="height: 100rpx;"></view>
    </scroll-view>
  </view>
</view>