<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>
