health-front/pages_order/checkup/checkupReport/reportSummaryView.vue

<template>
  <view class="card">
    <view class="card-header">
      <image class="card-header-bg" src="@/pages_order/static/report/report-card-header-bg.png" mode="scaleToFill"></image>
      <view class="flex card-header-content">
        <view class="avatar">
          <!-- todo -->
          <image class="avatar-img" src="@/pages_order/static/report/avatar.png" mode="scaleToFill"></image>
        </view>
        <view class="info">
          <!-- todo -->
          <view class="nickname">李星星</view>
          <view class="desc">
            <text class="age">25岁</text>
            <text class="gender">男</text>
          </view>
        </view>
      </view>
    </view>
    <view class="card-content">
      <view class="score-comprehensive"> 
        <progressCircleLine :progress="data.score"></progressCircleLine>
      </view>
      <view class="flex cols">
        <view class="flex flex-column col">
          <view class="flex">
            <view class="value">{{ data.BMI || '--' }}</view>
            <view v-if="data.BMIchange < 0" class="flex change">
              <text>{{ data.BMIchange }}</text>
              <image class="change-icon" src="@/pages_order/static/report/arrow-down.png" mode="widthFix"></image>
            </view>
            <view v-else-if="data.BMIchange > 0" class="flex change rise">
              <text>{{ data.BMIchange }}</text>
              <image class="change-icon" src="@/pages_order/static/report/arrow-down.png" mode="widthFix"></image>
            </view>
          </view>
          <view class="flex">
            <view class="label">BMI</view>
            <view class="tag">
              {{ data.BMItag || '-' }}
            </view>
          </view>
        </view>
        <view class="divider"></view>
        <view class="flex flex-column col">
          <view class="flex">
            <view class="value">{{ data.height || '--' }}</view>
            <view class="unit">cm</view>
          </view>
          <view class="label">身高</view>
        </view>
        <view class="divider"></view>
        <view class="flex flex-column col">
          <view class="flex">
            <view class="value">{{ data.weight || '--' }}</view>
            <view class="unit">kg</view>
          </view>
          <view class="label">体重</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import progressCircleLine from './progressCircleLine.vue'

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

<style scoped lang="scss">
  @import './style.scss';

  $header-height: 240rpx;
  $score-bar-height: 402rpx;

  .card {
    width: 100%;
    background-image: linear-gradient(#FAFAFF, #F3F3F3);
    border: 2rpx solid #FFFFFF;
    border-bottom-left-radius: 64rpx;
    border-bottom-right-radius: 64rpx;
    box-sizing: border-box;
    position: relative;

    &-header {
      background-color: $uni-bg-color;
      width: calc(100% + 2rpx * 2);
      height: $header-height;
      position: absolute;
      top: -2rpx;
      left: -2rpx;

      &-bg {
        width: 100%;
        height: 100%;
      }

      &-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0 32rpx;
        box-sizing: border-box;
        justify-content: flex-start;

        .avatar {
          width: 104rpx;
          height: 104rpx;
          border: 4rpx solid #FFFFFF;
          border-radius: 50%;
          overflow: hidden;

          &-img {
            width: 100%;
            height: 100%;
          }
        }

        .info {
          margin-left: 24rpx;

          .nickname {
            font-family: PingFang SC;
            font-weight: 600;
            font-size: 40rpx;
            line-height: 1.1;
            color: #252545;
          }

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

            .gender {
              margin-left: 16rpx;
            }
          }
        }
      }
    }

    &-content {
      position: relative;
      width: 100%;
      padding: calc(#{$header-height} + 32rpx + #{$score-bar-height} + 24rpx) 0 32rpx 0;
      box-sizing: border-box;
    }
  }

  .score-comprehensive {
    position: absolute;
    top: calc(#{$header-height} + 32rpx);
    left: 50%;
    transform: translateX(-50%);
  }

  .cols {
    padding: 0 32rpx 6rpx 32rpx;
    align-items: flex-start;

    .col {
      flex: 1;
    }

    .divider {
      width: 2rpx;
      height: 32rpx;
      background: #B5B8CE;
      margin: 0 15rpx;
    }

    .label {
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      line-height: 1.4;
      color: #6D6D6D;
    }

    .unit {
      margin-left: 8rpx;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      line-height: 1.4;
      color: #252545;
    }

    .value {
      font-family: PingFang SC;
      line-height: 1.4;
      font-weight: 600;
      font-size: 40rpx;
      color: $uni-color;
    }

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

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

      &.rise {
        .change-icon {
          transform: rotate(180deg);
        }
      }
    }

    .tag {
      margin-left: 16rpx;
    }
  }

</style>