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

/* nova-werun/components/home/index.wxss */
.all{
    width: 100vw;
   background: linear-gradient(to bottom, #4F9AF7, #FFFFFF); /* 竖直渐变 */
   font-family: MicrosoftYaHei;
   color: #333333;
   display: flex;
   flex-direction: column;
   align-items: center;
   .navbox{
    width: 100vw;
    display: flex;
    align-items: flex-end;
        .nav{
            width: 100%;
            display: flex;
            justify-content: center;
            position: relative;
            margin-bottom: 20rpx;
            height: 40rpx;
            .nav-addbox{
                position: absolute;
                left: 32rpx;
                top: 8rpx;
                font-size: 28rpx;
                height: 40rpx;
                color: white;
                display: flex;
                .nav-add{
                    margin-left: 4rpx;

                }
            }
            .nav-title{
                height: 36rpx;
                font-family: MicrosoftYaHei;
                font-size: 36rpx;
                color: #333333;
                line-height: 40rpx;
                text-align: center;
            }
        }
    }
    .sco{
        width: 100%;
        padding-left: 33rpx;
        padding-right: 33rpx;
        overflow-y: scroll;
        .topbox{
            width: 686rpx;
            height: 81rpx;
            display: flex;
            background-color: #4F9AF7;
            padding-left: 20rpx;
            padding-right: 20rpx;
            border-radius: 15rpx;
            padding-top: 20rpx;
            .top-tex{
                font-size: 26rpx;
                height: 34rpx;
                color: white;
                border-left: 8rpx solid white;
                padding-left: 10rpx;
                display: flex;
                align-items: center;
                
            }
            .top-tex2{
                width: 200rpx;
                height: 34rpx;
                display: flex;
                align-items: center;
                margin-left: auto;
                font-size: 26rpx;
                .top-tex2-tex{
                    height: 34rpx;
                    background-color: white;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 10rpx;
                    padding-left: 4rpx;
                    padding-right: 4rpx;
                    margin-left: 4rpx;
                    margin-right: 4rpx;
                }
            }
        }
        .clockinbox{
            width: 686rpx;
            height: 331rpx;
            display:flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-image: url(https://file-cloud.fmode.cn/qpFbRRSZrO/20241225/6p04ra030721696.png);
            background-position: center; /* 背景图片居中 */
            background-size: cover; /* 背景图片覆盖整个元素 */
            background-repeat: no-repeat; /* 不重复背景图片 */
            margin-top: -16rpx;
            .clockinbox2{
                width: 100%;
                display: flex;
                justify-content: center;
                .runbox{
                    width: 217rpx;
                    height: 217rpx;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: white;
                    .run{
                        width: 195rpx;
                        height: 195rpx;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        flex-direction: column;
                        justify-content: center;
                        background-color: #9BC5F9;
                        .tody-steps{
                            font-size: 24rpx;
                            color: white;
                        }
                        .step-num{
                            font-size: 50rpx;
                            color: #333333;
                        }
                        .objective{
                            width: 100%;
                            height: 50rpx;
                            align-items: center;
                            justify-content: center;
                            display: flex;
                            margin-top: 20rpx;
                            image{
                                width: 32rpx;
                                height: 32rpx;
                                margin-right: 10rpx;
                            }
                            .ob-num{
                                font-size: 28rpx;
                            }
                        }
                    }
                }
                .objbox{
                    height: 217rpx;
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    margin-left: 120rpx;
                    .obj1{
                        height: 74rpx;
                        border-left: 8rpx solid #0178EE;
                        padding-left: 10rpx;
                        .boj1-ti{
                            font-size: 24rpx;
                            color: #0178EE;
                        }
                        .obj1-numbox{
                            height: 40rpx;
                            display: flex;
                            font-size: 36rpx;
                            align-items: center;
                            margin-top: 4rpx;
                            image{
                                width: 32rpx;
                                height: 32rpx;
                                margin-right: 15rpx;
                            }
    
                        }
                    }
                    .obj2{
                        font-size: 14rpx;
                        margin-left: 20rpx;
                        margin-top: 4rpx;
                    }
                }
            }
            .today-check{
                width: 142rpx;
                height: 43rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 26rpx;
                margin-top: 10rpx;
                border-radius: 40rpx;
                color: white;
                background-color: #69A9F8;
            }
        }
        .a{
            width: 686rpx;
            border-radius: 15rpx;
            height: 55rpx;
            margin-top: 24rpx;
        }
        .typebox{
            width: 686rpx;
            height: 153rpx;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-top: 26rpx;
            background-color: white;
            border-radius: 15rpx;
            .column{
                height: 153rpx;
                display: flex;
                flex-direction: column; /* 使内容垂直排列 */
                align-items: center; /* 水平居中对齐 */
                justify-content: center;
                image{
                    width: 74rpx;
                    height: 82rpx;
                }
                .item-text{
                    font-size: 26rpx;
                }
            }
        }
    
        .rankbox{
            width: 686rpx;
            background-color: white;
            min-height: 618rpx;
            margin-top:30rpx;
            display: flex;
            align-items: center;
            flex-direction: column;
            border-radius: 15rpx;
            margin-bottom: 40rpx;
            .ran-top{
                width: 100%;
                height: 120rpx;
                padding-right: 16rpx;
                padding-left: 16rpx;
                display: flex;
                align-items: center;
                border-bottom: 2rpx solid #E0E0E0;
                .top-til{
                    height: 34rpx;
                    font-size: 30rpx;
                    padding-left: 14rpx;
                    border-left: solid 8rpx #58A5FE;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .top-box{
                    display: flex;
                    margin-left: auto;
                    font-size: 20rpx;
                    justify-content: center;
                    align-items: center;
                    image{
                        width: 20rpx;
                        height: 18rpx;
                        margin-left: 4rpx;
                    }
                }
            }
            .cardbox{
                width: 100%;
                height: 120rpx;
                padding-right: 16rpx;
                display: flex;
                align-items: center;
                border-bottom: 2rpx solid #E0E0E0;
                .paiming{
                    width: 37rpx;
                    height: 37rpx;
                    font-size: 24rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .image1{
                    width: 37rpx;
                    height: 37rpx;
                    margin-left: 6rpx;
                    background-image: url(https://file-cloud.fmode.cn/qpFbRRSZrO/20241226/n5b6q2120548337.png);
                    background-position: center;
                    background-size: cover;
                    background-repeat: no-repeat;
                    color: white;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 24rpx;
                }
                .image2{
                    width: 37rpx;
                    height: 37rpx;
                    margin-left: 6rpx;
                    background-image: url(https://file-cloud.fmode.cn/qpFbRRSZrO/20241226/d61fa4120559975.png);
                    background-position: center;
                    background-size: cover;
                    background-repeat: no-repeat;
                    color: white;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 24rpx;
                }
                .image3{
                    width: 37rpx;
                    height: 37rpx;
                    margin-left: 6rpx;
                    background-image: url(https://file-cloud.fmode.cn/qpFbRRSZrO/20241226/2c1osg120613150.png);
                    background-position: center;
                    background-size: cover;
                    background-repeat: no-repeat;
                    color: white;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 24rpx;
                }
                .avarter{
                    width: 82rpx;
                    height: 82rpx;
                    border-radius: 50%;
                    margin-left: 10rpx;
                }
                .name{
                    font-size: 24rpx;
                    margin-left: 20rpx;
                    .name2{
                        font-size: 18rpx;
                    }
                }
                .num{
                    font-size: 32rpx;
                    color: #00B108;
                    margin-left: auto;
                }
                .good{
                    margin-left: 20rpx;
                    font-size: 22rpx;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    .good-num{
                        font-size: 22rpx;
                    }
                    image{
                        width: 34rpx;
                        height: 34rpx;
                    }
                }
            }
        }
        
    }

    
}