qt_books/pages/read/read.wxml

<!--pages/read/read.wxml-->
<view class="container" style="background-color: {{backgroundColor}}">
  <view class="content" wx:if="{{!loading && chapter}}">
    <view class="chapter-title">{{chapter.chapterTitle}}</view>
    <rich-text 
      class="chapter-content" 
      style="font-size: {{fontSize}}rpx;"
      nodes="{{chapter.contentText}}"
    ></rich-text>
  </view>

  <!-- 底部操作栏 -->
  <view class="toolbar">
    <view class="tool-item" bindtap="prevChapter">
      <text>上一章</text>
    </view>
    <view class="tool-item" bindtap="showChapterList">
      <text>目录</text>
    </view>
    <view class="tool-item" bindtap="toggleSettings">
      <text>设置</text>
    </view>
    <view class="tool-item" bindtap="nextChapter">
      <text>下一章</text>
    </view>
  </view>

  <!-- 设置面板 -->
  <view class="settings-panel" wx:if="{{showSettings}}">
    <view class="settings-title">阅读设置</view>
    
    <!-- 字体大小 -->
    <view class="setting-item">
      <text class="setting-label">字体大小</text>
      <view class="font-slider-container">
        <slider 
          class="font-slider"
          min="0"
          max="10"
          value="{{(fontSize - 28) / 2}}"
          step="1"
          bindchange="adjustFontSize"
          show-value="{{false}}"
          activeColor="#667eea"
          backgroundColor="#e0e0e0"
        />
        <text class="font-size-text">{{fontSize}}rpx</text>
      </view>
    </view>

    <!-- 背景颜色 -->
    <view class="setting-item">
      <text class="setting-label">背景颜色</text>
      <view class="color-picker">
        <view 
          class="color-item {{backgroundColor === '#fff' ? 'active' : ''}}"
          data-color="#fff"
          bindtap="changeBackground"
        ></view>
        <view 
          class="color-item {{backgroundColor === '#f5f5dc' ? 'active' : ''}}"
          data-color="#f5f5dc"
          bindtap="changeBackground"
        ></view>
        <view 
          class="color-item {{backgroundColor === '#e8f5e9' ? 'active' : ''}}"
          data-color="#e8f5e9"
          bindtap="changeBackground"
        ></view>
        <view 
          class="color-item {{backgroundColor === '#263238' ? 'active' : ''}}"
          data-color="#263238"
          bindtap="changeBackground"
        ></view>
      </view>
    </view>
  </view>

  <!-- 遮罩层 -->
  <view 
    class="mask" 
    wx:if="{{showSettings}}"
    bindtap="toggleSettings"
  ></view>
</view>