bigScreen/src/views/pageMonitor/topLeft/index.vue

<template>
  <div class="topLeft">
    <dv-border-box-13>
      <div class="box">
        <dv-border-box-2 class="item">
          <p class="active numFont">80%</p>
          <p>首台准点率</p>
        </dv-border-box-2>
        <dv-border-box-2 class="item">
          <p class="active numFont">86%</p>
          <p>手术间利用率</p>
        </dv-border-box-2>
        <dv-border-box-2 class="item">
          <p>总人数 <span class="numFont">400</span></p>
          <p>进行中 <span class="numFont">180</span></p>
          <p>待进行 <span class="numFont">220</span></p>
        </dv-border-box-2>
        <dv-border-box-2 class="item">
          <p class="active numFont">80个</p>
          <p>急诊患者</p>
        </dv-border-box-2>
      </div>
    </dv-border-box-13>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.topLeft {
  flex-basis: 32%;
  .box {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: space-evenly;
    padding: 2vh;
    box-sizing: border-box;
    .item {
      flex-basis: 45%;
      flex-shrink: 0;
      height: 40%;
      box-sizing: border-box;
      padding: 3%;
      :deep(.border-box-content) {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        font-size: 2.3vh;
        p {
          height: 30%;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          letter-spacing: 0.1vh;
          font-size: 2.4vh;
          span {
            margin-left: 1vh;
            color: aquamarine;
            font-size: 2.6vh;
          }
        }
        .active {
          color: aquamarine;
          font-size: 3.8vh;
          letter-spacing: 0.3vh;
        }
      }
    }
  }
}
</style>