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

src/components/content/transducerList/TransducerList.vue

@@ -0,0 +1,25 @@
+<template>
+  <div id="transducer-list">
+    <transducer-item v-for="(item, key) in 6" :isFirst="key === 0" />
+  </div>
+</template>
+
+<script setup>
+import TransducerItem from "./childComps/TransducerItem.vue";
+</script>
+
+<style lang="scss" scoped>
+#transducer-list {
+  color: rgb(226, 26, 26);
+  position: absolute;
+  top: 744px;
+  left: 70px;
+  width: 826px;
+  height: 928px;
+  background-image: url(../../../assets/images/transducer/bg.png);
+  background-position: center center;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  padding: 30px;
+}
+</style>

src/components/content/transducerList/childComps/TransducerItem.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="transducer-item" :class="{ isFirst: isFirst }">
+    <img src="../../../../assets/images/transducer/transducer.png" />
+    <div class="info">
+      <div class="name-state">
+        <div class="name">一号变频器</div>
+        <div class="state">
+          <img src="../../../../assets/images/transducer/greenLight.png" />
+          <span>正常</span>
+        </div>
+      </div>
+      <div class="one-item">
+        <div>A项电压：21V</div>
+        <div>B项电压：21V</div>
+        <div>C项电压：21V</div>
+      </div>
+      <div class="other-item" v-if="false">
+        <div>
+          <img
+            src="../../../../assets/images/transducer/icon2.png"
+            alt=""
+          /><span>给定频率：223HZ</span>
+        </div>
+        <div>
+          <img
+            src="../../../../assets/images/transducer/icon2.png"
+            alt=""
+          /><span>反馈频率：23HZ</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, defineProps } from "vue";
+defineProps({
+  isFirst: Boolean,
+});
+</script>
+
+<style lang="scss" scoped>
+.transducer-item {
+  border-top: rgba(107, 163, 237, 0.4) solid 2px;
+  height: 155px;
+  display: flex;
+  align-items: center;
+
+  & > img {
+    height: 70px;
+    width: 70px;
+  }
+  .info {
+    // border: white solid 1px;
+    padding: 2px 5px;
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    .name-state {
+      height: 40px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-family: MicrosoftYaHei;
+      padding: 0px 20px 0px 20px;
+      .name {
+        width: 155px;
+        height: 40px;
+        font-size: 30px;
+        font-family: MicrosoftYaHei, MicrosoftYaHei;
+        font-weight: bold;
+        color: #38cafb;
+        line-height: 40px;
+      }
+      .state {
+        width: 80px;
+        height: 31px;
+        font-size: 24px;
+        font-family: MicrosoftYaHei, MicrosoftYaHei;
+        font-weight: bold;
+        color: #19d172;
+        line-height: 31px;
+        img {
+          height: 20px;
+          margin-right: 5px;
+        }
+      }
+    }
+    .one-item,
+    .other-item {
+      height: 47px;
+      display: flex;
+      font-family: MicrosoftYaHei;
+      justify-content: space-between;
+      color: white;
+      align-items: center;
+      font-size: 28px;
+      font-family: MicrosoftYaHei, MicrosoftYaHei;
+      line-height: 37px;
+      padding: 0px 0px 0px 24px;
+    }
+  }
+}
+.isFirst {
+  border: none;
+  height: calc(155px - 30px);
+}
+</style>