.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; }