health-front/pages_order/center/reportCard.vue

<template>
  <view class="card">
    <view class="flex header">
      <view class="title">体检报告</view>
      <button class="btn">体检入口</button>
    </view>
    <view class="flex cols">
      <view class="flex flex-column col score">
        <view class="flex">
          <view class="score-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 score">
        <view class="flex">
          <view class="score-value">{{ data.fat || '--' }}</view>
          <view v-if="data.fatChange < 0" class="flex change">
            <text>{{ data.fatChange }}</text>
            <image class="change-icon" src="@/pages_order/static/report/arrow-down.png" mode="widthFix"></image>
          </view>
          <view v-else-if="data.fatChange > 0" class="flex change rise">
            <text>{{ data.fatChange }}</text>
            <image class="change-icon" src="@/pages_order/static/report/arrow-down.png" mode="widthFix"></image>
          </view>
        </view>
        <view class="flex">
          <view class="label">脂肪</view>
          <view class="tag">
            {{ data.fatTag || '-' }}
          </view>
        </view>
      </view>
      <view class="divider"></view>
      <view class="flex flex-column col">
        <view class="label">解锁更多</view>
        <view class="label">身体数据</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        data: {
          BMI: 20.3,
          BMIchange: -0.2,
          BMItag: '正常',
          fat: null,
          fatChange: null,
          fatTag: null,
        },
      }
    },
  }
</script>

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

.card {
  padding: 32rpx;
  background-image: linear-gradient(#FAFAFF, #F3F3F3);
}

.header {
  justify-content: space-between;
  margin-bottom: 24rpx;

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

  .btn {
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 28rpx;
    line-height: 1.5;
    color: #FFFFFF;
    padding: 8rpx 24rpx;
    background-image: linear-gradient(to right, #4B348F, #845CFA);
    border: 1rpx solid #FFFFFF;
    border-radius: 32rpx;
    box-shadow: -5rpx -5rpx 10rpx 0 #FFFFFF,
                10rpx 10rpx 20rpx 0 #AAAACC80,
                4rpx 4rpx 10rpx 0 #AAAACC40,
                -2rpx -2rpx 5rpx 0 #FFFFFF;
  }
}

.col {

  &.score {

    .score {
      &-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;
      padding: 6rpx 16rpx;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      line-height: 1.4;
      color: #FFFFFF;
      background-image: linear-gradient(90deg, #4B348F, #845CFA);
      border-top-left-radius: 24rpx;
      border-bottom-right-radius: 24rpx;
    }

  }

  .label {
    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;
  }
}

.divider {
  flex: none;
  // todo
  width: 4rpx;
  height: 32rpx;
  background: #B5B8CE;
}


</style>