.analysisContainer { padding: 8px 6px 0px 6px; height: 100%; display: flex; flex-direction: column; gap: 10px; // 第二个div - 高度35% .analysisContainerMiddle { // height: 400px; min-height: 35%; border-radius: 4px; display: flex; flex-direction: column; .analysisSectionContent { height: 100%; display: flex; display: flex; gap: 10px; height: 100%; .analysisMiddleBlock1 { width: 30%; height: 100%; background: #fff; border: 2px solid #fff; position: relative; padding: 0px 10px 10px 2px; font-family: PingFang SC; font-size: 14px; color: #333333; .analysisBlock1Header { position: absolute; top: 5px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; z-index: 10; .analysisBlock1Title { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; margin-top: 5px; color: #333333; .analysisTitleIcon { width: 3px; height: 14px; background-color: #2E4CD4; } } } .analysisDeviceStatusChart { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 10; min-height: 100%; } } .analysisMiddleBlock12 { flex: 1; height: 100%; background-color: #fff; display: flex; flex-direction: column; font-family: PingFang SC; font-size: 14px; color: #333333; padding: 5px 10px 5px 10px; position: relative; .analysisBlock1Header { position: absolute; top: 5px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; z-index: 10; .analysisBlock1Title { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; margin-top: 5px; color: #333333; .analysisTitleIcon { width: 3px; height: 14px; background-color: #2E4CD4; } } } .analysisDeviceStatusChart { position: absolute; top: 10px; left: 10px; right: 10px; // bottom: 10px; z-index: 10; } } .analysisMiddleBlock12 { width: 45%; height: 100%; background-color: #fff; display: flex; flex-direction: column; font-family: PingFang SC; font-size: 14px; color: #333333; padding: 5px 10px 5px 10px; position: relative; .analysisBlock1Header { position: absolute; top: 5px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; z-index: 10; .analysisBlock1Title { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; color: #333333; .analysisTitleIcon { width: 3px; height: 14px; background-color: #2E4CD4; } } } .analysisDeviceStatusChart { position: absolute; top: 10px; left: 10px; right: 10px; // bottom: 10px; min-height: 100%; z-index: 10; } } .analysisMiddleBlock2 { // flex: 1; width: calc(100% - 75% - 15px); height: 100%; // background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%); // border: 2px solid #fff; background-color: #fff; // border-radius: 4px; display: flex; flex-direction: column; font-family: PingFang SC; font-size: 14px; color: #333333; padding: 5px 10px 5px 10px; .analysisMiddleBlock2Title { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; .analysisTitleLeft { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; color: #333333; .analysisTitleIcon { width: 3px; height: 14px; background-color: #2E4CD4; } } } .analysisMiddleBlock2Chart { width: 100%; height: 100%; } } } } // 第三个div - 占满剩余位置 .analysisContainerBottom { display: flex; flex-direction: column; flex-shrink: 0; .analysisSectionContent { display: flex; flex-direction: row; flex: 1; gap: 10px; padding: 0; .analysisLeftBlock { width: 30%; flex-shrink: 0; height: 100%; padding: 0; display: flex; flex-direction: column; gap: 10px; .analysisLeftBlockTitle { display: flex; align-items: center; gap: 8px; font-family: PingFang SC; font-weight: 500; font-size: 14px; color: #333333; margin-bottom: 10px; .analysisTitleIcon { width: 3px; height: 16px; background-color: #2E4CD4; } } .analysisMaintenanceStack { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 10px; .analysisMaintenanceSection { width: 100%; height: 50%; background: #FFF; border-radius: 4px; display: flex; flex-direction: column; padding: 12px 14px; .analysisMaintenanceTitle { display: flex; align-items: center; gap: 8px; font-family: PingFang SC; font-weight: 500; font-size: 14px; color: #333333; margin-bottom: 8px; } .analysisTitleIcon { width: 3px; height: 16px; background-color: #2E4CD4; } .analysisMaintenanceContent { flex: 1; width: 100%; } .analysisMaintenanceContent1 { flex: 1; width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; .analysisMaintenanceItem { display: flex; align-items: center; justify-content: space-between; background-color: #F1F7FF; border-radius: 4px; padding: 16px 16px; .analysisMaintenanceLeft { flex: 1; display: flex; flex-direction: column; gap: 4px; .analysisMaintenanceText1 { font-size: 14px; font-weight: 500; color: #333333; font-family: PingFang SC; } .analysisMaintenanceText2 { font-size: 12px; color: #666666; font-family: PingFang SC; } .analysisMaintenanceText3 { font-size: 12px; color: #666666; font-family: PingFang SC; } } .analysisMaintenanceRight { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; .analysisMaintenanceStatus { font-size: 12px; color: #FF3E48; font-weight: 500; font-family: PingFang SC; background-color: #FFE0E2; padding: 4px 8px; border-radius: 4px; // border: 1px solid #FFE0E2; } } .analysisMaintenanceRight2 { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; .analysisMaintenanceStatus { font-size: 12px; color: #FF8800; font-weight: 500; font-family: PingFang SC; background-color: #FFF3E9; padding: 4px 8px; border-radius: 4px; // padding-right: 2px; } } } } .analysisMaintenanceContent2 { flex: 1; width: 100%; display: flex; flex-direction: column; gap: 15px; padding: 8px 0; .analysisWarningBox { display: flex; align-items: center; gap: 8px; background-color: #FFF3CD; border: 1px solid #F4E3AE; border-radius: 4px; padding: 8px 12px; // margin-bottom: 8px; // margin-top: 10px; .analysisWarningIcon { color: #8C6C0B; font-size: 14px; } .analysisWarningText { color: #8C6C0B; font-size: 12px; font-family: PingFang SC; font-weight: 400; } } .analysisProgressSection { width: 100%; display: flex; flex-direction: column; // gap: 12px; padding: 0px 12px 12px 12px; .analysisProgressLabel { font-size: 12px; color: #666666; font-family: PingFang SC; font-weight: 400; } // 自定义进度条样式 :global(.ant-progress) { .ant-progress-bg { background: linear-gradient(90deg, #2E4CD4 0%, #4B69F1 100%); } .ant-progress-text { color: #2E4CD4; font-weight: 500; } } } } } } } .analysisRightBlock { width: calc(100% - 28% - 10px); height: 100%; background-color: #fff; padding: 0; display: flex; flex-direction: column; .analysisTableHeader { display: flex; justify-content: space-between; align-items: center; padding: 11px 15px 5px 15px; .analysisTableTitle { display: flex; align-items: center; gap: 8px; font-family: PingFang SC; font-weight: 500; font-size: 14px; color: #333333; .analysisTitleIcon { width: 3px; height: 16px; background-color: #2E4CD4; } } } .analysisTableActions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 5px; padding: 0px 15px; .analysisLeftActions { display: flex; align-items: center; } .analysisRightActions { display: flex; gap: 8px; align-items: center; } .analysisActionButton { display: flex; align-items: center; gap: 4px; height: 28px; border: 1px solid #DFE4F6; border-radius: 4px; color: #2E4CD4; font-weight: 500; font-size: 12px; padding: 0px 8px; background: transparent; cursor: pointer; transition: all 0.2s ease; &:hover { background-color: #f0f2ff; border-color: #2E4CD4; } &:active { background-color: #e6ebff; } .analysisButtonIcon { font-size: 14px; font-weight: bold; } } } .analysisTableContainer { flex: 1; overflow: hidden; margin: 10px 15px 0 15px; // 上边距10px,左右边距15px :global(.ant-table) { font-size: 12px; } :global(.ant-table-thead > tr > th) { background-color: #f5f5fa; font-weight: 500; font-size: 14px; color: #333333; border-bottom: 1px solid #f0f0f0; padding: 8px 12px; text-align: center; } :global(.ant-table-tbody > tr > td) { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; text-align: center; color: #666666; } :global(.ant-table-tbody > tr:hover > td) { background-color: #f5f5f5; } :global(.ant-pagination) { margin-top: 16px; text-align: right; } } } } } }