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

<template>
  <view class="view">
    <view class="card" v-for="item in list" :key="item.id">
      <view class="flex top">
        <view class="label">{{ item.label }}</view>
        <view :class="['tag', item.status === 0 ? 'is-error' : '' ]">{{ item.status == 0 ? '异常' : '正常' }}</view>
      </view>
      <view class="flex main">
        <view class="value">{{ item.value }}</view>
        <view class="unit">{{ item.unit }}</view>
      </view>
      <view class="desc">{{ `* 标准值：${item.standrad}` }}</view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
        default() {
          return []
        }
      }
    }
  }
</script>

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

  .view {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16rpx;
  }

  .card {
    flex: 1;
    padding: 24rpx;
    box-sizing: border-box;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 1.4;
    background-image: linear-gradient(#FAFAFF, #F3F3F3);
    border: 2rpx solid #FFFFFF;
    border-radius: 32rpx;

    .top {
      justify-content: space-between;
    }

    .main {
      margin: 4rpx 0;
      justify-content: flex-start;
      column-gap: 8rpx;
    }
  }
  
  .label {
    font-size: 30rpx;
    color: #000000;
  }

  .value {
    font-weight: 600;
    font-size: 56rpx;
    color: transparent;
    background-image: linear-gradient(to right, #4B348F, #845CFA);
    background-clip: text;
    display: inline-block;
  }

  .unit {
    font-size: 24rpx;
    color: #252545CC;
  }

  .desc {
    font-size: 22rpx;
    line-height: 1.6;
    color: #989898;
  }
  
</style>