解决冲突

src/views/sys/login/Login.vue

@@ -1,6 +1,9 @@
 <template>
   <!-- <AdaptiveContainer :options="{ width: 1920, height: 1080 }" style="overflow-y: hidden"> -->
-  <div class="login-container" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%">
+  <div
+    class="login-container"
+    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
+  >
     <div class="login-bg"></div>
     <span class="-enter-x xl:hidden">
       <AppLogo :alwaysShowTitle="true" />
@@ -56,7 +59,7 @@
       background-color: @dark-bg;
 
       &::before {
-        background-image: url(/@/assets/svg/login-bg-dark.svg);
+        background-image: url('/@/assets/svg/login-bg-dark.svg');
       }
 
       .@{ventSpace}-input,
@@ -85,85 +88,92 @@
   }
 
   .login-container {
+    position: relative;
     width: 100vw;
     height: 100%;
-    background: linear-gradient(to bottom, #000c37, #001e63);
     padding: 0 !important;
-    position: relative;
+    background: linear-gradient(to bottom, #000c37, #001e63);
+
     &::before {
       content: '';
       position: absolute;
+      top: 0;
+      left: 0;
       width: 100%;
       height: 100%;
-      top: 0px;
-      left: 0;
       background-image: url('/@/assets/images/vent/login/bg.png');
       background-size: cover;
     }
+
     .login-bg {
       position: absolute;
-      width: 100%;
-      height: 100%;
       top: 0;
       left: 0;
+      width: 100%;
+      height: 100%;
       background: linear-gradient(to bottom, #000c3766, #001e6366);
     }
+
     .top-header {
-      width: 100%;
       display: flex;
+      position: relative;
       flex-direction: column;
-      justify-content: center;
       align-items: center;
-      position: relative;
+      justify-content: center;
+      width: 100%;
       // padding-top: 70px;
       .top-bg {
         width: 100%;
         height: 129px;
-
         background-image: url('/@/assets/images/vent/login/top.png');
         background-size: 100% auto;
       }
+
       .login-icon {
         position: relative;
+        top: 10px;
         width: 237px;
         height: 274px;
-        top: 10px;
         background-image: url('/@/assets/images/vent/login/icon.png');
       }
+
       .title {
         position: absolute;
         top: 78px;
-        color: rgb(224, 224, 224);
+        color: rgb(224 224 224);
         font-size: 30px;
         text-align: center;
-        text-shadow: 1px 1px 1px #fff, -1px -1px 1px #000;
+        text-shadow:
+          1px 1px 1px #fff,
+          -1px -1px 1px #000;
       }
     }
 
     .bottom {
-      width: 100%;
-      height: 118px;
       position: fixed;
       bottom: 0;
       left: 0;
+      width: 100%;
+      height: 118px;
       background-image: url('/@/assets/images/vent/login/down.png');
       background-size: 100% auto;
     }
 
     .center {
-      width: 100%;
-      height: calc(100% - 540px);
       display: flex;
+      position: relative;
       flex-direction: column;
       align-items: center;
-      position: relative;
       justify-content: center;
+      width: 100%;
+      height: calc(100% - 540px);
     }
   }
 
   .@{prefix-cls} {
     min-height: 100%;
     overflow: hidden;
+
     @media (max-width: @screen-xl) {
       background-color: #293146;
 
@@ -173,17 +183,18 @@
     }
 
     &::before {
+      content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       margin-left: -48%;
+      background-repeat: no-repeat;
       // background-image: url(/@/assets/svg/login-bg.svg);
       background-position: 100%;
-      background-repeat: no-repeat;
       background-size: auto 100%;
-      content: '';
+
       @media (max-width: @screen-xl) {
         display: none;
       }
@@ -195,8 +206,8 @@
       height: 30px;
 
       &__title {
-        font-size: 16px;
         color: #fff;
+        font-size: 16px;
       }
 
       img {
@@ -211,8 +222,8 @@
         height: 80px;
 
         &__title {
-          font-size: 24px;
           color: #fff;
+          font-size: 24px;
         }
 
         img {
@@ -223,8 +234,8 @@
 
     &-sign-in-way {
       .anticon {
-        font-size: 22px;
         color: #888;
+        font-size: 22px;
         cursor: pointer;
 
         &:hover {
@@ -258,8 +269,8 @@
     }
 
     .@{ventSpace}-divider-inner-text {
-      font-size: 12px;
       color: @text-color-secondary;
+      font-size: 12px;
     }
   }
 </style>

src/views/vent/common/basicCard1.vue

@@ -10,75 +10,74 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch, defineProps } from 'vue'
+  import { ref, reactive, watch, defineProps } from 'vue';
 
-let props = defineProps({
-  cardContentList1: {
-    type: Array,
-    default: () => {
-      return [];
+  let props = defineProps({
+    cardContentList1: {
+      type: Array,
+      default: () => {
+        return [];
+      },
     },
-  },
-})
+  });
 
-let cardContentLists1 = ref<any[]>([]);
+  let cardContentLists1 = ref<any[]>([]);
 
-watch(
-  () => props.cardContentList1,
-  (newV, oldV) => {
-    console.log(newV, '粉尘卡片-----');
-    cardContentLists1.value = newV;
-  },
-  { immediate: true, deep: true },
-);
+  watch(
+    () => props.cardContentList1,
+    (newV, oldV) => {
+      console.log(newV, '粉尘卡片-----');
+      cardContentLists1.value = newV;
+    },
+    { immediate: true, deep: true },
+  );
 </script>
 
 <style lang="less" scoped>
-@font-face {
-  font-family: douyuFont;
-  src: url('../../../assets/font/douyuFont.otf');
-}
-
-.basicCard1 {
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 100%;
-  background-color: rgb(41 49 53 / 80%);
+  @font-face {
+    font-family: douyuFont;
+    src: url('../../../assets/font/douyuFont.otf');
+  }
 
-  .card-box {
+  .basicCard1 {
     display: flex;
-    flex: 1;
+    position: relative;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
+    width: 100%;
     height: 100%;
+    background-color: rgb(41 49 53 / 80%);
 
-    .card-box-item {
-      position: relative;
-      width: 261px;
-      height: 102px;
-      background: url('../../../assets/images/workPlaceWarn/dust-nd.png') no-repeat center;
-      background-size: 100% 100%;
+    .card-box {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
 
-      .box-item-label {
-        position: absolute;
-        top: 20px;
-        left: 115px;
-        color: #fff;
-      }
+      .card-box-item {
+        position: relative;
+        width: 261px;
+        height: 102px;
+        background: url('../../../assets/images/workPlaceWarn/dust-nd.png') no-repeat center;
+        background-size: 100% 100%;
+
+        .box-item-label {
+          position: absolute;
+          top: 20px;
+          left: 115px;
+          color: #fff;
+        }
 
-      .box-item-val {
-        position: absolute;
-        top: 60px;
-        left: 150px;
-        color: #1fb3f7;
-        font-family: douyuFont;
-        font-size: 20px;
+        .box-item-val {
+          position: absolute;
+          top: 60px;
+          left: 150px;
+          color: #1fb3f7;
+          font-family: douyuFont;
+          font-size: 20px;
+        }
       }
     }
-
   }
-}
 </style>

src/views/vent/common/basicCard3.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="basicCard3">
-    <div :class="activeIndex == index ? 'card3-box1' : 'card3-box'" v-for="(item, index) in card3Lists" :key="index"
-      @click="toggleChange(index, item)">
+    <div
+      :class="activeIndex == index ? 'card3-box1' : 'card3-box'"
+      v-for="(item, index) in card3Lists"
+      :key="index"
+      @click="toggleChange(index, item)"
+    >
       <div class="card3-box-title">{{ item.title }}</div>
       <div class="card3-box-nd">
         <span class="card3-box-label">{{ item.ndLabel }}</span>
@@ -25,262 +29,259 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, defineProps, watch,defineEmits } from 'vue'
-
-let props = defineProps({
-  card3List: {
-    type: Array,
-    default: () => {
-      return []
-    }
-  },
-  //风险等级
-  warningLevel: {
-    type: String,
-    default: () => {
-      return ''
-    }
-  }
-
-})
-let activeIndex = ref(0)
-let card3Lists = ref<any[]>([])
+  import { ref, reactive, defineProps, watch, defineEmits } from 'vue';
+
+  let props = defineProps({
+    card3List: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    //风险等级
+    warningLevel: {
+      type: String,
+      default: () => {
+        return '';
+      },
+    },
+  });
+  let activeIndex = ref(0);
+  let card3Lists = ref<any[]>([]);
   const emit = defineEmits(['toggleChange']);
 
-//选项切换
-function toggleChange(index, item) {
-  console.log(index, '当前激活索引-------')
-  activeIndex.value = index
-  emit('toggleChange', item.title)
-}
-
-watch(() => props.card3List, (newV, oldV) => {
-  console.log(newV, 'newV---------')
-  card3Lists.value = newV
-}, {
-  immediate: true,
-  deep: true
-})
+  //选项切换
+  function toggleChange(index, item) {
+    console.log(index, '当前激活索引-------');
+    activeIndex.value = index;
+    emit('toggleChange', item.title);
+  }
 
+  watch(
+    () => props.card3List,
+    (newV, oldV) => {
+      console.log(newV, 'newV---------');
+      card3Lists.value = newV;
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
 </script>
 
 <style lang="less" scoped>
-@font-face {
-  font-family: douyuFont;
-  src: url('../../../assets/font/douyuFont.otf');
-}
-
-.basicCard3 {
-  display: flex;
-  position: relative;
-  box-sizing: border-box;
-  align-items: flex-end;
-  justify-content: flex-start;
-  width: 100%;
-  height: 100%;
-  padding-bottom: 15px;
-  overflow-x: auto;
-  transform: scaleY(-1);
+  @font-face {
+    font-family: douyuFont;
+    src: url('../../../assets/font/douyuFont.otf');
+  }
 
-  .card3-box {
+  .basicCard3 {
+    display: flex;
     position: relative;
-    flex-shrink: 0;
-    width: 352px;
-    height: 202px;
-    margin-right: 20px;
+    box-sizing: border-box;
+    align-items: flex-end;
+    justify-content: flex-start;
+    width: 100%;
+    height: 100%;
+    padding-bottom: 15px;
+    overflow-x: auto;
     transform: scaleY(-1);
-    background: url('../../../assets/images/workPlaceWarn/composite.png') no-repeat center;
-    background-size: 100% 100%;
-
-    &:last-child {
-      margin-right: 0;
-    }
-
-    .card3-box-title {
-      position: absolute;
-      top: 11px;
-      width: 100%;
-      color: #fff;
-      font-size: 18px;
-      text-align: center;
-    }
 
-    .card3-box-nd {
-      display: flex;
-      position: absolute;
-      top: 55px;
-      left: 50%;
-      box-sizing: border-box;
-      align-items: center;
-      justify-content: space-between;
-      width: 312px;
-      height: 34px;
-      padding: 0 10px;
-      transform: translate(-50%, 0);
-      background: url('../../../assets/images/workPlaceWarn/composite2.png') no-repeat center;
+    .card3-box {
+      position: relative;
+      flex-shrink: 0;
+      width: 352px;
+      height: 202px;
+      margin-right: 20px;
+      transform: scaleY(-1);
+      background: url('../../../assets/images/workPlaceWarn/composite.png') no-repeat center;
       background-size: 100% 100%;
-    }
 
-    .card3-box-time {
-      display: flex;
-      position: absolute;
-      top: 100px;
-      left: 50%;
-      box-sizing: border-box;
-      align-items: center;
-      justify-content: space-between;
-      width: 312px;
-      height: 34px;
-      padding: 0 10px;
-      transform: translate(-50%, 0);
-      background: url('../../../assets/images/workPlaceWarn/composite2.png') no-repeat center;
-      background-size: 100% 100%;
-    }
-
-    .card3-box-address {
-      display: flex;
-      position: absolute;
-      top: 145px;
-      left: 50%;
-      box-sizing: border-box;
-      align-items: center;
-      justify-content: space-between;
-      width: 312px;
-      height: 34px;
-      padding: 0 10px;
-      transform: translate(-50%, 0);
-      background: url('../../../assets/images/workPlaceWarn/composite2.png') no-repeat center;
-      background-size: 100% 100%;
-    }
-
-    .card3-box-warn {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 75px;
-      height: 75px;
+      &:last-child {
+        margin-right: 0;
+      }
 
-      .card3-box-item {
+      .card3-box-title {
         position: absolute;
-        top: 52%;
-        left: 7%;
-        transform: rotate(45deg);
+        top: 11px;
+        width: 100%;
         color: #fff;
+        font-size: 18px;
+        text-align: center;
       }
-    }
-
-    .card3-box-label {
-      width: 40px;
-      color: #fff;
-    }
 
-    .card3-box-val {
-      color: #0097db;
-      font-family: douyuFont;
+      .card3-box-nd {
+        display: flex;
+        position: absolute;
+        top: 55px;
+        left: 50%;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: space-between;
+        width: 312px;
+        height: 34px;
+        padding: 0 10px;
+        transform: translate(-50%, 0);
+        background: url('../../../assets/images/workPlaceWarn/composite2.png') no-repeat center;
+        background-size: 100% 100%;
+      }
 
-    }
+      .card3-box-time {
+        display: flex;
+        position: absolute;
+        top: 100px;
+        left: 50%;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: space-between;
+        width: 312px;
+        height: 34px;
+        padding: 0 10px;
+        transform: translate(-50%, 0);
+        background: url('../../../assets/images/workPlaceWarn/composite2.png') no-repeat center;
+        background-size: 100% 100%;
+      }
 
-  }
+      .card3-box-address {
+        display: flex;
+        position: absolute;
+        top: 145px;
+        left: 50%;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: space-between;
+        width: 312px;
+        height: 34px;
+        padding: 0 10px;
+        transform: translate(-50%, 0);
+        background: url('../../../assets/images/workPlaceWarn/composite2.png') no-repeat center;
+        background-size: 100% 100%;
+      }
 
-  .card3-box1 {
-    position: relative;
-    flex-shrink: 0;
-    width: 352px;
-    height: 230px;
-    margin-right: 20px;
-    transform: scaleY(-1);
-    background: url('../../../assets/images/workPlaceWarn/composite1.png') no-repeat center;
-    background-size: 100% 100%;
+      .card3-box-warn {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 75px;
+        height: 75px;
+
+        .card3-box-item {
+          position: absolute;
+          top: 52%;
+          left: 7%;
+          transform: rotate(45deg);
+          color: #fff;
+        }
+      }
 
-    &:last-child {
-      margin-right: 0;
-    }
+      .card3-box-label {
+        width: 40px;
+        color: #fff;
+      }
 
-    .card3-box-title {
-      position: absolute;
-      top: 11px;
-      width: 100%;
-      color: #fff;
-      font-size: 18px;
-      text-align: center;
+      .card3-box-val {
+        color: #0097db;
+        font-family: douyuFont;
+      }
     }
 
-    .card3-box-nd {
-      display: flex;
-      position: absolute;
-      top: 55px;
-      left: 50%;
-      box-sizing: border-box;
-      align-items: center;
-      justify-content: space-between;
-      width: 312px;
-      height: 34px;
-      padding: 0 10px;
-      transform: translate(-50%, 0);
-      background: url('../../../assets/images/workPlaceWarn/composite2.png') no-repeat center;
+    .card3-box1 {
+      position: relative;
+      flex-shrink: 0;
+      width: 352px;
+      height: 230px;
+      margin-right: 20px;
+      transform: scaleY(-1);
+      background: url('../../../assets/images/workPlaceWarn/composite1.png') no-repeat center;
       background-size: 100% 100%;
-    }
 
-    .card3-box-time {
-      display: flex;
-      position: absolute;
-      top: 100px;
-      left: 50%;
-      box-sizing: border-box;
-      align-items: center;
-      justify-content: space-between;
-      width: 312px;
-      height: 34px;
-      padding: 0 10px;
-      transform: translate(-50%, 0);
-      background: url('../../../assets/images/workPlaceWarn/composite2.png') no-repeat center;
-      background-size: 100% 100%;
-    }
+      &:last-child {
+        margin-right: 0;
+      }
 
-    .card3-box-address {
-      display: flex;
-      position: absolute;
-      top: 145px;
-      left: 50%;
-      box-sizing: border-box;
-      align-items: center;
-      justify-content: space-between;
-      width: 312px;
-      height: 34px;
-      padding: 0 10px;
-      transform: translate(-50%, 0);
-      background: url('../../../assets/images/workPlaceWarn/composite2.png') no-repeat center;
-      background-size: 100% 100%;
-    }
+      .card3-box-title {
+        position: absolute;
+        top: 11px;
+        width: 100%;
+        color: #fff;
+        font-size: 18px;
+        text-align: center;
+      }
 
-    .card3-box-warn {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 75px;
-      height: 100px;
+      .card3-box-nd {
+        display: flex;
+        position: absolute;
+        top: 55px;
+        left: 50%;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: space-between;
+        width: 312px;
+        height: 34px;
+        padding: 0 10px;
+        transform: translate(-50%, 0);
+        background: url('../../../assets/images/workPlaceWarn/composite2.png') no-repeat center;
+        background-size: 100% 100%;
+      }
 
-      .card3-box-item {
+      .card3-box-time {
+        display: flex;
         position: absolute;
-        top: 36%;
-        left: 8%;
-        transform: rotate(45deg);
-        color: #fff;
+        top: 100px;
+        left: 50%;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: space-between;
+        width: 312px;
+        height: 34px;
+        padding: 0 10px;
+        transform: translate(-50%, 0);
+        background: url('../../../assets/images/workPlaceWarn/composite2.png') no-repeat center;
+        background-size: 100% 100%;
       }
 
-    }
+      .card3-box-address {
+        display: flex;
+        position: absolute;
+        top: 145px;
+        left: 50%;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: space-between;
+        width: 312px;
+        height: 34px;
+        padding: 0 10px;
+        transform: translate(-50%, 0);
+        background: url('../../../assets/images/workPlaceWarn/composite2.png') no-repeat center;
+        background-size: 100% 100%;
+      }
 
-    .card3-box-label {
-      width: 40px;
-      color: #fff;
-    }
+      .card3-box-warn {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 75px;
+        height: 100px;
+
+        .card3-box-item {
+          position: absolute;
+          top: 36%;
+          left: 8%;
+          transform: rotate(45deg);
+          color: #fff;
+        }
+      }
 
-    .card3-box-val {
-      color: #0097db;
-      font-family: douyuFont;
+      .card3-box-label {
+        width: 40px;
+        color: #fff;
+      }
 
+      .card3-box-val {
+        color: #0097db;
+        font-family: douyuFont;
+      }
     }
-
   }
-}
-</style>
+</style>

src/views/vent/common/basicCard4.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="basicCard4">
-    <div :class="activeIndex == index ? 'card4-box1' : 'card4-box'" v-for="(item, index) in card4List" :key="index"
-      @click="toggleDustCard(index, item)">
+    <div
+      :class="activeIndex == index ? 'card4-box1' : 'card4-box'"
+      v-for="(item, index) in card4List"
+      :key="index"
+      @click="toggleDustCard(index, item)"
+    >
       <div class="card4-title">{{ item.title }}</div>
       <div class="card4-content">
         <div class="content-item" v-for="(items, ind) in item.list" :key="ind">
@@ -13,204 +17,206 @@
         <div class="level-text">{{ warningLevel }}</div>
       </div>
     </div>
-
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, defineProps, watch,defineEmits } from 'vue'
-
-let props = defineProps({
-  cardData4: {
-    type: Array,
-    default: () => {
-      return []
-    }
-  },
-  warningLevel:{
-    type:String,
-    default:''
-  }
-})
-
-let emit=defineEmits(['toggleDustCards'])
-let activeIndex = ref(0)
-let card4List = ref<any[]>([])
-
-function toggleDustCard(index, item) {
-  activeIndex.value = index
-  emit('toggleDustCards',item.sensorCode)
-}
-
-watch(() => props.cardData4, (newC, oldC) => {
-  console.log(newC, 'newC------')
-  if (newC.length != 0) {
-    card4List.value = newC
+  import { ref, reactive, defineProps, watch, defineEmits } from 'vue';
+
+  let props = defineProps({
+    cardData4: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    warningLevel: {
+      type: String,
+      default: '',
+    },
+  });
+
+  let emit = defineEmits(['toggleDustCards']);
+  let activeIndex = ref(0);
+  let card4List = ref<any[]>([]);
+
+  function toggleDustCard(index, item) {
+    activeIndex.value = index;
+    emit('toggleDustCards', item.sensorCode);
   }
-}, {
-  immediate: true,
-  deep: true
-})
 
+  watch(
+    () => props.cardData4,
+    (newC, oldC) => {
+      console.log(newC, 'newC------');
+      if (newC.length != 0) {
+        card4List.value = newC;
+      }
+    },
+    {
+      immediate: true,
+      deep: true,
+    },
+  );
 </script>
 
 <style lang="less" scoped>
-.basicCard4 {
-  display: flex;
-  position: relative;
-  box-sizing: border-box;
-  align-items: flex-end;
-  justify-content: flex-start;
-  width: 100%;
-  height: 100%;
-  padding-bottom: 10px;
-  overflow-x: auto;
-  transform: scaleY(-1);
-  background-color: rgb(41 49 53 / 80%);
-
-  .card4-box {
+  .basicCard4 {
+    display: flex;
     position: relative;
-    flex-shrink: 0;
-    width: 338px;
-    height: 147px;
-    margin: 0 10px;
+    box-sizing: border-box;
+    align-items: flex-end;
+    justify-content: flex-start;
+    width: 100%;
+    height: 100%;
+    padding-bottom: 10px;
+    overflow-x: auto;
     transform: scaleY(-1);
-    background: url('../../../assets/images/workPlaceWarn/composite.png') no-repeat center;
-    background-size: 100% 100%;
-
-    .card4-title {
-      position: absolute;
-      top: 8px;
-      left: 0;
-      width: 100%;
-      color: #fff;
-      font-size: 14px;
-      text-align: center;
-    }
+    background-color: rgb(41 49 53 / 80%);
+
+    .card4-box {
+      position: relative;
+      flex-shrink: 0;
+      width: 338px;
+      height: 147px;
+      margin: 0 10px;
+      transform: scaleY(-1);
+      background: url('../../../assets/images/workPlaceWarn/composite.png') no-repeat center;
+      background-size: 100% 100%;
+
+      .card4-title {
+        position: absolute;
+        top: 8px;
+        left: 0;
+        width: 100%;
+        color: #fff;
+        font-size: 14px;
+        text-align: center;
+      }
 
-    .card4-content {
-      display: flex;
-      position: absolute;
-      top: 26px;
-      left: 0;
-      flex-wrap: wrap;
-      align-items: flex-start;
-      justify-content: flex-start;
-      width: 100%;
-      height: 120px;
-
-      .content-item {
+      .card4-content {
         display: flex;
-        align-items: center;
-        justify-content: space-around;
-        width: 50%;
-        height: 50%;
-        background: url('../../../assets/images/dust/dusthome/content-item.png') no-repeat center;
-        background-size: 95% 50%;
-
-        span {
-          &:first-child {
-            color: #fff;
-            font-size: 14px;
+        position: absolute;
+        top: 26px;
+        left: 0;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        justify-content: flex-start;
+        width: 100%;
+        height: 120px;
+
+        .content-item {
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          width: 50%;
+          height: 50%;
+          background: url('../../../assets/images/dust/dusthome/content-item.png') no-repeat center;
+          background-size: 95% 50%;
+
+          span {
+            &:first-child {
+              color: #fff;
+              font-size: 14px;
+            }
+
+            &:last-child {
+              color: #01fefc;
+              font-family: douyuFont;
+            }
           }
+        }
+      }
 
-          &:last-child {
-            color: #01fefc;
-            font-family: douyuFont;
-          }
+      .card4-level {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 75px;
+        height: 75px;
+
+        .level-text {
+          position: absolute;
+          top: 65%;
+          left: 10%;
+          transform: rotate(45deg);
+          color: #fff;
+          font-size: 12px;
         }
       }
     }
 
-    .card4-level{
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 75px;
-      height: 75px;
-
-      .level-text{
+    .card4-box1 {
+      position: relative;
+      flex-shrink: 0;
+      width: 338px;
+      height: 170px;
+      margin: 0 10px;
+      transform: scaleY(-1);
+      background: url('../../../assets/images/workPlaceWarn/composite1.png') no-repeat center;
+      background-size: 100% 100%;
+
+      .card4-title {
         position: absolute;
-        top: 65%;
-        left: 10%;
-        transform: rotate(45deg);
+        top: 8px;
+        left: 0;
+        width: 100%;
         color: #fff;
-        font-size: 12px;
+        font-size: 16px;
+        text-align: center;
       }
-    }
-  }
-
-  .card4-box1 {
-    position: relative;
-    flex-shrink: 0;
-    width: 338px;
-    height: 170px;
-    margin: 0 10px;
-    transform: scaleY(-1);
-    background: url('../../../assets/images/workPlaceWarn/composite1.png') no-repeat center;
-    background-size: 100% 100%;
-
-    .card4-title {
-      position: absolute;
-      top: 8px;
-      left: 0;
-      width: 100%;
-      color: #fff;
-      font-size: 16px;
-      text-align: center;
-    }
 
-    .card4-content {
-      display: flex;
-      position: absolute;
-      top: 26px;
-      left: 0;
-      flex-wrap: wrap;
-      align-items: flex-start;
-      justify-content: flex-start;
-      width: 100%;
-      height: 120px;
-
-      .content-item {
+      .card4-content {
         display: flex;
-        align-items: center;
-        justify-content: space-around;
-        width: 50%;
-        height: 50%;
-        background: url('../../../assets/images/dust/dusthome/content-item.png') no-repeat center;
-        background-size: 95% 50%;
-
-        span {
-          &:first-child {
-            color: #fff;
-            font-size: 12px;
-          }
-
-          &:last-child {
-            color: #01fefc;
-            font-family: douyuFont;
-            font-size: 14px;
+        position: absolute;
+        top: 26px;
+        left: 0;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        justify-content: flex-start;
+        width: 100%;
+        height: 120px;
+
+        .content-item {
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          width: 50%;
+          height: 50%;
+          background: url('../../../assets/images/dust/dusthome/content-item.png') no-repeat center;
+          background-size: 95% 50%;
+
+          span {
+            &:first-child {
+              color: #fff;
+              font-size: 12px;
+            }
+
+            &:last-child {
+              color: #01fefc;
+              font-family: douyuFont;
+              font-size: 14px;
+            }
           }
         }
       }
-    }
 
-    .card4-level{
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 75px;
-      height: 75px;
-
-      .level-text{
+      .card4-level {
         position: absolute;
-        top: 36%;
-        left: 10%;
-        transform: rotate(45deg);
-        color: #fff;
-        font-size: 12px;
+        bottom: 0;
+        left: 0;
+        width: 75px;
+        height: 75px;
+
+        .level-text {
+          position: absolute;
+          top: 36%;
+          left: 10%;
+          transform: rotate(45deg);
+          color: #fff;
+          font-size: 12px;
+        }
       }
     }
   }
-}
-</style>
+</style>

src/views/vent/common/basicSensor.vue

@@ -18,180 +18,180 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, defineProps, computed, watch } from 'vue';
-
-let props = defineProps({
-  //标题
-  sensorTitle: {
-    type: String,
-    default: () => {
-      return '烟雾传感器';
+  import { ref, reactive, defineProps, computed, watch } from 'vue';
+
+  let props = defineProps({
+    //标题
+    sensorTitle: {
+      type: String,
+      default: () => {
+        return '烟雾传感器';
+      },
     },
-  },
-  sensorList: {
-    type: Array,
-    default: () => {
-      return [];
+    sensorList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
     },
-  },
-  headList: {
-    type: Array,
-    default: () => {
-      return [];
+    headList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
     },
-  },
-});
-
-let sensorLists = ref<any[]>([]);
-
-let headLists = ref<any[]>([]);
-
-let widthV = computed(() => {
-  return (100 / (headLists.value.length+1))*2;
-});
-
-watch(
-  () => props.sensorList,
-  (newV, oldV) => {
-    console.log(newV, 'newV----------');
-    sensorLists.value = newV;
-  },
-  { immediate: true, deep: true },
-);
-watch(
-  () => props.headList,
-  (newN, oldN) => {
-    console.log(newN, 'newN-----------');
-    headLists.value = newN;
-  },
-  { immediate: true, deep: true },
-);
+  });
+
+  let sensorLists = ref<any[]>([]);
+
+  let headLists = ref<any[]>([]);
+
+  let widthV = computed(() => {
+    return (100 / (headLists.value.length + 1)) * 2;
+  });
+
+  watch(
+    () => props.sensorList,
+    (newV, oldV) => {
+      console.log(newV, 'newV----------');
+      sensorLists.value = newV;
+    },
+    { immediate: true, deep: true },
+  );
+  watch(
+    () => props.headList,
+    (newN, oldN) => {
+      console.log(newN, 'newN-----------');
+      headLists.value = newN;
+    },
+    { immediate: true, deep: true },
+  );
 </script>
 
 <style lang="less" scoped>
-@font-face {
-  font-family: douyuFont;
-  src: url('../../../assets/font/douyuFont.otf');
-}
-
-.basicSensor {
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  padding: 10px;
-  overflow-y: auto;
-  background-color: rgb(41 49 53 / 80%);
-
-  .sensor-title {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 40px;
-    color: #fff;
+  @font-face {
     font-family: douyuFont;
-    font-size: 16px;
+    src: url('../../../assets/font/douyuFont.otf');
   }
 
-  .sensor-table-head {
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
+  .basicSensor {
+    position: relative;
+    box-sizing: border-box;
     width: 100%;
-    height: 34px;
-
-    .head-item {
-      &:nth-child(1) {
-        display: flex;
-        flex: 2;
-        align-items: center;
-        justify-content: center;
-        color: #1faef0;
-      }
-
-      &:nth-child(2) {
-        display: flex;
-        flex: 1;
-        align-items: center;
-        justify-content: center;
-        color: #1faef0;
-      }
-
-      &:nth-child(3) {
-        display: flex;
-        flex: 1;
-        align-items: center;
-        justify-content: center;
-        color: #1faef0;
-      }
-
-      &:nth-child(4) {
-        display: flex;
-        flex: 1;
-        align-items: center;
-        justify-content: center;
-        color: #1faef0;
-      }
-
-      &:nth-child(5) {
-        display: flex;
-        flex: 1;
-        align-items: center;
-        justify-content: center;
-        color: #1faef0;
-      }
+    height: 100%;
+    padding: 10px;
+    overflow-y: auto;
+    background-color: rgb(41 49 53 / 80%);
 
+    .sensor-title {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 40px;
+      color: #fff;
+      font-family: douyuFont;
+      font-size: 16px;
     }
-  }
-
-  .sensor-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    height: calc(100% - 74px);
-    overflow-y: auto;
 
-    .sensor-content-item {
+    .sensor-table-head {
       display: flex;
-      position: relative;
-      flex-shrink: 0;
       align-items: center;
       justify-content: space-around;
       width: 100%;
-      height: 32px;
-      margin-bottom: 15px;
-      background: url('../../../assets/images/workPlaceWarn/work-bot.png') no-repeat center;
-      background-size: 100% 100%;
-
-      .content-item-bg {
-        position: absolute;
-        top: 0;
-        left: 8px;
-        // width: 168px;
-        height: 32px;
-        background: url('../../../assets/images/workPlaceWarn/work-bot1.png') no-repeat center;
-        background-size: 100% 100%;
+      height: 34px;
+
+      .head-item {
+        &:nth-child(1) {
+          display: flex;
+          flex: 2;
+          align-items: center;
+          justify-content: center;
+          color: #1faef0;
+        }
+
+        &:nth-child(2) {
+          display: flex;
+          flex: 1;
+          align-items: center;
+          justify-content: center;
+          color: #1faef0;
+        }
+
+        &:nth-child(3) {
+          display: flex;
+          flex: 1;
+          align-items: center;
+          justify-content: center;
+          color: #1faef0;
+        }
+
+        &:nth-child(4) {
+          display: flex;
+          flex: 1;
+          align-items: center;
+          justify-content: center;
+          color: #1faef0;
+        }
+
+        &:nth-child(5) {
+          display: flex;
+          flex: 1;
+          align-items: center;
+          justify-content: center;
+          color: #1faef0;
+        }
       }
+    }
 
-      .item-text {
-        display: flex;
-        flex: 2;
-        align-items: center;
-        justify-content: center;
-        color: #fff;
-      }
+    .sensor-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      height: calc(100% - 74px);
+      overflow-y: auto;
 
-      .item-text1,
-      .item-text2,
-      .item-text3,
-      .item-text4 {
+      .sensor-content-item {
         display: flex;
-        flex: 1;
+        position: relative;
+        flex-shrink: 0;
         align-items: center;
-        justify-content: center;
-        color: #fff;
+        justify-content: space-around;
+        width: 100%;
+        height: 32px;
+        margin-bottom: 15px;
+        background: url('../../../assets/images/workPlaceWarn/work-bot.png') no-repeat center;
+        background-size: 100% 100%;
+
+        .content-item-bg {
+          position: absolute;
+          top: 0;
+          left: 8px;
+          // width: 168px;
+          height: 32px;
+          background: url('../../../assets/images/workPlaceWarn/work-bot1.png') no-repeat center;
+          background-size: 100% 100%;
+        }
+
+        .item-text {
+          display: flex;
+          flex: 2;
+          align-items: center;
+          justify-content: center;
+          color: #fff;
+        }
+
+        .item-text1,
+        .item-text2,
+        .item-text3,
+        .item-text4 {
+          display: flex;
+          flex: 1;
+          align-items: center;
+          justify-content: center;
+          color: #fff;
+        }
       }
     }
   }
-}</style>
+</style>