#content { display: flex; border-top: 1px solid black; .dept-content { flex: 20%; padding: 35px 12px 0 0; height: calc(100vh - 85px); } .left-dept { flex: 20%; padding: 35px 12px 0 0; height: calc(100vh - 85px); border: 1px solid red; border-top: 1px solid black; } .right { flex: 80%; height: 190px; display: flex; flex-direction: column; .search-content { display: flex; flex-direction: column; padding: 35px 12px 0 0; .content-top { display: flex; .input-item { display: flex; align-items: center; margin-right: 20px; width: 270px; div { width: 120px; font-weight: bold; } } :nth-child(3) { div { margin-right: -30px; } } } .content-bottom { display: flex; margin-left: 12px; margin-top: 20px; div { margin-right: 10px; } .time-selector { display: flex; align-items: center; div { width: 120px; font-weight: bold; } .time-picker { width: 400px; text-align: center; margin-left: -30px; margin-right: 25px; } } button:focus, button:focus-visible { outline: none; } } } .table-content { margin: 12px 0 0 12px; .ant-table-thead > tr > th { color: #909399; text-align: center; } .ant-table-tbody > tr > td { text-align: center; } } .add-content { display: flex; margin-left: 12px; margin-top: 20px; button:focus, button:focus-visible { outline: none; } } .user-mid-button { display: flex; margin-left: 12px; margin-top: 20px; button:focus, button:focus-visible { outline: none; } } } }