.box { width: 100%; height: 100%; color: #303133; display: flex; flex-direction: column; overflow: hidden; .informbox { width: 100%; height: 60px; box-sizing: border-box; padding: 10px 20px; padding-bottom: 0px; .inform { width: 100%; height: 100%; background: #FFFFFF; border-radius: 0px 0px 0px 0px; opacity: 1; display: flex; .informleft { height: 100%; display: flex; align-items: center; margin-right: 20px; img { margin: 0 20px; } } .informright { flex: 1; } } } .timebox { width: 100%; height: 68px; box-sizing: border-box; display: flex; align-items: center; border-bottom: 1px dashed #C7CAD0; padding: 0 20px; nz-select { margin-right: 16px; border-radius: 4px 4px 4px 4px; } .monthbtn { width: 80px; height: 32px; line-height: 32px; background: #FFFFFF; border-radius: 4px 4px 4px 4px; opacity: 1; border: 1px solid #E4E7EC; color: #303133; margin-right: 16px; cursor: pointer; } .selectedMonth { background: #2C4DC0; color: #FFFFFF; } } .contentbox { flex: 1; box-sizing: border-box; padding: 20px; position: relative; overflow: hidden; } .fffbox { position: relative; width: 100%; height: 100%; background: #FFFFFF; box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.0800); border-radius: 4px 4px 4px 4px; opacity: 1; border: 1px solid #E4E7EC; display: flex; flex-direction: column; overflow: hidden; } .header { width: 100%; height: 56px; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; border-bottom: 1px solid #E4E7EC; span { color: #303133; font-weight: 500; font-size: 16px; } } .searchbox { height: 70px; display: flex; justify-content: space-between; padding: 0 20px; align-items: center; border-bottom: 1px solid #E4E7EC; .search { width: 100%; display: flex; justify-content: flex-start; input, nz-select, nz-tree-select { width: 220px; margin-right: 16px; text-align: left; } button { margin-right: 16px; } } } .content { flex: 1; box-sizing: border-box; padding: 18px; padding-top: 0px; display: flex; flex-direction: column; overflow-y: auto; .applybtn { align-self: flex-start; margin: 18px 0; } .tablebox { flex: 1; display: flex; flex-direction: column; .tableboxitem { display: flex; align-items: center; box-sizing: border-box; padding: 12px 20px; border: 1px solid #C7CAD0; justify-content: space-around; padding-left: 80px; margin: 10px 0; div { flex: 1; overflow:hidden; span { display: inline-block; width: 100%; height: 33px; line-height: 33px; text-align: left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; img { width: 32px; height: 32px; } } } .flexcol { display: flex; flex-direction: column; align-items: flex-start; margin-right: 3%; span:nth-child(1) { color: #303133; } span:nth-child(2) { color: #C7CAD0; } } .flexcolassistant { flex: 2; overflow: hidden; .assistant { display: flex; width: 100%; span { color: #303133; margin-right: 6px; } img { width: 16px; height: 16px; vertical-align: text-bottom; } white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .result{ flex: 2; } .unitnamebox { flex: 3; } .flexcolcenter{ flex: 0.5; align-items: center; } } .greenborder { border: 1px solid #42B983; } .redborder { border: 1px solid #FF9203; } } .operation { a { margin-right: 16px; } } } }