tourism-wxapp/nova-tourism/pages/homestay/homestay-detail/index.less

/* nova-tourism/pages/homestay/homestay-detail/index.wxss */
.all{
    width: 100vw;
    height: 100vh;
    background-color: #ECECEC;
    position: relative;
    overflow-y: scroll;
    .picturebox{
        width: 100%;
        height: 480rpx;
        position: relative;
        .img{
            width: 100%;
            height: 480rpx;
            image{
                width: 100%;
                height: 100%;

            }
        }
        .numberbox{
            position: absolute;
            bottom: 40rpx;
            right: 20rpx;
            border-radius: 45%;
            z-index: 10;
            color: white;
            width: 70rpx;
            height: 45rpx;
            font-size: 24rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(12, 12, 12, 0.5);
        }

    }
    .card{
        width: 100%;
        height: auto;
        position: absolute;
        top: 450rpx;
        .Legendary-Information{
            width: 100%;
            height: auto;
            background-color: white;
            border-radius: 20px; /* 左上角圆角 */
            padding-top: 20rpx;
            padding-left: 35rpx;
            padding-right: 35rpx;
            padding-bottom: 20rpx;
            .info-name{
                width: 100%;
                height: 60rpx;
                display: flex;
                align-items: center;
                .name-tex{
                    font-size: 30rpx;
                    font-weight: 600;
                }
                .name-pic{
                    height: 55rpx;
                    width: 55rpx;
                    margin-left: auto;
                }
            }
            .info-intr{
                font-size: 28rpx;
                width: 100%;
                height: auto;
                margin-left: 10rpx;
            }
            .info-intr2{
                margin-top: 10rpx;
                font-size: 28rpx;
                width: 100%;
                height: auto;
                margin-left: 4rpx;
                color: skyblue;
                display: flex;
            }
            .info-map{
                width: 100%;
                display: flex;
                align-items: center;
                margin-top: 20rpx;
                .map{
                    width: 480rpx;
                    height: 270rpx;
                }
                .info-call{
                    width: 156rpx;
                    height: 250rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    margin-left: 40rpx;
                    image{
                        width: 60rpx;
                        height: 60rpx;
                    }
                    .call-tex{
                        font-size: 26rpx;
                        margin-top: 10rpx;
                    }
                }
            }
        }
    }
    .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;
        .timebox{
            width: 100%;
            background-color: white;
            display: flex;
            align-items: flex-end;
            position: relative;
            padding-left: 10rpx;
            margin-bottom: 20rpx;
            padding-bottom: 20rpx;
            padding-top: 20rpx;
            .time{
                width: 150rpx;
                margin-left: 10rpx;
                .time-tex{
                    font-size: 28rpx;
                    color: gray;

                }
                .time-time{
                    font-size: 30rpx;
                    font-weight: 600;
                }
            }
            .time_tex2{
                font-size: 24rpx;
                margin-left: 20rpx;
                margin-bottom: 2rpx;
            }
        }
        .room-card{
            width: 100%;
            height: auto;
            padding-left: 40rpx;
            padding-right: 40rpx;
            border: solid #e5e5e5 2rpx;
            box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
            padding-top: 40rpx;
            border-radius: 30rpx;
            margin-bottom: 20rpx;
            padding-bottom: 20rpx;
            .room-card1{
                width: 100%;
                height: auto;
                display: flex;
                image{
                    width: 200rpx;
                    height: 270rpx;
                    margin-right: 20rpx;
                    border-radius: 15rpx;
                }
                .room-card-textbox{
                    width: 400rpx;
                    height: auto;
                    .room-card-textbox-titlebox{
                        display: flex;
                        .room-card-textbox-title{
                            font-size: 34rpx;
                            font-weight: 600;
                        }
                    }
                    .room-card-textbox-info{
                        font-size: 26rpx;
                        width: 400rpx;
                        height: auto;
                        margin-top: 10rpx;
                        margin-bottom: 20rpx;
                    }
                    .room-card-textbox-label{
                        width: 400rpx;
                        height: auto;
                        display: flex;
                        flex-wrap: wrap;
                        .room-card-textbox-label2{
                            width: auto;
                            font-size: 24rpx;
                            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;
                        }
                    }
                }
            }
            .room-card2{
                width: 100%;
                height: 100rpx;
                display: flex;
                justify-content: flex-end;
                margin-top: 20rpx;
                .no{
                    width: 200rpx;
                    height: 80rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 36rpx;
                    background-color:#1A1A1A ;
                    color: white;
                    margin-left: 20rpx;
                    border-radius: 10rpx;
                }
                .price{
                    font-size: 36rpx;
                    color: #C5262C;
                    display: flex;
                    align-items: center;
                }
                .submit{
                    width: 80rpx;
                    height: 80rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 36rpx;
                    background-color:#1A1A1A ;
                    color: white;
                    margin-left: 20rpx;
                }
            }
        }
    }
}