health-front/pages_order/report/result/resultSummary.vue

<template>
  <view class="view">
    <view class="flex top">
      <view class="left">
        <view class="title">
          <!-- todo -->
          <text class="highlight">战斗世界</text>
          <text>的健康测评</text>
        </view>
        <view class="grade">
          <view class="grade-text">{{ data.gradeDesc }}</view>
          <view class="grade-border"></view>
        </view>
        <view class="desc">
          * 报告结果基于FFQ营养测评和4大维度专业健康评估
        </view>
      </view>
      <view class="right">
        <progressCircle ref="progressCircle" :progress="data.score"></progressCircle>
      </view>
    </view>
    <view class="flex">
      <radarChart :score="data.scoreDetail"></radarChart>
    </view>
    <view class="section">
      <div class="title">
        <div class="title-zh">本次改善目标</div>
        <div class="title-en">This improvement goal</div>
      </div>
      <div class="content">
        <div class="tag" v-for="(item, tIdx) in data.tags" :key="tIdx">{{ item }}</div>
      </div>
    </view>
    <view class="flex section">
      <div class="title">
        <div class="title-zh">首要目标</div>
        <div class="title-en">Top priority</div>
      </div>
      <div class="content">
        <div class="tag highlight">{{ data.topPriority }}</div>
      </div>
    </view>
  </view>
</template>

<script>
	import progressCircle from './progressCircle.vue'
  import radarChart from './radarChart.vue';

  export default {
		components: {
      progressCircle,
      radarChart,
    },
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
  }
</script>

<style scoped lang="scss">
.view {
  padding: 56rpx 24rpx 0 24rpx;
}

.top {
  align-items: flex-start;
  

  .left {
    padding-right: 16rpx;

    .title {
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 36rpx;
      line-height: 1.2;
      color: #252545CC;

      .highlight {
        margin-right: 8rpx;
        font-weight: 600;
        color: #252545;
      }
    }

    .grade {
      margin-top: 30rpx;
      display: inline-block;
      padding-left: 7rpx;

      &-text {
        font-size: 64rpx;
        font-weight: 600;
        line-height: 1;
        font-family: PingFang SC;
        color: transparent;
        background-image: linear-gradient(to right, #4B348F, #845CFA);
        background-clip: text;
        display: inline-block;
      }

      &-border {
        width: 100%;
        height: 12rpx;
        background-image: linear-gradient(to right, #7451DE, #B1A4FF);
        box-shadow: 4rpx 4rpx 12rpx 0 #4000FF40;
      }
    }

    .desc {
      margin-top: 16rpx;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      line-height: 1.5;
      color: #989898;
    }
  }
}

.section {
  margin-bottom: 64rpx;

  .title {
    font-family: PingFang SC;
    line-height: 1.4;

    &-zh {
      font-weight: 600;
      font-size: 40rpx;
    }
    
    &-en {
      font-weight: 400;
      font-size: 26rpx;
    }
  }

  .content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    margin-top: 24rpx;
  }

  .tag {
    padding: 8rpx 40rpx;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    line-height: 1.5;
    color: #252545;
    background: #E5E4EB;
    border-radius: 30rpx;

    &.highlight {
      margin-left: 40rpx;
      font-weight: 600;
      color: #FFFFFF;
      background: #252545;
    }
  }
}
</style>