优化记录页趋势分析展示

components/trend-chart/trend-chart.js

@@ -15,7 +15,8 @@ const { getBarPercent } = require('../../utils/util')
  */
 Component({
   properties: {
-    chartData: { type: Array, value: [] }
+    chartData: { type: Array, value: [] },
+    variant: { type: String, value: 'total' }
   },
   data: {
     bars: []

components/trend-chart/trend-chart.wxml

@@ -1,4 +1,4 @@
-<view class="trend-chart">
+<view class="trend-chart {{variant === 'peak' ? 'peak' : ''}}">
   <view class="trend-bars">
     <view class="trend-bar-col" wx:for="{{bars}}" wx:key="label">
       <view class="trend-bar {{item.value === 0 ? 'zero' : ''}} {{item.highlight ? 'highlight' : ''}}" style="height: {{item.percent}}%;">

components/trend-chart/trend-chart.wxss

@@ -36,6 +36,32 @@
   box-shadow: 0 0 14rpx rgba(var(--primary-rgb), 0.5);
 }
 
+.trend-chart.peak .trend-bars {
+  height: 156rpx;
+}
+
+.trend-chart.peak .trend-bar {
+  width: 12rpx;
+  margin: 0 auto;
+  min-height: 8rpx;
+  border-radius: 999rpx;
+}
+
+.trend-chart.peak .trend-bar::after {
+  content: '';
+  position: absolute;
+  top: -8rpx;
+  left: -4rpx;
+  width: 20rpx;
+  height: 20rpx;
+  border-radius: 50%;
+  background: var(--primary);
+}
+
+.trend-chart.peak .trend-bar.zero::after {
+  background: var(--border);
+}
+
 /* value caption floats above the bar so it never eats into bar height */
 .trend-bar-value {
   position: absolute;