page { height: 100%; } .map { height: 100%; background-color: #f9f9f9; display: flex; flex-direction: column; } .return-btn { position: fixed; right: 0; top: 927rpx; z-index: 99; } .home-bottom { height: 60rpx; background-color: #f9f9f9; } .hotel-list { width: 100%; background-color: #f9f9f9; padding: 32rpx 30rpx; padding-bottom: 200rpx; .hotel-list-item { width: 100%; margin-bottom: 20rpx; .wrap { width: 100%; height: 318rpx; position: relative; box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.08); border-radius: 10rpx; .inner { width: 100%; height: 318rpx; border-radius: 10rpx; position: absolute; z-index: 2; top: 0; left: 0; .address-detail-main { position: absolute; left: 0; bottom: 30rpx; width: 100%; display: flex; align-items: flex-end; justify-content: space-between; .address-detail-main-left { position: absolute; left: 20rpx; .title { font-size: 32rpx; font-weight: bold; color: #FFFFFF; } .content { margin: 12rpx 0 20rpx; width: 92rpx; height: 34rpx; background: rgba(142, 160, 166, .6); border-radius: 17rpx; color: #ffffff; font-size: 22rpx; display: flex; align-items: center; justify-content: center; } .bottom { display: flex; align-items: center; justify-content: flex-start; .bottom-left { font-size: 24rpx; font-weight: bold; color: #ffffff; margin-right: 6rpx; } .bottom-right { font-size: 32rpx; font-weight: bold; color: #ffffff; } } } .address-detail-main-right { position: absolute; right: 24rpx; width: 120rpx; height: 44rpx; background: #FF6300; box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.08); border-radius: 22rpx; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 28rpx; } } .address-detail-position { position: absolute; top: 22rpx; right: 24rpx; display: flex; align-items: center; justify-content: center; font-weight: 500; color: #FFFFFF; font-size: 20rpx; } } } } } .search-detail { width: 100%; position: absolute; top: 88rpx; z-index: 999 !important; background-color: #ffffff; box-shadow: 0px 12rpx 16rpx 0px rgba(220, 222, 229, 0.4); padding: 20rpx 30rpx 20rpx; .partner { .partner-top { height: 88rpx; border-top: 2rpx solid #F0F0F0; border-bottom: 2rpx solid #F0F0F0; display: flex; align-items: center; justify-content: space-between; color: #333; font-size: 28rpx; } .partner-main { margin-top: 32rpx; ::v-deep .uni-data-checklist .checklist-group .checklist-box { width: 26%; } ::v-deep .uni-data-checklist .checklist-group .checklist-box .checkbox__inner { width: 48rpx; height: 48rpx; } ::v-deep .uni-data-checklist .checklist-group .checklist-box .checkbox__inner .checkbox__inner-icon { top: 6rpx !important; left: 17rpx !important; height: 24rpx !important; width: 15rpx !important; border-right-color: #ff6200; border-bottom-color: #ff6200; } ::v-deep .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checklist-text { color: #666 !important; font-size: 24rpx !important; } ::v-deep .checklist-text { font-size: 24rpx !important; } ::v-deep .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checkbox__inner { border-color: #EDEDED !important; background-color: #ffffff; } } } .search-detail-area { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; .areaTitle { width: 156rpx; height: 56rpx; background: #FFFFFF; border: 2rpx solid #EDEDED; border-radius: 28rpx; font-size: 28rpx; color: #666; display: flex; justify-content: center; align-items: center; margin-right: 20rpx; margin-bottom: 18rpx; &:nth-child(4n) { margin-right: 0; } } // .areaTitle-item { // width: 156rpx; // height: 56rpx; // background-color: #F1F1F1; // border-radius: 26rpx; // font-size: 24rpx; // color: #999; // display: flex; // justify-content: center; // align-items: center; // } .active-area { width: 156rpx; height: 56rpx; border-radius: 28rpx; background-color: #FF6200; color: #fff; display: flex; justify-content: center; align-items: center; } } .search-detail-btn { display: flex; align-items: center; justify-content: space-between; margin: 38rpx 0 20rpx; .search-detail-btn-left { flex: 1; height: 76rpx; background: rgba(237, 237, 237, .55); border-radius: 8rpx; color: #999999; font-size: 30rpx; display: flex; align-items: center; justify-content: center; font-weight: bold; } .search-detail-btn-right { flex: 1; height: 76rpx; background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%); border-radius: 8rpx; color: #FFFFFF; font-size: 30rpx; display: flex; align-items: center; justify-content: center; margin-left: 22rpx; font-weight: bold; } } ::v-deep .u-input { width: 690rpx !important; height: 68rpx !important; background: #F1F1F1; border-radius: 74rpx; } ::v-deep .u-input__content__field-wrapper { padding-left: 36rpx; } } .search-top { display: flex; align-items: center; justify-content: space-between; } .search { position: relative; flex: none; width: 100%; background: #FFFFFF; box-shadow: 0px 12rpx 16rpx 0px rgba(220, 222, 229, 0.4); display: flex; flex-direction: column; align-items: inherit; justify-content: space-between; .search-loupe { flex: none; width: 60rpx; height: 60rpx; background: #FFFFFF; border-radius: 50%; border: 2rpx solid #EDEDED; display: flex; align-items: center; justify-content: center; margin-right: 16rpx; } .search-area-all { flex: 1; display: flex; align-items: center; justify-content: flex-start; .search-areaClick { padding: 12rpx 22rpx; height: 52rpx; background: #FFFFFF; border-radius: 26rpx; border: 2rpx solid #FF6200; font-weight: 500; color: #FF6200; font-size: 28rpx; display: flex; align-items: center; justify-content: center; margin-right: 16rpx; text { margin-right: 8rpx; } } .search-area { padding: 12rpx 22rpx; height: 52rpx; background: #FFFFFF; border-radius: 26rpx; border: 2rpx solid #EDEDED; font-weight: 500; color: #666666; font-size: 28rpx; display: flex; align-items: center; justify-content: center; margin-right: 16rpx; text { margin-right: 8rpx; } } } } .address-nav { position: absolute; width: 100%; bottom: 34rpx; padding: 0 8px; // display: flex; // flex-direction: column; // align-items: center; // justify-content: space-between; overflow-x: scroll; .address-nav-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; } .address-nav-button{ position: fixed; bottom: 450rpx; &:first-child{ left:16rpx; } &:last-child{ right:16rpx; } } } .address { flex: 1; position: relative; .address-detail { display: inline-block; position: relative; flex: none; width: 248px; height: 318rpx; border-radius: 10rpx; margin-right: 8px; &:last-child { margin-right: 0rpx; } .mark{ height: inherit; width: inherit; image{ width: 100%; height:100%; border-radius: 10rpx; } } .inner { width: 100%; height: inherit; border-radius: 10rpx; position: absolute; z-index: 2; top: 0; left: 0; .address-detail-main { position: absolute; left: 0; bottom: 30rpx; width: 100%; display: flex; align-items: flex-end; justify-content: space-between; .address-detail-main-left { position: absolute; left: 20rpx; .title { font-size: 32rpx; font-weight: bold; color: #FFFFFF; } .content { margin: 12rpx 0 20rpx; width: 92rpx; height: 34rpx; background: rgba(142, 160, 166, .6); border-radius: 17rpx; color: #ffffff; font-size: 22rpx; display: flex; align-items: center; justify-content: center; } .bottom { display: flex; align-items: center; justify-content: flex-start; .bottom-left { font-size: 24rpx; font-weight: bold; color: #ffffff; margin-right: 6rpx; } .bottom-right { font-size: 32rpx; font-weight: bold; color: #ffffff; } } } .address-detail-main-right { position: absolute; right: 24rpx; width: 120rpx; height: 44rpx; background: #FF6300; box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.08); border-radius: 22rpx; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 28rpx; } } .address-detail-position { position: absolute; top: 22rpx; right: 24rpx; display: flex; align-items: center; justify-content: center; font-weight: 500; color: #FFFFFF; font-size: 20rpx; } } } }