邓洁 : 绑定首页实时数据

src/components/content/airInfo/AirInfo.vue

@@ -1,42 +1,43 @@
 <template>
   <div id="air-info">
     <div class="fan-speed">
-      <img src="/images/airInfo/fan-v-icon.png" alt="" />
+      <img src="@/assets/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 class="output-fan"><span>出风：13m/s</span></div>
       </div>
     </div>
     <item-info
-      :wp="info"
-      icon="/images/airInfo/o2-icon.png"
-      name="氧气"
-      unit="%"
+        :wp="info"
+        icon="o2-icon.png"
+        name="氧气"
+        unit="%"
     />
     <item-info
-      :wp="info1"
-      icon="/images/airInfo/tempture-icon.png"
-      name="温度"
-      unit=".c"
+        :wp="info1"
+        icon="tempture-icon.png"
+        name="温度"
+        unit=".c"
     />
     <item-info
-      :wp="info2"
-      icon="/images/airInfo/water-icon.png"
-      name="湿度"
-      unit="%"
+        :wp="info2"
+        icon="water-icon.png"
+        name="湿度"
+        unit="%"
     />
     <item-info
-      :wp="info3"
-      icon="/images/airInfo/dust-icon.png"
-      name="粉尘"
-      unit="mg/m3"
+        :wp="info3"
+        icon="dust-icon.png"
+        name="粉尘"
+        unit="mg/m3"
     />
   </div>
 </template>
 
 <script setup>
-import { ref, reactive } from "vue";
+import {ref, reactive} from "vue";
 import ItemInfo from "./childComps/ItemInfo.vue";
+
 const info = reactive({
   windPId: 0, //编号
   max: 120, //最大值
@@ -77,11 +78,9 @@ setInterval(() => {
   height: 400px;
   top: 1003px;
   right: 72px;
-  background-image: url(/images/airInfo/bg.png);
-  background-position: center center;
-  background-size: 100%;
-  background-repeat: no-repeat;
+  background-image: url(@/assets/images/airInfo/bg.png);
   padding: 43px 20px 30px 32px;
+
   .fan-speed {
     display: flex;
     height: 40px;
@@ -90,16 +89,23 @@ setInterval(() => {
     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;
+        margin: 0 26px;
+
+        > span:last-child {
+          margin-left: 30px;
+        }
       }
     }
   }