page {
	height: 100vh;
	overflow: hidden;
}
.city-select-page {
	background-color: #f9f9f9;
	/* background-color: red; */
}
.white_container {
	background: #FFFFFF;
	padding: 0 20rpx;
}


.current-city {
	display: flex;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}
.current-city image {
	width: 33rpx;
	height: 33rpx;
	margin-right: 10rpx;
}

.hot-cities {
	margin-top: 40rpx;
  margin-bottom: 20rpx;
}

.title {
  font-weight: bold;
  margin-bottom: 30rpx;
  display: block;
}

.city-list {
  display: flex;
  flex-wrap: wrap;
}
.city_name {
	display: inline-block;
	padding: 13rpx 52rpx 18rpx;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	border: 1rpx solid #EBEBEB;
	font-size: 28rpx;
	color: #222222;
	font-weight: 600;
	margin-right: 10rpx;
	margin-bottom: 10rpx;
}

.padding_bottom40 {
	padding-bottom: 40rpx;
}

.margin_top20 {
	margin-top: 20rpx;
}




.container {
  display: flex;
  height: 50vh;
}
 
.list-scroll {
  flex: 1;
  height: 100%;
  overflow-y: auto;
}
 
.letter-title {
  padding: 10px;
  background-color: #f5f5f5;
  color: #333;
}
 
.list-item {
  padding: 12px 15px;
  border-bottom: 1px solid #eee;
}
 
.index-bar {
  width: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
}
 
.index-item {
  color: #666;
}
 
.index-item:active {
  color: #007aff;
}
.no_border {
	border: none;
}