You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
2.1 KiB
101 lines
2.1 KiB
<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>
|