唐润平：UI显示面板开发起步版

src/components/content/airInfo/AirInfo.vue

@@ -0,0 +1,102 @@
+<template>
+  <div id="air-info">
+    <div class="fan-speed">
+      <img src="../../../../public/images/airInfo/fan-v-icon.png" alt="" />
+      <div class="fan-info">
+        <div class="input-fan"><span>风速</span><span>进风：13m/s</span></div>
+        <div class="output-fan"><span>风速</span><span>出风：13m/s</span></div>
+      </div>
+    </div>
+    unit="%"
+    <item-info
+      :wp="info"
+      icon="/images/airInfo/o2-icon.png"
+      name="氧气"
+      unit="%"
+    />
+    <item-info
+      :wp="info1"
+      icon="/images/airInfo/tempture-icon.png"
+      name="温度"
+      unit=".c"
+    />
+    <item-info
+      :wp="info2"
+      icon="/images/airInfo/water-icon.png"
+      name="湿度"
+      unit="%"
+    />
+    <item-info
+      :wp="info3"
+      icon="/images/airInfo/dust-icon.png"
+      name="粉尘"
+      unit="mg/m3"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import ItemInfo from "./childComps/ItemInfo.vue";
+const info = reactive({
+  windPId: 0, //编号
+  max: 120, //最大值
+  value: 70, //测量值
+  point: 60, //阈值
+});
+const info1 = reactive({
+  windPId: 0, //编号
+  max: 120, //最大值
+  value: 60, //测量值
+  point: 70, //阈值
+});
+const info2 = reactive({
+  windPId: 0, //编号
+  max: 120, //最大值
+  value: 90, //测量值
+  point: 100, //阈值
+});
+const info3 = reactive({
+  windPId: 0, //编号
+  max: 120, //最大值
+  value: 80, //测量值
+  point: 88, //阈值
+});
+</script>
+
+<style lang="scss" scoped>
+#air-info {
+  position: absolute;
+  z-index: 100;
+  width: 824px;
+  height: 400px;
+  top: 1003px;
+  right: 72px;
+  background-image: url(/images/airInfo/bg.png);
+  background-position: center center;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  padding: 43px 20px 30px 32px;
+  .fan-speed {
+    display: flex;
+    height: 40px;
+    font-size: 30px;
+    font-family: MicrosoftYaHei;
+    color: #ffffff;
+    line-height: 40px;
+    align-items: center;
+    img {
+      width: 29px;
+      height: 34px;
+    }
+    .fan-info {
+      flex: 1;
+      display: flex;
+      justify-content: space-between;
+      .input-fan {
+        margin: 0px 13px;
+      }
+    }
+  }
+}
+</style>