样式修改

monitorMobile/pages/earlyWarning/components/inspectionCenter.vue

@@ -1,23 +1,23 @@
 <template>
 	<view class="inspectionCenter">
 		<view class="searchBox">
-			<view class="searchLine">
-				<view class="leftSearchBox">
-					<view class="searchLabel">
-						筛选条件:
-					</view>
-					<view class="searchValue">
-
-					</view>
-				</view>
-				<view class="searchShow" @click="openSearch">
-					<image v-show="isShowSearch==false" style="width:20px;height:20px;"
-						src="@/static/image/earlyWarning/screen.png" mode="">
+			<view class="searchLine" @click="openSearch">
+				<!-- <view class="searchShow"> -->
+				<view class="searchLabels">
+					<image v-show="isShowSearch==false" src="@/static/image/earlyWarning/group.png" mode="">
 					</image>
-					<image v-show="isShowSearch" style="width:20px;height:20px;"
-						src="@/static/image/earlyWarning/screenActive.png" mode="">
+					<image v-show="isShowSearch" src="@/static/image/earlyWarning/group2.png" mode="">
 					</image>
+					<text class="labels">选择分组</text>
+					<view class="values">一号楼/厨房</view>
 				</view>
+
+				<view class="arrow">
+					<image v-show="isShowSearch==false" src="@/static/image/earlyWarning/arrow1.png" mode="">
+					</image>
+					<image v-show="isShowSearch" src="@/static/image/earlyWarning/arrow2.png" mode=""></image>
+				</view>
+				<!-- </view> -->
 			</view>
 			<view @click="isShowSearch=false" class="searchDialog" v-if="isShowSearch">
 				<view class="content" @click.stop="isSelect">
@@ -346,11 +346,56 @@
 		.searchLine {
 			height: 88rpx;
 			display: flex;
-			justify-content: space-between;
 			align-items: center;
+			justify-content: space-between;
 			padding: 0 15px;
 			box-sizing: border-box;
 			background: #fff;
+			font-size: 28rpx;
+
+			.searchLabels {
+				display: flex;
+				align-items: center;
+				width: calc(100% - 34rpx);
+
+				image {
+					width: 40rpx;
+					height: 40rpx;
+					flex-shrink: 1;
+				}
+
+				.labels {
+					width: 120rpx;
+					display: block;
+					color: #333333;
+					margin-left: 10rpx;
+					flex-shrink: 1;
+				}
+
+				.values {
+					width: calc(100% - 40rpx - 120rpx);
+					color: #2388FF;
+					font-weight: 700;
+					margin-left: 18rpx;
+					overflow: hidden;
+					word-wrap: break-word;
+					white-space: pre-wrap;
+					display: -webkit-box;
+					-webkit-box-orient: vertical;
+					-webkit-line-clamp: 1;
+				}
+			}
+
+
+			.arrow {
+				// text-align: right;
+				// flex-shrink: 1;
+
+				image {
+					width: 34rpx;
+					height: 34rpx;
+				}
+			}
 
 			.leftSearchBox {
 				display: flex;
@@ -370,7 +415,6 @@
 					overflow: hidden;
 					word-wrap: break-word;
 					white-space: pre-wrap;
-					// font-size: 14px;
 					display: -webkit-box;
 					-webkit-box-orient: vertical;
 					-webkit-line-clamp: 1;
@@ -391,6 +435,7 @@
 				background: #FFFFFF;
 				padding: 15px;
 				box-sizing: border-box;
+				border-top: 1px solid rgba(0, 0, 0, 0.1);
 
 				.demo-layout {
 					height: 80rpx;
@@ -477,7 +522,7 @@
 					position: relative;
 
 					image {
-						width: 310rpx;
+						width: 300rpx;
 						height: 220rpx;
 						border-radius: 4px;
 					}
@@ -517,27 +562,6 @@
 							-webkit-box-orient: vertical;
 							-webkit-line-clamp: 1;
 						}
-
-						.statusBox {
-							width: 140rpx;
-							flex-shrink: 1;
-							text-align: center;
-							height: 50rpx;
-							line-height: 50rpx;
-							font-size: 28rpx;
-							border-radius: 8rpx;
-							color: #fff;
-						}
-
-						.handle {
-							background: rgba(15, 175, 118, 0.1);
-							color: #0FAF76;
-						}
-
-						.nohandle {
-							background: rgba(239, 45, 45, 0.1);
-							color: rgba(239, 45, 45, 1);
-						}
 					}
 
 					.secondCard,

monitorMobile/pages/earlyWarning/components/warningInfo.vue

@@ -1,15 +1,7 @@
 <template>
 	<view class="warningInfo">
 		<view class="searchBox">
-			<view class="searchLine">
-				<!-- <view class="leftSearchBox">
-					<view class="searchLabel">
-						筛选条件:
-					</view>
-					<view class="searchValue">
-
-					</view>
-				</view> -->
+			<!-- <view class="searchLine">
 				<view class="searchShow" @click="openSearch">
 					<image v-show="isShowSearch==false" style="width:20px;height:20px;"
 						src="@/static/image/earlyWarning/screen.png" mode="">
@@ -25,6 +17,24 @@
 						<image v-show="isShowSearch" src="@/static/image/earlyWarning/arrow2.png" mode=""></image>
 					</view>
 				</view>
+			</view> -->
+			<view class="searchLine" @click="openSearch">
+				<!-- <view class="searchShow"> -->
+				<view class="searchLabels">
+					<image v-show="isShowSearch==false" src="@/static/image/earlyWarning/screen.png" mode="">
+					</image>
+					<image v-show="isShowSearch" src="@/static/image/earlyWarning/screenActive.png" mode="">
+					</image>
+					<text class="labels">筛选</text>
+					<view class="values">周界入侵，未处理，2024-8-24 18:06:12 - 2024-8-24 18:06:12</view>
+				</view>
+			
+				<view class="arrow">
+					<image v-show="isShowSearch==false" src="@/static/image/earlyWarning/arrow1.png" mode="">
+					</image>
+					<image v-show="isShowSearch" src="@/static/image/earlyWarning/arrow2.png" mode=""></image>
+				</view>
+				<!-- </view> -->
 			</view>
 			<view @click="isShowSearch=false" class="searchDialog" v-if="isShowSearch">
 				<view class="content" @click.stop="isSelect">
@@ -352,28 +362,34 @@
 		.searchLine {
 			height: 88rpx;
 			display: flex;
-			justify-content: space-between;
 			align-items: center;
+			justify-content: space-between;
 			padding: 0 15px;
 			box-sizing: border-box;
 			background: #fff;
-
-			.searchShow {
+			font-size: 28rpx;
+		
+			.searchLabels {
 				display: flex;
 				align-items: center;
-				font-size: 28rpx;
-				width: 100%;
-
+				width: calc(100% - 34rpx);
+		
+				image {
+					width: 40rpx;
+					height: 40rpx;
+					flex-shrink: 1;
+				}
+		
 				.labels {
-					width: 90rpx;
+					width: 70rpx;
 					display: block;
 					color: #333333;
 					margin-left: 10rpx;
 					flex-shrink: 1;
 				}
-
+		
 				.values {
-					// width: calc(100% - 30rpx - 34rpx);
+					width: calc(100% - 40rpx - 50rpx);
 					color: #2388FF;
 					font-weight: 700;
 					margin-left: 18rpx;
@@ -384,28 +400,30 @@
 					-webkit-box-orient: vertical;
 					-webkit-line-clamp: 1;
 				}
-
-				.arrow {
-					text-align: right;
-
-					image {
-						width: 34rpx;
-						height: 34rpx;
-					}
+			}
+		
+		
+			.arrow {
+				// text-align: right;
+				// flex-shrink: 1;
+		
+				image {
+					width: 34rpx;
+					height: 34rpx;
 				}
 			}
-
+		
 			.leftSearchBox {
 				display: flex;
 				align-items: center;
 				width: calc(100% - 40px);
-
+		
 				.searchLabel {
 					flex-shrink: 1;
 					color: #333333;
 					width: 80px;
 				}
-
+		
 				.searchValue {
 					width: calc(100% - 60px);
 					margin-left: 10px;
@@ -413,7 +431,6 @@
 					overflow: hidden;
 					word-wrap: break-word;
 					white-space: pre-wrap;
-					// font-size: 14px;
 					display: -webkit-box;
 					-webkit-box-orient: vertical;
 					-webkit-line-clamp: 1;
@@ -429,8 +446,6 @@
 			height: calc(100vh - 375rpx - 60rpx);
 			font-size: 26rpx;
 			background: rgba(0, 0, 0, 0.2);
-
-
 			.content {
 				background: #FFFFFF;
 				padding: 15px;