MiniProgram/NamingAssistant/pages/result/index.ttml

<view class="page">
  <view class="glow-layer">
    <view class="glow glow-one"></view>
    <view class="glow glow-two"></view>
  </view>

  <scroll-view class="content" scroll-y="true">
    <view class="headline">
      <text class="title">八字名鉴</text>
      <text class="subtitle">以生辰八字为准，优选五行调衡的候选姓名</text>
    </view>

    <view class="summary" tt:if="{{matchSummary}}">
      <text class="summary-text">{{matchSummary}}</text>
      <view class="chart-title">五行占比</view>
      <block tt:for="{{elementsChart}}" tt:for-item="item" tt:key="label">
        <view class="chart-row">
          <view class="chart-label">{{item.label}}</view>
          <view class="chart-bar">
            <view class="chart-bar-fill" style="width: {{item.percentWidth}};"></view>
          </view>
          <text class="chart-percent">{{item.count}}（{{item.percentText}}）</text>
        </view>
      </block>
    </view>

    <!-- <view class="element-section" tt:if="{{elementsChart.length}}">
     
    </view> -->

    <view class="empty" tt:if="{{!results.length}}">
      <text>暂无生成结果，请返回主页重新生成。</text>
      <button class="primary back-button" bindtap="handleBack">返回主页</button>
    </view>

    <view tt:if="{{results.length}}">
      <view class="tip">轻触收藏按钮即可将心仪姓名收入星册</view>
      <block tt:for="{{results}}" tt:for-index="index" tt:for-item="item" tt:key="name">
        <view class="result-card">
          <view class="result-header">
            <text class="result-name">{{item.name}}</text>
            <button
              class="collect-button"
              size="mini"
              bindtap="handleFavorite"
              data-name="{{item.name}}"
              data-meaning="{{item.meaning}}"
            >
              收藏
            </button>
          </view>
          <text class="result-meaning">{{item.meaning}}</text>
          <text class="result-reason">{{item.elementReason}}</text>
        </view>
      </block>
      <button class="primary back-button" bindtap="handleBack">再测一批</button>
    </view>
  </scroll-view>
</view>