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

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

.all{
        width: 100vw;
        position: relative;
        background: linear-gradient(to bottom, #4F9AF7, #FFFFFF); /* 竖直渐变 */
        .navbox{
            width: 100vw;
            display: flex;
            align-items: flex-end;
            .nav{
                width: 100%;
                display: flex;
                justify-content: center;
                position: relative;
                margin-bottom: 20rpx;
                height: 40rpx;
                image{
                    position: absolute;
                    left: 38rpx;
                    top: 8rpx;
                    width: 44rpx;
                    height: 35rpx;
                }
                .nav-title{
                    height: 36rpx;
                    font-family: MicrosoftYaHei;
                    font-size: 36rpx;
                    color: #333333;
                    line-height: 40rpx;
                    text-align: center;
                }
            }
        }

        .trends{
            width: 100%;
            padding-top: 20rpx;
            padding-left: 32rpx;
            padding-right: 32rpx;
            .activebox{
                width: 685rpx;
                height: 488rpx;
                padding: 15rpx;
                background-color: white;
                border-radius: 20rpx;
                box-shadow: 0 8rpx 4rpx #DEE1E6;
                margin-bottom: 20rpx;
                .titlebox{
                    width: 100%;
                    height: 36rpx;
                    display: flex;
                    align-items: center;
                    border-left: #58A5FE 8rpx solid;

                    .title{
                        font-family: MicrosoftYaHei;
                        font-size: 30rpx;
                        color: #333333;
                        margin-left: 10rpx;
                    }
                    .alltitlebox{
                        height: 20rpx;
                        display: flex;
                        align-items: center;
                        margin-left: auto;
                        .all-text{
                            font-family: MicrosoftYaHei;
                            font-size: 20rpx;
                            color: #333333;
                        }

                        image{
                            width: 14rpx;
                            height: 20rpx;
                            margin-left: 10rpx;
                        }
                    }
                }
                .acbox{
                    width: 100%;
                    height: 177rpx;
                    margin-top: 20rpx;
                    display: flex;
                    .ac-picbox{
                        width: 310rpx;
                        height: 177rpx;
                        position: relative;
                        image{
                            width: 310rpx;
                            height: 177rpx;
                            border-radius: 20rpx;
                        }
                        .picbox{
                            width: 100rpx;
                            height: 44rpx;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background-image: url(https://file-cloud.fmode.cn/qpFbRRSZrO/20241224/u1uhl1104441535.png);
                            background-position: center; /* 背景图片居中 */
                            background-size: cover; /* 背景图片覆盖整个元素 */
                            background-repeat: no-repeat; /* 不重复背景图片 */
                            position: absolute;
                            bottom: 0rpx;
                            right: 0rpx;
                            .pic-tex{
                                font-family: MicrosoftYaHei;
                                font-size: 18rpx;
                                color: #FFFEFE;
                            }
                        }
                    }
                }
                .paihangbox{
                    width: 662rpx;
                    height: 185rpx;
                    display: flex;              /* 使用 Flexbox 布局 */
                    // justify-content: space-between; /* 均匀分布 */
                    justify-content: center;
                    align-items: center;
                    border-radius: 20rpx;
                    margin-top: 26rpx;
                    image{
                        width: 662rpx;
                        height: 185rpx;
                    }
                }
            }
            .no-more{
                width: 100%;
                display: flex;
                justify-content: center;
                font-size: 28rpx;
                margin-bottom: 35rpx;
            }
        }
        .trends::-webkit-scrollbar {
            display: none; /* 隐藏滚动条 */
        }
        .publishbox{
            position: absolute;
            bottom:214rpx;
            right: 12rpx;
            image{
                width: 80rpx;
                height: 80rpx;
            }
        }

}