tourism-wxapp/nova-tourism/components/homestay/index.less

/* nova-caipu/pages/new-app/index.wxss */
.all {
    width: 100vw;
    height: 100vh;
    color: #382E2E;
    position: relative;
    font-family: "Microsoft JhengHei", "PingFang SC", "Helvetica Neue", sans-serif;
    font-weight: 400;

    .picturebox {
        width: 100%;
        height: 442rpx;

        .img {
            width: 100%;
            height: 442rpx;

            image {
                width: 100%;
                height: 100%;

            }
        }

    }

    .Inforbox {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: -62rpx;
        z-index: 100;

        .infobox {
            width: 686rpx;
            height: 222rpx;
            background-color: white;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            border-radius: 20rpx;

            z-index: 100;
            border: solid #e5e5e5 2rpx;
            box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);

            .seach {
                width: 80%;
                height: 96rpx;
                background-color: white;
                display: flex;
                justify-content: center;
                align-items: center;

                .input {
                    width: 358rpx;
                    height: 60rpx;
                    margin-left: 31rpx;
                    font-size: 26rpx;
                }
            }

            .datebox {
                width: 90%;
                height: 132rpx;
                display: flex;
                align-items: center;
                font-size: 32rpx;
                border-top: solid #e5e5e5 2rpx;

                .today {
                    font-size: 28rpx;
                    color: #707070;
                    margin-left: 10rpx;
                    display: flex;
                    justify-content: flex-end;
                }

                .start {
                    display: flex;
                    justify-content: flex-end;
                    color: #000000;
                }

                .day {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: auto;
                    width: 90rpx;
                    height: 42rpx;
                    background-color: #D9D9D980;
                    font-size: 22rpx;
                    color: black;
                }

                .end {
                    margin-left: auto;
                    color: #000000;
                }
            }

        }
    }


    .Legendary-Information {
        width: 686rpx;
        margin: auto;
        margin-top: 20rpx;
        column-count: 2;
        .picbox {
            margin-bottom: 20rpx;
            float: left;
            height: 274rpx;
            width: 330rpx;
            background-image: url('https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/01atf5032703958.png');
            break-inside: avoid;
            float: left;
            background-size: cover;
            /* 使背景图按比例缩放，覆盖整个盒子 */
            background-position: center;

            .pic {
                width: 100%;
                height: 66rpx;
                padding-left: 126rpx;
                padding-right: 10rpx;
                margin-top: 6rpx;

                .pic-1tex {
                    font-size: 26rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .pic-1tex2 {
                    font-size: 14rpx;
                }
            }
        }

        .container {
            overflow: auto;
            float: left;
            height: 400rpx;
            flex-shrink: 0;
            width: 330rpx;
            display: flex;
            flex-direction: column;
            margin-bottom: 20rpx;
            -webkit-column-break-inside: avoid;
            break-inside: avoid;
            .cardbox {
                width: 100%;
                background-color:whitesmoke;
                margin-bottom: 10rpx;
                height: 398rpx;
                display: flex;
                align-items: center;
                flex-direction: column;

                .pic {
                    width: 330rpx;
                    height: 198rpx;
                    border-radius: 10rpx;
                }

                .textobx {
                    width: 302rpx;
                    height: 152rpx;
                    margin-bottom: 20rpx;
                    .title {
                        width: 100%;
                        height: 50rpx;
                        margin-top: 4rpx;
                        display: flex;
                        align-items: center;

                        .til {
                            font-size: 28rpx;
                            font-weight: 700;
                            color: #000000;

                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;

                        }

                        .collect {
                            width: 46rpx;
                            height: 46rpx;
                            margin-left: auto;
                        }
                    }

                    .miaosu {
                        width: 284rpx;
                        height: 70rpx;
                        /* 设置固定高度 */
                        font-size: 26rpx;
                        font-weight: 400;
                        overflow: hidden;
                        /* 隐藏超出部分 */
                        display: -webkit-box;
                        /* 使用弹性盒子布局 */
                        -webkit-box-orient: vertical;
                        /* 垂直排列 */
                        -webkit-line-clamp: 2;
                        /* 限制显示的行数，这里设置为3行 */
                        text-overflow: ellipsis;
                        /* 超出部分显示省略号 */
                    }

                    .miaosu2 {
                        width: 100%;
                        height: 80rpx;
                    }

                    .bottom {
                        width: 100%;
                        height: 46rpx;
                        margin-top: 4rpx;
                        display: flex;

                        .qian {
                            font-size: 28;
                            font-weight: 400;
                            color: #C5262C;
                            display: flex;

                            .numbox {
                                margin-left: 6rpx;
                            }
                        }

                        .soucang {
                            width: 118rpx;
                            height: 46rpx;
                            font-size: 24rpx;
                            font-weight: 700;
                            background-color: #343027;
                            border-radius: 12rpx;
                            color: white;
                            margin-left: auto;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                    }
                }
            }
        }


    }

    .bottom2 {
        width: 100%;
        font-size: 26rpx;
        margin-bottom: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;

    }

    .Legendary-Information2 {
        margin-top: 204rpx;
        width: 100%;
        background-color: white;
        overflow-y: hidden;
        padding-left: 3%;
        padding-right: 3%;
        padding-bottom: 40rpx;
    }

}