wxamp-ymtxUser/pages/market/market.wxml

<!-- pages/market/market.wxml -->
<view class="market-page">
  <!-- 顶部渐变标题栏 -->
  <view class="header-container" animation="{{headerAnimation}}">
    <view class="header-bg">
      <view class="bg-gradient"></view>
      <view class="bg-pattern"></view>
    </view>
    
    <view class="header-content">
      <view class="header-main">
        <view class="title-area">
          <view class="app-name">畜牧业市场信息</view>
          <view class="app-desc">实时行情 · 专业洞察 · 精准决策</view>
        </view>
        
        <view class="header-actions">
          <view class="time-display">
            <text class="iconfont icon-time"></text>
            <text>{{currentTime}}</text>
          </view>
        </view>
      </view>
      
      <!-- 数据统计摘要 -->
      <view class="data-summary">
        <view class="summary-item">
          <text class="summary-value">{{salesData.length}}</text>
          <text class="summary-label">畜产品类</text>
        </view>
        <view class="summary-divider"></view>
        <view class="summary-item">
          <text class="summary-value">{{feedData.length}}</text>
          <text class="summary-label">饲料品类</text>
        </view>
        <view class="summary-divider"></view>
        <view class="summary-item">
          <text class="summary-value">{{trendData.length}}</text>
          <text class="summary-label">趋势公告</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 主内容区域 -->
  <scroll-view 
    scroll-y 
    class="content-container"
    enable-back-to-top="true"
    refresher-enabled="{{true}}"
    refresher-triggered="{{isRefreshing}}"
    bindrefresherrefresh="onPullDownRefresh"
  >
    <!-- 销售市场卡片 -->
    <view class="section-title fade-in-item">
      <text class="section-icon iconfont icon-sales"></text>
      <text class="section-text">销售市场</text>
      <text class="section-desc">畜产品价格动态</text>
      <view class="section-indicator"></view>
      <view class="data-count" wx:if="{{salesData.length > 3}}">
        <text>{{salesData.length}}条</text>
      </view>
    </view>
    
    <view 
      class="market-card card-sales" 
      animation="{{cardAnimation1}}"
    >
      <view class="card-header">
        <view class="card-title-area">
          <view class="card-main-title">
            <view class="card-icon">
              <image src="/pages/images/ccp.png" class="icon-img" mode="aspectFit" />
            </view>
            <text class="card-title-text">畜产品实时价格</text>
          </view>
          <view class="card-subtitle">各地牛、羊等畜产品的市场价格动态</view>
        </view>
        <view class="card-status">
          <view class="status-dot {{salesStatus}}"></view>
          <text class="status-text">{{salesStatus === 'active' ? '更新中' : '已更新'}}</text>
        </view>
      </view>
      
      <!-- 销售市场数据 - 可滚动区域 -->
      <scroll-view 
        scroll-y 
        class="data-scroll-container"
        style="height: {{salesData.length > 3 ? '420rpx' : 'auto'}}"
      >
        <view class="price-list">
          <view class="price-item" wx:for="{{salesData}}" wx:key="id">
            <view class="price-info">
              <text class="product-name">{{item.productName}}</text>
              <text class="product-region">{{item.regionDetail}}</text>
            </view>
            <view class="price-value {{item.trend}}">
              <text class="price-number">¥{{item.price}}</text>
              <text class="price-unit">{{item.unit}}</text>
              <view class="trend-indicator">
                <text class="trend-icon" wx:if="{{item.trend === 'up'}}">↗</text>
                <text class="trend-icon" wx:if="{{item.trend === 'down'}}">↘</text>
                <text class="trend-icon" wx:if="{{item.trend === 'stable'}}">→</text>
                <text class="trend-change" wx:if="{{item.priceChange}}">+{{item.priceChange}}%</text>
              </view>
            </view>
            <view class="price-time">
              <text class="iconfont icon-clock-small"></text>
              <text>{{item.updateTime}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
      
      <view class="card-footer">
        <view class="update-info">
          <text class="iconfont icon-clock"></text>
          <text class="update-text">更新于 {{salesUpdateTime}}</text>
        </view>
        <view class="scroll-tip" wx:if="{{salesData.length > 3}}">
          <text class="iconfont icon-scroll"></text>
          <text>上下滚动查看更多</text>
        </view>
      </view>
    </view>

    <!-- 饲料市场卡片 -->
    <view class="section-title fade-in-item" style="animation-delay: 0.1s">
      <text class="section-text">饲料市场</text>
      <text class="section-desc">饲草料供应商价格</text>
      <view class="section-indicator"></view>
      <view class="data-count" wx:if="{{feedData.length > 3}}">
        <text>{{feedData.length}}条</text>
      </view>
    </view>
    
    <view 
      class="market-card card-feed" 
      animation="{{cardAnimation2}}"
    >
      <view class="card-corner"></view>
      
      <view class="card-header">
        <view class="card-title-area">
          <view class="card-main-title">
            <view class="card-icon">
              <image src="/pages/images/sl.png" class="icon-img" mode="aspectFit" />
            </view>
            <text class="card-title-text">饲料价格行情</text>
          </view>
          <view class="card-subtitle">各地饲草料供应商实时报价</view>
        </view>
        <view class="card-status">
          <view class="status-dot {{feedStatus}}"></view>
          <text class="status-text">{{feedStatus === 'active' ? '更新中' : '已更新'}}</text>
        </view>
      </view>
      
      <!-- 饲料市场数据 - 可滚动区域 -->
      <scroll-view 
        scroll-y 
        class="data-scroll-container"
        style="height: {{feedData.length > 3 ? '420rpx' : 'auto'}}"
      >
        <view class="supplier-list">
          <view class="supplier-item" wx:for="{{feedData}}" wx:key="id">
            <view class="supplier-info">
              <text class="supplier-name">{{item.feedName}}</text>
              <text class="supplier-company">{{item.supplier}}</text>
            </view>
            <view class="price-display">
              <view class="price-tag {{item.trend}}">
                <text class="price-label">¥{{item.price}}</text>
                <text class="price-per">{{item.unit}}</text>
              </view>
              <view class="trend-chart-small">
                <view class="chart-bar {{item.trend}}" 
                      style="height: {{item.chartHeight}}%">
                </view>
              </view>
            </view>
            <view class="supplier-time">
              <text class="iconfont icon-clock-small"></text>
              <text>{{item.updateTime}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
      
      <view class="card-footer">
        <view class="update-info">
          <text class="iconfont icon-clock"></text>
          <text class="update-text">更新于 {{feedUpdateTime}}</text>
        </view>
        <view class="scroll-tip" wx:if="{{feedData.length > 3}}">
          <text class="iconfont icon-scroll"></text>
          <text>上下滚动查看更多</text>
        </view>
      </view>
    </view>

    <!-- 市场趋势卡片 - 通知公告（无缝向上滚动） -->
    <view class="section-title fade-in-item" style="animation-delay: 0.2s">
      <text class="section-icon iconfont icon-trend"></text>
      <text class="section-text">市场趋势</text>
      <text class="section-desc">通知公告与行业分析</text>
      <view class="section-indicator"></view>
      <view class="unread-badge" wx:if="{{unreadCount > 0}}">
        <text class="badge-text">{{unreadCount}}条未读</text>
      </view>
    </view>
    
    <view 
      class="market-card card-trend" 
      animation="{{cardAnimation3}}"
    >
      <view class="card-corner"></view>
      
      <view class="card-header">
        <view class="card-title-area">
          <view class="card-main-title">
            <view class="card-icon">
              <image src="/pages/images/scqs.png" class="icon-img" mode="aspectFit" />
            </view>
            <text class="card-title-text">行业洞察与预测</text>
          </view>
          <view class="card-subtitle">行业报告和专家预测等信息，把握市场发展方向</view>
        </view>
      </view>
      
      <!-- 市场趋势通知公告 - 无缝向上滚动区域 -->
      <view class="notice-scroll-wrapper" style="height: 420rpx;">
        <view class="notice-scroll-content" 
              style="transform: translateY(-{{scrollOffset}}px); transition: transform {{scrollDuration}}s ease;">
          <!-- 第一组数据 -->
          <view class="notice-list">
            <view class="notice-item" wx:for="{{trendData}}" wx:key="id">
              <view class="notice-left">
                <view class="notice-type {{item.type}}">
                  {{item.category === '报告' ? '报告' : '预测'}}
                </view>
                <view class="notice-marker {{item.isNew ? 'new' : ''}}"></view>
              </view>
              <view class="notice-content">
                <view class="notice-title-area">
                  <text class="notice-title">{{item.title}}</text>
                  <view class="notice-tag hot" wx:if="{{item.isHot}}">
                    <text>热点</text>
                  </view>
                  <view class="notice-tag new" wx:if="{{item.isNew}}">
                    <text>新</text>
                  </view>
                </view>
                <text class="notice-summary">{{item.content}}</text>
                <view class="notice-footer">
                  <text class="notice-source">{{item.source}}</text>
                  <text class="notice-date">{{item.publishDate}}</text>
                </view>
              </view>
            </view>
          </view>
          
          <!-- 第二组相同数据（用于无缝滚动） -->
          <view class="notice-list">
            <view class="notice-item" wx:for="{{trendData}}" wx:key="id">
              <view class="notice-left">
                <view class="notice-type {{item.type}}">
                  {{item.category === '报告' ? '报告' : '预测'}}
                </view>
                <view class="notice-marker {{item.isNew ? 'new' : ''}}"></view>
              </view>
              <view class="notice-content">
                <view class="notice-title-area">
                  <text class="notice-title">{{item.title}}</text>
                  <view class="notice-tag hot" wx:if="{{item.isHot}}">
                    <text>热点</text>
                  </view>
                  <view class="notice-tag new" wx:if="{{item.isNew}}">
                    <text>新</text>
                  </view>
                </view>
                <text class="notice-summary">{{item.content}}</text>
                <view class="notice-footer">
                  <text class="notice-source">{{item.source}}</text>
                  <text class="notice-date">{{item.publishDate}}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <view class="card-footer">
        <view class="statistics-info">
          <text class="stat-text">共 {{trendData.length}} 条公告 · 自动滚动</text>
        </view>
        <view class="auto-scroll-tip">
          <text class="iconfont icon-auto-scroll"></text>
          <text>每5秒自动滚动</text>
        </view>
      </view>
    </view>

    <!-- 数据更新时间 -->
    <view class="update-footer fade-in-item" style="animation-delay: 0.3s">
      <view class="update-line">
        <text class="iconfont icon-sync"></text>
        <text class="update-tip">数据每30分钟自动同步 · 最后更新 {{lastUpdateTime}}</text>
      </view>
    </view>
  </scroll-view>
</view>