.leftMenu { min-width: 300px; min-height: 94%; border-radius: 5px; background: #092945; // box-shadow: 0px 4px 4px 0px rgba(0, 55, 143, 0.2); // background-color: rgba(255 255 255 / 80%); // background-color: pink; } .tab-wrapper { position: relative; box-sizing: border-box; display: flex; justify-content: center; width: 100%; height: 50px; padding: 0 45px; user-select: none; // background-color: #ffffff; border-bottom: 1px solid #09314e; border-top-left-radius: 5px; border-top-right-radius: 5px; } .line { position: absolute; bottom: 0; height: 2px; background-color: #0bc4f0; transition: left 0.2s ease; } .tab { flex: 1; font-size: 12px; // font-weight: 400; line-height: 49px; color: #c4c4c4; text-align: center; cursor: pointer; &.active { color: #0bc4f0; } } .search-wrapper { box-sizing: border-box; display: flex; align-items: center; width: 100%; height: 50px; padding: 0 10px; // background-color: #ffffff; } .search-btn { margin-left: 12px; background-color: #087ba4; border-color: #087ba4; } .footer { display: flex; align-items: center; justify-content: center; height: 50px; // background-color: #ffffff; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; :deep(.el-pagination) { display: flex; justify-content: center; margin-top: 20px; .el-pagination__goto { color: var(--el-color-primary); } .el-pagination__classifier { color: var(--el-color-primary); } .el-input__wrapper { color: var(--el-color-primary); background-color: transparent; border: none; box-shadow: 0 0 0 1px var(--el-color-primary, var(--el-color-primary)) inset; height: 26px; } .el-input__inner { color: var(--el-color-primary); } .el-pager li { background-color: transparent; color: var(--el-color-primary); border: 1px solid var(--el-color-primary); height: 26px; } .el-pager li:active { color: var(--el-color-primary); border: none; height: 26px; } .el-pager li.is-active { background-color: var(--el-color-primary); color: #fff; } .el-pagination__total { color: var(--el-color-primary); } .btn-prev, .btn-next, .btn-prev:disabled, .btn-next:disabled { color: var(--el-color-primary); background-color: transparent; border: 1px solid var(--el-color-primary); height: 26px; } } } .content { // min-height: 83%; // padding: 0 10px; // background-color: #ffffff; .fule { // border-top: 1px solid #e5e5e5; // border-bottom: 1px solid #e5e5e5; // padding: 0 10px; // display: flex; // flex-direction: column; .item { height: 101px; padding: 0px 10px 0 10px; cursor: pointer; display: flex; flex-direction: column; justify-content: space-around; } } } .isActive { background-color: #09405f; border-left: 3px solid #0bc4f0; } :deep(.btn-prev) { border: 1px solid #e5e5e5; } :deep(.btn-next) { border: 1px solid #e5e5e5; } :deep() { .el-input__wrapper { background-color: transparent; box-shadow: 0 0 0 1px var(--el-color-primary, var(--el-color-primary)) inset; } .el-input__inner { color: white; } }