.Rcontainer { padding: 8px 6px 0px 6px; height: 100%; display: flex; flex-direction: column; gap: 10px; // 第一个div - 高度20% .RcontainerTop { height: 16%; // background-color: #fff; border-radius: 4px; display: flex; flex-direction: column; .sectionContent { height: 100%; display: flex; flex-direction: column; // padding: 15px; .blocksContainer { flex: 1; display: flex; gap: 10px; height: 100%; .blockItem { flex: 1; height: 100%; display: flex; background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 92.55%); border-radius: 4px; border: 2px solid #FFFFFF; .blockLeft { width: 60%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 15px; padding-left: 20px; gap: 8px; .blockTitle { font-family: PingFang SC; font-weight: 400; font-size: 12px; color: #666666; line-height: 1.2; } .blockNumber { font-family: PingFang SC; font-weight: 700; font-size: 24px; color: #333333; line-height: 1.2; } .blockChange { font-family: PingFang SC; font-weight: 400; font-size: 12px; color: #1269FF; line-height: 1.2; display: flex; align-items: center; gap: 4px; .arrow { font-size: 14px; font-weight: bold; } .checkIcon { font-size: 16px; color: #1269FF; } } } .blockRight { flex: 1; height: 100%; background-color: transparent; border-radius: 0 4px 4px 0; display: flex; align-items: center; justify-content: center; .blockImage { // width: 80%; height: 130%; // height: 80%; object-fit: contain; margin-right: -10px; } } } } } } // 第二个div - 高度30% .RcontainerMiddle { height: 30%; border-radius: 4px; display: flex; flex-direction: column; .sectionContent { height: 100%; display: flex; display: flex; gap: 10px; height: 100%; .middleBlock1 { flex: 1; height: 100%; background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%); border: 2px solid #fff; border-radius: 4px; position: relative; padding: 0px 10px 10px 2px; font-family: PingFang SC; font-size: 14px; color: #333333; .block1Header { position: absolute; top: 5px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; z-index: 10; .block1Title { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; color: #333333; .titleIcon { width: 3px; height: 14px; background-color: #2E4CD4; } } .block1Select { width: 120px; } } .block1Chart { width: 100%; height: 100%; margin-top: 20px; } } .middleBlock2 { flex: 1; height: 100%; background-color: pink; border: 2px solid #fff; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: PingFang SC; font-size: 14px; color: #333333; } } } // 第三个div - 占满剩余位置 .RcontainerBottom { flex: 1; // 占满剩余空间 background-color: #fff; border-radius: 4px; display: flex; flex-direction: column; .sectionContent { height: 100%; display: flex; flex-direction: column; padding: 15px; .titleLeft { display: flex; align-items: center; gap: 8px; font-family: PingFang SC; font-weight: 500; font-style: Medium; font-size: 14px; line-height: 100%; letter-spacing: 0%; color: #333333; margin-bottom: 10px; .titleIcon { width: 3px; height: 16px; background-color: #2E4CD4; } } .contentArea { flex: 1; display: flex; align-items: center; justify-content: center; font-family: PingFang SC; font-size: 14px; color: #666666; } } } }