颜色修改

src/views/weatherHome/components/alarm.vue

@@ -45,10 +45,13 @@
                   </div>
                 </div>
               </div> -->
-              <div v-for="(item, index) in alarmDataBox.listData" :key="index" class="new-police" @click="openModal(item)">
+              <div v-for="(item, index) in alarmDataBox.listData" :key="index" class="new-police"
+                @click="openModal(item)">
                 <div>
                   <img src="../../../assets/images/weatheHome/icon-5514.png" />
-                  <span>{{ item.title }}</span>
+                  <span :style="{
+        'color': item.level_name
+      }">{{ item.title }}</span>
                   <span>{{ item.time }}</span>
                 </div>
                 <div> {{ item.warn_msg }} </div>
@@ -60,10 +63,13 @@
       </div>
       <div v-if="!isSwitch">
         <div class="new-qx-table-box">
-          <div v-for="(item, index) in alarmDataBox.activeInfo" :key="index" class="new-police" @click="openModal(item)">
+          <div v-for="(item, index) in alarmDataBox.activeInfo" :key="index" class="new-police"
+            @click="openModal(item)">
             <div>
               <img src="../../../assets/images/weatheHome/icon-5514.png" />
-              <span>{{ item.title }}</span>
+              <span :style="{
+        'color': item.level_name
+      }">{{ item.title }}</span>
               <span>{{ item.time }}</span>
             </div>
             <div> {{ item.warn_msg }} </div>
@@ -85,16 +91,16 @@
                   <template #content>
                     <p>{{ item.warn_msg }}</p>
                   </template>
-                  {{ getNewName(item.warn_msg, 26) }}
-                </a-popover>
-              </div>
-              <div style="width: 40%"> {{ item.time }} </div>
-            </div>
-          </div>
-          <div class="deviceBack" @click="tabSwitch(false)">
-            <img :src="doubleScreenBack" class="toolImage" />
-          </div>
-        </div> -->
+{{ getNewName(item.warn_msg, 26) }}
+</a-popover>
+</div>
+<div style="width: 40%"> {{ item.time }} </div>
+</div>
+</div>
+<div class="deviceBack" @click="tabSwitch(false)">
+  <img :src="doubleScreenBack" class="toolImage" />
+</div>
+</div> -->
       </div>
     </div>
   </div>
@@ -220,21 +226,25 @@ onMounted(async () => {
   border-radius: 0px 30px 0px 30px;
   background-image: linear-gradient(200deg, rgba(40, 165, 255, 0.9) 9%, rgba(100, 255, 255, 0) 34%, rgba(40, 126, 255, 0) 66%, #28a5ff 100%);
 }
+
 .main_in {
   width: 100%;
   height: 100%;
   border-radius: 0px 30px 0px 30px;
   background: rgba(6, 37, 70, 0.9);
 }
+
 .tab-bar-icon {
   padding: 10px 5px;
   display: flex;
   justify-content: space-between;
 }
+
 .tab-bar-box {
   display: flex;
   cursor: pointer;
-  & > div:nth-child(1) {
+
+  &>div:nth-child(1) {
     img {
       width: 32px;
       position: relative;
@@ -242,7 +252,8 @@ onMounted(async () => {
       margin-right: 4px;
     }
   }
-  & > div:nth-child(2) {
+
+  &>div:nth-child(2) {
     div:nth-child(1) {
       background: linear-gradient(181deg, #3df9ff 27%, #287eff 97%);
       -webkit-background-clip: text;
@@ -250,6 +261,7 @@ onMounted(async () => {
       background-clip: text;
       font-size: 18px;
     }
+
     div:nth-child(2) {
       /* 水位告警 */
       font-family: Source Han Sans CN;
@@ -259,14 +271,17 @@ onMounted(async () => {
     }
   }
 }
+
 .scroll {
   height: 170px;
   overflow: hidden;
 }
+
 .tab-list {
   padding: 0 10px;
   height: 186px;
   cursor: pointer;
+
   .police-box {
     cursor: pointer;
     padding: 0px 20px;
@@ -274,7 +289,8 @@ onMounted(async () => {
     // justify-content: space-between;
     line-height: 48px;
     margin-top: 10px;
-    & > div:nth-child(2) {
+
+    &>div:nth-child(2) {
       display: flex;
       line-height: initial;
       // margin-top: 6px;
@@ -284,34 +300,40 @@ onMounted(async () => {
       align-items: center;
     }
   }
+
   .police1 {
     background: url('../../../assets/images/weatheHome/police-bg1.png') no-repeat;
     background-size: 100%;
+
     .police-box:nth-child(2) {
-      & > div:nth-child(2) {
-        & > div:nth-child(2) {
+      &>div:nth-child(2) {
+        &>div:nth-child(2) {
           color: red;
         }
       }
     }
   }
+
   .police2 {
     background: url('../../../assets/images/weatheHome/police-bg2.png') no-repeat;
     background-size: 100%;
+
     .police-box:nth-child(2) {
-      & > div:nth-child(2) {
-        & > div:nth-child(2) {
+      &>div:nth-child(2) {
+        &>div:nth-child(2) {
           color: rgb(239, 154, 72);
         }
       }
     }
   }
+
   .police3 {
     background: url('../../../assets/images/weatheHome/police-bg3.png') no-repeat;
     background-size: 100%;
+
     .police-box:nth-child(2) {
-      & > div:nth-child(2) {
-        & > div:nth-child(2) {
+      &>div:nth-child(2) {
+        &>div:nth-child(2) {
           color: rgba(253, 253, 150, 0.8);
         }
       }
@@ -323,21 +345,26 @@ onMounted(async () => {
   height: 152px;
   overflow: scroll;
   cursor: pointer;
+
   .new-police {
     margin-left: 10px;
   }
 }
+
 // 表格数据
 .qx-table {
   height: 186px;
   padding-left: 20px;
+
   .qx-table-top {
     display: flex;
   }
+
   .qx-table-box {
     height: 129px;
     overflow: scroll;
-    & > div {
+
+    &>div {
       width: 100%;
       line-height: 33px;
       display: flex;
@@ -345,82 +372,98 @@ onMounted(async () => {
       /* 面板线性渐变 */
       border: 0px solid;
       margin-top: 2px;
+
       // border-image: linear-gradient(261deg, rgba(40, 165, 255, 0.9) 20%, rgba(100, 255, 255, 0) 40%, rgba(40, 126, 255, 0) 66%, #28a5ff 89%) 1;
-      & > div:nth-child(1) {
+      &>div:nth-child(1) {
         // padding-left: 10px;
         border-left: 4px solid transparent;
       }
     }
-    & > div:nth-child(2n) {
+
+    &>div:nth-child(2n) {
       background-color: rgba(0, 170, 255, 0.08);
     }
-    & > div:hover {
+
+    &>div:hover {
       background: rgba(0, 238, 255, 0.15);
       color: #00d8f0;
     }
-    & > div:hover > div:nth-child(1) {
+
+    &>div:hover>div:nth-child(1) {
       padding-left: 10px;
       border-left: 4px solid #00eeff;
     }
   }
 }
+
 .deviceBack {
   -webkit-transform: rotateY(180deg);
   padding-left: 10px;
 }
+
 .height-2 {
   // height: 23vh;
   // height: 260px;
 }
+
 .tab-length-flex {
   height: 254px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  & > div {
+
+  &>div {
     width: 50% !important;
     justify-content: center;
-    & > div:nth-child(1) {
+
+    &>div:nth-child(1) {
       img {
         width: 46px !important;
       }
     }
-    & > div:nth-child(2) {
-      & > div:nth-child(1) {
+
+    &>div:nth-child(2) {
+      &>div:nth-child(1) {
         font-size: 22px;
       }
-      & > div:nth-child(2) {
+
+      &>div:nth-child(2) {
         font-size: 18px;
       }
     }
   }
 }
+
 .new-police {
   position: relative;
   margin-top: 10px;
   padding-bottom: 10px;
-  & > div:nth-child(2) {
+
+  &>div:nth-child(2) {
     color: rgba(255, 255, 255, 1);
   }
-  & > div:nth-child(1) {
+
+  &>div:nth-child(1) {
     span:nth-child(2) {
-      color: #ff4040;
       font-size: 14px;
       margin-left: 5px;
     }
+
     span:nth-child(3) {
       color: rgba(255, 255, 255, 0.7);
       font-size: 14px;
       margin-left: 10px;
     }
+
     img {
       display: inline-block;
       position: relative;
       top: -2px;
     }
   }
-  & > img {
+
+  &>img {
     position: absolute;
     bottom: 0px;
     width: 100%;