soul/miniprogram/pages/index/index.wxml

<!--pages/index/index.wxml-->
<!--Soul创业实验 - 首页 1:1还原Web版本-->
<view class="page page-transition">
  <!-- 自定义导航栏占位 -->
  <view class="nav-placeholder" style="height: {{statusBarHeight + 44}}px;"></view>
  
  <!-- 顶部区域 -->
  <view class="header" style="padding-top: {{statusBarHeight}}px;">
    <view class="header-content">
      <view class="logo-section">
        <view class="logo-icon">
          <text class="logo-text">S</text>
        </view>
        <view class="logo-info">
          <view class="logo-title">
            <text class="text-white">Soul</text>
            <text class="brand-color">创业实验</text>
          </view>
          <text class="logo-subtitle">来自派对房的真实故事</text>
        </view>
      </view>
      <view class="header-right">
        <view class="chapter-badge">{{totalSections}}章</view>
      </view>
    </view>
    
    <!-- 搜索栏 -->
    <view class="search-bar" bindtap="goToChapters">
      <view class="search-icon">
        <view class="search-circle"></view>
        <view class="search-handle"></view>
      </view>
      <text class="search-placeholder">搜索章节...</text>
    </view>
  </view>

  <!-- 主内容区 -->
  <view class="main-content">
    <!-- Banner卡片 - 最新章节 -->
    <view class="banner-card" bindtap="goToRead" data-id="{{latestSection.id}}">
      <view class="banner-glow"></view>
      <view class="banner-tag">最新更新</view>
      <view class="banner-title">{{latestSection.title}}</view>
      <view class="banner-part">{{latestSection.part}}</view>
      <view class="banner-action">
        <text class="banner-action-text">开始阅读</text>
        <view class="banner-arrow">→</view>
      </view>
    </view>

    <!-- 阅读进度卡 -->
    <view class="progress-card card">
      <view class="progress-header">
        <text class="progress-title">我的阅读</text>
        <text class="progress-count">{{purchasedCount}}/{{totalSections}}章</text>
      </view>
      <view class="progress-bar-wrapper">
        <view class="progress-bar-bg">
          <view class="progress-bar-fill" style="width: {{(purchasedCount / totalSections) * 100}}%;"></view>
        </view>
      </view>
      <view class="progress-stats">
        <view class="stat-item">
          <text class="stat-value brand-color">{{purchasedCount}}</text>
          <text class="stat-label">已读</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{totalSections - purchasedCount}}</text>
          <text class="stat-label">待读</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">5</text>
          <text class="stat-label">篇章</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">11</text>
          <text class="stat-label">章节</text>
        </view>
      </view>
    </view>

    <!-- 精选推荐 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">精选推荐</text>
        <view class="section-more" bindtap="goToChapters">
          <text class="more-text">查看全部</text>
          <text class="more-arrow">→</text>
        </view>
      </view>
      <view class="featured-list">
        <view 
          class="featured-item" 
          wx:for="{{featuredSections}}" 
          wx:key="id"
          bindtap="goToRead"
          data-id="{{item.id}}"
        >
          <view class="featured-content">
            <view class="featured-meta">
              <text class="featured-id brand-color">{{item.id}}</text>
              <text class="tag {{item.tagClass}}">{{item.tag}}</text>
            </view>
            <text class="featured-title">{{item.title}}</text>
            <text class="featured-part">{{item.part}}</text>
          </view>
          <view class="featured-arrow">→</view>
        </view>
      </view>
    </view>

    <!-- 内容概览 -->
    <view class="section">
      <text class="section-title">内容概览</text>
      <view class="parts-list">
        <view 
          class="part-item" 
          wx:for="{{partsList}}" 
          wx:key="id"
          bindtap="goToChapters"
        >
          <view class="part-icon">
            <text class="part-number">{{item.number}}</text>
          </view>
          <view class="part-info">
            <text class="part-title">{{item.title}}</text>
            <text class="part-subtitle">{{item.subtitle}}</text>
          </view>
          <view class="part-arrow">→</view>
        </view>
      </view>
    </view>

    <!-- 序言入口 -->
    <view class="preface-card" bindtap="goToRead" data-id="preface">
      <view class="preface-content">
        <text class="preface-title">序言</text>
        <text class="preface-desc">为什么我每天早上6点在Soul开播?</text>
      </view>
      <view class="tag tag-free">免费</view>
    </view>
  </view>

  <!-- 底部留白 -->
  <view class="bottom-space"></view>
</view>