微信小程序城市选择及搜索功能的方法(2)

/* pages/address/address.wxss */ .searchbox{ overflow: hidden; margin: 0 20rpx; } .search{ width: 20px; height: 20px; float: left; margin:7rpx 10rpx; } .input_box{ width: 630rpx; height: 50rpx; background: #efefef; border-radius: 30rpx; float: left; } .input_box input{ font-size: 25rpx; width: 450rpx; float: left; } .input_box .close{ width:30rpx; height:30rpx; background:#aaa; color:#fff; border-radius:50%; float:right; margin-right:20rpx; margin-top:10rpx; line-height:27rpx; font-size:30rpx; text-align:center; } .searchbox .cancel{ font-size: 25rpx; color: #53985F; width: 80rpx; text-align: right; float: right; line-height: 50rpx; } .current_city{ border-bottom: 1rpx solid #eee; } .li_style{ height: 50rpx; padding: 20rpx 0; width: 710rpx; line-height: 50rpx; font-size: 29rpx; margin:0 20rpx; } .searchLetter { position: fixed; right: 0; width: 50rpx; text-align: center; justify-content: center; display: flex; flex-direction: column; color: #666; z-index: 1; } .searchLetter view { margin-top: 20rpx; } .touchClass { background-color: #fff; color: #fff; top: 100rpx; } .showSlectedLetter { background-color: rgba(0, 0, 0, 0.5); color: #fff; display: flex; justify-content: center; align-items: center; position: fixed; top: 50%; left: 50%; margin: -100rpx; width: 200rpx; height: 200rpx; border-radius: 20rpx; font-size: 52rpx; z-index: 1; } .selection { display: flex; width: 100%; flex-direction: column; margin-top: 10rpx; } .item_letter { display: flex; background-color: #f5f5f5; height: 50rpx; padding-left: 34rpx; align-items: center; font-size: 24rpx; color: #666; } .item_city { display: flex; background-color: #fff; height: 100rpx; padding-left: 34rpx; align-items: center; border-bottom: 1rpx solid #ededed; font-size: 24rpx; color: #666; } .hotcity-common { font-size: 24rpx; color: #666; padding: 0 0 0 30rpx; } .thisCity { padding-top: 30rpx; } .thisCityName { display: inline-block; border: 1rpx solid #2ab4ff; border-radius: 8rpx; padding: 10rpx 0; font-size: 24rpx; color: #2ab4ff; text-align: center; min-width: 149.5rpx; margin: 20rpx 0 20rpx 30rpx; } .thishotText { color: #53985F; font-size: 20rpx; margin: 0 !important; } .slectCity { border-color: #2ab4ff !important; } .slectCity view { color: #2ab4ff !important; } .weui-grid { position: relative; float: left; padding: 10rpx 0; width: 149.5rpx; box-sizing: border-box; border: 1rpx solid #ececec; border-radius: 8rpx; margin: 10rpx 12rpx; } .weui-grid__label { display: block; text-align: center; color: #333; font-size: 24rpx; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .noData{ text-align: center; font-size: 30rpx; color: #aaa; line-height: 60rpx; }