feat: 样式修改
This commit is contained in:
Blizzard
+181
-198
@@ -1,210 +1,193 @@
|
||||
<!--pages/wiki/detail/index.wxml-->
|
||||
<view class="wiki-detail" wx:if="{{plant}}">
|
||||
<!-- Header Area -->
|
||||
<!-- Image Carousel -->
|
||||
<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: '' } }}"
|
||||
/>
|
||||
<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.latinName}}</text>
|
||||
</view>
|
||||
<view class="wd-badges">
|
||||
<text class="wd-badge" wx:if="{{plant.genus}}">{{plant.genus}}</text>
|
||||
<text class="wd-badge" wx:for="{{plant.classes}}" wx:key="*this">{{item}}</text>
|
||||
<text class="wd-badge">难度: {{plant.difficultyLabel}}</text>
|
||||
</view>
|
||||
<t-swiper
|
||||
t-class="custom-swiper"
|
||||
current="{{activeImageIndex}}"
|
||||
bind:change="onSwiperChange"
|
||||
height="480rpx"
|
||||
list="{{swiperList}}"
|
||||
navigation="{{ { type: '' } }}"
|
||||
/>
|
||||
<view class="wd-counter" wx:if="{{swiperList.length > 0}}">
|
||||
<text>{{activeImageIndex + 1}} / {{swiperList.length}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Content Area -->
|
||||
<view class="wd-content-wrapper">
|
||||
<scroll-view class="wd-content" scroll-y enhanced show-scrollbar="{{false}}">
|
||||
|
||||
<!-- Growth Habit Section -->
|
||||
<section class="wd-section" wx:if="{{plant.growthHabit}}">
|
||||
<view class="wd-card">
|
||||
<text class="wd-text">{{plant.growthHabit}}</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" wx:if="{{plant.distributionArea}}">
|
||||
<text class="wd-label">分布区域</text>
|
||||
<text class="wd-value">{{plant.distributionArea}}</text>
|
||||
</view>
|
||||
<view class="wd-stat-item" wx:if="{{plant.aliases}}">
|
||||
<text class="wd-label">别名</text>
|
||||
<text class="wd-value">{{plant.aliases}}</text>
|
||||
</view>
|
||||
<view class="wd-stat-item" wx:if="{{plant.lifeCycle}}">
|
||||
<text class="wd-label">生命周期</text>
|
||||
<text class="wd-value">{{plant.lifeCycle === 'perennial' ? '多年生' : (plant.lifeCycle === 'annual' ? '一年生' : plant.lifeCycle)}}</text>
|
||||
</view>
|
||||
<view class="wd-stat-item" wx:if="{{plant.height}}">
|
||||
<text class="wd-label">株高</text>
|
||||
<text class="wd-value">约 {{plant.height}} cm</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</section>
|
||||
|
||||
<!-- Care Guide Section -->
|
||||
<section class="wd-section">
|
||||
<view class="section-title">
|
||||
<t-icon name="sunny" size="40rpx" color="#558B2F" />
|
||||
<text>养护指南</text>
|
||||
</view>
|
||||
<view class="wd-card">
|
||||
<!-- Light -->
|
||||
<view class="requirement-item" wx:if="{{plant.lightIntensity}}">
|
||||
<view class="req-icon">
|
||||
<t-icon name="sunny" size="40rpx" color="#558B2F" />
|
||||
</view>
|
||||
<view class="req-content">
|
||||
<text class="req-title">光照</text>
|
||||
<text class="req-desc">{{plant.lightIntensity}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Temperature -->
|
||||
<view class="requirement-item" wx:if="{{plant.optimalTempPeriod}}">
|
||||
<view class="req-icon">
|
||||
<t-icon name="pin" size="40rpx" color="#558B2F" />
|
||||
</view>
|
||||
<view class="req-content">
|
||||
<text class="req-title">适宜温度</text>
|
||||
<text class="req-desc">{{plant.optimalTempPeriod}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Reproduction -->
|
||||
<view class="requirement-item" wx:if="{{plant.reproductionMethod}}">
|
||||
<view class="req-icon">
|
||||
<t-icon name="fork-node" size="40rpx" color="#558B2F" />
|
||||
</view>
|
||||
<view class="req-content">
|
||||
<text class="req-title">繁殖方式</text>
|
||||
<text class="req-desc">{{plant.reproductionMethod}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</section>
|
||||
|
||||
<!-- Morphology Section -->
|
||||
<section class="wd-section" wx:if="{{plant.stem || plant.foliageShape || plant.foliageColor}}">
|
||||
<view class="section-title">
|
||||
<t-icon name="tree-round-dot" size="40rpx" color="#558B2F" />
|
||||
<text>形态特征</text>
|
||||
</view>
|
||||
<view class="wd-card">
|
||||
<view class="wd-grid">
|
||||
<view class="wd-stat-item" wx:if="{{plant.stem}}">
|
||||
<text class="wd-label">茎</text>
|
||||
<text class="wd-value">{{plant.stem}}</text>
|
||||
</view>
|
||||
<view class="wd-stat-item" wx:if="{{plant.foliageShape}}">
|
||||
<text class="wd-label">叶形</text>
|
||||
<text class="wd-value">{{plant.foliageShape}}</text>
|
||||
</view>
|
||||
<view class="wd-stat-item" wx:if="{{plant.foliageColor}}">
|
||||
<text class="wd-label">叶色</text>
|
||||
<text class="wd-value">{{plant.foliageColor}}</text>
|
||||
</view>
|
||||
<view class="wd-stat-item" wx:if="{{plant.foliageType}}">
|
||||
<text class="wd-label">叶质</text>
|
||||
<text class="wd-value">{{plant.foliageType}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</section>
|
||||
|
||||
<!-- Flowering Section -->
|
||||
<section class="wd-section" wx:if="{{plant.floweringPeriod || plant.floweringColor}}">
|
||||
<view class="section-title">
|
||||
<t-icon name="flower" size="40rpx" color="#558B2F" />
|
||||
<text>开花信息</text>
|
||||
</view>
|
||||
<view class="wd-card">
|
||||
<view class="wd-grid">
|
||||
<view class="wd-stat-item" wx:if="{{plant.floweringPeriod}}">
|
||||
<text class="wd-label">花期</text>
|
||||
<text class="wd-value">{{plant.floweringPeriod}}</text>
|
||||
</view>
|
||||
<view class="wd-stat-item" wx:if="{{plant.floweringColor}}">
|
||||
<text class="wd-label">花色</text>
|
||||
<text class="wd-value">{{plant.floweringColor}}</text>
|
||||
</view>
|
||||
<view class="wd-stat-item" wx:if="{{plant.floweringShape}}">
|
||||
<text class="wd-label">花型</text>
|
||||
<text class="wd-value">{{plant.floweringShape}}</text>
|
||||
</view>
|
||||
<view class="wd-stat-item" wx:if="{{plant.flowerDiameter}}">
|
||||
<text class="wd-label">花径</text>
|
||||
<text class="wd-value">约 {{plant.flowerDiameter}} mm</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</section>
|
||||
|
||||
<!-- Fruit Section -->
|
||||
<section class="wd-section" wx:if="{{plant.fruit}}">
|
||||
<view class="section-title">
|
||||
<t-icon name="apple" size="40rpx" color="#558B2F" />
|
||||
<text>果实</text>
|
||||
</view>
|
||||
<view class="wd-card">
|
||||
<text class="wd-text">{{plant.fruit}}</text>
|
||||
</view>
|
||||
</section>
|
||||
|
||||
<!-- Pests & Diseases Section -->
|
||||
<section class="wd-section" wx:if="{{plant.commonPests.length > 0}}">
|
||||
<view class="section-title">
|
||||
<t-icon name="error-circle" size="40rpx" color="#558B2F" />
|
||||
<text>常见病虫害</text>
|
||||
</view>
|
||||
<view class="wd-card">
|
||||
<view class="pest-tags">
|
||||
<text wx:for="{{plant.commonPests}}" wx:key="*this" class="pest-tag">{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</section>
|
||||
|
||||
<!-- Bottom Spacer -->
|
||||
<view style="height: 100rpx;"></view>
|
||||
</scroll-view>
|
||||
<!-- Plant Name Card -->
|
||||
<view class="wd-name-card">
|
||||
<view class="wd-name-row">
|
||||
<text class="wd-name">{{plant.name}}</text>
|
||||
<text class="wd-scientific" wx:if="{{plant.latinName}}">{{plant.latinName}}</text>
|
||||
</view>
|
||||
<view class="wd-badges" wx:if="{{plant.genus || plant.classes.length > 0}}">
|
||||
<text class="wd-badge" wx:if="{{plant.genus}}">{{plant.genus}}</text>
|
||||
<text class="wd-badge" wx:for="{{plant.classes}}" wx:key="*this">{{item}}</text>
|
||||
<text class="wd-badge difficulty">难度: {{plant.difficultyLabel}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Content Scroll -->
|
||||
<scroll-view class="wd-content" scroll-y enhanced show-scrollbar="{{false}}">
|
||||
|
||||
<!-- Growth Habit -->
|
||||
<view class="wd-section" wx:if="{{plant.growthHabit}}">
|
||||
<view class="wd-card">
|
||||
<text class="wd-text">{{plant.growthHabit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Basic Info -->
|
||||
<view 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" wx:if="{{plant.distributionArea}}">
|
||||
<text class="wd-label">分布区域</text>
|
||||
<text class="wd-value">{{plant.distributionArea}}</text>
|
||||
</view>
|
||||
<view class="wd-stat-item" wx:if="{{plant.aliases}}">
|
||||
<text class="wd-label">别名</text>
|
||||
<text class="wd-value">{{plant.aliases}}</text>
|
||||
</view>
|
||||
<view class="wd-stat-item" wx:if="{{plant.lifeCycle}}">
|
||||
<text class="wd-label">生命周期</text>
|
||||
<text class="wd-value">{{plant.lifeCycle === 'perennial' ? '多年生' : (plant.lifeCycle === 'annual' ? '一年生' : plant.lifeCycle)}}</text>
|
||||
</view>
|
||||
<view class="wd-stat-item" wx:if="{{plant.height}}">
|
||||
<text class="wd-label">株高</text>
|
||||
<text class="wd-value">约 {{plant.height}} cm</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Care Guide -->
|
||||
<view class="wd-section">
|
||||
<view class="section-title">
|
||||
<t-icon name="sunny" size="40rpx" color="#558B2F" />
|
||||
<text>养护指南</text>
|
||||
</view>
|
||||
<view class="wd-card">
|
||||
<view class="requirement-item" wx:if="{{plant.lightIntensity}}">
|
||||
<view class="req-icon light">
|
||||
<t-icon name="sunny" size="40rpx" color="#F59E0B" />
|
||||
</view>
|
||||
<view class="req-content">
|
||||
<text class="req-title">光照</text>
|
||||
<text class="req-desc">{{plant.lightIntensity}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="requirement-item" wx:if="{{plant.optimalTempPeriod}}">
|
||||
<view class="req-icon temp">
|
||||
<t-icon name="pin" size="40rpx" color="#EF4444" />
|
||||
</view>
|
||||
<view class="req-content">
|
||||
<text class="req-title">适宜温度</text>
|
||||
<text class="req-desc">{{plant.optimalTempPeriod}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="requirement-item" wx:if="{{plant.reproductionMethod}}">
|
||||
<view class="req-icon repro">
|
||||
<t-icon name="fork-node" size="40rpx" color="#558B2F" />
|
||||
</view>
|
||||
<view class="req-content">
|
||||
<text class="req-title">繁殖方式</text>
|
||||
<text class="req-desc">{{plant.reproductionMethod}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Morphology -->
|
||||
<view class="wd-section" wx:if="{{plant.stem || plant.foliageShape || plant.foliageColor}}">
|
||||
<view class="section-title">
|
||||
<t-icon name="tree-round-dot" size="40rpx" color="#558B2F" />
|
||||
<text>形态特征</text>
|
||||
</view>
|
||||
<view class="wd-card">
|
||||
<view class="wd-grid">
|
||||
<view class="wd-stat-item" wx:if="{{plant.stem}}">
|
||||
<text class="wd-label">茎</text>
|
||||
<text class="wd-value">{{plant.stem}}</text>
|
||||
</view>
|
||||
<view class="wd-stat-item" wx:if="{{plant.foliageShape}}">
|
||||
<text class="wd-label">叶形</text>
|
||||
<text class="wd-value">{{plant.foliageShape}}</text>
|
||||
</view>
|
||||
<view class="wd-stat-item" wx:if="{{plant.foliageColor}}">
|
||||
<text class="wd-label">叶色</text>
|
||||
<text class="wd-value">{{plant.foliageColor}}</text>
|
||||
</view>
|
||||
<view class="wd-stat-item" wx:if="{{plant.foliageType}}">
|
||||
<text class="wd-label">叶质</text>
|
||||
<text class="wd-value">{{plant.foliageType}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Flowering -->
|
||||
<view class="wd-section" wx:if="{{plant.floweringPeriod || plant.floweringColor}}">
|
||||
<view class="section-title">
|
||||
<t-icon name="flower" size="40rpx" color="#558B2F" />
|
||||
<text>开花信息</text>
|
||||
</view>
|
||||
<view class="wd-card">
|
||||
<view class="wd-grid">
|
||||
<view class="wd-stat-item" wx:if="{{plant.floweringPeriod}}">
|
||||
<text class="wd-label">花期</text>
|
||||
<text class="wd-value">{{plant.floweringPeriod}}</text>
|
||||
</view>
|
||||
<view class="wd-stat-item" wx:if="{{plant.floweringColor}}">
|
||||
<text class="wd-label">花色</text>
|
||||
<text class="wd-value">{{plant.floweringColor}}</text>
|
||||
</view>
|
||||
<view class="wd-stat-item" wx:if="{{plant.floweringShape}}">
|
||||
<text class="wd-label">花型</text>
|
||||
<text class="wd-value">{{plant.floweringShape}}</text>
|
||||
</view>
|
||||
<view class="wd-stat-item" wx:if="{{plant.flowerDiameter}}">
|
||||
<text class="wd-label">花径</text>
|
||||
<text class="wd-value">约 {{plant.flowerDiameter}} mm</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Fruit -->
|
||||
<view class="wd-section" wx:if="{{plant.fruit}}">
|
||||
<view class="section-title">
|
||||
<t-icon name="apple" size="40rpx" color="#558B2F" />
|
||||
<text>果实</text>
|
||||
</view>
|
||||
<view class="wd-card">
|
||||
<text class="wd-text">{{plant.fruit}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Pests -->
|
||||
<view class="wd-section" wx:if="{{plant.commonPests.length > 0}}">
|
||||
<view class="section-title">
|
||||
<t-icon name="error-circle" size="40rpx" color="#EF4444" />
|
||||
<text>常见病虫害</text>
|
||||
</view>
|
||||
<view class="wd-card">
|
||||
<view class="pest-tags">
|
||||
<text wx:for="{{plant.commonPests}}" wx:key="*this" class="pest-tag">{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="height: 120rpx;"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- Loading State -->
|
||||
<!-- Loading -->
|
||||
<view wx:if="{{!plant}}" class="wiki-detail-loading">
|
||||
<t-loading theme="circular" size="64rpx" text="加载中..." />
|
||||
</view>
|
||||
|
||||
Reference in New Issue
Block a user