tft-fe/src/views/qualityManagement/components/defectScatterPlotTotal.vue

<template>
  <div class="bottom-box">
    <div class="bottom-left">
      <ul class="dataTab">
        <div class="title">颗粒数据</div>
        <li v-for="(item, index) in a" :key="index">
          <p class="tabHead">{{ item.name }}</p>
          <p class="tabValue">{{ item.value }}</p>
        </li>
      </ul>
    </div>
    <div class="bottom-right">
      <ul class="dataTab">
        <div class="title">面检数据</div>
        <li v-for="(item, index) in b" :key="index">
          <p class="tabHead">{{ item.name }}</p>
          <p class="tabValue">{{ item.value }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DefectScatterPlot',
  data() {
    return {
      a: [
        { name: 'S', value: 65323 },
        { name: 'M', value: 65323 },
        { name: 'L', value: 65323 },
        { name: 'XL', value: 65323 }
      ],
      b: [
        { name: '气泡', value: 65323 },
        { name: '变形', value: 65323 },
        { name: '纤维', value: 65323 },
        { name: '划伤', value: 65323 },
        { name: '点状缺陷', value: 65323 },
        { name: '结石', value: 65323 },
        { name: '铂金', value: 65323 },
        { name: '结节', value: 65323 },
        { name: '拖尾', value: 65323 },
        { name: 'ADG', value: 65323 },
        { name: '锡缺陷(顶部)', value: 65323 },
        { name: '锡缺陷(底部)', value: 65323 },
        { name: '无法识别', value: 65323 }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.bottom-box {
  overflow-x: auto;
  display: flex;
  .bottom-left,
  .bottom-right {
    display: inline-block;
  }
  .bottom-left {
    width: 290px;
    margin-right: 8px;
    .dataTab {
      li {
        width: 65px;
      }
    }
  }
  .bottom-right {
    width: calc(100% - 300px);
    .dataTab {
      li {
        width: 7.7%;
        min-width: 60px;
      }
    }
  }
}
.title {
  display: inline-block;
  height: 66px;
  width: 30px;
  font-size: 14px;
  line-height: 14px;
  font-weight: 500;
  padding: 5px 8px 0px;
  color: rgba(0, 0, 0, 0.85);
  background-color: #fafafa;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.dataTab {
  display: flex;
  flex-flow: row nowrap;
  li {
    font-size: 14px;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    p {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .tabHead {
      height: 31px;
      background: #e9ebf0;
    }
    .tabHead,
    .tabValue {
      padding: 8px;
    }
    .tabValue {
      height: 35px;
    }
  }
}
</style>