/* nova-tourism/pages/homestay/homestay-detail/index.wxss */ .all { width: 100vw; height: 100vh; background-color: #ECECEC; position: relative; overflow-y: scroll; color: #382E2E; font-family: "Microsoft JhengHei", "PingFang SC", "Helvetica Neue", sans-serif; font-weight: 400; } .all .picturebox { width: 100%; height: 456rpx; position: relative; } .all .picturebox .img { width: 100%; height: 456rpx; } .all .picturebox .img image { width: 100%; height: 100%; } .all .picturebox .numberbox { position: absolute; bottom: 38rpx; right: 20rpx; z-index: 10; color: white; width: 88rpx; height: 54rpx; font-size: 28rpx; display: flex; justify-content: center; align-items: center; background-color: rgba(12, 12, 12, 0.5); } .all .card { width: 100%; height: auto; position: absolute; top: 430rpx; } .all .card .Legendary-Information { width: 100%; height: auto; background-color: white; border-radius: 20px; /* 左上角圆角 */ padding-top: 40rpx; padding-left: 40rpx; padding-right: 40rpx; padding-bottom: 20rpx; } .all .card .Legendary-Information .info-name { width: 100%; height: 60rpx; display: flex; align-items: center; } .all .card .Legendary-Information .info-name .name-tex { font-size: 38rpx; font-weight: 700; } .all .card .Legendary-Information .info-name .name-pic { height: 46rpx; width: 46rpx; margin-left: auto; } .all .card .Legendary-Information .info-intr { font-size: 30rpx; width: 100%; height: auto; margin-left: 10rpx; } .all .card .Legendary-Information .info-intr2 { margin-top: 10rpx; font-size: 30rpx; width: 100%; height: auto; margin-left: 4rpx; color: skyblue; display: flex; } .all .card .Legendary-Information .info-map { width: 100%; display: flex; align-items: center; margin-top: 20rpx; } .all .card .Legendary-Information .info-map .map { width: 455rpx; height: 146rpx; } .all .card .Legendary-Information .info-map .info-call { width: 156rpx; height: auto; display: flex; justify-content: center; align-items: center; flex-direction: column; margin-left: 35rpx; } .all .card .Legendary-Information .info-map .info-call image { width: 48rpx; height: 48rpx; } .all .card .Legendary-Information .info-map .info-call .call-tex { font-size: 24rpx; margin-top: 10rpx; } .all .roomcard { width: 100%; height: auto; padding-bottom: 40rpx; border-top-left-radius: 20rpx; border-top-right-radius: 20rpx; margin-top: 20rpx; padding-left: 10rpx; padding-right: 10rpx; background-color: white; } .all .roomcard .timebox { width: 100%; height: 90rpx; background-color: white; display: flex; align-items: flex-end; position: relative; padding-left: 10rpx; margin-bottom: 12rpx; } .all .roomcard .timebox .time { width: 150rpx; margin-left: 10rpx; } .all .roomcard .timebox .time .time-tex { font-size: 28rpx; color: gray; } .all .roomcard .timebox .time .time-time { font-size: 30rpx; font-weight: 600; } .all .roomcard .timebox .time_tex2 { font-size: 24rpx; margin-left: 20rpx; margin-bottom: 2rpx; } .all .roomcard .room-card { width: 100%; height: 334rpx; padding-left: 38rpx; padding-right: 38rpx; border: solid #e5e5e5 2rpx; box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2); padding-top: 40rpx; border-radius: 30rpx; margin-bottom: 24rpx; position: relative; } .all .roomcard .room-card .room-card1 { width: 100%; height: auto; display: flex; } .all .roomcard .room-card .room-card1 image { width: 166rpx; height: 222rpx; margin-right: 20rpx; border-radius: 4rpx; } .all .roomcard .room-card .room-card1 .room-card-textbox { width: 400rpx; height: auto; } .all .roomcard .room-card .room-card1 .room-card-textbox .room-card-textbox-titlebox { display: flex; } .all .roomcard .room-card .room-card1 .room-card-textbox .room-card-textbox-titlebox .room-card-textbox-title { font-size: 34rpx; font-weight: 700; } .all .roomcard .room-card .room-card1 .room-card-textbox .room-card-textbox-info { font-size: 24rpx; width: 400rpx; height: auto; margin-top: 10rpx; margin-bottom: 20rpx; } .all .roomcard .room-card .room-card1 .room-card-textbox .room-card-textbox-label { width: 400rpx; height: auto; display: flex; flex-wrap: wrap; } .all .roomcard .room-card .room-card1 .room-card-textbox .room-card-textbox-label .room-card-textbox-label2 { width: auto; font-size: 20rpx; margin-right: 20rpx; padding-left: 4rpx; padding-right: 4rpx; display: flex; justify-content: center; align-items: center; border: solid #e5e5e5 2rpx; white-space: normal; margin-top: 10rpx; color: #6384AF; } .all .roomcard .room-card .room-card2 { width: 712rpx; height: 100rpx; display: flex; justify-content: flex-end; position: absolute; bottom: 24rpx; right: 34rpx; align-items: flex-end; } .all .roomcard .room-card .room-card2 .no { width: 282rpx; height: 86rpx; display: flex; justify-content: center; align-items: center; font-size: 44rpx; font-weight: 700; background-color: #1A1A1A; color: white; margin-left: 20rpx; border-radius: 10rpx; } .all .roomcard .room-card .room-card2 .price { height: 50rpx; font-size: 40rpx; font-weight: 700; color: #C5262C; display: flex; align-items: center; } .all .roomcard .room-card .room-card2 .submit { width: 86rpx; height: 86rpx; display: flex; justify-content: center; align-items: center; font-size: 48rpx; background-color: #1A1A1A; color: white; font-weight: 700; margin-left: 20rpx; } .roomBox { background: whitesmoke; } .roomBox .titleBox { width: 100%; border-radius: 20rpx 20rpx 0 0; background: white; padding: 30rpx; display: flex; align-items: center; } .roomBox .titleBox image { width: 48rpx; height: 40rpx; } .roomBox .titleBox .text { width: 700rpx; font-size: 30rpx; font-weight: bold; text-align: center; } .roomBox .picturebox { background: white; width: 100%; height: 338rpx; position: relative; } .roomBox .picturebox .img { border-radius: 10rpx; margin: auto; width: 675rpx; height: 338rpx; } .roomBox .picturebox .img image { border-radius: 10rpx; width: 100%; height: 100%; } .roomBox .picturebox .numberbox { position: absolute; bottom: 20rpx; right: 60rpx; z-index: 10; color: white; width: 60rpx; height: 37rpx; font-size: 17rpx; display: flex; justify-content: center; align-items: center; background-color: rgba(12, 12, 12, 0.5); } .roomBox .tagBox { padding: 30rpx; background: white; } .roomBox .tagBox .title { font-size: 30rpx; font-weight: bold; } .roomBox .tagBox .tags { font-size: 24rpx; color: black; padding-top: 14rpx; display: flex; flex-wrap: wrap; padding-left: 50rpx; } .roomBox .tagBox .tags .tag { width: 50%; height: 53rpx; } .roomBox .tagBox .tags .tag2 { width: 33%; height: 53rpx; } .roomBox .serverBox { margin-top: 30rpx; } .roomBox .ruleBox { margin-top: 30rpx; } .roomBox .ruleBox .sub_title { font-size: 13rpx; margin-bottom: 20rpx; margin-top: 5rpx; } .roomBox .ruleBox .list { display: flex; } .roomBox .ruleBox .list .key { font-size: 20rpx; font-weight: bold; width: 66rpx; height: 53rpx; } .roomBox .ruleBox .list .value { font-size: 20rpx; } .roomBox .payBox { background: white; width: 100%; display: flex; height: 82rpx; } .roomBox .payBox .phonBox { width: 288rpx; display: flex; align-items: center; justify-content: space-around; } .roomBox .payBox .phonBox > view { display: flex; align-items: center; justify-content: space-around; } .roomBox .payBox .phonBox > view image { width: 47rpx; height: 48rpx; margin-right: 20rpx; } .roomBox .payBox .phonBox > view text { font-size: 26rpx; } .roomBox .payBox .pay { width: 462rpx; font-size: 32rpx; background: #F89B7F; display: flex; justify-content: center; align-items: center; color: white; }