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="data.score">
        <view class="flex">
          <text class="score-value">{{ data.score }}</text><text class="score-full">/100分</text>
        </view>
        <view class="flex">
          <view class="flex change">
            <text>{{ data.change }}</text>
            <image class="change-icon" src="@/pages_order/static/report/arrow-down.png" mode="widthFix"></image>
          </view>
          <view class="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">战斗世界</view>的</view>
      <view>专属检测方案</view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      },
      scoreAlign: {
        type: String,
        default: 'center'
      }
    },
  }
</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;
      }
    }

    .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>