邓洁 : 右侧鼠标经过效果

src/components/content/windPressure/WindPressureList.vue

@@ -9,6 +9,7 @@
 
 <script setup>
 import WindPressureItem from "./childComps/WindPressureItem.vue";
+
 const props = defineProps({
   list: Array
 });
@@ -65,8 +66,8 @@ const wpList = ref([
   },
 ]);
 watch(() => props.list, (now, old) => {
-  console.log('风压',now,old)
-  wpList.value=now
+  console.log('风压', now, old)
+  wpList.value = now
 }, {deep: true});
 // setInterval(() => {
 //   wpList.forEach((item) => {
@@ -83,7 +84,8 @@ watch(() => props.list, (now, old) => {
   top: 185px;
   right: 68px;
   background-image: url(../../../assets/images/windPressure/bg.png);
-  padding-top: 22px;
+  padding: 22px 17px 0 23px;
+
   .name {
     width: 64px;
     height: 42px;
@@ -93,6 +95,7 @@ watch(() => props.list, (now, old) => {
     color: #38cafb;
     line-height: 42px;
     margin-left: 62px;
+    margin-bottom: 38px;
   }
 }
 </style>

src/components/content/windPressure/childComps/WindPressureItem.vue

@@ -1,9 +1,8 @@
 <template>
-  <div id="wind-pressure-item">
+  <div id="wind-pressure-item" :class="{ abnormal:isWaring }">
     <div class="label">
-      <img src="../../../../assets/images/windPressure/icon.png" alt=""/><span
-    >{{ index }}号风压</span
-    >
+      <img src="../../../../assets/images/windPressure/icon.png" alt=""/>
+      <span>{{ index }}号风压</span>
     </div>
     <div class="container" ref="length">
       <div class="value" ref="value"></div>
@@ -64,11 +63,24 @@ let isWaring = computed(() => {
 </script>
 
 <style lang="scss" scoped>
+.abnormal:hover{
+  background: #9C5252!important;
+  border-radius: 6px;
+  #point {
+    background: #fff!important;
+  }
+}
 #wind-pressure-item {
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 20px 0px 14px 33px;
+  padding: 6px 38px 7px 10px;
+  margin-bottom: 17px;
+
+  &:hover {
+    background: #2E5589;
+    border-radius: 6px;
+  }
 
   &:last-child {
     .label {
@@ -117,10 +129,12 @@ let isWaring = computed(() => {
 
     #point {
       position: absolute;
-      height: inherit;
-      width: 10px;
+      height: 20px;
       background: #60ddde;
-      top: 0px;
+      width: 3px;
+      border-radius: 4px;
+      box-shadow: 0 0 10px #92D18F;
+      top: 1px;
       left: 1px;
     }
   }