.bigbox { width: 100%; height: 100%; transform: translate(0, 0); background: #f2f4f5; .redspan{ color: red; } .titlebox { width: 100%; height: 50px; background-color: white; position: fixed; top: 8px; display: flex; justify-content: center; align-items: center; .titleitembox { display: flex; .item { cursor: pointer; height: 36px; line-height: 36px; background: #e8e9e9; border-radius: 40px; color: #8b8c8c; margin: 0 3px; text-align: center; box-sizing: border-box; padding: 0 10px; font-size: 14px; } .item:hover { background: #e8f4fe; color: #2196f3; } .selectedItem { background: #e8f4fe; color: #2196f3; } } .btnbox { position: absolute; right: 24px; top: 7px; button { margin-left: 10px; mat-icon { font-size: 21px; width: 22px; height: 22px; } } } } .contentbox { height: 100%; box-sizing: border-box; padding-top: 66px; overflow-y: auto; .leftbox { position: fixed; width: 14%; height: 85%; background-color: white; top: 66px; } .mainbox { background-color: white; width: 745px; margin: 0 auto; min-height: 97%; box-sizing: border-box; padding: 10px 10px 0; .cover { width: 100%; input, select { border: 1px solid #ebebeb; border-radius: 4px; height: 28px; line-height: 28px; } p { height: 28px; line-height: 28px; } h1 { font-size: 46px; color: #2196f3; text-align: center; font-weight: 600; height: 230px; display: flex; justify-content: center; align-items: center; } li { width: 100%; display: flex; div { height: 38px; line-height: 38px; nz-select { width: 150px; height: 33px; } } div:first-child { width: 45%; text-align: right; } div:last-child { width: 55%; text-align: left; } } } .centerBox{ width: 100%; height: 100%; display: flex; flex-direction: column; .boxHead{ height: 40px; width: 100%; background-color: #e8f4fe; //opacity: 0.1; span{ margin-left: 20px; font-size: 16px; color: #2196F3 ; opacity:1; height: 40px; line-height: 40px; } } .boxBody{ height: 100%; width: 100%; display: flex; flex-direction: column; .boxBodyHead{ width: 100%; height: 40px; background-color: #FFD91D; text-align: center; span{ font-size: 16px; text-align: center; height: 40px; line-height: 40px; color: #B99A00; } } .body{ width: 100%; height: 100%; thead{ width: 100%; background-color: #E8E9E9; } table { width: 100%; border-collapse:collapse; //background-color: #E8E9E9; } th { //background-color: #E8E9E9; border: 1px solid #999; height: 40px; font-size: 16px; text-align: center; input { background-color: #E8E9E9; text-align: center; height: 100%; width: 100%; font-size: 16px; border: none; outline: none; } } .inputtext { width: 100%; height: 100%; display: flex; flex-direction: column; input { //width: 100%; height: 40px; font-size: 16px; border: none; outline: none; } .inputj { width: 100%; height: 100%; display: flex; } } } } } } } }