样式优化

ghsApp/src/pagesArrears/details.vue

@@ -22,20 +22,20 @@
 		v-if="!$util.isEmpty(unClear)" @click="goClear(unClear)">
 			<text>有一个待结账单 ¥{{unClear.actPrice?parseFloat(unClear.actPrice):0}}</text><text style="font-weight:bold;margin-left:15upx;">查看</text>
 		</view>
-		<view :class="device == 'ios' ? 'ios-bar-view':'android-bar-view'">
-			<template>
+		<view class="bottom-bar-view">
+			<view class="bar-content">
 				<view class="info-view">
 					<view class="details-select" @click="checkFn()" >
-
-						<button class="admin-button-com blue middle" v-if="isAllCheck">全不选</button>
-						<button class="admin-button-com blue middle" v-else>全选</button>
-
+						<button class="admin-button-com blue big" v-if="isAllCheck">全不选</button>
+						<button class="admin-button-com blue big" v-else>全都选</button>
+					</view>
+					<view class="select-info">
+						已选 <text class="price">{{ selectList.length }}</text> 笔 <text class="unit">¥</text> <text class="price">{{ parseFloat(selectTotalAmount) }}</text>
 					</view>
-					已选 <text class="price">{{ selectList.length }}</text> 笔 <text class="unit">¥</text> <text class="price">{{ parseFloat(selectTotalAmount) }}</text>
 				</view>
-			</template>
-			<view class="btn-view">
-				<button :class="['admin-button-com', 'blue']" @click="createOrder">创建账单</button>
+				<view class="btn-view">
+					<button :class="['admin-button-com', 'blue','big']" @click="createOrder">创建账单</button>
+				</view>
 			</view>
 		</view>
 	</view>
@@ -64,7 +64,6 @@ export default {
 			searchTime:'',
 			startTime:'',
 			endTime:'',
-			device:'android',
 			unClear:[]
 		};
 	},
@@ -78,8 +77,6 @@ export default {
 			uni.stopPullDownRefresh();
 		});
 
-		this.device = uni.getSystemInfoSync().platform
-
 		getUnClear({customId:this.option.id}).then(res=>{
 			if(res.code == 1){
 				this.unClear = res.data.info
@@ -296,123 +293,64 @@ export default {
 		margin-top:98upx;
 		padding: 20upx 30upx;
 		flex: 1;
-		padding-bottom: 190upx;
-	}
-	.ios-bar-view {
-		bottom: 0;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 0 30upx;
-		width: 100%;
-		height: 100upx;
-		background: #fff;
-		box-shadow: 0upx -1upx 6upx 0upx rgba(4, 0, 0, 0.06);
-		.info-view {
-			display: flex;
-			align-items: center;
-			color: #333;
-			font-size: 24upx;
-			.iconfont {
-				font-size: 32upx;
-				color: #dddddd;
-			}
-			.price {
-				margin: 0 3upx;
-				color: $redColor;
-				font-size: 30upx;
-			}
-			.unit {
-				margin: 0 3upx;
-				color: $redColor;
-				font-size: 30upx;
-			}
-		}
-		.btn-view {
-			display: flex;
-			.admin-button-com {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				margin: 0 6upx;
-				width: 200upx;
-				height: 70upx;
-				font-size: 30upx;
-			}
-		}
+		padding-bottom: 220upx;
 	}
-	.android-bar-view {
+	.bottom-bar-view {
 		position: fixed;
+		left: 0;
+		right: 0;
 		bottom: 0;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 0 30upx;
+		z-index: 99;
 		width: 100%;
-		height: 100upx;
-		background: #fff;
+		background-color: #FFFFFF;
+		border-top: 1upx solid #eee;
 		box-shadow: 0upx -1upx 6upx 0upx rgba(4, 0, 0, 0.06);
-		.info-view {
+		
+		/* #ifdef MP-WEIXIN */
+		padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.2- */
+		padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2+ */
+		/* #endif */
+		
+		/* #ifdef APP-PLUS */
+		padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.2- */
+		padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2+ */
+		/* #endif */
+		
+		.bar-content {
+			width: 100%;
 			display: flex;
+			justify-content: space-between;
 			align-items: center;
-			color: #333;
-			font-size: 24upx;
-			.iconfont {
-				font-size: 32upx;
-				color: #dddddd;
-			}
-			.price {
-				margin: 0 3upx;
-				color: $redColor;
-				font-size: 30upx;
-			}
-			.unit {
-				margin: 0 3upx;
-				color: $redColor;
-				font-size: 30upx;
-			}
-		}
-		.btn-view {
-			display: flex;
-			.admin-button-com {
+			padding: 10upx 40upx;
+			
+			.info-view {
 				display: flex;
 				align-items: center;
-				justify-content: center;
-				margin: 0 6upx;
-				width: 200upx;
-				height: 70upx;
-				font-size: 30upx;
-			}
-		}
-	}
-  .details-select {
-    margin-right: 20upx;
-    display: inline-block;
-    .iconweixuanzhong,
-    .iconxuanzhong {
-      font-size: 40upx !important;
-    }
-    .iconxuanzhong {
-      color: $mainColor !important;
-    }
-  }
-	.select-cmd_bx {
-		.num_bx {
-			margin-top:30upx;
-			margin-bottom:50upx;
-			margin-left:80upx;
-			view{
-				height: 80upx;
-				font-size: 28upx;
+				color: #333;
+				font-size: 24upx;
+				
+				.details-select {
+					margin-right: 20upx;
+					
+				}
+				
+				.select-info {
+					font-size: 36upx;
+					.price {
+						color: $redColor;
+						font-size: 36upx;
+						margin: 0 3upx;
+					}
+					.unit {
+						color: $redColor;
+						font-size: 36upx;
+						margin: 0 3upx;
+					}
+				}
 			}
-			input {
-				height: 70upx;
-				border: 1upx solid #dddddd;
-				border-radius: 4upx;
-				text-align: left;
-				margin-right: 24upx;
-				font-size: 35upx;
-				width:300upx;
+			
+			.btn-view {
+				margin-left: 20upx;
 			}
 		}
 	}