bxztApp/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/DataField.vue

<template>
  <div class="data-field">
    <img v-if="icon" :src="icon" :alt="label" class="data-field__icon" />
    <span class="data-field__label">{{ label }}</span>
    <span class="data-field__value" :class="valueClass">{{ value }}</span>
    <span v-if="unit" class="data-field__unit" :class="valueClass">{{ unit }}</span>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  label: {
    type: String,
    required: true
  },
  value: {
    type: [String, Number],
    required: true
  },
  unit: {
    type: String,
    default: ''
  },
  icon: {
    type: String,
    default: ''
  },
  colorType: {
    type: String,
    default: '',
    validator: (value) => ['', 'success', 'warning', 'danger'].includes(value)
  }
})

const valueClass = computed(() => {
  return props.colorType ? `text--${props.colorType}` : ''
})
</script>

<style scoped lang="scss">
@use '@/styles/mixins.scss' as *;
@use '../../assets/styles/common.scss' as *;

.data-field {
  display: flex;
  align-items: center;
  gap: vw(8);
  padding: vh(4) vw(10);
  background: url('../../assets/images/DataField/快速感知_bg.png') no-repeat center center;
  background-size: 100% 100%;

  &__icon {
    width: vw(24);
    height: vh(24);
    flex-shrink: 0;
  }

  &__label {
    color: var(--text-white);
    font-size: fs(14);
    // font-family: SourceHanSansCN-Medium, sans-serif;
    font-weight: 500;
    white-space: nowrap;
  }

  &__value {
    color: var(--text-white);
    font-size: fs(15);
    font-family: PingFangSC-Semibold, sans-serif;
    font-weight: 700;
    flex: 1;
    text-align: right;
  }

  &__unit {
    color: var(--text-white);
    font-size: fs(14);
    font-family: PingFangSC-Semibold, sans-serif;
    font-weight: 600;
  }
}
</style>