.Rcontainer { padding: 8px 6px 0px 6px; height: 100%; display: flex; flex-direction: column; gap: 10px; // 第一个div - 高度20% .RcontainerTop { height: 18%; // 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, #F5F7FF 6.87%, #FFFFFF 47.65%); border-radius: 4px; // border: 2px solid #FFFFFF; // 块1 - 蓝色渐变 + SVG背景 &.block1 { background: url('@/assets/business_envinformation/background1.svg'), linear-gradient(180deg, #DBEBFF 0%, #DBEBFF 12.5%, rgba(255, 255, 255, 0.700824) 56%, rgba(255, 255, 255, 0.01) 100%); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } // 块2 - 黄色渐变 &.block2 { background: url('@/assets/business_envinformation/background2.svg'), linear-gradient(180deg, #FFFEDB 0%, #F5FFDB 19.23%, #FFFFFF 55.77%, #FFFFFF 100%); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } // 块3 - 绿色渐变 &.block3 { background: url('@/assets/business_envinformation/background3.svg'), linear-gradient(180deg, #8CFFCD 0%, #C0FFE4 12.5%, #FFFFFF 56%, #FFFFFF 100%); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } // 块4 - 青色渐变 &.block4 { background: url('@/assets/business_envinformation/background4.svg'), linear-gradient(180deg, #C5FFFC 0%, #C0FFFC 12.5%, #FFFFFF 56%, #FFFFFF 100%); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } // 块5 - 红色渐变 &.block5 { background: url('@/assets/business_envinformation/background4.svg'), linear-gradient(180deg, #FFD2D2 0%, #FFD9D9 12.5%, #FFFFFF 56%, #FFFFFF 100%); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } // 块6 - 紫色渐变 &.block6 { background: url('@/assets/business_envinformation/background6.svg'), linear-gradient(180deg, #F2D7FF 0%, #F4DDFF 12.5%, #FFFFFF 56%, #FFFFFF 100%); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } .blockLeft { width: 100%; 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: #333333; line-height: 1.2; } .blockNumber { font-family: PingFang SC; font-weight: 700; font-size: 24px; color: #333333; line-height: 1.2; } .blockTime { font-family: PingFang SC; font-weight: 400; font-size: 10px; color: #999999; 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: 65%; // height: 80%; object-fit: contain; margin-right: -5px; } } } } } } // 第三个div - 占满剩余位置 .RcontainerBottom { flex: 1; // 占满剩余空间 display: flex; flex-direction: column; .sectionContent { display: flex; flex-direction: row; gap: 10px; padding: 0; .leftBlock { width: 28%; flex-shrink: 0; height: 100%; background: #fff; // background-size: cover; padding: 0; display: flex; flex-direction: column; gap: 10px; padding: 15px; .leftBlockTitle { display: flex; align-items: center; gap: 8px; font-family: PingFang SC; font-weight: 500; font-size: 14px; color: #333333; margin-bottom: 10px; .titleIcon { width: 3px; height: 16px; background-color: #2E4CD4; } } .developmentContainer { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 8px; .developmentBlock1 { flex: 1; background-color: #F1F7FF; border-radius: 4px; padding: 15px 20px; display: flex; align-items: center; width: 100%; .leftContent { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; .mainText { color: #333333; font-size: 14px; font-weight: 500; font-family: PingFang SC; width: 100%; max-width: 500px; } .subText { color: #666666; font-size: 12px; font-weight: 400; font-family: PingFang SC; width: 100%; max-width: 400px; } } .rightContent { flex: 0 0 auto; display: flex; justify-content: flex-end; align-items: center; padding-right: 10px; min-width: 80px; .importantTag { background-color: #FFE0E2; color: #FF3E48; font-size: 14px; font-weight: 500; font-family: PingFang SC; width: 45px; height: 25px; display: flex; align-items: center; justify-content: center; border-radius: 4px; } .normalTag { background-color: #DAF3FF; color: #00AAFA; font-size: 14px; font-weight: 500; font-family: PingFang SC; width: 45px; height: 25px; display: flex; align-items: center; justify-content: center; border-radius: 4px; } } } } } .rightBlock { width: calc(100% - 28% - 10px); height: 100%; background-color: #fff; padding: 0; display: flex; flex-direction: column; .tableHeader { display: flex; justify-content: space-between; align-items: center; padding: 8px 15px 5px 15px; .tableTitle { display: flex; align-items: center; gap: 8px; font-family: PingFang SC; font-weight: 500; font-size: 14px; color: #333333; .titleIcon { width: 3px; height: 16px; background-color: #2E4CD4; } } .tableActions { display: flex; gap: 8px; margin-top: 5px; .actionButton { 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; } .buttonIcon { font-size: 14px; font-weight: bold; } } } } .tableContainer { 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; } } } } } }