取名小程序

NamingAssistant/pages/result/index.ttml

@@ -1,4 +1,4 @@
-<view class="page">
+<view class="page">
   <view class="glow-layer">
     <view class="glow glow-one"></view>
     <view class="glow glow-two"></view>
@@ -12,8 +12,22 @@
 
     <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>
@@ -23,19 +37,23 @@
       <view class="tip">轻触收藏按钮即可将心仪姓名收入星册</view>
       <block tt:for="{{results}}" tt:for-index="index" tt:for-item="item" tt:key="name">
         <view class="result-card">
-          <text class="result-line">{{item.name}}｜{{item.meaning}}｜{{item.elementReason}}</text>
-          <button
-            class="collect-button"
-            size="mini"
-            bindtap="handleFavorite"
-            data-name="{{item.name}}"
-            data-meaning="{{item.meaning}}"
-          >
-            收藏
-          </button>
+          <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>
+</view>