salt-lake-hospital/src/components/LoadCells/LoadCells.vue

<template>
  <!-- <div>数据统计组件</div> -->
  <div class="flex-1 flex-column">
    <div
      :key="item.id"
      class="flex-1 flex-nowrap mt-2 align-center justify-space-between box"
      v-for="item in lists"
    >
      <div class="title">{{ item.name }}</div>
      <div class="number flex-1">
        <div class="num_item">
          <span>1</span>
        </div>
        <div class="num_item">
          <span>5</span>
        </div>
        <div class="num_item" style="padding-right:5%">
          <span>.</span>
        </div>
        <div class="num_item">
          <span>1</span>
        </div>
        <div class="num_item">
          <span>5</span>
        </div>
        <div class="num_item">
          <span>8</span>
        </div>
        <div class="num_item">
          <span>6</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'LoadCells',
  data() {
    return {
      width: '',
      height: '',
      lists: [
        {
          id: 1,
          name: '称重传感器1',
          number: '15.2346',
        },
        {
          id: 2,
          name: '称重传感器2',
          number: '15.3456',
        },
        {
          id: 3,
          name: '称重传感器3',
          number: '14.8946',
        },
        {
          id: 4,
          name: '称重传感器4',
          number: '15.0167',
        },
      ],
    };
  },

  methods: {},
};
</script>

<style lang="stylus" scoped >
@import './LoadCells.styl';
</style>