kd-aiot-frontend-vis/src/views/bpm/vis-page/dv-border-content.vue

<script>
export default {
  name: "dv-border-box",
  props: {
    objD: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {}
  },
  created() {
  }
}
</script>

<template>
  <div class="box-content">
    <div class="box-top">
      <span class="box-top-name">{{ objD.titleName }}</span>
      <span class="box-top-unit">{{ objD.titleUnit }}</span>
    </div>
    <div class="box-footer">
      <span class="box-footer-value">{{ objD.value }}</span>
    </div>

  </div>
</template>

<style scoped lang="scss">
.box-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #ffffff;

  .box-top {
    width: 100%;
    height:17%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    .box-top-name {
      display: inline-block;
      font-size: 1rem;
      letter-spacing:2px;
      font-weight: bold;
     // color: #f4d29c;
    }

    .box-top-unit {
      display: inline-block;
      font-size:0.55rem;
      transform: translate(0px, -30%);
      letter-spacing:1px;
      font-weight: bold;
    }
  }

  .box-footer {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    .box-footer-value {
      font-family: 'LCD2B';
      display: inline-block;
      font-size: 2rem;
    }
  }
}
</style>