监测系统+导航页

src/views/homePage.vue

@@ -561,6 +561,7 @@
 					height: 50px;
 					line-height: 53px;
           font-family: 'ysbth';
+          letter-spacing: 1px;
         }
 
 				.top_btn_item:hover {
@@ -689,6 +690,11 @@
 					color: #EFF2FF;
 					font-size: 16px;
           font-family: 'almmsht';
+          letter-spacing: 1px;
+          background:linear-gradient(to bottom, #dbf8f8, #22e2ff);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          margin: 5px 0 0 0;
 				}
 
 				.btn_item:hover {
@@ -777,6 +783,8 @@
 				transition: all 0.3s ease-in-out;
         font-family: 'almmsht';
         font-size: 16px;
+        letter-spacing: 1px;
+        color: #fff;
 
 				>img {
 					position: absolute;

src/views/industry/jcxt.vue

@@ -57,37 +57,65 @@
 				</div>
 				<div class="content-box sbhz">
 					<div class="sbhz_div box-row">
-            <div class="sbhz_div_txt gr" @click="selectedDiv = 3"  :class="selectedDiv === 3 ? 'on' : ''">
-              <h5>供热设备数量</h5>
-              <b>{{ deviceTotalList ? deviceTotalList[2].deviceTotal || '--' : '' }}</b>
-              <p><span class="zx">在线<i>{{ deviceTotalList ? deviceTotalList[2].onlinePercent || '--' : '' }}%</i></span><span class="lx">离线<i>{{ deviceTotalList ? deviceTotalList[2].offlinePercent || '--' : '' }}%</i></span></p>
-            </div>
 						<div class="sbhz_div_txt rq" @click="selectedDiv = 1" :class="selectedDiv === 1 ? 'on' : ''" >
-							<h5>燃气设备数量</h5>
-							<b>{{ deviceTotalList ? deviceTotalList[0].deviceTotal || '--' : '' }}</b>
-							<p><span class="zx">在线<i>{{ deviceTotalList[0].onlinePercent }}%</i></span><span class="lx">离线<i>{{ deviceTotalList[0].offlinePercent }}%</i></span></p>
+              <div class="sbhz_div_txt_in">
+                <h5>燃气设备数量</h5>
+							  <b>{{ deviceTotalList ? deviceTotalList[0].deviceTotal || '--' : '' }}</b>
+              </div>
+							<p>
+                <span class="zx">在线<i>{{ deviceTotalList[0].onlinePercent }}%</i></span>
+                <span class="lx">离线<i>{{ deviceTotalList[0].offlinePercent }}%</i></span>
+              </p>
 						</div>
 						<div class="sbhz_div_txt ps" @click="selectedDiv = 2"  :class="selectedDiv === 2 ? 'on' : ''">
-							<h5>排水设备数量</h5>
-							<b>{{ deviceTotalList ? deviceTotalList[1].deviceTotal || '--' : '' }}</b>
-							<p><span class="zx">在线<i>{{ deviceTotalList ? deviceTotalList[1].onlinePercent || '--' : '' }}%</i></span><span class="lx">离线<i>{{ deviceTotalList ? deviceTotalList[1].offlinePercent || '--' : '' }}%</i></span></p>
+              <div class="sbhz_div_txt_in">
+                <h5>排水设备数量</h5>
+							  <b>{{ deviceTotalList ? deviceTotalList[1].deviceTotal || '--' : '' }}</b>
+              </div>
+							<p>
+                <span class="zx">在线<i>{{ deviceTotalList ? deviceTotalList[1].onlinePercent || '--' : '' }}%</i></span>
+                <span class="lx">离线<i>{{ deviceTotalList ? deviceTotalList[1].offlinePercent || '--' : '' }}%</i></span>
+              </p>
+						</div>
+						<div class="sbhz_div_txt gr" @click="selectedDiv = 3"  :class="selectedDiv === 3 ? 'on' : ''">
+              <div class="sbhz_div_txt_in">
+							  <h5>供热设备数量</h5>
+							  <b>{{ deviceTotalList ? deviceTotalList[2].deviceTotal || '--' : '' }}</b>
+              </div>
+							<p>
+                <span class="zx">在线<i>{{ deviceTotalList ? deviceTotalList[2].onlinePercent || '--' : '' }}%</i></span>
+                <span class="lx">离线<i>{{ deviceTotalList ? deviceTotalList[2].offlinePercent || '--' : '' }}%</i></span>
+              </p>
 						</div>
-					</div>
-					<div class="sbhz_div box-row">
-            <div class="sbhz_div_txt gl" @click="selectedDiv = 6"  :class="selectedDiv === 6 ? 'on' : ''">
-              <h5>管廊设备数量</h5>
-              <b>{{ deviceTotalList ? deviceTotalList[5].deviceTotal || '--' : '' }}</b>
-              <p><span class="zx">在线<i>{{ deviceTotalList ? deviceTotalList[5].onlinePercent || '--' : '' }}%</i></span><span class="lx">离线<i>{{ deviceTotalList ? deviceTotalList[5].offlinePercent || '--' : '' }}%</i></span></p>
-            </div>
 						<div class="sbhz_div_txt ql" @click="selectedDiv = 4"  :class="selectedDiv === 4 ? 'on' : ''">
-							<h5>桥梁设备数量</h5>
-							<b>{{ deviceTotalList ? deviceTotalList[3].deviceTotal || '--' : '' }}</b>
-							<p><span class="zx">在线<i>{{ deviceTotalList ? deviceTotalList[3].onlinePercent || '--' : '' }}%</i></span><span class="lx">离线<i>{{ deviceTotalList ? deviceTotalList[3].offlinePercent || '--' : '' }}%</i></span></p>
+              <div class="sbhz_div_txt_in">
+                <h5>桥梁设备数量</h5>
+                <b>{{ deviceTotalList ? deviceTotalList[3].deviceTotal || '--' : '' }}</b>
+              </div>
+							<p>
+                <span class="zx">在线<i>{{ deviceTotalList ? deviceTotalList[3].onlinePercent || '--' : '' }}%</i></span>
+                <span class="lx">离线<i>{{ deviceTotalList ? deviceTotalList[3].offlinePercent || '--' : '' }}%</i></span>
+              </p>
+						</div>
+						<div class="sbhz_div_txt gl" @click="selectedDiv = 6"  :class="selectedDiv === 6 ? 'on' : ''">
+              <div class="sbhz_div_txt_in">
+                <h5>管廊设备数量</h5>
+                <b>{{ deviceTotalList ? deviceTotalList[5].deviceTotal || '--' : '' }}</b>
+              </div>
+              <p>
+                <span class="zx">在线<i>{{ deviceTotalList ? deviceTotalList[5].onlinePercent || '--' : '' }}%</i></span>
+                <span class="lx">离线<i>{{ deviceTotalList ? deviceTotalList[5].offlinePercent || '--' : '' }}%</i></span>
+              </p>
 						</div>
 						<div class="sbhz_div_txt gs" @click="selectedDiv = 5"  :class="selectedDiv === 5 ? 'on' : ''">
-							<h5>供水设备数量</h5>
-							<b>{{ deviceTotalList ? deviceTotalList[4].deviceTotal || '--' : '' }}</b>
-							<p><span class="zx">在线<i>{{ deviceTotalList ? deviceTotalList[4].onlinePercent || '--' : '' }}%</i></span><span class="lx">离线<i>{{ deviceTotalList ? deviceTotalList[4].offlinePercent || '--' : '' }}%</i></span></p>
+              <div class="sbhz_div_txt_in">
+							  <h5>供水设备数量</h5>
+							  <b>{{ deviceTotalList ? deviceTotalList[4].deviceTotal || '--' : '' }}</b>
+              </div>
+							<p>
+                <span class="zx">在线<i>{{ deviceTotalList ? deviceTotalList[4].onlinePercent || '--' : '' }}%</i></span>
+                <span class="lx">离线<i>{{ deviceTotalList ? deviceTotalList[4].offlinePercent || '--' : '' }}%</i></span>
+              </p>
 						</div>
 					</div>
 				</div>
@@ -110,7 +138,7 @@
             </el-tab-pane>
 					</el-tabs>
 					<!-- 设备类型图表 -->
-					<div class="sblx_div box-row">
+					<div class="sblx_div box-row" style="flex-wrap: nowrap;justify-content: space-between;">
 						<div id="sblx_chart"></div>
 						<div class="sblx_list">
 							<h5>
@@ -575,7 +603,7 @@ export default {
 			},
 			//设备报警表单点击后跳转新页面
 			toSbList(){
-				this.$router.push('/yuJingList')
+				this.$router.push('/jcxtList')
 			},
 			//设备类型chart
 			sblx_chart(industry=1) {
@@ -1017,7 +1045,7 @@ export default {
 							lineStyle: {
 								normal: {
 									width: 2,
-									color: "rgba(56,205,204,1)", // 线条颜色
+									color: "rgba(245,227,23,1)", // 线条颜色
 								},
 								borderColor: "rgba(0,0,0,.4)",
 							},
@@ -1440,31 +1468,41 @@ export default {
 		margin-bottom: 15px!important;
 		height: 220px!important;
 		.sbhz_div{
-			justify-content: space-around;
+
 			.sbhz_div_txt{
 				position: relative;
 				cursor: pointer;
+        width: 33.3333%;
+        height: 104px;
+
+        .sbhz_div_txt_in{
+          display: flex;
+          flex-direction:column;
+          align-items: center;
+          width: 50%;
+          position: absolute;
+          top: 47px;
+        }
 				h5{
 					font-size: 14px;
 					color: #fff;
-					height: 25px;
-					line-height: 25px;
 				}
 				b{
 					font-family: 'ds';
 					font-size: 18px;
 					font-weight: bold;
-					height: 40px;
-					line-height: 40px;
+					line-height: 25px;
 				}
 				p{
 					font-size: 12px;
-					height: 25px;
-					line-height: 25px;
+          position: absolute;
+          left: 55%;
 					span{
-						padding-left: 12px;
+						padding-left: 15px;
 						position: relative;
-						margin-right: 8px;
+            display: block;
+            margin:10px 8px 10px 0;
+            background: linear-gradient(to right, color(srgb 0.17 0.53 0.76 / 0.15), color(srgb 0.02 0.34 0.69 / 0));
 					}
 					span::after{
 						content: '';
@@ -1472,7 +1510,7 @@ export default {
 						width: 5px;
 						height: 5px;
 						position: absolute;
-						left: 0px;
+						left: 5px;
 						top:50%;
 						transform: translateY(-50%);
 					}
@@ -1503,8 +1541,8 @@ export default {
 				background: url("../../assets/index_img/jgpt_icon1.png") no-repeat right;
 				width: 48px;
 				height: 41px;
-				right:0px;
-				top:24px;
+        left:11%;
+				top:0;
 			}
 			.ps::after{
 				display: block;
@@ -1513,8 +1551,8 @@ export default {
 				background: url("../../assets/index_img/jgpt_icon2.png") no-repeat right;
 				width: 48px;
 				height: 41px;
-				right:0px;
-				top:24px;
+        left:11%;
+        top:0;
 			}
 			.gr::after{
 				display: block;
@@ -1523,8 +1561,8 @@ export default {
 				background: url("../../assets/index_img/jgpt_icon3.png") no-repeat right;
 				width: 48px;
 				height: 41px;
-				right:0px;
-				top:24px;
+        left:11%;
+        top:0;
 			}
 			.ql::after{
 				display: block;
@@ -1533,8 +1571,8 @@ export default {
 				background: url("../../assets/index_img/jgpt_icon4.png") no-repeat right;
 				width: 48px;
 				height: 41px;
-				right:0px;
-				top:24px;
+        left:11%;
+        top:0;
 			}
 			.gl::after{
 				display: block;
@@ -1543,8 +1581,8 @@ export default {
 				background: url("../../assets/index_img/jgpt_icon5.png") no-repeat right;
 				width: 48px;
 				height: 41px;
-				right:0px;
-				top:24px;
+        left:11%;
+        top:0;
 			}
 			.gs::after{
 				display: block;
@@ -1553,8 +1591,8 @@ export default {
 				background: url("../../assets/index_img/jgpt_icon6.png") no-repeat right;
 				width: 48px;
 				height: 41px;
-				right:0px;
-				top:24px;
+        left:11%;
+        top:0;
 			}
 		}
 	}
@@ -2444,6 +2482,7 @@ export default {
 
 			.box-row {
 				display: flex;
+        flex-wrap: wrap;
 
 				.con-l-t {
 					width: 92px;