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

<template>
  <view class="card">
    <view class="card-header">
      <view class="title">体检异常项</view>
      <view class="desc">Abnormal items from health check-up</view>
    </view>
    <view class="flex row" v-for="item in list" :key="item.id" @click="onClick(item)">
      <view>
        <view class="title">{{ item.title }}</view>
        <view class="desc">{{ item.desc }}</view>
      </view>
      <uv-icon name="arrow-right" color="#C6C6C6" size="24rpx"></uv-icon>
    </view>
  </view>
</template>

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

<style lang="scss" scoped>
  .card {
    padding: 32rpx;
    background: #FAFAFF;
    border-radius: 24rpx;

    &-header {
      font-family: PingFang SC;
      line-height: 1.4;
      color: #252545;

      .title {
        font-weight: 600;
        font-size: 32rpx;
      }

      .desc {
        font-weight: 400;
        font-size: 24rpx;
      }
    }

    .row {
      margin-top: 24rpx;
      justify-content: space-between;
      padding: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      background: #F3F2F7;
      border-radius: 16rpx;

      .title {
        font-size: 30rpx;
        line-height: 1.4;
        color: #252545;
      }

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