.pageContent { height: 100%; width: 100%; padding: 20px; background-color: #fff; .header { font-size: 18px; font-weight: 700; margin-bottom: 15px; } .content { height: calc(100% - 35px); overflow-y: scroll; display: flex; flex-wrap: wrap; align-content: flex-start; :global { .ant-table-wrapper { height: 100%; .ant-table { height: 100%; .ant-table-container { height: 100%; border: 1px solid #f0f0f0; .ant-table-content { height: 100%; } } } } } .cardBox { border: 1px solid #ccc; padding: 10px; border-radius: 10px; height: 200px; width: 382px; margin: 10px 20px 10px 0; .header { border-bottom: 1px solid #ccc; padding: 3px; } .cardContent { border-bottom: 1px solid #ccc; padding-bottom: 10px; display: flex; flex-wrap: wrap; .stadusBox { display: flex; height: 30px; align-items: center; width: 150px; margin-bottom: 10px; .value { display: flex; height: 30px; align-items: center; margin-left: 10px; } } } .footer { width: 100%; display: flex; justify-content: space-around; margin-top: 10px; .operateBox { display: flex; width: 200px; height: 30px; align-items: center; justify-content: center; border-left: 1px solid #ccc; } .operateBox:nth-of-type(1) { border: none; } } } } }