huaanglimeng/pages/zodiac/index.wxml

<view class="container">
  <!-- 自定义返回按钮 (仿塔罗页风格) -->
  <view class="nav-back" bindtap="goBack">
    <text class="back-icon">⇠</text>
    <text class="back-text">返回</text>
  </view>
  
  <!-- 状态1: 星座列表 -->
  <view class="zodiac-grid" wx:if="{{!selectedZodiac}}">
    
    <!-- 今日星象概览 (新增) -->
    <view class="daily-overview" wx:if="{{dailyOverview}}">
      <view class="overview-title">今日星象概览</view>
      <view class="overview-content">{{dailyOverview.content}}</view>
      <view class="overview-tags">
        <block wx:for="{{dailyOverview.tags}}" wx:key="*this">
          <text class="tag-item">{{item}}</text>
        </block>
      </view>
    </view>

    <view class="header-tip">选择你的星座</view>
    <view class="grid-container">
      <block wx:for="{{zodiacList}}" wx:key="name">
        <view class="zodiac-item" bindtap="selectZodiac" data-index="{{index}}">
          <text class="zodiac-symbol">{{item.symbol}}</text>
          <text class="zodiac-name">{{item.name}}</text>
          <text class="zodiac-range">{{item.range}}</text>
        </view>
      </block>
    </view>
  </view>

  <!-- 状态2: 加载中 -->
  <view class="loading-container" wx:if="{{selectedZodiac && isLoading}}">
    <view class="loading-symbol">{{selectedZodiac.symbol}}</view>
    <view class="loading-text">正在接收宇宙讯息...</view>
  </view>

  <!-- 状态3: 运势展示 -->
  <view class="result-container" wx:elif="{{selectedZodiac && !isLoading}}">
    <view class="result-header">
      <text class="result-symbol">{{selectedZodiac.symbol}}</text>
      <text class="today-title">今日指引 · {{selectedZodiac.name}}</text>
    </view>

    <!-- 滚动区域 (简单容器即可) -->
    <view class="fortune-card">
      
      <!-- 1. 关键词与核心能量 -->
      <view class="keyword-section">
        <text class="keyword-label">✨ 今日关键词</text>
        <text class="keyword-text">{{currentFortune.keyword}}</text>
        <view class="core-energy">
          <text class="energy-label">🌙 今日核心能量</text>
          <text class="energy-text">{{currentFortune.core_energy}}</text>
        </view>
      </view>

      <view class="divider"></view>

      <!-- 2. 运势指数 -->
      <view class="section-block">
        <text class="section-title">📊 运势指数</text>
        <view class="rating-grid">
          <view class="rating-item">
            <text class="rating-label">综合</text>
            <view class="stars">
               <block wx:for="{{[1,2,3,4,5]}}" wx:key="*this">
                 <text class="star">{{item <= currentFortune.ratings.overall ? '★' : '☆'}}</text>
               </block>
            </view>
          </view>
          <view class="rating-item">
            <text class="rating-label">爱情</text>
            <view class="stars">
               <block wx:for="{{[1,2,3,4,5]}}" wx:key="*this">
                 <text class="star">{{item <= currentFortune.ratings.love ? '★' : '☆'}}</text>
               </block>
            </view>
          </view>
          <view class="rating-item">
            <text class="rating-label">事业</text>
            <view class="stars">
               <block wx:for="{{[1,2,3,4,5]}}" wx:key="*this">
                 <text class="star">{{item <= currentFortune.ratings.career ? '★' : '☆'}}</text>
               </block>
            </view>
          </view>
          <view class="rating-item">
            <text class="rating-label">财运</text>
            <view class="stars">
               <block wx:for="{{[1,2,3,4,5]}}" wx:key="*this">
                 <text class="star">{{item <= currentFortune.ratings.wealth ? '★' : '☆'}}</text>
               </block>
            </view>
          </view>
        </view>
      </view>

      <!-- 3. 详细运势 -->
      <view class="section-block">
        <text class="section-title">❤️ 感情运势</text>
        <text class="section-content">{{currentFortune.fortune_text.love}}</text>
      </view>

      <view class="section-block">
        <text class="section-title">💼 事业运势</text>
        <text class="section-content">{{currentFortune.fortune_text.career}}</text>
      </view>

      <view class="section-block">
        <text class="section-title">💰 财运提醒</text>
        <text class="section-content">{{currentFortune.fortune_text.wealth}}</text>
      </view>

      <view class="divider"></view>

      <!-- 4. 幸运元素 -->
      <view class="section-block">
        <text class="section-title">🎨 幸运元素</text>
        <view class="lucky-grid">
          <view class="lucky-item">颜色：<text class="highlight">{{currentFortune.lucky_elements.color}}</text></view>
          <view class="lucky-item">数字：<text class="highlight">{{currentFortune.lucky_elements.number}}</text></view>
          <view class="lucky-item">时间：<text class="highlight">{{currentFortune.lucky_elements.time}}</text></view>
        </view>
      </view>

      <!-- 5. 行动建议 -->
      <view class="section-block last-section">
        <text class="section-title">🌿 今日行动建议</text>
        <text class="section-content">{{currentFortune.action}}</text>
      </view>

    </view>

    <view class="action-area">
      <view class="back-btn" bindtap="backToList">⬅ 选其他星座</view>
      <button class="share-btn" open-type="share">✨ 分享今日指引</button>
      <view class="verify-btn" bindtap="goToTarot">前往塔罗验证能量</view>
    </view>
    
    <view class="disclaimer">
      <text>内容仅供娱乐与参考，不构成现实决策依据</text>
    </view>
  </view>

</view>