leromro-mini/pages_home/pages/certification/index.scss

.certification-main {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    // padding-bottom: 56rpx;
    background: #F5F5F5;
    display: flex;
    flex-direction: column;


}

.certification-scroll {
    overflow-y: auto;
    // position: fixed;
    // left: 0;
    // top: 150rpx;
    // right: 0;
    // bottom: 0;
    // padding-bottom: 84rpx;
    flex: 1;
}



.certification-content {
    padding: 0rpx 32rpx;
    padding-bottom: 80rpx;
}

.certification-title {
    font-size: 32rpx;
    font-weight: bold;
    line-height: 44rpx;
    padding: 46rpx 0rpx;
}

.serve-main {
    margin-bottom: 20rpx;
}

.serve-box {
    padding: 32rpx 32rpx 32rpx 0rpx;
    margin-left: 32rpx;
}
.serve-img-boxs {
    margin-bottom: 20rpx;
}
.serve-img-boxs:last-child {
    margin-bottom: 0rpx;
}
.serve-box-contnt {
    margin-left: 32rpx;
    padding: 32rpx 32rpx 32rpx 0rpx;
    display: grid;
    grid-template-columns: repeat(3, 1fr); // 创建 3 列，每列等宽
    gap: 20rpx; // 设置列与行之间的间距
}

.serve-img-contnt {
    padding: 32rpx 32rpx 62rpx;
    display: grid;
    grid-template-columns: repeat(3, 1fr); // 创建 3 列，每列等宽
    gap: 48rpx 32rpx; // 设置列与行之间的间距
}
.certification-card {
    border-radius: 20rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.02);
}

.serve-item {
    border-radius: 60rpx;
    box-sizing: border-box;
    border: 1.81rpx solid #FF6E51;
    font-family: PingFang SC;
    font-size: 27.2rpx;
    font-weight: 500;
    color: #FF6E51;
    text-align: center;
    padding: 16rpx 0;
    box-sizing: border-box;
}

.serve-up-img {
    border-radius: 6rpx;
    background: #FFFFFF;
    box-sizing: border-box;
    border: 1rpx solid rgba(0, 0, 0, 0.12);
    padding: 53rpx 0;
}

.serve-img {
    position: relative;

    .img-close {
        position: absolute;
        right: -15rpx;
        top: -15rpx;
        width: 30.83rpx;
        height: 30.83rpx;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAYAAAAfrhY5AAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAALgSURBVEiJ5ZdNS9xAGMfnzRBB0UJhdw/DIriga8B63BRLbz31Yl08iIUc21IQP8F+glLoocehUg8S62cIlcabVMhFVvCwUHbBg16C7M5LL91lk0xi1t1Dwf8pmZknv38yz0yeAeCxCo4awBibLxQK60KIBQgh4pxLwzCuOp3OieM4NxOHM8bM2dnZ90qpnV6v9yxt3NTU1G+M8f7t7e1Xx3Huxoa7rrsthPgipXySxygAAGCMrxFCu/V6/eBB8EajQSzLOux2uxt5oXEZhnEcBMFWo9HgWpNp4Gq16vV6vVcPBQMAgBBiuVQqvaxWq989z5PxfqQLsizrkHP+fBxwX91u94VlWYe6vgTcdd3tcT51ioEN13W34+2ROWeMmdPT039GSa68whhfh2FIh1dB5M1nZmY+pIEhhMC2bUAp1T6cUgps2wYQ6nNYCPF0bm7u3XBbBK6U2klzXqvVQLlc1hrog8vlMqjVammPAEKIt1o4Y2yec76aFthqtYCUEiCEIgb6YIQQkFKCVquVCuecrzLG5hPwQqGwnhr1D+77fsTA2tpaBOz7fiZcKQWLxaKdgAshFrLgOgNLS0u5wX1xzhcTcAihds3rDDSbzUhbs9nMBY5zBhdKqcQOpBOlFFQqlUhbpVJJXQVxDXMGcIzxVR7w8BxfXFxokzBLhJDLBLzT6ZyMAvZ9H5ydnSWSMMsAhFC1220/AXcc54YQcp4F1yVXPAmz4ISQ8+GCg8Q6v3HOP+kCT09PB7B4cvUNUEoH43TCGO8P3/8/e7vjOHcY44+TBgMAAEJoN15aaf8CR0dHPyb5WzUM43hzc/NNwpBucBAEW4SQXxMC/wyCYEvXpy2jPM+TKysr+6VSyRJCLI8BPg6C4HVaDZerepVSfhZCPM0LzVu93ruf1+v1gzAMqWmae1n7AIRQEULOTdPcC8OQ3gcG4IEnlmKxaHPOFyGESCklCSGX7XbbH/XE8nj1FxvKd+/WNl3DAAAAAElFTkSuQmCC);
        background-position: center;
        background-size: 30.83rpx auto;
        background-repeat: no-repeat;
    }

    .serve-is-img {
        border-radius: 6rpx;
        // background: red;
        box-sizing: border-box;
        border: 1rpx solid rgba(0, 0, 0, 0.08);
        height: 200rpx;
    }
}
.certification-footer {
    padding-top: 24rpx;
    background: #fff;
    padding-bottom: 56rpx;
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
    gap: 82rpx;
}
.certification-btn {

    // width: 480rpx;
    padding: 19rpx 0;
    border-radius: 14rpx;
    background: linear-gradient(180deg, #FD8F7C -75%, #FE534B 140%);
    font-family: PingFang SC;
    font-size: 30rpx;
    font-weight: 500;
    line-height: 42rpx;
    text-align: center;
    letter-spacing: normal;
    color: #FFFFFF;

}
.btn-w {
    width: 480rpx; 
}
.btn-p {
    padding: 19rpx 103rpx !important;
}
.certification-btn-bols {
    border-radius: 14rpx;
    background: #FFFFFF;
    box-sizing: border-box;
    border: 2rpx solid #FE675B;

    font-family: PingFang SC;
    font-size: 30rpx;
    font-weight: 500;
    line-height: 42rpx;
    letter-spacing: normal;
    color: #FE675B;

    padding: 19rpx 0;
}

.whether-or-not {
    padding: 32rpx;
}
.radio-box {
    .radio-item{
        padding:0 30rpx;
        .radio-name {
            margin-right: 6rpx;
        }
    }
    .radio-item{
        position: relative;
        &::after{
            content: "";
                position: absolute;
                top: 50%;
                /* 从中间开始 */
                transform: translateY(-50%);
                /* 垂直居中 */
                right: 0;
                height: 18rpx;
                /* 固定高度 */
                width: 2rpx;
                background-color: #D8D8D8;
        }
    }
    .radio-item:last-child{
        &::after{
            display: none;
        }
    }
}
.whether-radio {
    width: 34rpx;
    height: 34rpx;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAOYSURBVFiFvVgxbNtGFH3/aBIeMnTQoMGDBo8a3DHgWfUB2WKjCpCha4YCLVIgKRoNRTs26NAGaYAOBTp0bEcZVjcD14qkklFAPWbw4EGDBg8eDNK838E8+8RKNS3Jett9/rv3eEd+vk/CLaC1rvm+/xDADoAmM28QUR0AmHlERCcAjgD8lWXZn0qpcdW1qUpSFEU7QohnzLwLYK3i2hdE1DXGvNne3o4XEqK1bgRB8JqZ2xXJp5MQddM0/VIpdXxrIf1+/xMhxK8A7pUujYnokJkTZn4P4LyIrxPRJhGFzPwAQK0079QY83mr1fqjspAkSb5i5h9L4aEx5mWe512l1MWsGwAArfWa53ltIcQ3ALYmCIlehGH46kYhcRy/APCDEzoD0JFS/vJ/5LMQx/EXAL7H5M52pJQTNzohpDiO353QMRHthWF4NI8IiyRJmsx8AKBhY8aYR61Wq/sfIVrrhu/7/zjKj7Msu6+UGi0iwlm/7vv+W0fMaZZlH9oHWNjEIAheOyLOiGhvWSIAQCk1IqI9XB41AHxQcOJKSBRFO6VXtLPocUxDsebXdszM7SiK5JUQIcQzJ38474NZBVLKnwEM7dhyC611raiYAABjzMu7EjGNg5nbWuua8DzPLdvjPM+706cvD3me9wDY79Ca53m7wvO8j2wCER3eVKyWAaXUOREd2rEQIhTM3LQBZk7uWsQMri0BYMO5+H6FQlyuDQGg7gTOsTq4XHUxM23FEADc6rm+Qm6XayQAnNgREW2uSkWJ60QQ0ZFzMVyhEJdrKAD8bUfM/EBrXdWTzg2t9Xrh4qyoRKRp2gNgi1jN87yF/GkVFNXcWsmLNE17Qik1JqKeTSrs3Z3C5SCirlJqLADAGPPGyduK4/izuxJRWMcrH2u5yUnoAvi4GJ4V7mypnkRr3SxcmjVg+1LKNuA4tCzLnuPaPd3zff9Aa13HklBYxQNHxGnBiQkhSqljY8ynztyG7/tvtdZNLAhnJxo2Zox54jZcEyW+aH46ZTGDweDpvCIGg8HTsggAHdfBAzMarCm9DQAMiei7NE33KzRY60EQPGTmb1FqsDClp5kpBAD6/f5jIcRvmNJyMvOh53kxgImWE8BmnueSiGa1nE/KO3GjEOCq1/kJ12/TvNjPsuz5XE24iyiKZPFboo1b/pZg5ldSync3JVcSYqG1rgVBsMvMIS7PfgPXxmqEyy/5kIiSNE17t/lR8y+HW4ro0lcKPgAAAABJRU5ErkJggg==);
        background-position: center;
        background-size: 34rpx auto;
        background-repeat: no-repeat;
}
.whether-radio-active {
    width: 34rpx;
    height: 34rpx;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAATLSURBVFiFxZhPaBRXHMc/vzfZnRU9iOQQahAP4qEopEcTbTLgzUi3kIM5uG7x0lAhlkao2EMOFQtVrNBioUjXeEgPHlZMb5FJqok9BiIexIOVKDkEySFidjfzfj3Mzuxs/phNusXv6c378/t93ps37/1+I2xFfn9rymROiGoP6CERaQfaqq3zqjoH8kRFJip2+U+80YVGTUsjnTJ+vkeFQUR7QVoaM60rKEVRe2PZu/PoP4Fk/Px+Fa4jZBtzvhETRVG+XvYKL7YMkvbzp8TobyC7VlldUJFxwU4RmOcCy6EvMjj2gGK6RPU4SGs9C4tYBspe4Y+GQdzJM9+AXF1VPaNiL5eDl0W8iZWNJgCA39OSdvZlRc0loGPVRIZK3bevbQriTp4ZAvkxMXAJkQulTwu/vtf5BnL93DmMXKlfWb1Q6r5dN9E6kPB1MJqoeqE2OFn27jyJKnZM5/baimQR6UX1Y+CjatNrRJ6iOmZSWnzXOfKqZvf0ITHOfWB/jGL5vOwVimtAMn5+vxqdTZC/aLEceesV5gGYPrsnU14ZsiIDArvftwoKi0b15nK65Sqdt94A7PTzbSuGxxGMwqKxfBJtYBMPFq7XIHRJbXAygnAf5g66lWBCRS5uBlGd3W4VuehWggn3Ye4gwFuvMK82OAm6VOvD9WiMqa5GT90nKnIheh3uw9xBrPMAOLwZwDo6jHUeRDBl784TrF5MEGcz/umjMYg6DCYGz8Qbc/rsHqy5C9q+DYiqtB1r7jJ9dg9AyRv5GZiJWx0zGIL4/a2o9sYNYi9H5Ux5ZYjtrcRqHa7aWuMDJYvf32pSuIljWxfKwcsiVL8OkYEmQABgRQZ2TOf2ApQDMwZavYekJYXba8Shu0Yq49FhZSuSbWRjNiqB3bYi4T70CssqMh61GUe7jFE9VOtsp2ojpZdmK2Ez6UuUDqNIbSMG5nlcDg+r5ippM+FLkXZDLZ4gusAYHjbUTsxmKrYZ+wrVZtbp/EFkgPnoQSEDwPCwBV7/D/5im7GvUPNG0Lnasz0QF0WeNh2jzmbNl6BzxorEN6s6pivupzrWdJCEzaQvFWaMwmRMpnocv6cFwKS0qLDYNAZYNCkNr30/nwmjuFAWmTKVoDQGWo24pDXNvizAu86RV0b1ZrNAjOrNKEZJY3troaSuVILSmMEbXUAkXjIx5lJUXk63XAVmm8AxW7W1xgdCEW90wQBIwI3EoA7Xz38JQOetNxjbB5LY0FuVzGFsXxQguX7uHIk4VgJ7I+Spyp3MF4HPwiddUmuP1Mck5i5bv4lnMbavdGzkGUQho3mciALvlboLWUhEaGI5H0VPILvEOPd3+vk2gNKxkWellNMjqlca2cAKi6J6pZRyeiKInX6+LYxbQwiFxdBn1WPSQPqv/CnRDxw8R1o3nYBvS923f1l3+uG9FJ3Ga+ROnvkK+GFL6cTGMADMqOj35eCfe5snWPlM2tETovIdaxOsNRAbggCk/VyfGPl93ZRTZVxEHyHmeVC9RR3IoPaAqhwV2TDl/CL5OhoCgSjX4Sfir2nbuieW89tKwuuBTh9VxwyiZLf0W0Io2kCuVbzC35v1bggklt/fmnLcXoN2idJRje7iHzWCzqkwY5GpSlAa28qPmn8BNjoxePP9BhwAAAAASUVORK5CYII=);
        background-position: center;
        background-size: 34rpx auto;
        background-repeat: no-repeat;
}

.certification-error {
    background: #FFF7E8;
    padding: 16rpx 32rpx;
    font-size: 28rpx;
    line-height: 39.2rpx;
    display: flex;
    align-items: center;
    letter-spacing: normal;
    color: #FF7D00;
}