<template>
  <ul class="user_Overview flex">
    <li class="user_Overview-item" style="color: #f0e728">
      <img src="@/assets/img/co2.png" class="user_Overview_image">
      <p>20</p>
    </li>
    <li class="user_Overview-item" style="color: #c11f6f">
      <img src="@/assets/img/hcho.png" style="width: 90%;margin-top: 60px;" class="user_Overview_image">
      <p>20</p>
    </li>
    <li class="user_Overview-item" style="color: #1196dd">
      <img src="@/assets/img/pm2.5.png" style="width: 80%;margin-top: 70px;" class="user_Overview_image">
      <p>10</p>
    </li>
    <li class="user_Overview-item" style="color: #24bb01">
      <img src="@/assets/img/tvoc.png" style="width: 80%; margin-top: 70px;" class="user_Overview_image">
      <p>20</p>
    </li>
  </ul>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import CapsuleChart from "@/components/datav/capsule-chart";
import { ranking } from "@/api";
import { ElMessage } from "element-plus";

const config = ref({
  showValue: true,
  unit: "次",
});
const data = ref([]);
const getData = () => {
  ranking()
    .then((res) => {
      console.log("右中--报警排名", res);
      if (res.success) {
        data.value = res.data;
      } else {
        ElMessage({
          message: res.msg,
          type: "warning",
        });
      }
    })
    .catch((err) => {
      ElMessage.error(err);
    });
};
getData();
</script>
<style scoped lang="scss">
.user_Overview_image {
  width: 100%;
  /* 或者指定具体的宽度 */
  height: auto;
  /* 自动调整高度 */
  display: block;
  /* 防止文本环绕图片 */
  margin: 50px auto 30px;
  /* 保持原有的外边距 */
}

p {
  text-align: center;
  height: 16px;
  font-size: 30px;
}
</style>
