werun-wxapp/nova-werun/components/circle/index.less

/* nova-werun/components/circle/index.wxss */

.all{
        width: 100vw;
        .trends{
            width: 100%;
            border-top: grey solid 1px;
            overflow-y: scroll;
            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: 100%;
                    height: 80rpx;
                    padding-left: 90rpx;
                    margin-bottom: 20rpx;
                    display: flex;
                    align-items: center;
                    position: relative;
                    .time-box{
                        width: 85%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        .time{
                            font-size: 30rpx;
                            margin-right: 20rpx;
                        }
                    }
                    .functionbox{
                        width: 280rpx;
                        height: 80rpx;
                        background-color: black;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: absolute;
                        right: 99rpx;
                        border-radius: 10rpx;
                        .function{
                            width: 100%;
                            display: flex;
                            color: white;
                            justify-content: center;
                            .function1{
                                width: 48%;
                                display: flex;
                                justify-content: center;
                                color: white;
                                .text2{
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    font-size: 28rpx;
                                    margin-left: 12rpx;
                                }
                            }
                        }
                    }
                    .point{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 70rpx;
                        height: 40rpx;
                        border-radius: 10rpx;
                        background-color: #efefef;
                        color: #506692;
                        font-size: 50rpx;
                    }

                }
            }
        }
}