/* nova-tourism/pages/homestay/homestay-detail/index.wxss */ .all { width: 100vw; height: 100vh; background-color: #ECECEC; position: relative; overflow-y: scroll; color: #382E2E; 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 { display: flex; justify-content: center; align-items: center; font-size: 48rpx; padding: 15rpx 26rpx; background-color: #1A1A1A; color: white; font-weight: 700; margin-left: 20rpx; } .all .roomcard .room-card .close { position: absolute; top: 0; left: 0; width: 100%; height: 334rpx; border: solid #e5e5e5 2rpx; background: rgba(255, 255, 255, 0.541); border-radius: 30rpx; } .all .roomcard .wangbox { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: 60rpx; margin-bottom: 28rpx; } .all .roomcard .wangbox .wang { width: 206rpx; height: 46rpx; font-size: 32rpx; color: #67806A; background-image: url(https://file-cloud.fmode.cn/EbxZUK5lBI/20241126/dm1jj2032446503.png?imageView2/1/w/200/h/200); background-position: center; /* 背景图片居中 */ background-repeat: no-repeat; /* 不重复背景图片 */ display: flex; justify-content: center; align-items: center; } .all .roomcard .wangbox .wang2 { font-size: 24rpx; color: #969696; } .all .roomcard .wang-cardbox { margin-top: 40rpx; width: 100%; background-color: white; overflow-y: hidden; padding-bottom: 40rpx; column-count: 2; /* 设置列数 */ column-gap: 16rpx; /* 设置列间距 */ } .all .roomcard .wang-cardbox .wang-card { break-inside: avoid; /* 防止卡片在列之间断裂 */ margin-bottom: 20rpx; /* 设置卡片底部间距 */ width: 100%; /* 确保卡片宽度为100% */ } .all .roomcard .wang-cardbox .wang-card image { width: 100%; height: 204rpx; border-radius: 10rpx; } .all .roomcard .wang-cardbox .wang-card .wang-catex { font-size: 26rpx; font-weight: 400; height: 76rpx; } .all .roomcard .wang-cardbox .wang-card .wang-numbox { width: 100%; display: flex; align-items: center; } .all .roomcard .wang-cardbox .wang-card .wang-numbox .wang-num { display: flex; justify-content: flex-end; align-items: flex-end; color: #C5262Ced; font-size: 30rpx; } .all .roomcard .wang-cardbox .wang-card .wang-numbox .wang-num .wang-num1 { font-size: 32rpx; } .all .roomcard .wang-cardbox .wang-card .wang-numbox .wang-num .wang-num2 { font-size: 40rpx; } .all .roomcard .wang-cardbox .wang-card .wang-numbox .wang-submit { width: 102rpx; height: 48rpx; font-size: 28rpx; color: white; background-color: #F8DA7F; border-radius: 15rpx; display: flex; justify-content: center; align-items: center; margin-left: auto; } .all .roomcard .more { width: 100%; display: flex; align-items: center; justify-content: center; } .all .roomcard .more .more-tex { font-size: 28rpx; color: #969696; } .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; }