shuichacha/shuichacha-for-KL/components/dashboard/dashboard.wxml

<!--components/dashboard/dashboard.wxml-->
<view class="container">
  <view class="dashboard">
    <view class="content">
      <view class="count" style="height: calc(100% - {{userInfo.laddertype? waterStages.length * 80 : 80}}rpx)">
        <view class="number">{{userInfo.intNum || 0}}<text>.{{userInfo.floatNum}}t</text></view>
        <view class="txt">
          <text>{{userInfo.laddertypename || '-'}}</text>
          <text wx:if="{{userInfo.laddertype}}">/{{userInfo.ladderlevelname || '-'}}</text>
        </view>
      </view>
      <view class="item" wx:for="{{userInfo.laddertype? waterStages : [waterStages[0]]}}" wx:key="index"
        style="background-color: {{item.background}}">
        <view class="icon" style="background-color: {{item.color}}"></view>
        <view class="name">{{item.name}}</view>
      </view>
    </view>
    <view class="wave-wrap">
      <view class="wave-inner" style="height: {{userInfo.percentage}}%; {{userInfo.style.linear}}">
        <image wx:if="{{userInfo.percentage > 30}}" class="bubble" src="/static/img/bg_blister.png"></image>
        <view wx:if="{{userInfo.percentage < 100 && userInfo.percentage > 0}}" class="after"></view>
        <view  wx:if="{{userInfo.percentage < 100 && userInfo.percentage > 0}}" class="before"></view>
      </view>
    </view>
    <view class="ruler">
      <view wx:for="{{waterStages}}" wx:key="index" class="item" style="height: calc(100% / {{waterStages.length}})">
        <view class="long-scale top" wx:if="{{index == waterStages.length - 1}}}">
          <text class="line"></text>
          <text class="number">{{item.maxValue}}</text>
        </view>
        <view class="area">
          <view class="bg" style="background-color: {{item.background}}"></view>
          <view class="scale">
            <text wx:for="{{[1,2,3,4]}}" wx:key="index" class="line"></text>
          </view>
        </view>
        <view class="long-scale">
          <text class="line"></text>
          <text class="number">{{item.minValue}}</text>
        </view>
      </view>
    </view>
  </view>
</view>