werun-wxapp/nova-werun/pages/circle-detail/index.less

/* nova-werun/pages/circle-detail/index.wxss */
.all{
    width: 100vw;
    background-color: skyblue;
    .trends{
        width: 100%;
        border-top: grey solid 1px;
        padding-top: 20rpx;
        .trends-one{
            width: 100%;
            margin-bottom: 20rpx;
            border-bottom: grey solid 1px;
            padding-left: 30rpx;
            padding-right: 20rpx;
            .namebax{
                width: 100%;
                height: 100rpx;
                display: flex;
                align-items: center;
                margin-bottom: 20rpx;
                image{
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 50%;
                }
                .name{
                    margin-left: 10rpx;
                    font-size: 34rpx;
                    font-weight: 600;
                }
            }
            .text{
                width: 92%;
                padding-left: 90rpx;
                font-size: 34rpx;
            }
            .picture{
                width: 92%;
                padding-left: 90rpx;
                display: flex;
                flex-wrap: wrap;
                margin-top: 30rpx;
                .image{
                    width: 175rpx;
                    height: 175rpx;
                    margin-right: 10rpx;
                    margin-bottom: 10rpx;
                }
                .image:nth-child(3n) {
                    margin-right: 0; /* 每行的最后一张图片不需要右边距 */
                }
            }
            .picture5 {
                width: 92%;
                padding-left: 90rpx;
                display: flex;
                flex-wrap: wrap;
                margin-top: 30rpx;
                
                .image {
                    width: 175rpx;
                    height: 175rpx;
                }
            
                .image-wrapper {
                    margin-right: 10rpx;
                    position: relative;
                }
            
                .image-wrapper:nth-of-type(3n) {
                    margin-right: 0; /* 每行的最后一张图片不需要右边距 */
                }
            
                .more-images {
                    position: absolute;
                    bottom: 10rpx;
                    right: 0rpx;
                    background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
                    color: white;
                    font-size: 26px;
                    width: 175rpx;
                    height: 175rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
            .picture2{
                width: 92%;
                padding-left: 90rpx;
                display: flex;
                flex-wrap: wrap;
                margin-top: 30rpx;
                .image{
                    width: 240rpx;
                    height: 240rpx;
                    margin-right: 10rpx;
                    margin-bottom: 10rpx;
                }
            }
            .picture4{
                width: 92%;
                padding-left: 90rpx;
                display: flex;
                flex-wrap: wrap;
                margin-top: 30rpx;
            
                .image{
                    width: 230rpx;
                    height: 230rpx;
                    margin-right: 10rpx;
                    margin-bottom: 10rpx;
                    object-fit: cover;
                }
                .image:nth-child(2n) {
                    margin-right: 0; /* 每行的最后一张图片不需要右边距 */
                }
            }
            .picture3{
                width: 92%;
                padding-left: 90rpx;
                display: flex;
                flex-wrap: wrap;
                margin-top: 30rpx;
                .image{
                    margin-right: 10rpx;   
                    margin-bottom: 10rpx;
                }
                .image-portrait {
                    width: 332rpx; /* 竖屏图片的宽度 */
                    height: 425rpx;
                }
            
                .image-landscape {
                    width: 442rpx; /* 横屏图片的宽度 */
                    height: 300rpx;

                }
            }
            
            .timebox{
                width: 92%;
                height: 80rpx;
                padding-left: 90rpx;
                margin-bottom: 20rpx;
                display: flex;
                align-items: center;
                .time-box{
                    width: 85%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    .time{
                        font-size: 30rpx;
                        margin-right: 20rpx;
                    }
                }
                .point{
                    width: 10%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

            }
        }
    }
}