.search-bar {
  display       : flex;
  flex-direction: row;
  align-items   : center;
  padding       : 0 20rpx;
  box-sizing    : border-box;
  width         : 100%;
}

.search-input {
  height          : 60rpx;
  background-color: #f3f3f3;
  display         : flex;
  flex-direction  : row;
  flex            : 1;
  align-items     : center;
  padding-left    : 30rpx;
  box-sizing      : border-box
}

.search-input-primary {
  border-radius: 8rpx
}

.search-input-circle {
  border-radius: 30rpx
}

.cancel {
  font-size      : 28rpx;
  color          : #666;
  display        : flex;
  align-items    : center;
  width          : 60rpx;
  justify-content: center;
  height         : 60rpx;
  margin-left    : 15rpx;
}

.input {
  height     : 40rpx;
  line-height: 40rpx;
  flex       : 1;
  margin-left: 15rpx;
  font-size  : 28rpx;
  color      : #666;
}

.input-center {
  text-align: center
}

.input-left {
  text-align: left
}

.close-wrap {
  padding: 10rpx;
}

.close {
  height         : 30rpx;
  width          : 30rpx;
  background     : #ddd;
  display        : flex;
  align-items    : center;
  justify-content: center;
  border-radius  : 50%;
  padding-top    : 3rpx;
  box-sizing     : border-box;
  margin-right   : 15rpx;
}

.pls-class {
  color    : #bdbdbd;
  font-size: 28rpx
}

.icon-container {
  display       : flex;
  flex-direction: row;
  align-items   : center;
  margin-right  : 15rpx;
}

.city {
  font-size   : 28rpx;
  color       : #333;
  margin-right: 10rpx
}