邓洁 : 右侧鼠标经过效果

2023-12-11 10:59:44 +08:00
parent 07704501be
commit 407898dcc4
6 changed files with 94 additions and 43 deletions
--- a/src/components/content/airInfo/AirInfo.vue
+++ b/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;
--- a/src/components/content/airInfo/childComps/ItemInfo.vue
+++ b/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;
    }
  }
--- a/src/components/content/badGasInfo/BadGasInfo.vue
+++ b/src/components/content/badGasInfo/BadGasInfo.vue
@@ -18,57 +18,64 @@ import GasInfoItem from "./childComps/GasInfoItem.vue";
 const gasInfo = reactive({
  name: "一氧化硫", //气体名称
  max: 100, //最大值
-  value: 10, //传感器值
+  value: 60, //传感器值
  point: 50, //阈值
 });
 const gasInfo2 = reactive({
  name: "一氧化氮", //气体名称
  max: 100, //最大值
-  value: 10, //传感器值
+  value: 40, //传感器值
  point: 10, //阈值
 });
 const gasInfo3 = reactive({
  name: "一氧化碳", //气体名称
  max: 100, //最大值
-  value: 10, //传感器值
+  value: 15, //传感器值
  point: 70, //阈值
 });
 const gasInfo4 = reactive({
  name: "二氧化碳", //气体名称
  max: 100, //最大值
-  value: 10, //传感器值
+  value: 25, //传感器值
  point: 40, //阈值
 });
 const gasInfo5 = reactive({
  name: "硫化氢", //气体名称
  max: 100, //最大值
-  value: 10, //传感器值
+  value: 30, //传感器值
  point: 20, //阈值
 });
 const gasInfo6 = reactive({
  name: "二氧化硫", //气体名称
  max: 100, //最大值
-  value: 10, //传感器值
+  value: 20, //传感器值
  point: 20, //阈值
 });
-setInterval(() => {
-  gasInfo.value = parseInt(Math.random() * 10) * 10;
-  gasInfo2.value = parseInt(Math.random() * 10) * 10;
-  gasInfo3.value = parseInt(Math.random() * 10) * 10;
-  gasInfo4.value = parseInt(Math.random() * 10) * 10;
-  gasInfo6.value = parseInt(Math.random() * 10) * 10;
-  gasInfo5.value = parseInt(Math.random() * 10) * 10;
-}, 2000);
+const props = defineProps({
+  list: Array
+});
+watch(() => props.list, (now, old) => {
+  console.log('传感器 ', now, old)
+  // wpList.value=now
+}, {deep: true});
+// setInterval(() => {
+//   gasInfo.value = parseInt(Math.random() * 10) * 10;
+//   gasInfo2.value = parseInt(Math.random() * 10) * 10;
+//   gasInfo3.value = parseInt(Math.random() * 10) * 10;
+//   gasInfo4.value = parseInt(Math.random() * 10) * 10;
+//   gasInfo6.value = parseInt(Math.random() * 10) * 10;
+//   gasInfo5.value = parseInt(Math.random() * 10) * 10;
+// }, 2000);
 </script>

 <style lang="scss" scoped>
 #bad-gas-info {
  position: absolute;
  z-index: 100;
-  width: 830px;
+  width: 824px;
  height: 621px;
  top: 1441px;
-  right: 62px;
+  right: 72px;
  background-image: url(@/assets/images/badGasInfo/bg.png);
  .title {
    width: 128px;
--- a/src/components/content/windPressure/WindPressureList.vue
+++ b/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>
--- a/src/components/content/windPressure/childComps/WindPressureItem.vue
+++ b/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;
    }
  }