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 >
.box {
  width: 88%;
  left: 6%;
  position: relative;
}

.title {
  font-size: 17px;
  color: #C8CED5;
  letter-spacing: 2px;
}

.number {
  height: 80%;
  position: absolute;
  right: 0;
  bottom: 0;
}

.number .num_item {
  background: url('~assets/cz-bg.png') no-repeat bottom left;
  background-size: auto 90%;
  position: relative;
  top: -6px;
  left: 2px;
}

.number span {
  display: inline-block;
  position: relative;
  top: -8px;
  left: 2px;
  font-size: 38px;
  font-style: oblique;
  font-weight: 400;
  letter-spacing: 18px;
  height: 100%;
}

@media (max-width: 1500px) {
  .title {
    font-size: 12px;
    letter-spacing: 0;
  }

  .number span {
    top: -8px;
    font-size: 23px;
    letter-spacing: 16px;
  }
}
</style>