.boxitem { // cursor: pointer; width: 100%; height: auto; display: flex; .leftbox { border: 1px solid #fff; justify-content: center; align-items: center; text-align: center; border-radius: 15px; margin-bottom: 10px; height: 30px; width: 100px; display: flex; flex-wrap: wrap; } .rightbox { width: calc(100% - 20px); display: flex; flex-wrap: wrap; padding: 0 10px; .pumpName { cursor: pointer; height: 30px; width: 100px; text-align: center; line-height: 30px; border: 1px solid #fff; border-radius: 5px; padding: 0 10px; margin-right: 8px; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; /* 超出部分省略号 */ word-break: break-all; /* break-all(允许在单词内换行。) */ display: -webkit-box; /* 对象作为伸缩盒子模型显示 */ -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-line-clamp: 1; /* 显示的行数 */ &.actived { color: #1fa9f6; border: 1px solid #1fa9f6; } } } } .topfilter { display: flex; flex-wrap: wrap; height: 60px; .selectbox { width: 48%; height: 25px; line-height: 25px; margin-right: 5px; display: flex; .label { margin-right: 5px; } .value { cursor: pointer; display: flex; margin-right: 5px; padding: 0px 5px; border: 1px solid #fff; border-radius: 5px; &.actived { color: #00b4f6; } } } } .bottomtable { height: calc(100% - 60px); } :deep(.el-table) { background: transparent; border: transparent; tr { background: linear-gradient(0deg, rgba(38, 77, 134, 0.5) 0%, rgba(38, 77, 134, 0.2) 100%) !important; color: #b4cded; border: none !important; margin: 10px; } .el-table__header-wrapper { th { background-color: #263a66 !important; border-color: transparent; color: #9cdfee; font-size: 14px; font-weight: 400; text-align: center; } } .el-table__inner-wrapper::before { /* 去除下边框 */ height: 0; } td.el-table__cell { border-bottom: 0.00521rem solid #00314e !important; color: #c6c6c6; } .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { background: #00314e !important; } tbody tr:hover > td { background-color: #367f7f78 !important; } } :deep(.pagination-container) { background: transparent !important; margin: 0 !important; .el-pagination { right: 15px; } } :deep(.el-pagination.is-background .btn-prev:disabled) { background-color: transparent !important; color: #fff; } :deep(.el-pagination.is-background .btn-prev) { background-color: transparent !important; color: #fff; } :deep(.el-pagination.is-background .el-pager li) { color: #fff; background-color: transparent !important; } :deep(.el-pagination__total) { color: #fff; } :deep(.el-pagination.is-background .el-pager li.is-active) { color: #409eff; } :deep(.el-pagination__goto) { color: #fff; } :deep(.el-pagination__classifier) { color: #fff; } :deep(.el-pagination.is-background .btn-next:disabled) { background: transparent; } :deep(.el-pagination.is-background .btn-next) { background-color: transparent; color: #fff; }