UI-样式

src/views/SenEventCenter.vue

@@ -454,6 +454,9 @@
 		}
 		.yjzx_k2{
 			height: 211px;
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-between;
 			//width: 100%;
 			p{
 				display: inline-block;
@@ -461,14 +464,12 @@
 				background-size: 100% 100%;
 				width: 88px;
 				height: 101px;
+				display: flex;
+				flex-direction: column;
 			}
 			:nth-child(1),:nth-child(2),:nth-child(4),:nth-child(5){
-				margin-right: 7px;
 				margin-bottom: 7px;
 			}
-			:nth-child(3),:nth-child(6){
-				margin-right: 7px;
-			}
 			span{
 				padding-top: 20px;
 			}

src/views/SenWarningCenter.vue

@@ -7,11 +7,13 @@
 
 <template>
     <div>
+	 <div class="con_left">
       <div class="warning_left" :class="'warning_'+index" v-for="(item,index) in option" >
         <h4>{{item.typeName}}</h4>
         <h2>{{item.count}}</h2>
         <img src="@/assets/images/warningBg.png">
       </div>
+	  </div>
       <div class="con_right con_left_js" :class="'warning_'+index" v-for="(item,index) in option" >
         <div class="list_tit">{{item.typeName}}说明</div>
         <!-- 预警说明内容主体 -->
@@ -53,7 +55,6 @@ export default {
 		top: 100px;
 		width: 320px;
         height: 17%;
-		background: linear-gradient(to left, rgba(21,38,48,.6), rgba(21,38,48,.2));
 		padding: 0px 10px 20px 10px !important;
 
 		.list_tit {
@@ -75,6 +76,7 @@ export default {
             font-size: 14px;
             >h4{
                 margin-top: 3%;
+				text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8);
             }
         }
 	}
@@ -99,16 +101,23 @@ export default {
       top: 747px !important;
     }
 
-
     .warning_left{
-        position: absolute;
+        // position: absolute;
         z-index: 99;
         left: 30px;
         top: 100px;
-        width: 250px;
         margin-top: 1%;
         text-align: center;
         padding: 0px 10px 20px 10px!important;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		margin-top: 20px;
+		img{
+			 width: 122px;
+			 height: 67px;
+		}
 
         h4{
             font-weight: 700;
@@ -116,10 +125,10 @@ export default {
             background: linear-gradient(to bottom, #fff, #7AC0CA);
             -webkit-background-clip: text; /* 裁剪背景到文字 */
             -webkit-text-fill-color: transparent; /* 让文字填充透明，显示背景 */
+			  text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6)
         }
 
         h2{
-            position: absolute;
             width: 93%;
             color: transparent;
             background: linear-gradient(to bottom, #fff, #7AC0CA);
@@ -128,7 +137,9 @@ export default {
             font-family: 'ysbth';
             letter-spacing: 2px;
             transform: skewX(-16deg);
+			 text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6)
         }
+		
     }
 
 

src/views/SentryPage.vue

@@ -708,7 +708,7 @@
 	/*//头部通用*/
 	.s_header {
 		width: 100%;
-		height: 110px;
+		height: 96px !important;
 		position: absolute;
 		top: 0px;
 		left: 0px;
@@ -723,7 +723,6 @@
 	.s_header .header_tit {
 		display: block;
 		width: 1000px;
-		height: 109px;
 		line-height: 65px;
 		text-align: center;
 
@@ -799,7 +798,7 @@
 		left: 30px;
 		top: 100px;
 		width: 320px;
-		background: rgba(0, 0, 0, 0.55);
+		background: rgba(16, 43, 32, 0.6) !important;
 		padding: 0px 10px 20px 10px !important;
 	}
 
@@ -809,7 +808,7 @@
 		right: 30px;
 		top: 100px;
 		width: 320px;
-		background: rgba(0, 0, 0, 0.55);
+		background: rgba(16, 43, 32, 0.6) !important;
 		padding: 0px 10px 20px 10px !important;
 
 		.list_tit {
@@ -822,6 +821,7 @@
 			font-size: 20px;
 			color: #fff;
 			margin-bottom: 10px;
+			text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
 		}
 	}
 
@@ -840,6 +840,7 @@
 		font-size: 20px;
 		color: #fff;
 		margin-bottom: 10px;
+		text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
 	}
 
 	.con_left .el-select {