UI

components/bottomSheet/bottomSheet.vue

@@ -16,55 +16,55 @@
 						<view class="uni-media-list-body" style="margin-left: 15px;">
 							<view v-if="title=='拆旧管'">
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;">
-									腐蚀等级:{{value.zEngineeringMaterialBo[0].corrosionLevel}}</view>
+									  >
+									<view class="tit-text">腐蚀等级:</view>{{value.zEngineeringMaterialBo[0].corrosionLevel}}</view>
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;">
-									施工时间:{{value.createTime}}</view>
+									  >
+									<view class="tit-text">施工时间:</view>{{value.createTime}}</view>
 							</view>
 
 							<view v-if="title=='打孔'">
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;">
-									孔距:{{value.zEngineeringMaterialBo[0].corrosionLevel}}</view>
+									  >
+									<view class="tit-text">孔距:</view>{{value.zEngineeringMaterialBo[0].corrosionLevel}}</view>
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;">
-									施工时间:{{value.createTime}}</view>
+									  >
+									<view class="tit-text">施工时间:</view>{{value.createTime}}</view>
 							</view>
 							<view v-else-if="title=='立杠'||title=='表后管'||title=='挂表'||title=='阀管'||title=='报警器切断阀'">
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;" v-show="title=='阀管'">
-									上门类型:{{value.zEngineeringMaterialBo[0].visitType}}</view>
+									   v-show="title=='阀管'">
+									<view class="tit-text">上门类型:</view>{{value.zEngineeringMaterialBo[0].visitType}}</view>
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;" v-show="title=='阀管'">
-									自闭阀类型:{{value.zEngineeringMaterialBo[0].selfClosingValveType}}</view>
+									   v-show="title=='阀管'">
+									<view class="tit-text">自闭阀类型:</view>{{value.zEngineeringMaterialBo[0].selfClosingValveType}}</view>
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;"
+									  
 									v-show="title=='立杠'||title=='表后管'||title=='阀管'">
-									材质:{{value.zEngineeringMaterialBo[0].materialQualityName}}</view>
+									<view class="tit-text">材质:</view>{{value.zEngineeringMaterialBo[0].materialQualityName}}</view>
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;"
+									  
 									v-show="title=='立杠'||title=='表后管'||title=='阀管'">
-									规格:{{value.zEngineeringMaterialBo[0].specificationsName}}</view>
+									<view class="tit-text">规格:</view>{{value.zEngineeringMaterialBo[0].specificationsName}}</view>
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;" v-show="title=='挂表'">
-									品牌:{{value.zEngineeringMaterialBo[0].brand}}</view>
+									   v-show="title=='挂表'">
+									<view class="tit-text">品牌:</view>{{value.zEngineeringMaterialBo[0].brand}}</view>
 									<view class="uni-media-list-text-top"
-										style="font-size: 13px;color: #000;margin-top: 5px;" v-show="title=='报警器切断阀'">
-										厂家:{{value.zEngineeringMaterialBo[0].brand}}</view>
+										   v-show="title=='报警器切断阀'">
+										<view class="tit-text">厂家:</view>{{value.zEngineeringMaterialBo[0].brand}}</view>
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;" v-show="title=='立杠'||title=='表后管'||title=='挂表'||title=='阀管'">
-									数量:{{value.zEngineeringMaterialBo[0].number}}</view>
+									   v-show="title=='立杠'||title=='表后管'||title=='挂表'||title=='阀管'">
+									<view class="tit-text">数量:</view>{{value.zEngineeringMaterialBo[0].number}}</view>
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;">
-									施工时间:{{value.createTime}}</view>
+									  >
+									<view class="tit-text">施工时间:</view>{{value.createTime}}</view>
 							</view>
 							
 							<view
 								v-else-if="title=='放线'||title=='挖沟'||title=='焊接'||title=='下沟'||title=='除锈'||title=='刷油'||title=='打磨'||title=='焊接'">
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;">
-									施工时间:{{value.constructTime}}</view>
+									  >
+									<view class="tit-text">施工时间:</view>{{value.constructTime}}</view>
 								<view class="uni-media-list-text-top">
 									<view class="uni-common-mt" style="width: 100%;">
 										<text class="uni-title uni-common-pl" style=" font-size: 13px;color:
@@ -78,22 +78,22 @@
 									</view>
 								</view>
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;">
-									材质:{{value.zEngineeringMaterialBo[0].materialQualityName}}</view>
+									  >
+									<view class="tit-text">材质:</view>{{value.zEngineeringMaterialBo[0].materialQualityName}}</view>
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;">
-									规格:{{value.zEngineeringMaterialBo[0].specificationsName}}</view>
+									  >
+									<view class="tit-text">规格:</view>{{value.zEngineeringMaterialBo[0].specificationsName}}</view>
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;">
-									数量:{{value.zEngineeringMaterialBo[0].number}}</view>
+									  >
+									<view class="tit-text">数量:</view>{{value.zEngineeringMaterialBo[0].number}}</view>
 							</view>
 							<view v-else-if="title=='回填'">
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;">
-									施工时间:{{value.constructTime}}</view>
+									  >
+									<view class="tit-text">施工时间:</view>{{value.constructTime}}</view>
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;">
-									回填时间:{{value.backfillTime}}</view>
+									  >
+									<view class="tit-text">回填时间:</view>{{value.backfillTime}}</view>
 								<view class="uni-media-list-text-top">
 									<view class="uni-common-mt" style="width: 100%;">
 										<text class="uni-title uni-common-pl" style=" font-size: 13px;color:
@@ -107,21 +107,21 @@
 									</view>
 								</view>
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;">
-									材质:{{value.zEngineeringMaterialBo[0].materialQualityName}}</view>
+									  >
+									<view class="tit-text">材质:</view>{{value.zEngineeringMaterialBo[0].materialQualityName}}</view>
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;">
-									规格:{{value.zEngineeringMaterialBo[0].specificationsName}}</view>
+									  >
+									<view class="tit-text">规格:</view>{{value.zEngineeringMaterialBo[0].specificationsName}}</view>
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;">
-									数量:{{value.zEngineeringMaterialBo[0].number}}</view>
+									  >
+									<view class="tit-text">数量:</view>{{value.zEngineeringMaterialBo[0].number}}</view>
 							</view>
 							<view v-else-if="title=='打压'">
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;">
-									施工时间:{{value.constructTime}}</view>
+									  >
+									<view class="tit-text">施工时间:</view>{{value.constructTime}}</view>
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;">
+									  >
 									分段打压是否台格:{{value.segmentedCompressionQualified=='Y'?'是':'否'}}</view>
 								<view class="uni-media-list-text-top">
 									<view class="uni-common-mt" style="width: 100%;">
@@ -136,26 +136,26 @@
 									</view>
 								</view>
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;">
-									材质:{{value.zEngineeringMaterialBo[0].materialQualityName}}</view>
+									  >
+									<view class="tit-text">材质:</view>{{value.zEngineeringMaterialBo[0].materialQualityName}}</view>
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;">
-									规格:{{value.zEngineeringMaterialBo[0].specificationsName}}</view>
+									  >
+									<view class="tit-text">规格:</view>{{value.zEngineeringMaterialBo[0].specificationsName}}</view>
 								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;">
-									数量:{{value.zEngineeringMaterialBo[0].number}}</view>
+									  >
+									<view class="tit-text">数量:</view>{{value.zEngineeringMaterialBo[0].number}}</view>
 							</view>
 							<view class="uni-media-list-text-top">
 
-								<text style="font-size: 13px;color: #000;margin-top: 5px;">负责人:</text>
+								<view class="tit-text">负责人:</view>
 								<text
-									style="font-size: 13px;color: #000;margin-top: 5px;">{{value.constructUser}}</text>
+									  >{{value.constructUser}}</text>
 							</view>
 							<view class="uni-media-list-text-top">
 
-								<text style="font-size: 13px;color: #000;margin-top: 5px;">负责人联系电话:</text>
+								<view class="tit-text">负责人联系电话:</view>
 								<text
-									style="font-size: 13px;color: #000;margin-top: 5px;">{{value.constructPhone}}</text>
+									  >{{value.constructPhone}}</text>
 							</view>
 							<view class="" style="display: flex; flex-wrap: wrap;margin-top: 10px;">
 								<text style="margin-left: 30rpx;margin-top: 6rpx;">{{ value.published_at }}</text>
@@ -238,13 +238,45 @@
 	}
 </script>
 
-<style lang="less">
+
+<style lang="scss">
+	.uni-media-list-body{
+		border:1px solid #eee;
+		border-radius: 40rpx;
+		margin:10rpx 30rpx 20rpx;
+		padding: 10rpx 0 40rpx;
+		box-shadow: 0 0 5px #eee;
+	}
 	.share {
 		width: 100%;
 		height: 100%;
 
 	}
 
+	.tit-text {
+		color: #4f535a;
+		margin-right: 20rpx;
+	}
+	.normal-text{
+		
+	}
+	.cz-style{
+		background: #e8f4f9;
+		    margin: 20rpx;
+		    padding: 10rpx;
+		    border-radius: 20rpx;
+		    border: 1px solid #d4e3f0;
+	}
+
+	.uni-media-list-text-top {
+		font-size: 14px;
+		color: #696969;
+		padding: 20rpx 20rpx;
+		border-bottom: 1px solid #eee;
+		display: flex;
+		align-items: center;
+	}
+
 	.share-box {
 		width: 100%;
 		height: 100%;
@@ -266,7 +298,7 @@
 	}
 
 	.scroll-Y {
-		height: 750rpx;
+		height: 58vh;
 	}
 
 	// 离开分享动画
@@ -286,28 +318,28 @@
 			height: 30px;
 			display: flex;
 			justify-content: left;
-			margin-left: 15px;
+			margin: 30rpx 35rpx;
 			align-items: center;
 
-			&::after {
-				content: '';
-				width: 240rpx;
-				height: 0rpx;
-				border-top: 1px solid #E4E7ED;
-				-webkit-transform: scaleY(0.5);
-				transform: scaleY(0.5);
-				margin-left: 30rpx;
-			}
+			// &::after {
+			// 	content: '';
+			// 	width: 240rpx;
+			// 	height: 0rpx;
+			// 	border-top: 1px solid #E4E7ED;
+			// 	-webkit-transform: scaleY(0.5);
+			// 	transform: scaleY(0.5);
+			// 	margin-left: 30rpx;
+			// }
 
-			&::before {
-				content: '';
-				width: 240rpx;
-				height: 0rpx;
-				border-top: 1px solid #E4E7ED;
-				-webkit-transform: scaleY(0.5);
-				transform: scaleY(0.5);
-				margin-right: 30rpx;
-			}
+			// &::before {
+			// 	content: '';
+			// 	width: 240rpx;
+			// 	height: 0rpx;
+			// 	border-top: 1px solid #E4E7ED;
+			// 	-webkit-transform: scaleY(0.5);
+			// 	transform: scaleY(0.5);
+			// 	margin-right: 30rpx;
+			// }
 		}
 
 		.content {
@@ -345,5 +377,7 @@
 			align-items: center;
 			border-top: 1rpx solid #E4E7ED;
 		}
+		
+
 	}
 </style>

components/bottomSheet/bottomSheetMore.vue

@@ -13,15 +13,13 @@
 					:key="key">
 					<view class="uni-media-list">
 
-						<view class="uni-media-list-body" style="margin-left: 15px;">
+						<view class="uni-media-list-body">
 
-
-
-
-							<view class="uni-media-list-text-top" style="font-size: 13px;color: #000;margin-top: 5px;">
-								施工时间:{{value.constructTime}}</view>
+							<view class="uni-media-list-text-top">
+								<view class="tit-text">施工时间:</view><view class="normal-text">{{value.constructTime}}</view>
+							</view>
 							<!-- <view v-if="title=='进场'||title=='导向'||title=='挖孔'||title=='回拖'"
-								class="uni-media-list-text-top" style="font-size: 13px;color: #000;margin-top: 5px;">
+								class="uni-media-list-text-top" style=" ">
 								描述:{{value.remark}}</view> -->
 							<view v-if="title=='进场'||title=='导向'||title=='挖孔'||title=='回拖'"
 								class="uni-media-list-text-top">
@@ -36,38 +34,34 @@
 									</view>
 								</view>
 							</view>
-							<view v-for="(a,index) in value.zEngineeringMaterialBo" :key="index">
+							<view class="cz-style" v-for="(a,index) in value.zEngineeringMaterialBo" :key="index">
 
-								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;">
-									材质:{{a.materialQualityName}}</view>
+								<view class="uni-media-list-text-top" style=" ">
+									<view class="tit-text">材质:</view><view class="normal-text">{{a.materialQualityName}}</view>
+								</view>
 
 
 
-								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;">
-									规格:{{a.specificationsName}}</view>
+								<view class="uni-media-list-text-top" style=" ">
+									<view class="tit-text">规格:</view><view class="normal-text">{{a.specificationsName}}</view>
+								</view>
 
 
 
-								<view class="uni-media-list-text-top"
-									style="font-size: 13px;color: #000;margin-top: 5px;">
-									数量:{{a.number}}</view>
+								<view class="uni-media-list-text-top" style=" ">
+									<view class="tit-text">数量:</view><view class="normal-text">{{a.number}}</view>
+								</view>
 
 							</view>
 
 
 							<view class="uni-media-list-text-top">
-
-								<text style="font-size: 13px;color: #000;margin-top: 5px;">负责人:</text>
-								<text
-									style="font-size: 13px;color: #000;margin-top: 5px;">{{value.constructUser}}</text>
+									<view class="tit-text">负责人:</view>
+								<view class="normal-text">{{value.constructUser}}</view>
 							</view>
 							<view class="uni-media-list-text-top">
-
-								<text style="font-size: 13px;color: #000;margin-top: 5px;">负责人联系电话:</text>
-								<text
-									style="font-size: 13px;color: #000;margin-top: 5px;">{{value.constructPhone}}</text>
+									<view class="tit-text">负责人联系电话:</view>
+								<view class="normal-text">{{value.constructPhone}}</view>
 							</view>
 							<view class="" style="display: flex; flex-wrap: wrap;margin-top: 10px;">
 								<text style="margin-left: 30rpx;margin-top: 6rpx;">{{ value.published_at }}</text>
@@ -84,7 +78,6 @@
 										<video :src="item"
 											style="width: 100rpx; height: 100rpx; margin: 0 12rpx;"></video>
 									</view>
-
 								</view>
 							</view>
 						</view>
@@ -168,13 +161,44 @@
 	}
 </script>
 
-<style lang="less">
+<style lang="scss">
+	.uni-media-list-body{
+		border:1px solid #eee;
+		border-radius: 40rpx;
+		margin:10rpx 30rpx 20rpx;
+		padding: 10rpx 0 40rpx;
+		box-shadow: 0 0 5px #eee;
+	}
 	.share {
 		width: 100%;
 		height: 100%;
 
 	}
 
+	.tit-text {
+		color: #4f535a;
+		margin-right: 20rpx;
+	}
+	.normal-text{
+		
+	}
+	.cz-style{
+		background: #e8f4f9;
+		    margin: 20rpx;
+		    padding: 10rpx;
+		    border-radius: 20rpx;
+		    border: 1px solid #d4e3f0;
+	}
+
+	.uni-media-list-text-top {
+		font-size: 14px;
+		color: #696969;
+		padding: 20rpx 20rpx;
+		border-bottom: 1px solid #eee;
+		display: flex;
+		align-items: center;
+	}
+
 	.share-box {
 		width: 100%;
 		height: 100%;
@@ -196,7 +220,7 @@
 	}
 
 	.scroll-Y {
-		height: 750rpx;
+		height: 58vh;
 	}
 
 	// 离开分享动画
@@ -216,7 +240,7 @@
 			height: 30px;
 			display: flex;
 			justify-content: left;
-			margin-left: 15px;
+			margin: 30rpx 35rpx;
 			align-items: center;
 
 			// &::after {
@@ -275,5 +299,7 @@
 			align-items: center;
 			border-top: 1rpx solid #E4E7ED;
 		}
+		
+
 	}
 </style>