nova-trip/nova-tourism/pages/home/index.less

page {
    padding-bottom: 120rpx;
    background: #f6f6f6;
}
.location{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 25rpx 0rpx 25rpx;
    background-color: #ffffff;
    .l_left {
        font-size: 24rpx;
    }
    .l_right{
        color:#636363;
        font-size: 24rpx;
        span{
            color: #229293;
            font-weight: bold;
        }
    }

}
.swiper {
    margin: 30rpx;
    height: 600rpx;

    .slide-image {
        width: 100%;
        height: 98%;
        margin-bottom: 20rpx;
        border-radius: 30rpx;
    }
}
.navBar {
    display: flex;
    justify-content: space-around;
    height: 100rpx;
    position: relative;
    background: #fff;
    margin: 30rpx;
    border-radius: 30rpx;
    .navItem {
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 4rpx solid transparent;
        .navItemTitle {
            font-size: 28rpx;
        }
        .navItemIcon {
            width: 30rpx;
            image {
                width: 25rpx;
                height: 25rpx;
                
                transform: translate(-25rpx -25rpx 0);
            }
        }
    }

    .active {
        color: #333;
        font-weight: bold;
        border-bottom: 4rpx solid #399899;
    }

}
.nav_content{
    flex: 1;
}

.sidebar {
    display: flex;
    flex-direction: row;
    background: #fff;
    margin: 30rpx;
    border-radius: 30rpx;
    // font-family: "Microsoft YaHei";
    .left{
        width: 32%;
        // background-color: #f4f4f4;
        .sidebarItem {
            padding: 20rpx;
            .sidebarItemTime {
                font-size: 22rpx;
            }
            .sidebarItemText {
                font-size: 28rpx;
            }
        }
        .active {
            color: #fff;
            font-weight: bold;
            background-color: #399899;
            border-radius: 0 50rpx 50rpx 0;
        }
    }
    .sidebar_content{
        width:68%;
        margin: 0;
        // margin-left: 30rpx;
        }
}


.title {
    display: flex;
    justify-content: space-between;
    padding-right: 30rpx;

    .recommended-box {
        display: flex;
        margin: 0rpx 0 0 30rpx;

        .recommended {
            font-size: 36rpx;
            font-weight: 500;
            color: #222222;
            line-height: 36rpx;
            margin-left: 10rpx;

        }

        .recommended-icon {
            width: 6rpx;
            height: 36rpx;
            background: #49aaa6;
            border-radius: 3rpx;
        }

    }
}


.village {



    .homestay {
        background: #ffffff;
        margin: 0 30rpx;
        border-radius: 20rpx;
        position: relative;

        .homestay-image {
            width: 420rpx;
            height: 205rpx;
            border-radius: 30rpx;
        }

        .homestay-images {
            position: absolute;
            top: 0;
            width: 420rpx;
            height: 205rpx;
            border-radius: 30rpx;
        }

        .title1 {
            
            .title_left{
                display: flex;
                .homestay-name {
                font-size: 30rpx;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #222222;
                margin: 10rpx;
                overflow: hidden; //一定要写
                text-overflow: ellipsis; //超出省略号
                display: -webkit-box; //一定要写
                -webkit-line-clamp: 2; //控制行数
                -webkit-box-orient: vertical; //一定要写
                    .price {
                        font-size: 32rpx;
                        display: inline-block;
                        // margin-top: -8rpx;
                        // margin-left: -20rpx;
                        width: 120rpx;
                    }
    
            }
    
                
            }
            .homestay-address {
                font-size: 24rpx;
                font-family: Source Han Sans CN;
                font-weight: 300;
                color: #666666;
                line-height: 36rpx;
                margin: 8rpx;
                padding-bottom: 10rpx;
                text-overflow: ellipsis; //超出省略号
            }
        }

        }
        
        .button {
            width: 40rpx;
            height: 40rpx;
            transform: translate(190rpx, -65rpx);
            text-align: center;
            line-height: 40rpx;
            // margin-right: 10rpx;
            border-radius: 50%;
            background-color: #229293;
            font-size: 18rpx;
            font-weight: bold;
            padding: 0;
            color: white;

            // line-height: 70rpx;
        }

        

    }


.kong {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 30rpx;
    margin-bottom: 30rpx;


    // .kong-box {
    //     .kong-icon {
    //         width: 120rpx;
    //         height: 120rpx;
    //         border-radius: 30rpx;
    //     }

    //     .kong-name {
    //         margin-top: 10rpx;
    //         text-align: center;
    //     }
    // }

    // .kong-image {
    //     width: 330rpx;
    //     height: 200rpx;
    //     margin-top: 30rpx;
    //     background-repeat: no-repeat;
    //     background-position: center top;
    //     background-size: 100% 100%;
    //     color: #ffffff;
    //     font-weight: 900;
    //     text-align: center;
    //     padding-top: 80rpx;

    // }


    .homestay {
        background: #ffffff;
        margin-top: 30rpx;
        width: 330rpx;
        border-radius: 20rpx;

        .homestay-image {
            width: 100%;
            height: 300rpx;
            border-radius: 30rpx 30rpx 0 0;
        }

        .homestay-name {
            font-size: 30rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #222222;
            margin: 10rpx;
            overflow: hidden; //一定要写
            text-overflow: ellipsis; //超出省略号
            display: -webkit-box; //一定要写
            -webkit-line-clamp: 2; //控制行数
            -webkit-box-orient: vertical; //一定要写

        }

        .homestay-price {
            display: flex;
            color: red;
            font-size: 24rpx;
            margin: 20rpx 10rpx 0 10rpx;

            .price {
                font-size: 32rpx;
                margin-top: -8rpx;
            }
        }

        .homestay-address {
            font-size: 20rpx;
            font-family: Source Han Sans CN;
            font-weight: 300;
            color: #666666;
            line-height: 36rpx;
            margin: 10rpx;
        }
    }

}