page { background: #F7F8F9; } .back-top { width: 100vw; height: 430rpx; position: absolute; z-index: -11; top: 0; background-size: contain; } .avatar { width: 72rpx; height: 72rpx; border-radius: 50%; background: #fff; margin-left: 44rpx; margin-right: 20rpx; } .data { width: 694rpx; height: 328rpx; background: #0089FD; border-radius: 8rpx; margin: 0 auto; margin-top: 32rpx; color: #fff; padding: 40rpx 50rpx; } .data .data-box { width: 240rpx; } .shu { width: 2rpx; height: 71rpx; opacity: 0.5; border-left: 1rpx solid #FFFFFF; } .data .nums { font-size: 48rpx; font-family: Helvetica-Bold, Helvetica; font-weight: bold; color: #FFFFFF; margin-bottom: 16rpx; } .data .unit { font-size: 26rpx; font-family: Helvetica-Bold, Helvetica; font-weight: bold; color: #FFFFFF; margin-left: 18rpx; } .data .text { font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #FFFFFF; line-height: 22rpx; } .func { width: 694rpx; height: 600rpx; background: #FFFFFF; box-shadow: 0px 4rpx 14rpx 0rpx rgba(0, 0, 0, 0.02); border-radius: 8rpx; margin: 0 auto; margin-top: 20rpx; position: relative; } .func .icon { width: 80rpx; height: 80rpx; margin-right: 38rpx; } .func .title { font-size: 36rpx; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #2A3245; } .func .text { font-size: 30rpx; color: #A3A8B3; margin-right: 12rpx; } .func .num { font-size: 36rpx; color: #2A3245; } .func-line { width: 590rpx; height: 200rpx; margin: 0 auto; border-bottom: 1px solid #dee2e9; } .func-shu { height: calc(100% - 120rpx); border-left: 1rpx solid #E1E5ED; position: absolute; top: 60rpx; left: 50%; } .func-line-right { width: 240rpx; }