feat:围栏/禁飞区数据

张含笑

2025-10-30 fd3d2b1b892539c96238387d560ca7fe04cb7e63

 src/styles/element-ui.scss

@@ -253,7 +253,280 @@
      border: 1px solid #fff !important;
   }
}
//时间日期选择器
.ztzf-layer-date-picker {
   box-shadow: none !important;
   background: transparent;
   border: 1px solid #fff;
   border-radius: 5px;

   .el-input__wrapper {
      box-shadow: none !important;
      background-color: transparent !important;
    width: 300px;
      &.is-focus {
         box-shadow: none !important;
      }
   }

   .el-range-input {
      color: #fff;

      &::placeholder {
         color: rgba(255, 255, 255, 0.37);
      }
   }

   .el-range-separator {
      color: #ffffff;
   }
}

// 日期下拉框
.ztzf-layer-date-picker-popper {
   background: rgba(0,0,0,0.8) !important;
   border: 1px solid !important;
   border-radius: 0px 0px 8px 8px;
   border-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(115, 192, 255, 1)) 1 1 !important;

   .el-picker-panel {
      .el-picker-panel__body-wrapper {
         .el-picker-panel__body {
            background: rgba(0,0,0,0.8) !important;
            color: #fff !important;

            .el-date-picker__time-header {
               border: none;

               .el-date-picker__editor-wrap {
                  .el-time-panel {
                     background: rgba(0,0,0,0.8) !important;
                     border-radius: 0px 0px 8px 8px;
                     border: 1px solid !important;
                     border-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(115, 192, 255, 1)) 1 1 !important;

                     // 将 time-picker-popper 的样式移到这里
                     .el-time-panel__header {
                background: rgba(0,0,0,0.8) !important;
                        color: #ffffff !important;
                        border-bottom: 1px solid rgba(255, 255, 255, 0.37) !important;
                     }

                     .el-time-panel__content {
                        .el-time-spinner__item {
                           color: #e6e6e6 !important;

                           &:hover {
                              background: rgba(0,0,0,0.8) !important;
                           }

                           &.active {
                              color: #479dff !important;
                              font-weight: bold;
                           }
                        }
                     }

                     .el-time-panel__footer {
                background: rgba(0,0,0,0.8) !important;
                        border-top: 1px solid rgba(71, 157, 255, 0.3) !important;

                        .el-button {
                           color: #fff !important;

                           &:hover {
                              color: #479dff !important;
                           }
                        }

                        .el-time-panel__btn.cancel {
                           color: #fff !important;

                           &:hover {
                              color: #fff !important;
                           }
                        }
                     }
                  }
               }
            }

            .el-picker-panel__content {
               .el-date-range-picker__header {
                  .el-picker-panel__icon-btn {
                     color: #fff !important;

                     &:hover {
                        color: var(--el-color-primary) !important;
                     }

                     .el-icon {
                        &::before {
                           color: inherit !important;
                        }
                     }
                  }

                  & > div {
                     span {
                        color: #fff !important;
                     }
                  }
               }

               .el-date-table {
                  th {
                     color: #fff !important;
                  }

                  td.disabled div {
                     background-color: #00193b !important;
                     color: #505050 !important;
                     cursor: not-allowed;
                  }

                  // td:hover,
                  // td.current:not(.disabled) {
                  //     background: rgba(60, 121, 202) !important;
                  //     color: white !important;
                  // }

                  td.start-date span,
                  td.start-date span,
                  td.end-date span {
                     background-color: #012350 !important;
                  }

                  td.in-range div,
                  td.in-range div:hover,
                  &.is-week-mode .el-date-table__row.current div,
                  &.is-week-mode .el-date-table__row:hover div {
                     background-color: rgba(60, 121, 202) !important;
                  }
               }
            }
         }
      }
   }

   .el-popper__arrow {
      &::before {
         background: #0d3556 !important;
         border: 1px solid #0d3556 !important;
         box-sizing: border-box;
      }
   }

   .el-picker-panel__sidebar {
      background: #012350;
      color: #fff;

      .el-picker-panel__shortcut {
         color: #ffffff;
      }
   }

   .el-picker-panel__body {
      .el-input.is-disabled .el-input__wrapper {
         background: #012350;
         box-shadow: 0 0 0 0.1rem#409eff;
         color: #fff;

         .el-input__inner {
            color: #fff !important;
         }
      }

      .el-button.is-disabled,
      .el-button.is-disabled:hover {
         background: #012350;
      }

      .el-input__wrapper {
         background: #012350;
         box-shadow: 0 0 0 0.1rem#409eff;
         color: #fff;

         .el-input__inner {
            color: #fff !important;
         }
      }
   }

   .el-picker-panel__footer {
      background: #012350;
      color: #fff;
      border-top: none;

      .el-button--small {
         box-shadow: 0 0 0 0.1rem#409eff;
         background-color: #012350;
         color: #fff;
         border: none;

         &:hover {
            background-color: #012350;
            color: #fff;
            border-color: #409eff;
         }
      }
   }
}
.ztzf-layer-time-picker-popper {
  background: rgba(0,0,0,0.8) !important;
   border-radius: 0px 0px 8px 8px;
   border: 1px solid !important;
   border-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(115, 192, 255, 1)) 1 1 !important;

   .el-popper__arrow::before {
      background: rgba(0,0,0,0.8) !important;
      border: 1px solid #479dff !important;
   }

   .el-time-panel__header {
      background: rgba(0,0,0,0.8) !important;
      color: #ffffff !important;
      border-bottom: 1px solid rgba(71, 157, 255, 0.3) !important;
   }

   .el-time-panel__content {
      // background: #012350 !important;

      .el-time-spinner__item {
         color: #e6e6e6 !important;

         &:hover {
            background: rgba(71, 157, 255, 0.3) !important;
         }

         &.active {
            color: #479dff !important;
            font-weight: bold;
         }
      }
   }

   .el-time-panel__footer {
      background: rgba(0,0,0,0.8) !important;
      border-top: 1px solid rgba(71, 157, 255, 0.3) !important;

      .el-button {
         color: #fff !important;

         &:hover {
            color: #479dff !important;
         }
      }

      .el-time-panel__btn.cancel {
         color: #fff !important;

         &:hover {
            color: #fff !important;
         }
      }
   }
}
//======以下针对表格功能 增删查改样式和弹窗=========
.ztzf-dialog-mange {
  .el-dialog__body {