<view class="level-detail-page">
   <view class="header-card">
       <view class="header-title">累计阳光值</view>
       <view class="header-value">{{currentSunlight}}</view>
   </view>

   <scroll-view scroll-y class="timeline-scroll">
       <view class="timeline">
           <view wx:for="{{levels}}" wx:key="level" class="timeline-item {{item.level <= currentLevel ? 'active' : ''}}">
               <view class="timeline-left">
                   <view class="dot-line-top"></view>
                   <view class="status-dot">
                      <t-icon wx:if="{{item.level <= currentLevel}}" name="check" size="24rpx" color="#fff" />
                   </view>
                   <view class="dot-line-bottom"></view>
               </view>
               <view class="timeline-content">
                   <view class="level-card {{item.level === currentLevel ? 'current' : ''}}">
                       <view class="card-header">
                           <text class="card-lv">Lv.{{item.level}}</text>
                           <text class="card-title">{{item.title}}</text>
                           <view class="flex-spacer"></view>
                           <text class="card-sun">{{item.minSunlight}} 阳光</text>
                       </view>
                       <view class="card-perks" wx:if="{{item.perks}}">{{item.perks}}</view>
                   </view>
               </view>
           </view>
       </view>
       <view style="height: 60rpx;"></view>
   </scroll-view>
</view>
