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;
    padding-bottom: 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;
            margin-left: auto;
        }

    }
    .chinkinbox{
        padding-top: 10rpx;
        padding-bottom: 10rpx;
        margin-left: 90rpx;
        display: flex;
        background-color: #efefef;
        align-items: center;
        padding-left: 18rpx;
        flex-wrap: wrap;
        .chickname{
            font-size: 30rpx;
            margin-left: 8rpx;
        }
    }
    .sending{
        background-color: #efefef;
        display: flex;
        padding-top: 20rpx;
        padding-left: 20rpx;
        width: 100%;
        height: 80rpx;
        position: relative;
        .textarea{
            background-color: white;
            width: 600rpx;
            border-radius: 15rpx;
            padding-left: 12rpx;
        }
        .button{
            position: absolute; /* 设置为绝对定位 */
            bottom: 18rpx; /* 距离底部10rpx */
            right: 10rpx; /* 距离右侧10rpx */
            width: 100rpx;
            height: 50rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
            background-color: #29b129;
            margin-left: 10rpx;
            border-radius: 15rpx;
            color: white;

        }
        .button2{
            position: absolute; /* 设置为绝对定位 */
            bottom: 18rpx; /* 距离底部10rpx */
            right: 10rpx; /* 距离右侧10rpx */
            width: 100rpx;
            height: 50rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
            background-color: white;
            margin-left: 10rpx;
            border-radius: 15rpx;
            color: gray;
            border: gray solid 1px;
        }
    }
    .commentbox{
        padding-top: 10rpx;
        padding-bottom: 10rpx;
        margin-left: 90rpx;
        display: flex;
        flex-direction: column;
        background-color: #efefef;
        align-items: center;
        padding-left: 18rpx;
        flex-wrap: wrap;
        border-top: gray solid 0.1px;
        font-size: 30rpx;
        padding-right: 10rpx;
        .comment{
            width: 100%;
            padding-top: 10rpx;
            padding-bottom: 10rpx;
            flex-wrap: wrap;
            flex: 1; /* 允许内容占用剩余空间 */
            white-space: normal; /* 允许内容换行 */
            overflow-wrap: break-word; /* 处理长单词的换行 */
            position: relative;
            .delete{
                width: 100rpx;
                height: 50rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: white;
                position: absolute;
                top: -40rpx;
                left: 50%;
                z-index: 99;
            }
        }
        .comment2{
            background-color: #bfbebe;
            width: 100%;
            padding-top: 10rpx;
            padding-bottom: 10rpx;
            flex-wrap: wrap;
            flex: 1; /* 允许内容占用剩余空间 */
            white-space: normal; /* 允许内容换行 */
            overflow-wrap: break-word; /* 处理长单词的换行 */
            position: relative;

            .delete{
                width: 100rpx;
                height: 50rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: white;
                position: absolute;
                top: -40rpx;
                left: 50%;
                z-index: 99;
            }
        }
    }
    .commentbox2{
        padding-top: 10rpx;
        padding-bottom: 10rpx;
        margin-left: 90rpx;
        display: flex;
        flex-direction: column;
        background-color: #efefef;
        align-items: center;
        padding-left: 18rpx;
        flex-wrap: wrap;
        font-size: 30rpx;
        padding-right: 10rpx;
        .comment{
            width: 100%;
            padding-top: 10rpx;
            padding-bottom: 10rpx;
            flex-wrap: wrap;
            flex: 1; /* 允许内容占用剩余空间 */
            white-space: normal; /* 允许内容换行 */
            overflow-wrap: break-word; /* 处理长单词的换行 */
            position: relative;
            .delete{
                width: 100rpx;
                height: 50rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: white;
                position: absolute;
                top: -40rpx;
                left: 50%;
                z-index: 99;
            }
        }
        .comment2{
            background-color: #bfbebe;
            width: 100%;
            padding-top: 10rpx;
            padding-bottom: 10rpx;
            flex-wrap: wrap;
            flex: 1; /* 允许内容占用剩余空间 */
            white-space: normal; /* 允许内容换行 */
            overflow-wrap: break-word; /* 处理长单词的换行 */
            position: relative;
            .delete{
                width: 100rpx;
                height: 50rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: white;
                position: absolute;
                top: -40rpx;
                left: 50%;
                z-index: 99;
            }
        }
    }
}
.trends-two{
    width: 685rpx;
    margin-bottom: 20rpx;
    border-bottom: grey solid 1px;
    padding-left: 10rpx;
    padding-right: 10rpx;
    padding-bottom: 20rpx;
    padding-top: 20rpx;
    color: #333333;
    border-radius: 15rpx;
    background-color: white;
    font-family: MicrosoftYaHei;
    .namebax{
        width: 100%;
        height: 105rpx;
        display: flex;
        align-items: center;
        image{
            width: 105rpx;
            height: 105rpx;
            border-radius: 50%;
        }
        .name{
            margin-left: 10rpx;
            font-family: MicrosoftYaHei;
            font-size: 28rpx;
            color: #333333;
        }
        .guanzhu{
            width: 85rpx;
            height: 35rpx;
            margin-left: auto;
            display: flex;
            align-items:center ;
            justify-content: center;
            font-family: MicrosoftYaHei;
            font-size: 20rpx;
            color: #3C3C3C;
            border: solid 2rpx #3C3C3C;
            border-radius: 40rpx;
        }
    }
    .text{
        width: 100%;
        font-size: 26rpx;
        margin-top: 50rpx;
        .quanwen{
            font-size: 26rpx;
            color: #CDCDD2;
            margin-top: 20rpx;
        }
    }
    .picture{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-top: 30rpx;
        justify-content: space-between;
        .image{
            width: 210rpx;
            height: 210rpx;
            // margin-right: 10rpx;
            // margin-bottom: 10rpx;
            border-radius: 15rpx;
        }
    }
    .picture5 {
        width: 100%;
        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: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 30rpx;
        .image{
            width: 240rpx;
            height: 240rpx;
            margin-right: 20rpx;
            margin-bottom: 10rpx;
        }
    }
    .picture4{
        width: 100%;
        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: 100%;
        display: flex;
        justify-content: center;
        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;
            margin-left: auto;
        }

    }
    .chinkinbox{
        padding-top: 10rpx;
        padding-bottom: 10rpx;
        margin-left: 90rpx;
        display: flex;
        background-color: #efefef;
        align-items: center;
        padding-left: 18rpx;
        flex-wrap: wrap;
        .chickname{
            font-size: 30rpx;
            margin-left: 8rpx;
        }
    }
    .sending{
        background-color: #efefef;
        display: flex;
        padding-top: 20rpx;
        padding-left: 20rpx;
        width: 100%;
        height: 80rpx;
        position: relative;
        .textarea{
            background-color: white;
            width: 600rpx;
            border-radius: 15rpx;
            padding-left: 12rpx;
        }
        .button{
            position: absolute; /* 设置为绝对定位 */
            bottom: 18rpx; /* 距离底部10rpx */
            right: 10rpx; /* 距离右侧10rpx */
            width: 100rpx;
            height: 50rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
            background-color: #29b129;
            margin-left: 10rpx;
            border-radius: 15rpx;
            color: white;

        }
        .button2{
            position: absolute; /* 设置为绝对定位 */
            bottom: 18rpx; /* 距离底部10rpx */
            right: 10rpx; /* 距离右侧10rpx */
            width: 100rpx;
            height: 50rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
            background-color: white;
            margin-left: 10rpx;
            border-radius: 15rpx;
            color: gray;
            border: gray solid 1px;
        }
    }
    .commentbox{
        padding-top: 10rpx;
        padding-bottom: 10rpx;
        margin-left: 90rpx;
        display: flex;
        flex-direction: column;
        background-color: #efefef;
        align-items: center;
        padding-left: 18rpx;
        flex-wrap: wrap;
        border-top: gray solid 0.1px;
        font-size: 30rpx;
        padding-right: 10rpx;
        .comment{
            width: 100%;
            padding-top: 10rpx;
            padding-bottom: 10rpx;
            flex-wrap: wrap;
            flex: 1; /* 允许内容占用剩余空间 */
            white-space: normal; /* 允许内容换行 */
            overflow-wrap: break-word; /* 处理长单词的换行 */
            position: relative;
            .delete{
                width: 100rpx;
                height: 50rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: white;
                position: absolute;
                top: -40rpx;
                left: 50%;
                z-index: 99;
            }
        }
        .comment2{
            background-color: #bfbebe;
            width: 100%;
            padding-top: 10rpx;
            padding-bottom: 10rpx;
            flex-wrap: wrap;
            flex: 1; /* 允许内容占用剩余空间 */
            white-space: normal; /* 允许内容换行 */
            overflow-wrap: break-word; /* 处理长单词的换行 */
            position: relative;

            .delete{
                width: 100rpx;
                height: 50rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: white;
                position: absolute;
                top: -40rpx;
                left: 50%;
                z-index: 99;
            }
        }
    }
    .commentbox2{
        padding-top: 10rpx;
        padding-bottom: 10rpx;
        margin-left: 90rpx;
        display: flex;
        flex-direction: column;
        background-color: #efefef;
        align-items: center;
        padding-left: 18rpx;
        flex-wrap: wrap;
        font-size: 30rpx;
        padding-right: 10rpx;
        .comment{
            width: 100%;
            padding-top: 10rpx;
            padding-bottom: 10rpx;
            flex-wrap: wrap;
            flex: 1; /* 允许内容占用剩余空间 */
            white-space: normal; /* 允许内容换行 */
            overflow-wrap: break-word; /* 处理长单词的换行 */
            position: relative;
            .delete{
                width: 100rpx;
                height: 50rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: white;
                position: absolute;
                top: -40rpx;
                left: 50%;
                z-index: 99;
            }
        }
        .comment2{
            background-color: #bfbebe;
            width: 100%;
            padding-top: 10rpx;
            padding-bottom: 10rpx;
            flex-wrap: wrap;
            flex: 1; /* 允许内容占用剩余空间 */
            white-space: normal; /* 允许内容换行 */
            overflow-wrap: break-word; /* 处理长单词的换行 */
            position: relative;
            .delete{
                width: 100rpx;
                height: 50rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: white;
                position: absolute;
                top: -40rpx;
                left: 50%;
                z-index: 99;
            }
        }
    }
}