jzmall_wx/pages/map/mapContent/mapContent.wxss

/* pages/jsCase/citySel/index.wxss */
page {
  height    : 100%;
  background: #f2f5f7;
}

.head {
  position  : fixed;
  top       : 0;
  left      : 0;
  width     : 100%;
  /* height    : 170rpx; */
  box-sizing: border-box;
  padding   : 20rpx 20rpx 20rpx;
  background: #fff;
  z-index   : 99999;
}
.search-box{
  display: flex;
  align-items: center;
}
.r_head {
  height: 90rpx;
}

.head_input {
  /* position: relative; */
  flex    : 1;
  display: flex;
  align-items: center;
  height: 60rpx;
padding-left:16rpx;
  border-radius: 30rpx;
  background   : #f2f5f7;
}

.search_icon {
  /* position    : absolute;
  top         : 50%;
  left        : 0;
  margin-top  : -15rpx; */
  width       : 30rpx;
  height      : 30rpx;
  margin-right:12rpx;
}

.head input {
  height       : 60rpx;
  /* padding-left : 75rpx; */
  font-size    : 28rpx;
}

.place_holder {
  font-size: 28rpx;
  color    : #999999;
}

.sha_icon {
  margin-left: 18rpx;
  font-size  : 28rpx;
  color      : #333333;
}

.head_curr {
  height     : 80rpx;
  display: flex;
  align-items: center;
  color      : #333;
  font-size  : 28rpx;
  /* padding-top: 20rpx; */
  box-sizing : border-box;
}

.h_c_icon {
  flex-shrink : 0;
  margin-right: 15rpx;
  width       : 32rpx;
  height      : 32rpx;
  margin-left:12rpx;
}

.sy_container {
  box-sizing : border-box;
  width      : 100%;
  height     : 100%;
  padding-top: 170rpx;
}

.hot_city .title {
  padding  : 10rpx 30rpx;
  color    : #999;
  font-size: 26rpx;
}

.hot_city .box {
  background-color: #fff;
  padding         : 5rpx 30rpx 15rpx 40rpx;
  box-sizing      : border-box;
}

.hot_city .box .name {
  vertical-align: top;
  display       : inline-block;
  min-width     : 140rpx;
  line-height   : 56rpx;
  height        : 56rpx;
  border-radius : 28rpx;
  font-size     : 28rpx;
  color         : #333;
  text-align    : center;
  padding       : 0 20rpx;
  box-sizing    : border-box;
  margin-top    : 10rpx;
  margin-right  : 20rpx;
  position      : relative;
}

.hot_city .box .name::after {
  content                 : '';
  position                : absolute;
  width                   : 200%;
  height                  : 200%;
  -webkit-transform-origin: 0 0;
  transform-origin        : 0 0;
  -webkit-transform       : scale(0.5, 0.5);
  transform               : scale(0.5, 0.5);
  -webkit-box-sizing      : border-box;
  box-sizing              : border-box;
  left                    : 0;
  top                     : 0;
  border-radius           : 56rpx;
  border                  : 2rpx solid rgb(235, 225, 225);
}

.sel_city {
  color     : #fff !important;
  background: pink;
}

.all_city .letter_name {
  height     : 48rpx;
  font-size  : 24rpx;
  color      : #999;
  background : #f2f5f7;
  padding    : 0 30rpx;
  line-height: 48rpx;
}

.all_city .city {
  background-color: #fff;
}

.all_city .city .name {
  width    : 100%;
  padding  : 30rpx;
  font-size: 28rpx;
  color    : #333;
  position : relative;
  overflow : hidden;
}


.all_city .city .name::after {
  content          : '';
  position         : absolute;
  border-bottom    : 1rpx solid #eaeef1;
  -webkit-transform: scaleY(0.5);
  transform        : scaleY(0.5);
  bottom           : 0;
  right            : 0;
  left             : 30rpx;
}

.city_hover {
  background-color: #eee !important;
}

.fixed_bar {
  position     : fixed;
  z-index      : 99999;
  top          : 180rpx;
  right        : 0px;
  padding-right: 10rpx;
  width        : 50rpx;
  font-size    : 22rpx;
  text-align   : center;
}

.bar_item {
  background-color: rgb(233, 228, 220);
  border-radius   : 50%;
}

@media screen and (max-width: 320px) {
  .fixed_bar {
    font-size: 20rpx;
  }
}

.bar_item_active {
  background-color: #fff;
  /* box-shadow      : 5rpx 5rpx 5rpx #f7c3ee; */
  box-shadow      : 5rpx 5rpx 5rpx #09afff;
}

.fixed_letter {
  position        : absolute;
  z-index         : 20;
  width           : 160rpx;
  height          : 160rpx;
  left            : 50%;
  top             : 50%;
  margin-left     : -80rpx;
  margin-top      : -80rpx;
  border-radius   : 80rpx;
  text-align      : center;
  line-height     : 160rpx;
  font-size       : 70rpx;
  color           : #fff;
  background-color: rgba(0, 0, 0, 0.5);
  /* box-shadow      : 5rpx 5rpx 5rpx #f7c3ee; */
  box-shadow      : 5rpx 5rpx 5rpx #09afff;
}

/* 搜索结果 */
.result_list {
  padding-top: 90rpx;
  background : #fff;
  width      : 100%;
}

.r_item {
  width     : 100%;
  position  : relative;
  padding   : 20rpx 20rpx 20rpx 30rpx;
  font-size : 28rpx;
  color     : #333;
  box-sizing: border-box;
  border-bottom    : 1rpx solid #eaeef1;
}

.r_item::after {
  /* content          : '';
  position         : absolute;
  border-bottom    : 1rpx solid #eaeef1;
  -webkit-transform: scaleY(0.5);
  transform        : scaleY(0.5);
  bottom           : 0;
  right            : 0;
  left             : 30rpx; */
}

.r_item_hover {
  background-color: #eee !important;
}

.no_data {
  margin-top:80px;
  height         : 500rpx;
  align-items: center;
  font-size      : 26rpx;
  color          : #999;
  display: flex;
  flex-direction: column;
}

.no_data image {
  width        : 250rpx;
  height       : 162rpx;
  margin-bottom: 30rpx;
}
#myMap {
  position: fixed;
  top: 80rpx;
  left: 0;
  z-index: 9;
  width: 100%;
  height: 580rpx;
  background-color: #f6f6f6;
}
.input-view{
  flex:1;
}
.city-block{
  display: flex;
  align-items: center;
}
.arrow-img{
  width:20rpx;
  height:20rpx;
  margin:0 8rpx;
  transform: rotate(0deg);
  transition:all 0.3s;
}
.arrow-up{
  transform: rotate(180deg);
  transition: all 0.3s;
}
.marker-name{
  z-index:99;
  top:282rpx;
  position: fixed;
  height:68rpx;
  line-height: 68rpx;
  border-radius: 68rpx;
  background: #fff;
  padding:0 20rpx;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  display: inline-block;
}
.map-icon{
  position: fixed;
  z-index:99;
  top:350rpx;
  width:70rpx;
  height:70rpx;
  left:340rpx;
}
.poi-list{
  position: fixed;
  background: #ffffff;
  z-index:9999;
  top:600rpx;
  width:100%;
  left:0;
  height: 1000rpx;
}
.poi-item{
  display: flex;
  padding:20rpx;
  border-bottom:1rpx solid #eee;
  align-items: center;
}
.poi-left{
  flex:1;
  display: flex;
  flex-direction: column;
}
.poi-name{
  font-size: 28rpx;
  color: #333;
  margin-bottom:12rpx;
}
.poi-address{
  font-size: 24rpx;
  color:#777;
}
.poi-right{
  margin-left:40rpx;
}
.hot_city{
  position: relative;
  z-index:9999;
  background: #f2f5f7;
}
.all_city{
  
}
.sy_container{
  position: relative;
  z-index:9999;
}
.result_list{
  position: relative;
  z-index:8888;
  min-height: 700rpx;
}