diff --git a/main/manager-web/src/views/OtaManagement.vue b/main/manager-web/src/views/OtaManagement.vue
index 13ffacf9..da584510 100644
--- a/main/manager-web/src/views/OtaManagement.vue
+++ b/main/manager-web/src/views/OtaManagement.vue
@@ -15,8 +15,15 @@
-
+
@@ -107,6 +114,7 @@ export default {
data() {
return {
searchName: "",
+ loading: false,
paramsList: [],
firmwareList: [],
currentPage: 1,
@@ -158,6 +166,7 @@ export default {
this.fetchFirmwareList();
},
fetchFirmwareList() {
+ this.loading = true;
const params = {
pageNum: this.currentPage,
pageSize: this.pageSize,
@@ -166,6 +175,7 @@ export default {
order: "desc"
};
Api.ota.getOtaList(params, (res) => {
+ this.loading = false;
res = res.data
if (res.code === 0) {
this.firmwareList = res.data.list.map(item => ({
@@ -460,12 +470,20 @@ export default {
.params-card {
background: white;
- border: none;
- box-shadow: none;
+ flex: 1;
display: flex;
flex-direction: column;
- flex: 1;
+ border: none;
+ box-shadow: none;
overflow: hidden;
+
+ ::v-deep .el-card__body {
+ padding: 15px;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ overflow: hidden;
+ }
}
.table_bottom {
@@ -513,7 +531,7 @@ export default {
.custom-pagination {
display: flex;
align-items: center;
- gap: 10px;
+ gap: 5px;
.el-select {
margin-right: 8px;
@@ -580,21 +598,67 @@ export default {
.page-size-select {
width: 100px;
-}
+ margin-right: 10px;
-.custom-selection-header {
- text-align: center !important;
+ :deep(.el-input__inner) {
+ height: 32px;
+ line-height: 32px;
+ border-radius: 4px;
+ border: 1px solid #e4e7ed;
+ background: #dee7ff;
+ color: #606266;
+ font-size: 14px;
+ }
+
+ :deep(.el-input__suffix) {
+ right: 6px;
+ width: 15px;
+ height: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ top: 6px;
+ border-radius: 4px;
+ }
+
+ :deep(.el-input__suffix-inner) {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ }
+
+ :deep(.el-icon-arrow-up:before) {
+ content: "";
+ display: inline-block;
+ border-left: 6px solid transparent;
+ border-right: 6px solid transparent;
+ border-top: 9px solid #606266;
+ position: relative;
+ transform: rotate(0deg);
+ transition: transform 0.3s;
+ }
}
:deep(.transparent-table) {
- background-color: transparent;
+ background: white;
+ flex: 1;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+
+ .el-table__body-wrapper {
+ flex: 1;
+ overflow-y: auto;
+ max-height: none !important;
+ }
.el-table__header-wrapper {
flex-shrink: 0;
}
.el-table__header th {
- background-color: white !important;
+ background: white !important;
color: black;
font-weight: 600;
height: 40px;
@@ -603,10 +667,12 @@ export default {
border-bottom: 1px solid #e4e7ed;
}
- .el-table__body-wrapper {
+ .el-table__body tr {
+ background-color: white;
+
td {
- background-color: transparent;
- border-bottom: 1px solid #e4e7ed;
+ border-top: 1px solid rgba(0, 0, 0, 0.04);
+ border-bottom: 1px solid rgba(0, 0, 0, 0.04);
padding: 8px 0;
height: 40px;
color: #606266;
@@ -617,6 +683,10 @@ export default {
.el-table__row:hover>td {
background-color: #f5f7fa !important;
}
+
+ &::before {
+ display: none;
+ }
}
:deep(.el-table .el-button--text) {
@@ -640,4 +710,44 @@ export default {
background-color: #5f70f3 !important;
border-color: #5f70f3 !important;
}
+
+:deep(.el-loading-mask) {
+ background-color: rgba(255, 255, 255, 0.6) !important;
+ backdrop-filter: blur(2px);
+}
+
+:deep(.el-loading-spinner .path) {
+ stroke: #6b8cff;
+}
+
+.el-table {
+ --table-max-height: calc(100vh - 40vh);
+ max-height: var(--table-max-height);
+
+ .el-table__body-wrapper {
+ max-height: calc(var(--table-max-height) - 40px);
+ }
+}
+
+@media (min-width: 1144px) {
+ .table_bottom {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 40px;
+ }
+
+ :deep(.transparent-table) {
+ .el-table__body tr {
+ td {
+ padding-top: 16px;
+ padding-bottom: 16px;
+ }
+
+ &+tr {
+ margin-top: 10px;
+ }
+ }
+ }
+}