wxamp-ymtxUser/pagesB/pages/training/training.wxml

<!-- pages/training/training.wxml -->
<view class="training-container">
  <!-- 顶部标题 -->
  <view class="header">
    <view class="title">在线培训</view>
    <view class="subtitle">专业学习资源，助您快速成长</view>
    <view class="header-decoration">
      <view class="decoration-circle circle-1"></view>
      <view class="decoration-circle circle-2"></view>
      <view class="decoration-circle circle-3"></view>
    </view>
  </view>

  <!-- 主选项卡切换 -->
  <view class="tabs">
    <view 
      class="tab-item {{currentTab === 0 ? 'active' : ''}}" 
      bindtap="switchTab" 
      data-tab="0"
    >
      <text>文章</text>
      <view class="tab-highlight {{currentTab === 0 ? 'active' : ''}}"></view>
    </view>
    <view 
      class="tab-item {{currentTab === 1 ? 'active' : ''}}" 
      bindtap="switchTab" 
      data-tab="1"
    >
      <text>视频</text>
      <view class="tab-highlight {{currentTab === 1 ? 'active' : ''}}"></view>
    </view>
    <view class="tab-slider {{currentTab === 0 ? 'left' : 'right'}}"></view>
  </view>

  <!-- 文章板块 -->
  <view class="content-section" wx:if="{{currentTab === 0}}">
    <!-- 搜索框 -->
    <view class="search-box">
      <image class="search-icon" src="/pagesB/images/sou.png"></image>
      <input 
        class="search-input" 
        placeholder="搜索文章..." 
        placeholder-class="placeholder-style"
        bindinput="onSearchInput"
        value="{{searchKeyword}}"
      />
      <view class="search-decoration">
        <view class="search-wave"></view>
      </view>
    </view>

    <!-- 文章分类筛选 -->
    <scroll-view class="category-scroll" scroll-x scroll-with-animation>
      <view class="category-list">
        <view 
          class="category-item {{articleActiveCategory === 'all' ? 'active' : ''}}"
          bindtap="selectArticleCategory"
          data-category="all"
        >
          <text>全部</text>
          <view class="category-indicator"></view>
        </view>
        <view 
          class="category-item {{articleActiveCategory === 'tech' ? 'active' : ''}}"
          bindtap="selectArticleCategory"
          data-category="tech"
        >
          <text>技术干货</text>
          <view class="category-indicator"></view>
        </view>
        <view 
          class="category-item {{articleActiveCategory === 'business' ? 'active' : ''}}"
          bindtap="selectArticleCategory"
          data-category="business"
        >
          <text>商业思维</text>
          <view class="category-indicator"></view>
        </view>
        <view 
          class="category-item {{articleActiveCategory === 'management' ? 'active' : ''}}"
          bindtap="selectArticleCategory"
          data-category="management"
        >
          <text>管理技能</text>
          <view class="category-indicator"></view>
        </view>
        <view 
          class="category-item {{articleActiveCategory === 'career' ? 'active' : ''}}"
          bindtap="selectArticleCategory"
          data-category="career"
        >
          <text>职业发展</text>
          <view class="category-indicator"></view>
        </view>
      </view>
    </scroll-view>

    <!-- 文章列表 -->
    <view class="articles-list">
      <view 
        class="article-card" 
        wx:for="{{filteredArticles}}" 
        wx:key="id"
        bindtap="viewArticleDetail"
        data-id="{{item.id}}"
        animation="{{item.animation}}"
      >
        <!-- 封面图片 -->
        <view class="article-cover-container">
          <image class="article-cover" src="{{item.cover}}" mode="aspectFill"></image>
          <view class="cover-overlay"></view>
          <view class="category-tag">{{item.category}}</view>
          <view class="article-hover-effect"></view>
        </view>
        
        <!-- 文章信息 -->
        <view class="article-info">
          <view class="article-title">{{item.title}}</view>
          <view class="article-desc">{{item.description}}</view>
          
          <view class="article-meta">
            <view class="meta-item">
              <image class="meta-icon" src="/pages/images/tx.png"></image>
              <text class="meta-text">{{item.author}}</text>
            </view>

            <view class="meta-item">
              <text class="meta-text">{{item.date}}</text>
            </view>
          </view>
          
          <view class="article-stats">
            <view class="stat-item">
              <image class="stat-icon" src="/pagesB/images/lll.png"></image>
              <text>{{item.likes}}</text>
            </view>
          </view>
        </view>
        
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" wx:if="{{filteredArticles.length === 0}}">
      <view class="empty-animation">
        <view class="empty-circle"></view>
        <view class="empty-circle circle-2"></view>
        <view class="empty-circle circle-3"></view>
      </view>
      <text class="empty-text">暂无相关文章</text>
      <text class="empty-hint">换个关键词试试吧</text>
    </view>
  </view>

  <!-- 视频板块 -->
  <view class="content-section" wx:if="{{currentTab === 1}}">
    <!-- 搜索框 -->
    <view class="search-box">
      <image class="search-icon" src="/pagesB/images/sou.png"></image>
      <input 
        class="search-input" 
        placeholder="搜索视频..." 
        placeholder-class="placeholder-style"
        bindinput="onSearchInput"
        value="{{searchKeyword}}"
      />
      <view class="search-decoration">
        <view class="search-wave"></view>
      </view>
    </view>

    <!-- 视频分类筛选 -->
    <scroll-view class="category-scroll" scroll-x scroll-with-animation>
      <view class="category-list">
        <view 
          class="category-item {{videoActiveCategory === 'all' ? 'active' : ''}}"
          bindtap="selectVideoCategory"
          data-category="all"
        >
          <text>全部视频</text>
          <view class="category-indicator"></view>
        </view>
        <view 
          class="category-item {{videoActiveCategory === 'recommend' ? 'active' : ''}}"
          bindtap="selectVideoCategory"
          data-category="recommend"
        >
          <text>热门推荐</text>
          <view class="category-indicator"></view>
        </view>
        <view 
          class="category-item {{videoActiveCategory === 'tech' ? 'active' : ''}}"
          bindtap="selectVideoCategory"
          data-category="tech"
        >
          <text>技术教程</text>
          <view class="category-indicator"></view>
        </view>
        <view 
          class="category-item {{videoActiveCategory === 'business' ? 'active' : ''}}"
          bindtap="selectVideoCategory"
          data-category="business"
        >
          <text>商业知识</text>
          <view class="category-indicator"></view>
        </view>
        <view 
          class="category-item {{videoActiveCategory === 'management' ? 'active' : ''}}"
          bindtap="selectVideoCategory"
          data-category="management"
        >
          <text>管理技能</text>
          <view class="category-indicator"></view>
        </view>
        <view 
          class="category-item {{videoActiveCategory === 'career' ? 'active' : ''}}"
          bindtap="selectVideoCategory"
          data-category="career"
        >
          <text>职业发展</text>
          <view class="category-indicator"></view>
        </view>
        <view 
          class="category-item {{videoActiveCategory === 'beginner' ? 'active' : ''}}"
          bindtap="selectVideoCategory"
          data-category="beginner"
        >
          <text>初级入门</text>
          <view class="category-indicator"></view>
        </view>
        <view 
          class="category-item {{videoActiveCategory === 'advanced' ? 'active' : ''}}"
          bindtap="selectVideoCategory"
          data-category="advanced"
        >
          <text>进阶提升</text>
          <view class="category-indicator"></view>
        </view>
      </view>
    </scroll-view>

    <!-- 视频列表 -->
    <view class="videos-grid">
      <view 
        class="video-card" 
        wx:for="{{filteredVideos}}" 
        wx:key="id"
        bindtap="playVideo"
        data-id="{{item.id}}"
        animation="{{item.animation}}"
      >
        <!-- 视频封面 -->
        <view class="video-cover-container">
          <image class="video-cover" src="{{item.cover}}" mode="aspectFill"></image>
          <view class="cover-overlay"></view>
          <view class="video-duration">{{item.duration}}</view>
          <view class="play-button">
            <image class="play-icon" src="/pagesB/images/bo.png"></image>
            <view class="play-ripple"></view>
          </view>
          <view class="video-hover-effect"></view>
        </view>
        
        <!-- 视频信息 -->
        <view class="video-info">
          <view class="video-title">{{item.title}}</view>
          <view class="video-instructor">
            <image class="instructor-avatar" src="/pages/images/tx.png"></image>
            <text class="instructor-name">{{item.instructor.name}}</text>
          </view>
          
          <view class="video-meta">
            <view class="video-meta-item">
              <text>2026-01-12</text>
            </view>
            <view class="video-meta-item">
              <text>{{item.views}}</text>
            </view>
          </view>
        </view>
        
 
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" wx:if="{{filteredVideos.length === 0}}">
      <view class="empty-animation">
        <view class="empty-circle"></view>
        <view class="empty-circle circle-2"></view>
        <view class="empty-circle circle-3"></view>
      </view>

      <text class="empty-text">暂无相关视频</text>
      <text class="empty-hint">换个关键词试试吧</text>
    </view>
  </view>
</view>