<template>
  <div class="chart-container wrapper">
    <h2 class="card-title">环境监测实时数据</h2>
    <div class="env-grid">
      <div class="row1">
        <div class="item">
          <img src="@/assets/jinrun/wendu.png" alt="" />
          <div class="name">温度 25°C</div>
        </div>
        <div class="item">
          <img src="@/assets/jinrun/shidu.png" alt="" />
          <div class="name">湿度 25%RH</div>
        </div>
        <div class="item">
          <img src="@/assets/jinrun/pm25.png" alt="" />
          <div class="name">PM2.5 2.5μg/m³</div>
        </div>
      </div>
      <div class="row2">
        <div class="item">
          <img src="@/assets/jinrun/fengxiang.png" alt="" />
          <div class="name">风向 东</div>
        </div>
        <div class="item">
          <img src="@/assets/jinrun/fengsu.png" alt="" />
          <div class="name">风速 25m/s</div>
        </div>
        <div class="item">
          <img src="@/assets/jinrun/qiya.png" alt="" />
          <div class="name">气压 8Kpa</div>
        </div>
        <div class="item">
          <img src="@/assets/jinrun/pm10.png" alt="" />
          <div class="name">PM10 10μg/m³</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { CheckCircle, ThermometerHalf, Tint, Cloud, LocationArrow, Wind, Speedometer, ChevronUp } from '@vicons/ionicons5';
</script>

<style scoped lang="scss">
.wrapper {
  overflow: visible;
  width: 4.6rem;
  height: 3rem;
  position: relative;
  padding: 0.15rem;
  padding-top: 0.45rem;

  .card-title {
    position: absolute;
    left: 0.25rem;
    top: -0.15rem;
    font-weight: 500;
    font-size: 0.2rem;
    color: #ffffff;
    text-shadow: 0rem 0rem 0rem rgba(5, 38, 68, 0.5);
  }
  width: 100%;
  margin-top: 0.3rem;
  background-image: url("@/assets/jinrun/module-bg.png");
  background-repeat: no-repeat;
}

.env-grid {
  .row1{
    margin-bottom: .2rem;
  }
  .row1,
  .row2 {
    display: flex;
    justify-content: space-between;
    gap: 0.1rem;
    font-weight: 400;
    font-size: 0.16rem;
    color: #ffffff;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .name {
      text-align: center;
    }
    img {
      width: 0.88rem;
      height: 0.71rem;
      margin-bottom: .1rem;
    }
  }
}
</style>