.detailedReport {
    width: 100%;
    height: 100%;

    .scrollViewContent {
        width: 100%;
        position: relative;

        .bg {
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 440rpx;
        }

        .detailedReport-container {
            width: 100%;
            padding-top: 190rpx;
            box-sizing: border-box;

            .title {
                width: 100%;
                margin-bottom: 20rpx;

                .title_1 {
                    color: #1A3F68;
                    height: 32rpx;
                    font-size: 32rpx;
                    font-weight: bolder;
                    line-height: 32rpx;
                    margin-bottom: 20rpx;
                }

                .title_2 {
                    color: #446D99;
                    height: 26rpx;
                    font-size: 26rpx;
                    font-weight: bolder;
                    line-height: 26rpx;
                }
            }

            /* 顶部头部 */
            .header {
                width: 100%;
                height: 280rpx;
                border-radius: 32rpx;
                box-shadow: 0 16rpx 32rpx 0 rgba(19, 133, 250, 0.16);
                background: linear-gradient(90deg, #1385FA 0%, #0B6FD4 100%);
                padding: 45rpx;
                box-sizing: border-box;
                margin-bottom: 24rpx;

                .header-top {
                    width: 100%;
                    height: 38rpx;
                    display: flex;
                    flex-wrap: nowrap;
                    align-items: center;
                    margin-bottom: 50rpx;

                    > view:nth-of-type(1) {
                        width: 38rpx;
                        height: 38rpx;
                        display: flex;
                        align-items: center;
                        margin-right: 16rpx;
                    }

                    > view:nth-of-type(2) {
                        color: #FFFFFF;
                        height: 26rpx;
                        font-size: 26rpx;
                        line-height: 26rpx;
                    }
                }

                .header-bottom {
                    width: 100%;
                    height: 120rpx;
                    display: flex;
                    flex-wrap: nowrap;
                    justify-content: space-between;
                    align-items: end;

                    .header-weight {
                        height: 120rpx;
                        display: flex;
                        flex-wrap: nowrap;
                        align-items: end;

                        .weight-num1 {
                            color: #FFFFFF;
                            height: 120rpx;
                            font-size: 120rpx;
                            line-height: 120rpx;
                        }

                        .weight-num2 {
                            color: #FFFFFF;
                            height: 68rpx;
                            font-size: 56rpx;
                            line-height: 68rpx;
                            margin-right: 10rpx;
                        }

                        .weight-unit {
                            color: #FFFFFF;
                            height: 40rpx;
                            font-size: 28rpx;
                            line-height: 40rpx;
                        }
                    }

                    .header-info {
                        width: 200rpx;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: right;

                        .header-bmi {
                            color: #FFFFFF;
                            height: 48rpx;
                            font-size: 22rpx;
                            line-height: 48rpx;
                            border-radius: 24rpx;
                            padding: 0 20rpx;
                            margin-bottom: 16rpx;
                            border: 2rpx solid rgba(255, 255, 255, 0.20);
                            background-color: rgba(255, 255, 255, 0.12);
                        }

                        .header-change {
                            color: #FFFFFF;
                            height: 48rpx;
                            font-size: 22rpx;
                            line-height: 48rpx;
                            border-radius: 24rpx;
                            padding: 0 20rpx;
                            border: 2rpx solid rgba(255, 255, 255, 0.20);
                            background-color: rgba(255, 255, 255, 0.12);
                        }
                    }
                }
            }

            /* 基础指标 */
            .basicIndicators {
                width: 100%;
                padding: 38rpx 30rpx;
                border-radius: 24rpx;
                box-sizing: border-box;
                margin-bottom: 24rpx;
                border: 4rpx solid #ffffff;
                background: linear-gradient(180deg, #D3E9FF 0%, #FFFFFF 12%);

                .basicIndicatorsTitle {
                    width: 100%;
                    height: 32rpx;
                    display: flex;
                    flex-wrap: nowrap;
                    align-items: center;
                    margin-bottom: 40rpx;

                    .basicIndicatorsBar {
                        width: 6rpx;
                        height: 20rpx;
                        border-radius: 4rpx;
                        margin-right: 16rpx;
                        background-color: #1385FA;
                    }

                    .basicIndicatorsTitleText {
                        color: #252535;
                        height: 32rpx;
                        font-size: 32rpx;
                        font-weight: bolder;
                        line-height: 32rpx;
                    }
                }

                .basicIndicatorsGrid {
                    width: 100%;
                    margin-bottom: 32rpx;

                    .basicIndicatorsRow {
                        width: 100%;
                        display: flex;
                        margin-bottom: 24rpx;
                        padding-bottom: 24rpx;
                        border-bottom: 2rpx solid #EAECF1;

                        &:last-of-type {
                            margin-bottom: 0;
                        }

                        .basicIndicatorsCell {
                            flex: 1;
                            padding: 9rpx 24rpx;
                            box-sizing: border-box;
                            border-right: 2rpx solid #EAECF1;

                            &:last-of-type {
                                border-right: none;
                            }

                            .basicIndicatorsLabel {
                                color: #808080;
                                height: 30rpx;
                                font-size: 26rpx;
                                line-height: 30rpx;
                                margin-bottom: 20rpx;
                            }

                            .basicIndicatorsValueRow {
                                width: 100%;
                                display: flex;
                                flex-wrap: nowrap;
                                align-items: flex-end;

                                .basicIndicatorsValue {
                                    color: #252535;
                                    height: 44rpx;
                                    font-size: 44rpx;
                                    line-height: 44rpx;
                                    margin-right: 6rpx;
                                }

                                .basicIndicatorsUnit {
                                    color: #252535;
                                    height: 26rpx;
                                    font-size: 26rpx;
                                    font-weight: bolder;
                                    line-height: 26rpx;
                                }
                            }
                        }
                    }
                }

                .basicIndicatorsScale {
                    width: 100%;

                    .basicIndicatorsTrack {
                        display: flex;
                        gap: 6rpx;
                        flex-wrap: nowrap;
                        height: 20rpx;
                        margin-bottom: 24rpx;

                        .basicIndicatorsBlock {
                            flex: 1;
                            border-radius: 6rpx;
                            overflow: hidden;
                        }

                        .basicIndicatorsBlock--low {
                            background-color: #1385FA;
                        }

                        .basicIndicatorsBlock--normal {
                            background-color: #2AC79F;
                        }

                        .basicIndicatorsBlock--over {
                            background-color: #FFA151;
                        }

                        .basicIndicatorsBlock--obese {
                            background-color: #F24439;
                        }
                    }

                    .basicIndicatorsScaleRow {
                        width: 100%;
                        height: 24rpx;
                        display: flex;
                        gap: 6rpx;
                        flex-wrap: nowrap;
                        margin-bottom: 12rpx;

                        > view {
                            flex: 1;
                            text-align: center;
                            color: #77849E;
                            height: 24rpx;
                            font-size: 24rpx;
                            line-height: 24rpx;
                        }
                    }

                    .basicIndicatorsScaleRow--range {
                        width: 100%;
                        height: 20rpx;
                        display: flex;
                        gap: 6rpx;
                        flex-wrap: nowrap;

                        > view {
                            color: #B6B6B6;
                            height: 20rpx;
                            font-size: 20rpx;
                            line-height: 20rpx;
                        }
                    }
                }
            }

            /* 指标卡片 */
            .metricCard {
                width: 100%;
                border-radius: 24rpx;
                background-color: #FFFFFF;
                margin-bottom: 24rpx;

                .metricCardTitle {
                    width: 100%;
                    height: 96rpx;
                    display: flex;
                    flex-wrap: nowrap;
                    align-items: center;
                    padding: 0 32rpx;
                    box-sizing: border-box;
                    border-bottom: 2rpx solid #EAECF1;

                    .metricCardBar {
                        width: 6rpx;
                        height: 20rpx;
                        border-radius: 4rpx;
                        background-color: #1385FA;
                        margin-right: 16rpx;
                    }

                    .metricCardTitleText {
                        color: #252535;
                        height: 32rpx;
                        font-size: 32rpx;
                        font-weight: bolder;
                        line-height: 32rpx;
                    }
                }

                .metricCardList {
                    width: 100%;
                    padding: 0 32rpx 40rpx;
                    box-sizing: border-box;

                    .metricCardRow {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        padding: 20rpx 0;
                        border-bottom: 2rpx dashed #EAECF1;

                        .metricCardLabel {
                            flex: 1;
                            color: #77849E;
                            height: 28rpx;
                            font-size: 28rpx;
                            line-height: 28rpx;
                        }

                        .metricCardValue {
                            color: #252535;
                            height: 28rpx;
                            font-size: 28rpx;
                            line-height: 28rpx;
                            margin-right: 24rpx;
                        }

                        .metricCardStatus {
                            height: 40rpx;
                            padding: 0 10rpx;
                            border-radius: 8rpx;
                            font-size: 24rpx;
                            line-height: 40rpx;
                            color: #FFFFFF;
                        }

                        .metricCardStatus--normal {
                            background-color: #2AC79F;
                        }

                        .metricCardStatus--low {
                            background-color: #1385FA;
                        }

                        .metricCardStatus--high {
                            background-color: #F24439;
                        }
                    }
                }

                .bodyPartsList {
                    width: 100%;
                    padding: 0 32rpx 40rpx;
                    box-sizing: border-box;

                    .bodyPartsRow {
                        width: 100%;
                        display: flex;
                        flex-wrap: nowrap;
                        border-bottom: 2rpx solid #EAECF1;

                        .bodyPartCell {
                            flex: 1;
                            padding: 36rpx 24rpx;
                            box-sizing: border-box;
                            border-right: 2rpx solid #EAECF1;

                            &:last-of-type {
                                border-right: none;
                            }

                            .bodyPartLabel {
                                color: #808080;
                                height: 26rpx;
                                font-size: 26rpx;
                                line-height: 26rpx;
                                margin-bottom: 24rpx;
                            }

                            .bodyPartValue {
                                width: 100%;
                                display: flex;
                                flex-wrap: nowrap;
                                align-items: flex-end;

                                .bodyPartNum {
                                    color: #252535;
                                    height: 40rpx;
                                    font-size: 40rpx;
                                    line-height: 40rpx;
                                }

                                .bodyPartUnit {
                                    color: #252535;
                                    height: 24rpx;
                                    font-size: 24rpx;
                                    line-height: 24rpx;
                                }

                                .bodyPartSep {
                                    color: #EAECFA;
                                    height: 32rpx;
                                    font-size: 32rpx;
                                    line-height: 32rpx;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}