[Feat 0000] 预警分析模块样式优化

pages/warndata/warndata.vue

@@ -34,19 +34,25 @@
             <view style="margin-top: 10rpx">
               <text class="text-style1">{{ windData.zongjinfeng }}</text>
             </view>
-            <view style="margin-top: 10rpx">总进风量(m³/min):</view>
+            <view class="nameStyle" style="margin-top: 10rpx; margin-left: 5px"
+              >总进风量(m³/min)</view
+            >
           </view>
           <view class="datacard demo-layout bg-purple-light">
             <view style="margin-top: 10rpx">
               <text class="text-style1">{{ windData.zonghuifeng }}</text>
             </view>
-            <view style="margin-top: 10rpx">总回风量(m³/min):</view>
+            <view class="nameStyle" style="margin-top: 10rpx; margin-left: 5px"
+              >总回风量(m³/min)</view
+            >
           </view>
           <view class="datacard demo-layout bg-purple-light">
             <view style="margin-top: 10rpx">
               <text class="text-style1">{{ xufengliang }}</text>
             </view>
-            <view style="margin-top: 10rpx">总需风量(m³/min):</view>
+            <view class="nameStyle" style="margin-top: 10rpx; margin-left: 5px"
+              >总需风量(m³/min)</view
+            >
           </view>
         </view>
         <view class="flcard" v-if="isShow2">
@@ -94,7 +100,9 @@
                         : "(ppm)"
                     }}
                   </text>
-                  <view style="margin-top: 10rpx">{{ item.monitorcode }}</view>
+                  <view class="nameStyle" style="margin-top: 10rpx">{{
+                    item.monitorcode
+                  }}</view>
                 </view>
               </view>
             </view>
@@ -128,7 +136,9 @@
                         : "(ppm)"
                     }}
                   </text>
-                  <view style="margin-top: 10rpx">{{ item.monitorcode }}</view>
+                  <view class="nameStyle" style="margin-top: 10rpx">{{
+                    item.monitorcode
+                  }}</view>
                 </view>
               </view>
             </view>
@@ -149,17 +159,25 @@
           </view>
         </view>
         <view class="flcard" v-show="isShow3" @click="getDetail('dust')">
-          <view class="datacard demo-layout bg-purple-light">
-            <view style="margin-top: 10rpx">
-              <text class="text-style1">{{ dustTotalcount }}</text>
+          <view style="display: flex">
+            <view class="dustcard">
+              <view class="demo-layout bg-purple-light">
+                <view style="margin-top: 10rpx">
+                  <text class="text-style1">{{ dustTotalcount }}</text>
+                </view>
+                <view class="nameStyle" style="margin: 10rpx">测点数量</view>
+              </view>
+              <view class="dust-right"> </view>
             </view>
-            <view style="margin-top: 10rpx">测点数量:</view>
-          </view>
-          <view class="datacard demo-layout bg-purple-light">
-            <view style="margin-top: 10rpx">
-              <text class="text-style1">{{ dustLevelstatus }}</text>
+            <view class="dustcard">
+              <view class="demo-layout bg-purple-light">
+                <view style="margin-top: 10rpx">
+                  <text class="text-style1">{{ dustLevelstatus }}</text>
+                </view>
+                <view class="nameStyle" style="margin: 10rpx">当前状态</view>
+              </view>
+              <view class="dust-right"> </view>
             </view>
-            <view style="margin-top: 10rpx">当前状态:</view>
           </view>
         </view>
 
@@ -184,15 +202,20 @@
                 >安全监测系统监测点</span
               >
             </view>
+          </view>
+          <view class="safe-container">
             <view
-              class="gascard"
+              class="safecard"
               v-for="(item, index) in gasDevice"
               :key="index"
             >
-              <view style="margin-top: 20rpx">
+              <view class="left" style="margin-top: 20rpx; float: left">
                 <text class="text-style1">{{ item.gasNumber }}</text>
-                <view style="margin: 10rpx">{{ item.systemname }}</view>
+                <view class="nameStyle" style="margin: 10rpx">{{
+                  item.systemname
+                }}</view>
               </view>
+              <view class="right"> </view>
             </view>
           </view>
           <view class="firecontainer">
@@ -207,10 +230,13 @@
                 v-for="(item, index) in gasDevice"
                 :key="index"
               >
-                <view style="margin-top: 20rpx">
+                <view class="left" style="margin-top: 20rpx; float: left">
                   <text class="text-style1">{{ item.pumpNumber }}</text>
-                  <view style="margin: 10rpx">{{ item.systemname }}</view>
+                  <view class="nameStyle" style="margin: 10rpx">{{
+                    item.systemname
+                  }}</view>
                 </view>
+                <view class="gas-right"> </view>
               </view>
             </view>
           </view>
@@ -239,11 +265,17 @@
               class="item-container"
               v-for="(item, index) in devicekindData"
               :key="index"
-              :style="{ backgroundImage: itemBackground(item) }"
             >
-              <view class="item">
-                <text style="margin-right: 10px">{{ item.name }}</text>
-                <text>{{ item.status }}</text>
+              <view
+                class="item"
+                :style="{ backgroundImage: itemBackground(item) }"
+              >
+                <view class="deviceItem">
+                  <text class="nameStyle" style="margin-right: 10px">{{
+                    item.name
+                  }}</text>
+                  <text style="font-weight: bold">{{ item.status }}</text>
+                </view>
               </view>
             </view>
           </view>
@@ -467,6 +499,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.nameStyle {
+  color: #7484a4;
+  font-size: 15px;
+}
 .container {
   display: flex;
   flex-direction: column;
@@ -496,9 +532,9 @@ export default {
   width: 32.5%;
   margin: 1px;
   float: left;
-  height: 100rpx;
-  text-align: center;
-  border-radius: 10px;
+  height: 74px;
+  line-height: 27px;
+  border-radius: 5px;
   background: url(/static/model/windM3.png),
     linear-gradient(
       to right,
@@ -506,8 +542,32 @@ export default {
       rgba(4, 184, 255, 0.08),
       rgba(60, 161, 237, 0.08)
     );
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: right;
+}
+.dustcard {
+  width: 47%;
+  border-radius: 10px;
+  margin: 10px;
+  display: flex;
+  background: linear-gradient(
+    to right,
+    rgba(55, 135, 254, 0.08),
+    rgba(4, 184, 255, 0.08),
+    rgba(60, 161, 237, 0.08)
+  );
+  flex-direction: row;
+  justify-content: space-between;
+}
+.dust-right {
+  margin-right: 10px;
+  width: 60px;
+  height: 60px;
+  background: url(/static/warndata/dust.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
 }
-
 .datacard1 {
   width: 100%;
   margin: 2px;
@@ -542,35 +602,29 @@ export default {
   float: left;
   text-align: center;
   border-radius: 10px;
-  background: linear-gradient(
-    to right,
-    rgba(55, 135, 254, 0.08),
-    rgba(4, 184, 255, 0.08),
-    rgba(60, 161, 237, 0.08)
-  );
-  background-repeat: repeat;
 }
 
 .deviceCard {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
   margin-top: 10rpx;
 }
 
-.item-container {
-  height: 100px;
-  /* 设置容器高度，根据需要进行调整 */
-  background-size: 100% 60%;
-  /* 设置背景图片尺寸，根据需要进行调整 */
+.item {
+  position: relative;
+  width: 100%;
+  height: 80px;
+  background-size: 100% 100%;
   background-repeat: no-repeat;
-  /* 设置背景图片不重复，根据需要进行调整 */
 }
-
-.item {
-  margin-left: 70px;
-  margin-top: 36px;
+.deviceItem {
+  position: absolute;
+  width: 76%;
+  top: 76%;
+  left: 63%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
 }
-
 .firetext {
   margin: 20px;
 }
@@ -578,7 +632,8 @@ export default {
 .text-style1 {
   color: #3787fe;
   font-weight: bold;
-  font-size: 16px;
+  font-size: 17px;
+  margin-left: 5px;
 }
 
 .red-text-style1 {
@@ -596,36 +651,72 @@ export default {
   flex-wrap: wrap;
 }
 
-.fire-item {
-  width: calc(33.33% - 20px);
-  margin: 16rpx;
-  box-sizing: border-box;
-}
 .fire-item1 {
   width: 45%;
   margin: 16rpx;
-  box-sizing: border-box;
+  background: linear-gradient(
+    to right,
+    rgba(55, 135, 254, 0.08),
+    rgba(4, 184, 255, 0.08)
+  );
 }
+
 .gascontainer {
   display: flex;
 }
 
 .gascard {
-  width: calc(33.33% - 20px);
-  margin: 1px;
-  float: left;
-  text-align: center;
+  width: 47%;
   border-radius: 10px;
   margin: 10px;
-  background: url(/static/warndata/work.png),
-    linear-gradient(
-      to right,
-      rgba(55, 135, 254, 0.08),
-      rgba(4, 184, 255, 0.08),
-      rgba(60, 161, 237, 0.08)
-    );
+  display: flex;
+  background: linear-gradient(
+    to right,
+    rgba(55, 135, 254, 0.08),
+    rgba(4, 184, 255, 0.08),
+    rgba(60, 161, 237, 0.08)
+  );
+  flex-direction: row;
+  justify-content: space-between;
+}
+.gas-right {
+  margin-right: 10px;
+  width: 60px;
+  height: 60px;
+  background: url(/static/warndata/gas.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.safecard {
+  width: 47%;
+  border-radius: 10px;
+  margin: 10px;
+  display: flex;
+  background: linear-gradient(
+    to right,
+    rgba(55, 135, 254, 0.08),
+    rgba(4, 184, 255, 0.08),
+    rgba(60, 161, 237, 0.08)
+  );
+  flex-direction: row;
+  justify-content: space-between;
+}
+.safe-container {
+  display: flex;
+  width: 100%;
+  height: 70px;
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+.right {
+  margin-right: 10px;
+  width: 60px;
+  height: 60px;
+  background: url(/static/warndata/safety.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
 }
-
 .icon-style {
   margin-right: 8px;
   width: 13px;