index.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <template>
  2. <el-row class="vab-query-form" :gutter="0">
  3. <slot />
  4. </el-row>
  5. </template>
  6. <style lang="scss" scoped>
  7. @mixin panel {
  8. display: flex;
  9. flex-wrap: wrap;
  10. align-content: center;
  11. align-items: center;
  12. justify-content: flex-start;
  13. min-height: var(-el-input-height);
  14. margin: 0 0 calc(var(--el-margin) / 2) 0;
  15. .el-form-item__content {
  16. display: flex;
  17. align-items: center;
  18. }
  19. > .el-button {
  20. margin: 0 10px calc(var(--el-margin) / 2) 0 !important;
  21. }
  22. }
  23. .vab-query-form {
  24. :deep() {
  25. .el-input {
  26. width: 175px;
  27. }
  28. .el-form-item:first-child {
  29. margin: 0 0 calc(var(--el-margin) / 2) 0 !important;
  30. }
  31. .el-form-item + .el-form-item {
  32. margin: 0 0 calc(var(--el-margin) / 2) 0 !important;
  33. .el-button {
  34. margin: 0 0 0 10px !important;
  35. }
  36. }
  37. .top-panel {
  38. @include panel;
  39. }
  40. .bottom-panel {
  41. @include panel;
  42. border-top: 1px solid #dcdfe6;
  43. }
  44. .left-panel {
  45. @include panel;
  46. }
  47. .right-panel {
  48. @include panel;
  49. justify-content: flex-end;
  50. }
  51. }
  52. }
  53. </style>