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

<template>
  <div class="bottomMiddle">
    <dv-border-box-13>
      <div class="chartsBox">
        <div class="chartItem">
          <nav>
            <p class="left">手术量统计</p>
            <div class="right">
              <p class="active">周</p>
              <p>月</p>
            </div>
          </nav>
          <dv-capsule-chart :config="config" />
        </div>
      </div>
    </dv-border-box-13>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: {
        data: [
          {
            name: '择期手术',
            value: 120,
          },
          {
            name: '急诊手术',
            value: 10,
          },
          {
            name: '门诊手术',
            value: 30,
          },
          {
            name: '无痛手术',
            value: 20,
          },
          {
            name: '日间手术',
            value: 25,
          },
        ],
        showValue: true,
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.bottomMiddle {
  flex-basis: 28%;
  .chartsBox {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    padding-top: 10px;
    box-sizing: border-box;
    .chartItem {
      width: 100%;
      height: 100%;
      flex-shrink: 0;
      padding: 0 20px;
      padding-top: 20px;
      box-sizing: border-box;
      nav {
        display: flex;
        justify-content: space-between;
        .right {
          display: flex;
          .active,
          p:hover {
            color: #87ceeb;
          }
          p {
            margin-right: 10px;
            cursor: pointer;
          }
        }
        p {
          font-size: 24px;
        }
      }
      :deep(.dv-capsule-chart) {
        height: 90%;
        transform: translateX(-10px) translateY(20px);
        .label-column {
          div {
            font-size: 18px;
            margin-top: 7px;
          }
        }
        .capsule-container {
          .capsule-item {
            height: 20px;
            .capsule-item-column {
              height: 18px;
              .capsule-item-value {
                font-size: 18px;
                transform: translateX(110%);
              }
            }
          }
          .unit-label {
            visibility: hidden;
            font-size: 20px;
          }
        }
      }
    }
  }
}
</style>