.search-bar { position: sticky; top: 0; left: 0; display: flex; align-items: center; padding: 30rpx 20rpx; width: 100%; background-color: #F9F9F9; } .search-bar__city { flex-shrink: 1; display: flex; align-items: center; padding-right: 10rpx; } .search-bar__input { flex: 1; display: flex; align-items: center; border-radius: 40rpx; padding: 15rpx 30rpx; background-color: white; } .search-bar__input-inner { flex: 1; margin-left: 15rpx; } .community-list-item { display: flex; padding: 0 20rpx; } .community-list-item__cover { flex-shrink: 1; overflow: hidden; margin-top: 30rpx; margin-right: 30rpx; border-radius: 30rpx; width: 180rpx; height: 180rpx; } .community-list-item__image { width: 100%; height: 100%; } .community-list-item__content { flex: 1; padding: 30rpx 0; border-bottom: 1px solid #E6E6E6; font-size: 24rpx; } .community-list-item__title { font-weight: bold; font-size: 32rpx; } .community-list-item__property { margin-top: 14rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #555; } .community-list-item__address { margin-top: 18rpx; color: #999; } .community-list-item__actions { display: flex; align-items: center; margin-top: 25rpx; font-size: 22rpx; color: #555; } .community-list-item__action { display: flex; align-items: center; border-radius: 40rpx; padding: 7rpx 22rpx; } .community-list-item__nav { background-color: rgba(255, 81, 42, 0.10); } .community-list-item__call { margin-left: 20rpx; background-color: #FFF2DA; } .community-list-item__detail { border-radius: 80rpx; padding: 10rpx 23rpx; font-size: 26rpx; color: white; background-color: #D5AC66; }