搜索页面搜索框与导航栏页面高度计算匹配

pages/search/search.vue

@@ -1,8 +1,8 @@
 
 <template>
 	<view>
-		<u-navbar title="">
-			<u-search class="search" placeholder="搜索站点名称" @change="search()" v-model="keyword" color="#c8c8c8" @search="search" @click="search" @clickicon='back' @custom='search'></u-search>
+		<u-navbar title="" ref='navbar' id='navbar' height='44'> 
+			<u-search id='search' ref='search' :height="search_height"  placeholder="搜索站点名称" @change="search()" v-model="keyword" color="#c8c8c8" @search="search" @click="search" @clickicon='back' @custom='search'></u-search>		 
 		</u-navbar>
 		<view class="recommend">推荐充电站</view>
 		<view class="charing-slow" v-for="(item,index) in stations_filter" :key="item.id">
@@ -41,7 +41,7 @@
 		data() {
 			
 			return {
-				
+				search_height:88,
 				userId:'',
 				keyword:'',
 			  stations_filter:[],
@@ -56,6 +56,15 @@
 		},
 		onLoad(op){
 			_self = this;
+			
+			//var px1 = uni.upx2px(88);
+			
+			var rpx = 40/(uni.upx2px(100)/100);			 
+			// 验证上面rpx的值
+			var px = uni.upx2px(rpx); 
+			this.search_height = rpx;
+			// console.log('搜索框高度'+JSON.stringify(rpx))
+			// console.log('搜索框高度'+JSON.stringify(px))
 			/*
 			if(op!= null && op.stationlist != null){
 				this.stations = decodeURIComponent(op.stationlist)
@@ -306,22 +315,29 @@
 </script>
 
 <style lang="scss" scoped>
+	
+	.navbar{
+		height:100%
+	}
+	.search{
+		height:100%
+	}
 	/deep/.u-content[data-v-1a326067] {
 		flex: 0.95;
 		color: #bdbdbd;
 	}
 
 	/deep/.u-action {
-		margin-right: 0px;
+		margin-right: 0rpx;
 		color: #c8c8c8;
 	}
 
 	.recommend {
 		width: 100%;
-		height: 44px;
-		line-height: 44px;
+		height: 88rpx;
+		line-height: 88rpx;
 		color: #101010;
-		padding: 0 16px;
+		padding: 0 32rpx;
 		background-color: #fff;
 		font-weight: 600;
 	}
@@ -329,90 +345,90 @@
 	.charing-slow {
 		width: 91%;
 		background-color: #fff;
-		margin: 12px auto 0;
-		border-radius: 8px;
-		padding: 10px 12px 0px;
+		margin: 24rpx auto 0;
+		border-radius: 16rpx;
+		padding: 20rpx 24rpx 0rpx;
 
 		.trickle-charge {
 			display: inline-block;
-			width: 44px;
-			height: 20px;
-			line-height: 20px;
-			border-radius: 50px;
+			width: 88rpx;
+			height: 40rpx;
+			line-height: 40rpx;
+			border-radius: 100rpx;
 			background-color: rgba(0, 185, 98, 100);
 			color: rgba(255, 255, 255, 100);
-			font-size: 12px;
+			font-size: 24rpx;
 			text-align: center;
 		}
 		.fast-trickle-charge{
 			display: inline-block;
-			width: 66px;
-			height: 20px;
-			line-height: 20px;
-			border-radius: 50px;
+			width: 132rpx;
+			height: 40rpx;
+			line-height: 40rpx;
+			border-radius: 100rpx;
 			background-color: #00BAC8;
 			color: rgba(255, 255, 255, 100);
-			font-size: 12px;
+			font-size: 24rpx;
 			text-align: center;
 		}
 		.fast-charge {
 			display: inline-block;
-			width: 44px;
-			height: 20px;
-			line-height: 20px;
-			border-radius: 50px;
+			width: 88rpx;
+			height: 40rpx;
+			line-height: 40rpx;
+			border-radius: 100rpx;
 			background-color: #9d9fff;
 			color: rgba(255, 255, 255, 100);
-			font-size: 12px;
+			font-size: 24rpx;
 			text-align: center;
 		}
 
 		.station-items {
 			display: inline-block;
-			height: 16px;
-			line-height: 16px;
-			font-size: 16px;
-			margin-left: 4px;
+			height: 32rpx;
+			line-height: 32rpx;
+			font-size: 32rpx;
+			margin-left: 8rpx;
 			color: #101010;
 
 
 		}
 
 		.address {
-			margin-top: 8px;
-			line-height: 16px;
-			font-size: 11px;
+			margin-top: 16rpx;
+			line-height: 32rpx;
+			font-size: 22rpx;
 			color: rgba(119, 119, 119, 100);
 		}
 		.price{
 			display: flex;
-			height: 20px;
+			height: 40rpx;
 			.num{
-				height: 20px;
+				height: 40rpx;
 				color: rgba(255, 98, 0, 100);
-				font-size: 20px;
+				font-size: 40rpx;
 				text-align: left;
 				font-family: Roboto-medium;
 			}
 			.unit{
-				height: 14px;
-				line-height: 14px;
+				height: 28rpx;
+				line-height: 28rpx;
 				color: rgba(102, 102, 102, 100);
-				font-size: 14px;
+				font-size: 28rpx;
 				text-align: left;
 				font-family: AlibabaPuHui-regular;
-				margin-top: 6px;
-				margin-left: 4px;
+				margin-top: 12rpx;
+				margin-left: 8rpx;
 			}
 		}
 		.park {
-			margin-top: 8px;
+			margin-top: 16rpx;
 		    display: flex;
 			.park-p {
 				display: inline-block;
-				width: 20px;
-				height: 18px;
-				line-height: 12px;
+				width: 40rpx;
+				height: 36rpx;
+				line-height: 24rpx;
 				text-align: center;
 				background-color: rgba(125, 177, 255, 100);
 				color: #fff;
@@ -420,37 +436,37 @@
 		
 			.park-text {
 				display: inline-block;
-				width: 300px;
-				height: 17px;
+				width: 600rpx;
+				height: 34rpx;
 				color: rgba(102, 102, 102, 100);
-				font-size: 12px;
+				font-size: 24rpx;
 				text-align: left;
-				margin-left: 4px;
-				margin-top: 2px;
+				margin-left: 8rpx;
+				margin-top: 4rpx;
 			}
 		}
 		.free{
 			display: flex;
 			justify-content: space-between;
-			height: 52px;
-			border-top: 1px solid rgba(238, 242, 240, 100);
-			margin-top: 10px;
+			height: 104rpx;
+			border-top: 2rpx solid rgba(238, 242, 240, 100);
+			margin-top: 20rpx;
 			.free-num{
-				line-height: 52px;
-				font-size: 16px
+				line-height: 104rpx;
+				font-size: 32rpx
 			}
 			.distance{
-				width: 130px;
-				height: 28px;
-				line-height: 28px;
+				width: 260rpx;
+				height: 56rpx;
+				line-height: 56rpx;
 				color: rgba(255, 255, 255, 100);
-				font-size: 14px;
+				font-size: 28rpx;
 				background-color: #00b962;
-				border-radius: 50px;
-				margin: 12px;
+				border-radius: 100rpx;
+				margin: 24rpx;
 				text-align: center;
 				.distance-font{
-					font-size: 16px
+					font-size: 32rpx
 				}
 				
 			}