<script>
export default {
  name: "HiddenDangerTotal",
  props: {
    number: {
      type: [String, Number],
      default: "",
    },
    label: {
      type: String,
      default: "",
    },
    unit: {
      type: String,
      default: "",
    },
  },
};
</script>

<template>
  <div class="hidden-danger-total">
    <div class="hidden-danger-total__number">
     <div style="display: flex; justify-content: space-around; align-items: center; width: 104px; margin-bottom: 5px;">
      <linear-text :text="number" fontSize="22px" style="display: inline-block; margin-bottom: 15px; margin-left: 16px; width: 100%; text-align: left;"></linear-text>
      <linear-text
        :text="label"
        fontSize="14px"
        style=" display: inline-block; "
      ></linear-text>
     </div>
    </div>
    <linear-text
      :text="unit"
      fontSize="14px"
      style="display: inline-block; margin-top: 10px; "
    ></linear-text>
  </div>
</template>

<style scoped lang="less">
.hidden-danger-total {
  background: url("../assets/images/bg003.svg") center no-repeat;
  width: 166px;
  height: 35px;
  display: flex;
  .hidden-danger-total__number {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-right: 10px;
  }
}
</style>
