hospital/admin-ui/src/views/work/patient/check/checkReportItem.vue

<script>
export default {
  name: "checkReportItem",
  props: {
    /**
     * 报告项的说明标签
     */
    reportLabel: {
      type: String,
      default: "label",
    },
    /**
     * 报告项的内容
     */
    reportContent: {
      type: String,
      default: "content",
    },
    /**
     * 占位空项的标志，值为true时报告项的说明标签和内容都被隐藏
     */
    itemHide: {
      type: Boolean,
      required: false,
    },
    /**
     * 报告项总体宽度
     */
    itemWidth: {
      type: String,
    },
  },
};
</script>

<template>
  <div
    class="check-report-item"
    :class="{ 'check-report-item-hidden': itemHide }"
    :style="`width: ${itemWidth};`"
  >
    <div class="check-report-item-label">
      {{ reportLabel }}
    </div>
    <div class="check-report-item-content">
      {{ reportContent }}
    </div>
  </div>
</template>

<style scoped>
.check-report-item {
  display: flex;
  min-height: 45px;
  line-height: 45px;
}
.check-report-item-label,
.check-report-item-content {
  border: 1px solid #afafaf;
  /*  防止边框重叠 */
  margin-right: -1px;
  margin-bottom: -1px;
  box-sizing: border-box;
}

.check-report-item-label {
  width: 45%;
  text-align: left;
  background-color: #e1e1e1;
  font-size: 14px;
  padding-left: 2%;

  overflow-x: hidden;
}

.check-report-item-content {
  flex: 1;
  text-align: center;
  background-color: #fff;
}

.check-report-item-hidden {
  color: transparent;
}
</style>