@import "./imgUrl/imgUrl.less";

page{
  height: 100%;
  background: #F4F4F4;
}

.container{
  padding: 20px;
}
.borderBo{
  position: relative;
  &:before{
    content: '';
    width: 200%;
    height: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    border-bottom: 1px solid #D6D6D6; /*no*/
    transform: scale(0.5);
    transform-origin: 0 0;
  }
}
.borderTop{
  position: relative;
  &:before{
    content: '';
    width: 200%;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    border-bottom: 1px solid #D6D6D6; /*no*/
    transform: scale(0.5);
    transform-origin: 0 0;
  }
}
.pannel{
  margin-bottom: 20px;
  padding-top: 20px;
  position: relative;
  border-radius: 10px; /*no*/
  &:before{
    content: '';
    width: 200%;
    height: 200%;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #cacaca; /*no*/
    transform: scale(0.5);
    transform-origin: 0 0;
    border-radius: 10px; /*no*/
    z-index: -1;
    background-color: #fff;
  }
}

.dateNum{
  display: flex;
  padding: 0 40px 0 34px;
  height: 84px;
  line-height: 84px;
  align-items: center;
  justify-content: space-between;
  .dateOuter{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .date{
      text{
        font-size: 30rpx;
        &.small{
          color: #aaa;
          font-size: 25rpx;
          margin-left: 10px;
        }
      }
    }
  }

  .num{
    font-size: 30rpx;
    width: 6.5em;
    text-align: center;
  }
}

.flight{
  display: flex;
	flex-direction: column;
  .goFlight{
    .borderBo();
    padding-left: 30px;
    padding-right: 30px;
  }

  .backFlight{
    .borderBo();
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
  }

  .flightDate{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    view{
      display: flex;
      flex-direction: column;
      text{
        font-size: 27rpx;
      }
      .time{
        font-size: 50rpx;
      }
      .date{
        color: #aaa;
        text-align: center;
        margin-bottom: 10px;
        font-size: 30rpx;
      }
      .flightPic{
        width: 325px;
        height: 40px;
      }
    }
  }

  .flightLine{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .viewLeft{
      display: flex;
      align-items: center;
      flex: 1;
    }
    image{
      width: 25px;
      height: 20px;
      margin-right: 10px;
      display: block;
    }
    .go{
        background-color: #ff7f00;
        color: #fff;
        font-size: 28rpx;
        width: 86px;
        height: 46px;
        line-height: 46px;
        text-align: center;
        display: block;
      }
  }

  .airport{
    color: #aaa;
    text{
      font-size: 28rpx;
    }
    .small{
      font-size: 22rpx;
    }
  }

  .flightDetail{
    height: 80px;
    line-height: 80px;
    margin-top: 8px;
    position: relative;
    &:before{
      content: '';
      width: 200%;
      height: 0;
      position: absolute;
      left: 0;
      top: 0;
      border-bottom: 1px dashed #D6D6D6; /*no*/
      transform: scale(0.5);
      transform-origin: 0 0;
      border-radius: 10px; /*no*/
    }
    text{
      font-size: 30rpx;
      color: #9caabc;
    }
    .flightName{
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      image{
        width: 24px;
        height: 19px;
      }
    }
    .flightType{
        width: 30%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .vertical{
        width: 10%;
        text-align: center;
      }
  }

  .changeFlight{
    font-size: 30rpx;
    text-align: center;
    color: #aaa;
    height: 70px;
    line-height: 70px;
    padding-left: 30px;
    padding-right: 30px;
  }

}


/*酒店*/
.hotel{
  margin-bottom: 110px;
  .hotelHead{
    padding-left: 30px;
    padding-right: 30px;
    display: flex;
  	flex-direction: row;
    justify-content: space-between;
    view{
      &.hotelName{
        width: 100%;
        flex: 1;
        display: flex;
      	flex-direction: column;
        text{
          font-size: 32rpx;
          &.pink{
            font-size: 25rpx;
            color: #ff7f00;
          }
        }
      }
      &.hotelDetail{
        display: flex;
        justify-content: flex-end;
        text{
          font-size: 27rpx;
          color: #aaa;
          align-self: center;
          display: block;
          white-space: nowrap;
        }
      }
    }
  }

  .hotelPic{
    width: 100%;
    overflow: hidden;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    image{
      display: block;
      width: 100%;
      height: 350px;
    }
  }

  .address{
    margin-bottom: 10px;
    font-size: 27rpx;
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 10px;
    .grey{
      padding-left: 40rpx;
      display: block;
    }
    .addre{
      display: flex;
      flex-direction: row;
      margin-bottom: 10px;
      image{
        width: 30px;
        height: 35px;
        margin-right: 10px;
      }
    }
  }



  .remark{
    padding-left: 30px;
    padding-right: 30px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 34px;
    margin-top: 20px;
    icon{
     display: block;
    }
    text{
      display: block;
      color: #ff7f00;
      font-size: 22rpx;
      margin-left: 10px;
    }
  }

  .changeHotel{
    font-size: 30rpx;
    text-align: center;
    color: #aaa;
    margin-top: 20px;
    height: 70px;
    line-height: 70px;
    padding-left: 30px;
    padding-right: 30px;
    .borderTop();
  }
}
