mky-vent-base/src/views/vent/gas/components/board/squareBoard.vue

<template>
  <div class="board">
    <div class="board__label">
      <slot name="label">
        {{ label }}
      </slot>
    </div>
    <div class="board__value">
      <slot name="value">
        <div class="board__value_txt">
          {{ value }}
        </div>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
  // @TODO 对组件的颜色、背景等样式进行修改，符合全局规范

  withDefaults(
    defineProps<{
      /** label（即上侧）内容，可用slot */
      label?: string;
      /** value（即下侧）内容，可用slot */
      value?: string | number;
    }>(),
    {
      label: '',
      value: '',
    }
  );
</script>

<style lang="less" scoped>
  @import '@/design/vent/color.less';

  .board {
    background-image: url('/@/assets/images/vent/gas/square-border.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    width: 162px;
    height: 145px;
    text-align: center;
    color: @white;
    padding: 40px 0;
  }

  .board__value_txt {
    font-size: 24px;
    color: @vent-gas-primary-text;
    font-style: italic;
  }
</style>