.grid-view-layout { height: 100%; background-color: transparent; box-shadow: none; overflow: auto; display: flex; flex-direction: column; .view-header__top { height: 60px; display: flex; align-items: center; justify-content: flex-end; } .view-header__content { display: flex; flex-direction: column; padding: 16px 4px 20px 7px; gap: 10px; background: var(--app-color-white); box-sizing: border-box; border: 1px solid var(--app-color-gray-250); .quick-search-input .ivu-input { width: 100%; height: 34px; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding: 4px 10px; background: var(--app-color-white); box-sizing: border-box; border: 1px solid var(--app-color-gray-250); border-radius: 0; z-index: 0; &:focus { box-shadow: none; border-color: var(--app-color-gray-250); } } .search-form-toggle { width: 100%; height: 26px; display: flex; align-items: center; gap: 10px; font-size: 12px; padding-left: 20px; cursor: pointer; i { font-weight: 900; font-size: 14px; } &:hover { color: var(--app-color-blue); } } .app-search-form .search-button { display: none; } } .view-header__bottom { min-height: 20px; display: flex; justify-content: flex-end; align-items: center; background-color: transparent; gap: 10px; .ivu-btn { width: 110px; height: 34px; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 10px 20px; margin: 20px 0; background: var(--app-color-white); border: 1px solid var(--app-color-blue); border-radius: 0; } .ivu-btn-primary { background: var(--app-color-blue); color: var(--app-color-white); } } >.view-content { flex: auto; height: 0; background: var(--app-color-white); border: 1px solid var(--app-color-gray-200); } >.view-footer { height: 40px; } }