背景
从0开发个微信小程序，使用云开发，做的是同城微圈类似，名字还没想好。
wxml
<!--搜索-->
<view class="sous">
<navigator class="sss" url="/pages/search/search" hover-class="none">
<icon class="xbz" type="search" size="18" color="#6a6a6a" />
<text class="wzz">搜索您需要的内容关键字{{city1}}</text>
</navigator>
<!--搜索 end -->
<!--城市 start -->
<navigator class="csi" url="/pages/switchcity/switchcity" hover-class="none">
<i><image src='/images/arrowdown2.png' mode="widthFix"></image></i>
<h3>{{bdcity}}</h3>
</navigator>
<!--城市 end -->
</view>
样式
/*搜索 & 城市 start*/
.sous{width: 100%; height: 120rpx; margin: 0 auto; box-sizing: border-box; background: #ffffff; padding:20rpx 30rpx;}
.sous::after{ content: ""; display: block; clear: both;}
.sss{width:76%; height:80rpx; margin: 0 auto; box-sizing: border-box; background: #f1f1f1; border-radius: 50rpx;
display: block; padding-left: 20rpx;float: left;}
.csi{width:22%; height:80rpx; margin: 0 auto; box-sizing: border-box; float: right;}
.csi::after{ content: ""; display: block; clear: both;}
.csi h3{display: block; float: right; font-size:32rpx; color: #333; line-height: 80rpx;
overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis; width:120rpx;
-webkit-text-overflow:ellipsis;-moz-text-overflow:ellipsis;white-space:nowrap;}
.csi i{ display:block; width:25rpx; height:25rpx; float: right; margin-top:30rpx;}
.csi i image{ display: block; width: 100%; margin: 0 auto;}
.sss::after{ content: ""; display: block; clear: both;}
.sss .xbz{ display: block; margin-top:24rpx; float: left; margin-right: 10rpx;}
.sss .wzz{ display:block; float: left; font-size:28rpx; color: #6a6a6a; line-height:78rpx;}
/*搜索 & 城市 end */
定位数据等会继续做....
