disinfector_vue/src/components/home/Environment.vue

<script lang="ts" setup>
import homeInside from 'assets/images/home/home-inside.svg'
import homeProbe1 from 'assets/images/home/home-probe1.svg'
import homeProbe2 from 'assets/images/home/home-probe2.svg'
import { roundNumber } from 'libs/utils'
import { onMounted } from 'vue'

defineProps({
  envParams: {
    type: Object,
    default: () => {},
  },
})

const imgs: Record<string, any> = {
  inside: homeInside,
  probe1: homeProbe1,
  probe2: homeProbe2,
}
onMounted(() => {
})
</script>

<template>
  <div class="title">
    <img :src="imgs[envParams.type]"> {{ envParams.title }}
  </div>
  <div class="env-row odd">
    <div class="env-row-label ">
      温度
    </div>
    <div class="env-row-value ">
      {{ roundNumber(envParams.temp, 2) }}°C
    </div>
  </div>
  <div class="env-row">
    <div class="env-row-label ">
      相对湿度
    </div>
    <div class="env-row-value">
      {{ roundNumber(envParams.rh, 2) }}%RH
    </div>
  </div>
  <div class="env-row odd">
    <div class="env-row-label ">
      相对饱和度
    </div>
    <div class="env-row-value ">
      {{ roundNumber(envParams.rs, 2) }}%RS
    </div>
  </div>
  <div class="env-row">
    <div class="env-row-label ">
      汽化过氧化氢
    </div>
    <div class="env-row-value ">
      {{ roundNumber(envParams.h2o2, 2) }}ppm
    </div>
  </div>
</template>

<style lang="scss" scoped>
  div{
    font-family: 思源黑体;
    font-size: 18px;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0.06em;
  }
  .title{
    padding-top: 10px;
    padding-left: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 26px;
    margin: 10px;
  }
  .env-row{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: 4.8vw;
    .env-row-label{
      display: flex;
      align-items: center;
      justify-self: start;
      justify-content: center;
      padding-left: 10px;
    }
    .env-row-value{
      display: flex;
      align-items: center;
      justify-self: end;
      justify-content: center;
      padding-right: 10px;
    }
  }
  .odd {
    background: #EFEFEF;
  }
</style>