@import "../../assets/stylus/colorConfig"
.proFixedTop{
  height 80px
}
.proFixedTop .pro-bar{
  height 50px
  line-height 32px
  box-sizing border-box
  padding 8px 6px 8px 10px
  overflow hidden
  text-align left
  color #fff
  .iconFilter{
    position absolute
    right 15px
    top 13px
    font-size 15px
    z-index 11
  }
  .pro-time{
    position relative
    min-width 40px
    padding 0  5px
    line-height 18px
    font-size 12px
    text-align center
    b{
      display block
      font-weight normal
    }
    &:after{
      content ''
      position absolute
      right 0px
      top 5px
      height 28px
      width 0.05rem
      background rgba(255, 255, 255, 0.49)
    }
  }
  .pro-info{
    position relative
    height 36px
    overflow hidden
    padding-left 8px
    font-size 14px
    span{
      i{
        font-size 14px
      }
    }
    i{
      font-size 16px
      font-style normal
    }
  }
}
.pro-sort{
  height 30px
  line-height 30px
  overflow hidden
  padding 0 8px
  font-size 13px
  color mainTitleColor
  box-shadow 0 2px 4px #e1e2e3
  .sort-bg{
    position absolute
    width 100vh
    height calc(100vh - 80px)
    left 0
    top 80px
    background rgba(0, 0, 0, 0.52)
  }
  span{
    position relative
    display inline-block
    margin-right 10px
    i{
      display inline-block
      transition all 0.2s
      &.asc{
        transform rotate(180deg)
      }
    }
  }
  p{
    i{
      font-size 14px
      margin-right 5px
      &.checked{
        color subColor
      }
    }
  }
  .sort-bar{
    height 30px
    .sort-item{
      display inline-block
      font-size 13px
      .icon-paixujiantouxia{
        position relative
        top -3px
      }
    }
  }
  .sort-ul{
    position absolute
    width 100%
    top 81px
    left 0px
    background #ffffff
    li{
      line-height 40px
      padding 0 15px
      border-bottom 1px solid border_color
      &.active{
        color subColor
      }
      i{
        display inline-block
        transition all 0.2s
        &.asc{
          transform rotate(180deg)
        }
      }
    }
  }

}
.filter-cell{
  position fixed
  width 80px
  height 36px
  line-height 34px
  left 50%
  bottom 36px
  transform translateX(-50%)
  text-align center
  border-radius 36px
  font-weight bold
  font-size 12px
  color #fff
  z-index 1002
  background rgba(0, 0, 0, 0.6)
  span{
    display inline-block
    width 14px
    height 14px
    line-height 13px
    margin-right 3px
    text-align center
    background #fff
    border-radius 100%
    font-size 10px
    font-weight normal
    color mainTitleColor
  }
  i{
    position relative
    top 2px
    margin-right 4px
    margin-top -3px
    font-weight normal
    &.desc{
      transform: rotate(180deg);
    }
  }
}
.pro-map{
  position fixed
  width 100%
  height 145px
  &.fullMap{
    height 100%
  }
}
.pro-result{
  box-shadow 0 -3px 18px #e1e2e3
  background #ffffff
  &.cityList-result{
    position absolute
    display inline-block
    width 100%
    height calc(100% - 80px)
    overflow hidden
    //overflow-y auto
    -webkit-overflow-scrolling touch
    margin-top 0
    padding 0
  }
  &.resultScrollTop{
    position absolute
    width 100%
    height calc(100% - 200px)
    padding-top 0
    margin-top 0
  }
  .p-head{
    position relative
    height 30px
    line-height 30px
    padding 0 20px
    background #eeeeee
    font-size 13px
  }
}

.cityList-inner{
  position relative
  display inline-block
  width 100%
  height 100%
  background #f8f8f8
  .city-cell{

    margin-bottom 10px
    .city-line{
      position relative
      display flex
      height 56px
      line-height 56px
      padding 0 30px 0 20px
      background #fff
      cursor pointer
      justify-content: space-between;
      .name{
        flex 0 0 40%
        font-weight bold
        font-size 16px
        color mainTitleColor
      }
      .totalHotel{
        min-width 65px
        font-size 12px
        color subheadColor
      }
      .price{
        width 130px
        left 380px
        top 0px
        text-align right
        font-size 16px
      }
      i.i-arrow{
        position absolute
        left 100%
        top 0px
        margin-left -23px
        font-size 10px
        color subheadColor
        transition all .4s
      }
      i.icon-rotate{
        transform:rotate(90deg)
      }
    }

    .c-pagination{
      height 60px
      padding 15px 20px
      border-bottom 1px solid border_color
      background #f9f9f9
      text-align right
      box-sizing border-box

    }
  }
  .city-hotel{
    padding 15px
    height 100%
    overflow-y auto
    -webkit-overflow-scrolling touch
    transition all .6s ease-in-out
    &.cityHotelDrop{
      height 100%
      padding-bottom 20px
      box-sizing border-box
      opacity 1
    }
    ul{
      /*li{
        position relative
        width 100%
        height 198px
        margin-bottom 14px
        color white
        background #fff
        border-radius 6px
        border-bottom 2px solid border_color
        .hotel-img{
          position relative
          float left
          left 0px
          top 0
          width 110px
          height 100%
          background url("https://file.luckytrip.cn/IBE/img/pic_hotel.jpg") no-repeat center
          background-size cover
          overflow hidden
          img{
            position absolute
            width auto
            min-width 100%
            height 100%
            left: 50%
            transform translateX(-50%)
          }
        }
        .h_tip{
          top 0.75rem
          left -0.35rem
          right auto
        }
        .hotel_name{
          height 22px
          font-weight bold
          font-size 18px
          color mainTitleColor
          text-overflow ellipsis
          overflow hidden
          white-space nowrap
        }
        .hotel_star{
          text-overflow ellipsis
          overflow hidden
          white-space nowrap
          .star{
            margin-top 0.29rem
            i{
              font-size 16px
            }
          }
          .address{
            i{
              font-size 12px
            }
            font-size 12px
            color blueColor
          }
        }
        .hotel-info{
          position relative
          width 100%
          height 100%
          top 0
          left 0
          background-size 100% 100%
          box-sizing border-box
          padding 8px 8px 5px 118px
        }
        .des{
          height 20px
          margin-top 5px
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis
          font-size .785rem
          span{
            height 16px
            line-height 16px
            padding 0 4px
            font-size 10px
          }
        }
        .h-flight{
          display block
          width 100%
          margin-top 3px
          .flight-box{
            position relative
            display inline-block
            margin-right 6px
            padding 4px 0 0 16px
            box-sizing border-box
            i{
              position absolute
              left 0
              font-size 13px
              &.back{
              }
            }
            span{
              font-size 12px
              color subheadColor
            }
            .time{
              display block
              margin-top 6px
              font-weight bold
              font-size 14px
              color mainTitleColor
            }
          }
        }
        .h-price{
          right 5px
          margin-top 5px
          text-align right
          span{
            display block
            &.tip{
              margin-bottom 3px
              font-size 14px
              color subheadColor
            }
            &.score{
              font-size 24px
              color subColor
            }
            &.oldPrice{
              margin-top 4px
              font-size 12px
            }
            &.nowPrice{
              font-weight bold
              font-size 20px
              font{
                display: block
                font-size: 11px
                margin-bottom: 4px
                font-weight normal
                color subheadColor
              }
            }
          }
        }
        h3{
          font-weight bold
          margin .3rem 0
          font-size 1.4rem
          i{
            margin 0 .3rem
          }
        }
        .date{
          margin 3px 0
          font-size 12px
          color mainTitleColor
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis
        }
        .bottom{
          position absolute
          bottom .8rem
          display flex
          width 92%
          span{
            display inline-block
            flex 1
            font-size .625rem

          }
          .price{
            font-size .625rem
            align-self: flex-end;
            b{
              display inline-block
              font-size 1.1rem
              margin 0
              font-weight bold
            }
          }
        }
      }*/
    }
  }
}
.filter-bar{
  width 100%
  height 36px
  padding 0 0 16px 0
  .city-bottom{
    position fixed
    width 100%
    bottom 3rem
    margin 0px auto 10px
    font-size 10px
    color #fff
    text-align center
    .city-option{
      width 180px
      height 36px
      line-height 36px
      margin auto
      background #4691ee
      border-radius 18px
    }
    span{
      flex 0 0 50%
    }
    &:after{
      content ''
      position absolute
      width 1px
      height 20px
      background #fff
      left 50%
      top 8px
    }
  }
}

.hotel-swiper{
  position absolute
  width 100%
  height 150px
  box-sizing border-box
  padding 10px 0px 10px 20px
  bottom 0px
  background #ffffff
  transition all 0.8s
  &.swiper-animate{
    animation fadeInUp 0.8s
    animate-delay: 2s;    //动画延迟时间
    animate-iteration-count: 2;    //动画执行次数
  }
  .swiper-container{
    width 100%
    height 124px

    .swiper-wrapper{
      width 100%
      height 100%
    }
    .swiper-slide{
      position relative
      width 245px
      height 124px
      font-size: 12px;
      color #fff
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      background: #eee;
      background-size: 100% 100%
      img{
        width 100%
        height 100%
      }
      .img_bg{
        position: absolute;
        width 100%
        height 100%
        top 0
        left 0
        background-size 100% 100%
        box-sizing border-box
        padding .8rem
      }
      h3{
        font-weight bold
        margin 5px 0
        font-size 13px
        line-height 15px
        height 30px
        overflow hidden
        i{
          margin 0 .3rem
        }

      }
      .bottom {
        position absolute
        bottom 10px
        display flex
        width 90%
        span {
          display inline-block
          flex 1
          font-size .625rem
          b {
            display block
            margin-top .25rem
            font-style normal
            font-size .825rem
            &.star {
              margin-top 0.29rem
              i {
                font-size 13px
              }
            }
          }
        }
        .price {
          font-size .625rem
          align-self: flex-end;
          text-align right
          b {
            display inline-block
            font-size 1.1rem
            margin 0
            font-weight bold
          }
        }
      }
    }
  }
}

.loading-msk{
  position absolute
  width 100%
  height 100%
  top 0
  left 0
  background rgba(255, 255, 255, 0.7)
  .icon-loading{
    position absolute
    left 50%
    top 40%
    margin-left -18px
    font-size 36px
    color #555
  }
  p{
    position absolute
    width 100%
    top 40%
    margin-top 50px
    text-align center
    font-size 14px
  }
}
.nodata{
  text-align center
  img{
    margin 30px auto
  }
}