邓洁 : 右侧鼠标经过效果

src/components/content/airInfo/AirInfo.vue

@@ -38,6 +38,9 @@
 import {ref, reactive} from "vue";
 import ItemInfo from "./childComps/ItemInfo.vue";
 
+const props = defineProps({
+  list: Array
+});
 const info = reactive({
   windPId: 0, //编号
   max: 120, //最大值
@@ -62,12 +65,17 @@ const info3 = reactive({
   value: 80, //测量值
   point: 88, //阈值
 });
-setInterval(() => {
-  info.value = parseInt(Math.random() * 10) * 10;
-  info1.value = parseInt(Math.random() * 10) * 10;
-  info2.value = parseInt(Math.random() * 10) * 10;
-  info3.value = parseInt(Math.random() * 10) * 10;
-}, 2000);
+watch(() => props.list, (now, old) => {
+  console.log('传感器 ', now, old)
+  // wpList.value=now
+}, {deep: true});
+// setInterval(() => {
+//   info.value = parseInt(Math.random() * 10) * 10;
+//   info1.value = parseInt(Math.random() * 10) * 10;
+//   info2.value = parseInt(Math.random() * 10) * 10;
+//   info3.value = parseInt(Math.random() * 10) * 10;
+// }, 2000);
+
 </script>
 
 <style lang="scss" scoped>
@@ -79,16 +87,24 @@ setInterval(() => {
   top: 1003px;
   right: 72px;
   background-image: url(@/assets/images/airInfo/bg.png);
-  padding: 43px 20px 30px 32px;
+  padding: 25px 20px 0 21px;
 
   .fan-speed {
     display: flex;
-    height: 40px;
+    //height: 40px;
     font-size: 30px;
     font-family: MicrosoftYaHei;
     color: #ffffff;
     line-height: 40px;
     align-items: center;
+    padding:5px 0 5px 15px;
+    margin-bottom: 25px;
+
+    &:hover {
+      //width: 790px;
+      background: #2E5589;
+      border-radius: 6px;
+    }
 
     img {
       width: 29px;

src/components/content/airInfo/childComps/ItemInfo.vue

@@ -75,19 +75,28 @@ const valueAndUnit = computed(() => params.wp.value + params.unit + "");
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 20px 0px 14px 0px;
+  padding: 5px 14px;
+margin-bottom: 30px;
+  &:hover {
+    background: #2E5589;
+    border-radius: 6px;
+
+    #point {
+      background: #fff !important;
+    }
+  }
 
   .label {
     display: flex;
     align-items: center;
 
-    .wind-icon{
+    .wind-icon {
       height: 36px;
       width: 34px;
     }
 
     span {
-      width:70px;
+      width: 70px;
       height: 37px;
       font-size: 28px;
       font-family: MicrosoftYaHei;
@@ -114,10 +123,12 @@ const valueAndUnit = computed(() => params.wp.value + params.unit + "");
 
     #point {
       position: absolute;
-      height: inherit;
-      width: 10px;
-      background: #60ddde;
-      top: 0px;
+      height: 20px;
+      width: 3px;
+      background: #92D18F;
+      border-radius: 4px;
+      box-shadow: 0 0 10px #92D18F;
+      top: 1px;
       left: 1px;
     }
   }