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.
96 lines
2.6 KiB
96 lines
2.6 KiB
<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>
|
|
|