mini_read_space_front/pages/index/index.wxml

<!--index.wxml-->
<view class="container">

  <!-- 登录加载提示 -->
  <view class="loading-mask" wx:if="{{isLoggingIn}}">
    <view class="loading-content">
      <view class="loading-icon"></view>
      <text>登录中...</text>
    </view>
  </view>

  <!-- 头部区域 -->
  <!-- <view class="header">
    <view class="avatar">
      <image src="/assets/images/avatar-placeholder.png" mode="aspectFill"></image>
    </view>
  </view> -->

  <view class="main-wrapper" wx:if="{{!isLoggingIn}}">
    <!-- 性别切换和搜索区域 -->
    <view class="tab-search">
      <gender-tabs gender="{{gender}}" bind:switch="switchGender"/>
      <view class="search-box" bindtap="goToSearch">
        <icon type="search" size="22" color="#999"></icon>
        <input placeholder="请输入书名/口令搜索" disabled="true" placeholder-class="placeholder"/>
        <view class="search-placeholder"></view>
      </view>
    </view>

    <!-- 主Banner区域 -->
    <view wx:if="{{bannerList.length > 0}}" class="main-banner">
      <swiper 
        autoplay="{{autoplay}}"
        interval="{{interval}}"
        duration="{{duration}}"
        circular="true"
        class="banner-swiper">
        <swiper-item wx:for="{{bannerList}}" wx:key="id">
          <image src="{{item.cover}}" mode="aspectFill" bindtap="goToBookDetail" data-book-id="{{item.id}}"
          data-wx-book-id="{{item.wxBookId}}"
          data-chapter-id="{{item.chapterId}}"/>
        </swiper-item>
      </swiper>
    </view>

    <!-- 功能区 -->
    <view class="feature-section">
      <view class="feature-item" bindtap="goToFeature" data-feature="recent">
        <image src="/assets/images/icons/icon-recent.png" mode="aspectFit"></image>
        <text>最近阅读</text>
      </view>
      <view class="feature-item" bindtap="goToFeature" data-feature="user">
        <image src="/assets/images/icons/icon-user.png" mode="aspectFit"></image>
        <text>个人中心</text>
      </view>
      <view class="feature-item" bindtap="goToFeature" data-feature="category">
        <image src="/assets/images/icons/icon-category.png" mode="aspectFit"></image>
        <text>热门分类</text>
      </view>
    </view>
  </view>


  <!-- 主编推荐 -->
  <view class="recommend-section">
    <view class="section-header">
      <text class="title">{{cardNovels[0].name}}</text>
      <navigator url="/pages/book/list?type=editor&id={{cardNovels[0].settingId}}&name={{cardNovels[0].name}}" class="more">更多 ></navigator>
    </view>

    <view class="recommend-main">
      <view class="recommend-large" wx:if="{{recommendBooks[0]}}" bindtap="goToBookDetail" 
        data-book-id="{{recommendBooks[0].id}}" 
        data-wx-book-id="{{recommendBooks[0].wxBookId}}"
        data-chapter-id="{{recommendBooks[0].chapterId}}">
        <image src="{{recommendBooks[0].cover}}" mode="aspectFill"></image>
        <view class="book-info">
          <view class="book-title">{{recommendBooks[0].title}}</view>
          <view class="book-desc">{{recommendBooks[0].desc}}</view>
          <view class="book-stats">{{recommendBooks[0].stats}}</view>
        </view>
      </view>
    </view>

    <view class="recommend-books">
      <view class="book-item" 
        wx:for="{{bookList}}" 
        wx:key="id" 
        bindtap="goToBookDetail" 
        data-book-id="{{item.id}}"
        data-wx-book-id="{{item.wxBookId}}"
        data-chapter-id="{{item.chapterId}}">
        <image src="{{item.cover}}" mode="aspectFill"></image>
        <text>{{item.title}}</text>
      </view>
    </view>
  </view>

  <!-- 全网热推 -->
  <view class="hot-section">
    <view class="section-header">
      <text class="title">{{cardNovels[1].name}}</text>
      <navigator url="/pages/book/list?type=editor&id={{cardNovels[1].settingId}}&name={{cardNovels[1].name}}" class="more">更多 ></navigator>
    </view>

    <view class="hot-books">
      <view class="hot-book-item" 
        wx:for="{{hotBooks}}" 
        wx:key="id" 
        bindtap="goToBookDetail" 
        data-book-id="{{item.id}}"
        data-wx-book-id="{{item.wxBookId}}"
        data-chapter-id="{{item.chapterId}}">
        <image src="{{item.cover}}" mode="aspectFill"></image>
        <view class="hot-book-info">
          <view class="hot-book-title">{{item.title}}</view>
          <view class="hot-book-desc">{{item.desc}}</view>
          <view class="hot-book-stats">{{item.stats}}</view>
        </view>
      </view>
    </view>
  </view>

  <!-- 强力推荐 -->
  <view class="strong-recommend" wx:if="{{strongBooks.length>0}}">
    <view class="section-header">
      <text class="title">{{cardNovels[2].name}}</text>
      <navigator url="/pages/book/list?type=editor&id={{cardNovels[2].settingId}}&name={{cardNovels[2].name}}" class="more">更多 ></navigator>
    </view>

    <view class="strong-books">
      <view class="strong-book-item" 
        wx:for="{{strongBooks}}" 
        wx:key="id" 
        bindtap="goToBookDetail" 
        data-book-id="{{item.id}}"
        data-wx-book-id="{{item.wxBookId}}"
        data-chapter-id="{{item.chapterId}}">
        <image src="{{item.cover}}" mode="aspectFill"></image>
        <text>{{item.title}}</text>
      </view>
    </view>
  </view>
  
  <!-- 最近阅读悬浮按钮 -->
  <view class="recent-book-float" 
    wx:if="{{showRecentBook && recentBook}}" 
    bindtap="toggleRecentBook"
    animation="{{recentBookAnimation}}">
    <image src="{{recentBook.novelCover}}" mode="aspectFill"></image>
    <view class="recent-book-label">继续阅读</view>
  </view>
</view>