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.
97 lines
2.6 KiB
97 lines
2.6 KiB
1 month ago
|
<template>
|
||
|
|
<section class="p-12px">
|
||
|
|
<section class="flex flex-col gap-16px">
|
||
|
|
<section class="flex gap-8px flex-items-center">
|
||
|
|
<section class="p-4px font-bold" style="background-color: rgba(255, 255, 255, 0.1)">
|
||
|
|
一氧化碳
|
||
|
|
</section>
|
||
|
|
<section class="flex gap-4px flex-items-center color-#56CA00">
|
||
|
|
<Icon icon="svg-icon:wave-arrow-down" :size="18" />
|
||
|
|
<count-to
|
||
|
|
:start-val="0"
|
||
|
|
:end-val="0.5"
|
||
|
|
:duration="2000"
|
||
|
|
:options="{ decimal: 2 }"
|
||
|
|
suffix="%"
|
||
|
|
/>
|
||
|
|
</section>
|
||
|
|
</section>
|
||
|
|
<section class="flex gap-8px flex-items-center">
|
||
|
|
<section class="p-4px font-bold" style="background-color: rgba(255, 255, 255, 0.1)">
|
||
|
|
二氧化碳
|
||
|
|
</section>
|
||
|
|
<section class="flex gap-4px flex-items-center color-#FFE700">
|
||
|
|
<Icon icon="svg-icon:wave-arrow-up" color="red" :size="18" />
|
||
|
|
<count-to
|
||
|
|
:start-val="0"
|
||
|
|
:end-val="0.5"
|
||
|
|
:duration="2000"
|
||
|
|
:options="{ decimal: 2 }"
|
||
|
|
suffix="%"
|
||
|
|
/>
|
||
|
|
</section>
|
||
|
|
</section>
|
||
|
|
</section>
|
||
|
|
<section class="mt-16px pt-16px qulity" style="border-top: 1px solid rgba(255, 255, 255, 0.15)">
|
||
|
|
<section class="flex flex-col gap-8px">
|
||
|
|
<span> 空气压力 </span>
|
||
|
|
<count-to
|
||
|
|
:start-val="0"
|
||
|
|
:end-val="1000"
|
||
|
|
:duration="2000"
|
||
|
|
:options="{ decimal: 2 }"
|
||
|
|
suffix="pa"
|
||
|
|
class="font-bold"
|
||
|
|
/>
|
||
|
|
</section>
|
||
|
|
<section class="flex flex-col gap-12px">
|
||
|
|
<section> 温度 </section>
|
||
|
|
<count-to
|
||
|
|
:start-val="0"
|
||
|
|
:end-val="29"
|
||
|
|
:duration="2000"
|
||
|
|
:options="{ decimal: 2 }"
|
||
|
|
suffix="℃"
|
||
|
|
class="font-bold"
|
||
|
|
/>
|
||
|
|
</section>
|
||
|
|
<section class="flex flex-col gap-12px">
|
||
|
|
<section> 风速 </section>
|
||
|
|
<count-to
|
||
|
|
:start-val="0"
|
||
|
|
:end-val="0.5"
|
||
|
|
:duration="2000"
|
||
|
|
:options="{ decimal: 2 }"
|
||
|
|
suffix="m/s"
|
||
|
|
class="font-bold"
|
||
|
|
/>
|
||
|
|
</section>
|
||
|
|
<section class="flex flex-col gap-12px">
|
||
|
|
<section> 温度 </section>
|
||
|
|
<count-to
|
||
|
|
:start-val="0"
|
||
|
|
:end-val="0.5"
|
||
|
|
:duration="2000"
|
||
|
|
:options="{ decimal: 2 }"
|
||
|
|
suffix="%"
|
||
|
|
class="font-bold"
|
||
|
|
/>
|
||
|
|
</section>
|
||
|
|
</section>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.qulity {
|
||
|
|
display: grid;
|
||
|
|
grid-template-rows: 1fr 1fr;
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
grid-gap: 16px;
|
||
|
|
place-items: center center;
|
||
|
|
}
|
||
|
|
</style>
|