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

/* nova-werun/components/circle-card/index.wxss */
.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;
        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;
        }

    }
}