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

src/components/content/windPressure/WindPressureList.vue

@@ -0,0 +1,99 @@
+<template>
+  <div id="wind-pressure">
+    <div class="name">风压</div>
+    <div class="list">
+      <wind-pressure-item v-for="item in wpList" :wp="item" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import WindPressureItem from "./childComps/WindPressureItem.vue";
+const wpList = [
+  {
+    windPId: 1, //编号
+    max: 120, //最大值
+    value: 40, //测量值
+    point: 60, //阈值
+  },
+  {
+    windPId: 1, //编号
+    max: 120, //最大值
+    value: 66, //测量值
+    point: 60, //阈值
+  },
+  {
+    windPId: 2, //编号
+    max: 120, //最大值
+    value: 70, //测量值
+    point: 50, //阈值
+  },
+  {
+    windPId: 3, //编号
+    max: 120, //最大值
+    value: 90, //测量值
+    point: 60, //阈值
+  },
+  {
+    windPId: 4, //编号
+    max: 120, //最大值
+    value: 40, //测量值
+    point: 30, //阈值
+  },
+  {
+    windPId: 5, //编号
+    max: 120, //最大值
+    value: 30, //测量值
+    point: 50, //阈值
+  },
+  {
+    windPId: 6, //编号
+    max: 120, //最大值
+    value: 20, //测量值
+    point: 30, //阈值
+  },
+  {
+    windPId: 7, //编号
+    max: 120, //最大值
+    value: 20, //测量值
+    point: 30, //阈值
+  },
+  {
+    windPId: 8, //编号
+    max: 120, //最大值
+    value: 120, //测量值
+    point: 80, //阈值
+  },
+  {
+    windPId: 9, //编号
+    max: 120, //最大值
+    value: 99, //测量值
+    point: 70, //阈值
+  },
+];
+</script>
+
+<style lang="scss" scoped>
+#wind-pressure {
+  width: 830px;
+  height: 779px;
+  position: absolute;
+  top: 185px;
+  right: 68px;
+  background-image: url(../../../assets/images/windPressure/bg.png);
+  background-position: center center;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  padding-top: 22px;
+  .name {
+    width: 64px;
+    height: 42px;
+    font-size: 32px;
+    font-family: MicrosoftYaHei, MicrosoftYaHei;
+    font-weight: bold;
+    color: #38cafb;
+    line-height: 42px;
+    margin-left: 62px;
+  }
+}
+</style>