payProject/pages/skinRecord/components/analysis/analysis.wxml

<view class="tabs flex-column">
  <scroll-view class="flex1" scroll-y>
    <view class="progress-box padding flex-justify-center flex-column border-radius">
      <view class="title flex-justify-space-between flex-align-center">
        <!-- <image src="/images/icon_record_01.png" class="icon"></image> -->
        <text>本次肤质</text>
        <text style="font-family: PingFangSC-Regular, PingFang SC;color: #FA7D22;">{{ analysis.skin_result.skin_name }}</text>
      </view>
      <view class="progress flex">
        <view class="sum flex-column flex-align-center">
          <view class="">
            <text style="font-size:68rpx;font-family: PingFangSC-Semibold, PingFang SC;">{{ analysis.score }}</text>
            <text style="font-size:24rpx;">分</text>
          </view>
          <text style="font-size: 24rpx; font-family: PingFangSC-Regular, PingFang SC; color: #999999;">皮肤得分</text>
        </view>
        <view class="flex1">
          <view class="progress-top" style="left:{{analysis.score + '%'}};">
            <view class="flex-column flex-center" style="margin-left: -100%;">
              <view class="flex pos-abs">
                <text>肤质</text>
                <text wx:if="{{analysis.score <= 30}}">差</text>
                <text wx:if="{{analysis.score <= 49 && analysis.score >= 31}}">较差</text>
                <text wx:if="{{analysis.score <= 65 && analysis.score >= 50}}">一般</text>
                <text wx:if="{{analysis.score >= 66}}">优</text>
              </view>
              <view class="triangle-down"></view>
            </view>
          </view>
          <view class="flex-align-center" style="height: 56rpx;">
            <wux-progress activeColor="#FF7B53" backgroundColor="#FAF2EC" class="flex1" show-info="{{ false }}" percent="{{ analysis.score }}" shape="square" />
          </view>
          <view class="text flex-justify-space-around" style="margin-top: 8rpx;">
            <text class="{{ analysis.score <= 30 ? 'active' : '' }} line">差</text>
            <text class="{{ analysis.score <= 49 && analysis.score >= 31 ? 'active' : '' }} line">较差</text>
            <text class="{{ analysis.score <= 65 && analysis.score >= 50 ? 'active' : '' }} line">一般</text>
            <text class="{{ analysis.score >= 66 ? 'active' : '' }}">优</text>
          </view>
        </view>
      </view>
    </view>
    <view class="padding summary border-radius">
      <view class="title flex-align-center">
        <!-- <image src="/images/icon_record_02.png" class="icon"></image> -->
        <text>皮肤总结</text>
        <!-- <text style="font-family: PingFangSC-Medium, PingFang SC;color: #FA7D22;">{{ analysis.skin_result.skin_name }}</text> -->
      </view>
      <view class="item" wx:for="{{ analysis.skin_result.list }}" wx:key="index">
        <image src="/images/icon_record_new_0{{index}}.png"></image>
        <text class="T" style="font-size: 28rpx;font-family: PingFangSC-Medium, PingFang SC;">{{ item.name }}：</text>
        <text class="t" style="font-size: 28rpx;color: #666;margin-top: 10rpx;">{{ item.suggest }}</text>
      </view>
    </view>
    <view class="padding border-radius">
      <view class="title flex-align-center">
        <!-- <image src="/images/icon_record_03.png" class="icon"></image> -->
        <text>皮肤各项指标</text>
      </view>
      <view class="canvas">
        <ec-canvas id="mychart-dom-bar" canvas-id="mychart-graph" ec="{{ ec }}"></ec-canvas>
      </view>
      <view class="btn flex-center" bindtap="goToDetail">查看改善方案</view>
    </view>
  </scroll-view>
</view>