浏览代码

列表框显示布局问题,找桩地图显示布局问题

zhupeng 3 年之前
父节点
当前提交
b6814056ac
共有 3 个文件被更改,包括 36 次插入36 次删除
  1. 23 23
      components/uni-combox/components/uni-combox/uni-combox.vue
  2. 6 6
      pages/search/search.vue
  3. 7 7
      pages/searchPile/searchPile.vue

+ 23 - 23
components/uni-combox/components/uni-combox/uni-combox.vue

@@ -159,10 +159,10 @@
 
 <style lang="scss" scoped>
 	.uni-combox {
-		font-size: 14px;
-		border: 1px solid #DCDFE6;
-		border-radius: 4px;
-		padding: 6px 10px;
+		font-size: 28rpx;
+		border: 2rpx solid #DCDFE6;
+		border-radius: 8rpx;
+		padding: 12rpx 20rpx;
 		position: relative;
 		/* #ifndef APP-NVUE */
 		display: flex;
@@ -174,9 +174,9 @@
 	}
 
 	.uni-combox__label {
-		font-size: 16px;
-		line-height: 22px;
-		padding-right: 10px;
+		font-size: 32rpx;
+		line-height: 44rpx;
+		padding-right: 20rpx;
 		color: #999999;
 	}
 
@@ -192,13 +192,13 @@
 
 	.uni-combox__input {
 		flex: 1;
-		font-size: 14px;
-		height: 22px;
-		line-height: 22px;
+		font-size: 28rpx;
+		height: 44rpx;
+		line-height: 44rpx;
 	}
 
 	.uni-combox__input-plac {
-		font-size: 14px;
+		font-size: 28rpx;
 		color: #999;
 	}
 
@@ -207,20 +207,20 @@
 		box-sizing: border-box;
 		/* #endif */
 		position: absolute;
-		top: calc(100% + 12px);
+		top: calc(100% + 24rpx);
 		left: 0;
 		width: 100%;
 		background-color: #FFFFFF;
 		border: 1px solid #EBEEF5;
 		border-radius: 6px;
-		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+		box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
 		z-index: 2;
-		padding: 4px 0;
+		padding: 8rpx 0;
 	}
 
 	.uni-combox__selector-scroll {
 		/* #ifndef APP-NVUE */
-		max-height: 200px;
+		max-height: 400rpx;
 		box-sizing: border-box;
 		/* #endif */
 	}
@@ -231,11 +231,11 @@
 		display: flex;
 		cursor: pointer;
 		/* #endif */
-		line-height: 36px;
-		font-size: 14px;
+		line-height: 72rpx;
+		font-size: 28rpx;
 		text-align: center;
 		// border-bottom: solid 1px #DDDDDD;
-		padding: 0px 10px;
+		padding: 0px 20rpx;
 	}
 
 	.uni-combox__selector-item:hover {
@@ -258,22 +258,22 @@
 		height: 0;
 		border-color: transparent;
 		border-style: solid;
-		border-width: 6px;
+		border-width: 12rpx;
 	}
 
 	.uni-popper__arrow {
 		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
-		top: -6px;
+		top: -12rpx;
 		left: 10%;
-		margin-right: 3px;
+		margin-right: 6rpx;
 		border-top-width: 0;
 		border-bottom-color: #EBEEF5;
 	}
 
 	.uni-popper__arrow::after {
 		content: " ";
-		top: 1px;
-		margin-left: -6px;
+		top: 2rpx;
+		margin-left: -12rpx;
 		border-top-width: 0;
 		border-bottom-color: #fff;
 	}

+ 6 - 6
pages/search/search.vue

@@ -1,8 +1,8 @@
 
 <template>
 	<view>
-		<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 title="" ref='navbar' id='navbar' :height='nav_height'> 
+			<u-search id='search' ref='search' height="88"  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,
+				nav_height:44,
 				userId:'',
 				keyword:'',
 			  stations_filter:[],
@@ -59,10 +59,10 @@
 			
 			//var px1 = uni.upx2px(88);
 			
-			var rpx = 40/(uni.upx2px(100)/100);			 
+			//var rpx = 40/(uni.upx2px(100)/100);			 
 			// 验证上面rpx的值
-			var px = uni.upx2px(rpx); 
-			this.search_height = rpx;
+			var px = uni.upx2px(88); 
+			this.nav_height = px;
 			// console.log('搜索框高度'+JSON.stringify(rpx))
 			// console.log('搜索框高度'+JSON.stringify(px))
 			/*

+ 7 - 7
pages/searchPile/searchPile.vue

@@ -1,13 +1,13 @@
 <template>
 	<view>
-		<u-navbar :is-back="false" height="88" style="background-color: bisque;">
+		<u-navbar :is-back="false" :height="nav_height" style="background-color: bisque;">
 			<view style="display: flex;flex-direction: column; width: 100%;height: 100%;">
 				<view style="display: flex;flex-direction: row; height: 100%; align-items: center;margin-top:0rpx;padding-top: 0rpx;padding-bottom: 20rpx;">
 					<view style="margin-left:20rpx;width: 160rpx;">
 						<uni-combox ref="city" :border="false" v-model="area" :candidates="cities" @updateModel='updateCity' @updateSelector="updateCitySelector"></uni-combox> 
  					</view>
 					<view style="margin-left: 20rpx;margin-right: 20rpx; flex:1" >
-						<u-search :height="search_height" placeholder="搜索站点名称" v-model="keyword" :showAction="false"  @focus="navigate"></u-search></view>
+						<u-search height="88" placeholder="搜索站点名称" v-model="keyword" :showAction="false"  @focus="navigate"></u-search></view>
 					<view style="margin-right: 20rpx;" v-show="viewMode" @click="listMode">
 						<text class="iconfont">&#xe613;</text> <text class="list">列表</text>
 <!--						<u-icon name="list-dot" size="26" color="#c0c4cc"></u-icon>
@@ -179,7 +179,7 @@
 				<view>
 					<Chargermap @onMoveStart="moveStart"   @onMoveEnd="moveEnd" ref="amap" @onClicked="onClicked" @onload="mapdown" @clickMap="clickMap"></Chargermap>
 					<!--@location="location"-->
-					<u-image style='position:absolute;z-index:1023;right:20px;bottom:260px;' src="@/static/img/location.png" width="30px" height="30px" @click="setCenter"></u-image>
+					<u-image style='position:absolute;z-index:1023;right:40rpx;bottom:520rpx;' src="@/static/img/location.png" width="60rpx" height="60rpx" @click="setCenter"></u-image>
 					 
 				</view>
 				<view v-if="stationsmap.length>0" class="chargerCard" style="border-radius: 20rpx;" > 
@@ -278,7 +278,7 @@ export default {
 	},
 	data() {
 		return { 
-			search_height:88,
+			nav_height:88,
 			showCity:false,
 			showType:false,
 			showRadius:false,
@@ -345,10 +345,10 @@ export default {
 	onLoad(op) {
 		_self = this;
 		
-		var rpx = 40/(uni.upx2px(100)/100);
+		//var rpx = 40/(uni.upx2px(100)/100);
 		// 验证上面rpx的值
-		var px = uni.upx2px(rpx); 
-		this.search_height = rpx;
+		var px = uni.upx2px(176); 
+		this.nav_height = px;
 		
 		console.log('longitude0  ' + _self.longitude);
 		console.log('latitude0  ' + _self.latitude);