CMVR-BID/src/views/is/project/evaluate/info.vue

<template>
  <div class="info">
      <div class="item">
        <div class="label">项目名称:</div>
        <div class="text" :title="infoData.projectName">{{ infoData.projectName }}</div>
      </div>
      <div class="item">
        <div class="label">项目编号:</div>
        <div class="text" :title="infoData.projectId">{{ infoData.projectId }}</div>
      </div>
      <div class="item">
        <div class="label">测试人员:</div>
        <div class="text">{{ infoData.tester }}</div>
      </div>
      <div class="item">
        <div class="label">计划测试时间:</div>
        <div class="text">{{ parseTime(infoData.planStart) }}</div>
      </div>
      <div class="item">
        <div class="label">样品名称:</div>
        <div class="text" :title="infoData.sampleName">{{ infoData.sampleName }}</div>
      </div>
      <div class="item">
        <div class="label">委托单位:</div>
        <div class="text">{{ infoData.entrustUnit }}</div>
      </div>
      <div class="item">
        <div class="label">送样日期:</div>
        <div class="text">{{ parseTime(infoData.sampleDate) }}</div>
      </div>
      <div class="item">
        <div class="label">项目描述:</div>
        <div class="text">{{ infoData.remark }}</div>
      </div>
    </div>
</template>
<script setup>
const props = defineProps({
  infoData: {
    type: Object,
    default: () => {}
  }
})
</script>
<style lang="scss" scoped>
.info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px;
    background: #fff;
    border: 1px solid #e4e7ed;
    border-radius: 8px;

    &:hover {
      box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    }

    .item {
      flex: 0 0 25%;
      display: flex;
      align-items: center;
      flex: 1 1 min(25%, 400px);

      .label {
        margin: 10px;
      }

      .text {
        max-width: 60%;
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏溢出的内容 */
        text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本 */
      }
    }
  }
</style>