health-front/components/report/reportScoreView.vue

<template>
  <view class="flex view report-score__view">
    <view class="flex flex-column left" :class="[scoreAlign == 'left' ? 'align-left' : '']">
      <template v-if="score">
        <view class="flex">
          <text class="score-value">{{ score }}</text><text class="score-full">/100分</text>
        </view>
        <view class="flex">
          <view class="flex change" v-if="change > 0 || change < 0">
            <text>{{ change }}</text>
            <image :class="['change-icon', change > 0 ? 'is-up' : '']" src="@/pages_order/static/report/arrow-down.png" mode="widthFix"></image>
          </view>
          <!-- todo: check key -->
          <view class="tag" v-if="data.tag">
            {{ data.tag }}
          </view>
        </view>
      </template>
      <template v-else>
        <view class="flex">
          <text class="score-value is-empty">--</text><text class="score-full">/100分</text>
        </view>
      </template>
    </view>
    <view class="divider"></view>
    <view class="flex flex-column right">
      <view><view class="highlight">{{ userInfo.name }}</view>的</view>
      <view>专属检测方案</view>
    </view>
  </view>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    props: {
      reports: {
        type: Array,
        default() {
          return []
        }
      },
      scoreAlign: {
        type: String,
        default: 'center'
      }
    },
    computed : {
      ...mapState(['userInfo']),
      score() {
        const [currentReport] = this.reports || []

        if (!currentReport?.score) {
          return null
        }

        return parseInt(currentReport.score)
      },
      change() {
        const [currentReport, lastReport] = this.reports || []

        if (lastReport) {
          return parseInt(currentReport.score - lastReport.score)
        }

        return 0
      },
    },
  }
</script>

<style scoped lang="scss">
.view {

  .left {
    flex: 1;

    &.align-left {
      align-items: flex-start;
    }

    .score {
      &-value {
        font-family: PingFang SC;
        line-height: 1.4;
        font-weight: 600;
        font-size: 40rpx;
        color: $uni-color;
        
        &.is-empty {
          color: #989898;
        }
      }

      &-full {
        margin-left: 8rpx;
        font-size: 26rpx;
        font-weight: 400;
        line-height: 1.4;
        font-family: PingFang SC;
        color: transparent;
        background-image: linear-gradient(to right, #4B348F, #845CFA);
        background-clip: text;
        display: inline-block;
      }

    }

    .change {
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      line-height: 1.4;
      color: #F79205;

      &-icon {
        width: 24rpx;
        height: auto;

        &.is-up {
          transform: rotate(180deg);
        }
      }
    }

    .tag {
      margin-left: 16rpx;
      padding: 6rpx 16rpx;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      line-height: 1.4;
      color: #FFFFFF;
      background-image: linear-gradient(135deg, #4B348F, #845CFA);
      border-top-left-radius: 24rpx;
      border-bottom-right-radius: 24rpx;
    }
  }

  .right {
    flex: 1;
    text-align: center;
    font-size: 26rpx;
    font-weight: 400;
    line-height: 1.4;
    font-family: PingFang SC;
    color: transparent;
    background-image: linear-gradient(to right, #4B348F, #845CFA);
    background-clip: text;
    display: inline-block;

    .highlight {
      display: inline-block;
      margin-right: 10rpx;
      border-bottom: 2rpx solid #4B348F;
    }
  }

  .divider {
    width: 2rpx;
    height: 32rpx;
    background: #B5B8CE;
  }
}
</style>