foucui 1.0.1

package/styles/qiu.scss

@@ -0,0 +1,1149 @@
+/**
+ * @description 全局样式
+ */
+
+@use 'normalize.css' as *;
+@use './dark' as *;
+@use './plain' as *;
+@use './technology' as *;
+@use 'remixicon/fonts/remixicon.css' as *;
+@use './var' as *;
+@use './qiu-tokens' as *;
+
+@mixin base-scrollbar {
+  &::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(#909399, 0.35);
+    border-radius: var(--qiu-border-radius-round);
+    border: 2px solid transparent;
+    background-clip: padding-box;
+    transition: var(--qiu-transition-duration) background-color;
+
+    &:hover {
+      background-color: rgba(#909399, 0.55);
+    }
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
+
+html {
+  text-shadow: none;
+  -webkit-font-smoothing: antialiased;
+
+  body {
+    position: relative;
+    box-sizing: border-box;
+    height: calc(var(--vh, 1vh) * 100);
+    padding: 0;
+    overflow: hidden;
+    font-size: var(--qiu-font-size-base);
+    color: var(--qiu-color-black);
+    background: var(--qiu-background-color);
+
+    &.color-weakness {
+      filter: invert(80%);
+    }
+
+    #app {
+      height: calc(var(--vh, 1vh) * 100);
+
+      @include base-scrollbar;
+
+      &:not([class*='el-scrollbar']) {
+        transition: var(--qiu-transition);
+      }
+
+      .vue-qiu-ui-box {
+        div:not(
+            .el-drawer,
+            .el-drawer *,
+            .el-dialog,
+            .el-dialog *,
+            .el-message-box,
+            .el-message-box *,
+            .el-table,
+            .el-table *,
+            .el-carousel,
+            .el-carousel *,
+            .el-pagination,
+            .el-pagination *,
+            .el-slider,
+            .el-slider *,
+            .el-card,
+            .el-card *,
+            .el-menu,
+            .el-menu *,
+            .el-form,
+            .el-form *,
+            .el-row,
+            .el-row *,
+            .el-tree,
+            .el-tree *,
+            .split,
+            .split *,
+            .card-drag,
+            .card-drag *,
+            .global-animation-disabled *,
+            .no-transition-container *,
+            .qiu-magnifier,
+            .qiu-magnifier *
+          ) {
+          text-shadow: none;
+          transition: var(--qiu-transition);
+          -webkit-font-smoothing: antialiased;
+        }
+
+        .qiu-main {
+          .qiu-app-main {
+            width: 100%;
+            padding: var(--qiu-padding);
+            overflow: hidden;
+
+            > section {
+              > [class*='-container'] {
+                min-height: var(--qiu-container-height);
+                padding: var(--qiu-padding);
+                background: var(--qiu-color-white);
+                border: 1px solid var(--qiu-border-color);
+                border-radius: var(--qiu-border-radius-base);
+              }
+            }
+          }
+        }
+
+        /* 横向布局：白盒内容区距顶栏/左右/底边固定 20px（只留这一层间距） */
+        .qiu-layout-horizontal {
+          > .qiu-main.main-padding {
+            box-sizing: border-box !important;
+            width: 100% !important;
+            max-width: none !important;
+            margin: 0 !important;
+            padding: 20px !important;
+          }
+
+          .qiu-app-main {
+            box-sizing: border-box !important;
+            width: 100% !important;
+            padding: 0 !important;
+          }
+
+          .qiu-app-main > section > [class*='-container'] {
+            margin: 0 !important;
+          }
+
+          /* 顶栏 / tabs 左右同样 20px，与内容对齐 */
+          .qiu-header > .qiu-main {
+            box-sizing: border-box !important;
+            width: 100% !important;
+            margin: 0 !important;
+            padding: 0 20px !important;
+          }
+
+          .qiu-tabs {
+            box-sizing: border-box !important;
+            width: 100% !important;
+            padding-right: 20px !important;
+            padding-left: 20px !important;
+          }
+        }
+      }
+    }
+
+    .vue-qiu-ui-box.mobile {
+      --qiu-margin: 16px;
+      --qiu-padding: 16px;
+      --qiu-container-height: calc(
+        var(--vh, 1vh) * 100 - var(--qiu-nav-height) - var(--qiu-tabs-height) - var(--qiu-padding) * 3 - var(--qiu-footer-height)
+      );
+
+      .ri-contract-right-line.fold-unfold {
+        position: fixed;
+        bottom: var(--qiu-margin);
+        left: var(--qiu-margin);
+        z-index: var(--qiu-z-index);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 50px;
+        height: 50px;
+        color: var(--qiu-color-white);
+        background: var(--qiu-color-primary);
+        border-radius: 50%;
+        box-shadow: 0 2px 12px 0 var(--qiu-color-primary);
+      }
+    }
+
+    * {
+      box-sizing: border-box;
+      font-family: 'Segoe UI', system-ui, sans-serif;
+      outline: none !important;
+      -webkit-tap-highlight-color: transparent;
+      -webkit-font-smoothing: antialiased;
+
+      @include base-scrollbar;
+    }
+
+    /* 全局 * 会覆盖图标字体，必须强制回 remixicon */
+    [class^='ri-'],
+    [class*=' ri-'],
+    i.qiu-icon[class*='ri-'] {
+      font-family: remixicon !important;
+      font-style: normal;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    [class*='ri-'] {
+      cursor: pointer;
+    }
+
+    /*a标签 */
+    a {
+      color: var(--qiu-color-primary);
+      text-decoration: none;
+    }
+
+    /*图片 */
+    img {
+      object-fit: cover;
+
+      &[src=''],
+      &:not([src]) {
+        opacity: 0;
+      }
+    }
+
+    /* qiu-dropdown下拉动画 */
+    .qiu-dropdown {
+      transition: var(--qiu-transition);
+
+      &-active {
+        transition: var(--qiu-transition);
+        transform: rotateZ(180deg);
+      }
+    }
+
+    /* qiu-query-form表单查询 */
+    .qiu-query-form {
+      .el-form-item__content {
+        .el-slider {
+          width: 190px;
+        }
+      }
+
+      .el-form {
+        &.el-form--inline.el-form--label-right {
+          .el-form-item:not(:first-child) {
+            .el-form-item__label {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+
+    /* qiu-data-empty占位图 */
+    .qiu-data-empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: calc(var(--qiu-container-height) - 250px);
+      margin: auto;
+    }
+
+    /* el-descriptions */
+    .el-descriptions {
+      &__title {
+        padding-left: 10px;
+        border-left: 5px solid var(--qiu-color-primary);
+      }
+    }
+
+    /* el-button按钮 */
+    .el-button {
+      border-radius: var(--qiu-border-radius-base);
+
+      &:hover,
+      &:focus,
+      &:active,
+      &.is-disabled {
+        background-clip: padding-box;
+      }
+
+      &.is-round {
+        border-radius: var(--qiu-border-radius-round);
+      }
+
+      &.is-circle {
+        border-radius: var(--qiu-border-radius-circle);
+      }
+
+      [class*='el-icon-'] + span,
+      span + [class*='el-icon-'],
+      [class*='ri-'] + span,
+      span + [class*='ri-'] {
+        margin-left: 3px;
+      }
+    }
+
+    /* el-select */
+    .el-select {
+      min-width: 115px;
+
+      &__wrapper {
+        font-size: var(--qiu-font-size-small);
+      }
+    }
+
+    a + a,
+    a + .el-button,
+    .el-button + a {
+      margin-left: 10px;
+    }
+
+    /* 毛玻璃遮罩(影响性能，默认关闭) */
+    .el-overlay,
+    .el-image-viewer__mask {
+      background-color: var(--qiu-overlay-color-lighter);
+      // backdrop-filter: blur(2.5px);
+      // opacity: 1;opacity
+
+      // > div {
+      //   backdrop-filter: none;
+      // }
+    }
+
+    .v-modal {
+      z-index: var(--qiu-z-index);
+      background-color: var(--qiu-overlay-color-lighter);
+      //backdrop-filter: blur(2.5px);
+      //opacity: 1;
+    }
+
+    .qiu-modal {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: var(--qiu-z-index);
+      width: 100%;
+      height: 100%;
+      background-color: var(--qiu-overlay-color-lighter);
+      //opacity: 1;
+      //backdrop-filter: blur(2.5px);
+    }
+
+    /* el-loading-mask遮罩 */
+    .el-loading-mask {
+      z-index: calc(var(--qiu-z-index) - 10) !important;
+
+      &.is-fullscreen {
+        z-index: calc(var(--qiu-z-index) + 99) !important;
+      }
+    }
+
+    /* el-tag */
+    .el-tag {
+      --el-tag-font-size: var(--qiu-font-size-extra-small);
+
+      border-radius: var(--qiu-border-radius-base);
+    }
+
+    /* .el-badge */
+
+    .el-badge {
+      &__content {
+        border: 0;
+      }
+    }
+
+    /*  .el-page-header */
+    .el-page-header {
+      margin: 0 0 var(--qiu-margin) 0;
+    }
+
+    /* el-alert */
+    .el-alert {
+      --el-alert-title-font-size: var(--qiu-font-size-base);
+      --el-alert-title-with-description-font-size: var(--qiu-font-size-medium);
+      --el-alert-description-font-size: var(--qiu-font-size-base);
+      --el-alert-close-font-size: var(--qiu-font-size-medium);
+      --el-alert-close-customed-font-size: var(--qiu-font-size-base);
+      --el-alert-icon-size: var(--qiu-font-size-medium);
+      --qiu-alert-icon-large-size: calc(var(--qiu-font-size-base) * 2);
+
+      margin: 0 0 var(--qiu-margin) 0;
+
+      &.is-light {
+        .el-alert__icon,
+        .el-alert__close-btn {
+          color: currentColor;
+        }
+      }
+
+      &--success {
+        &.is-light {
+          color: var(--qiu-color-success);
+          background-color: var(--qiu-color-success-lighter);
+          border: 1px solid var(--qiu-color-success);
+        }
+
+        &.is-dark {
+          background-color: var(--qiu-color-success);
+          border: 1px solid var(--qiu-color-success);
+        }
+      }
+
+      &--info {
+        &.is-light {
+          color: var(--qiu-color-primary);
+          background-color: var(--qiu-color-primary-light-9);
+          border: 1px solid var(--qiu-color-primary);
+        }
+
+        &.is-dark {
+          background-color: var(--qiu-color-primary);
+          border: 1px solid var(--qiu-color-primary);
+        }
+      }
+
+      &--warning {
+        &.is-light {
+          color: var(--qiu-color-warning);
+          background-color: var(--qiu-color-warning-lighter);
+          border: 1px solid var(--qiu-color-warning);
+        }
+
+        &.is-dark {
+          background-color: var(--qiu-color-warning);
+          border: 1px solid var(--qiu-color-warning);
+        }
+      }
+
+      &--error {
+        &.is-light {
+          color: var(--qiu-color-error);
+          background-color: var(--qiu-color-error-lighter);
+          border: 1px solid var(--qiu-color-error);
+        }
+
+        &.is-dark {
+          background-color: var(--qiu-color-error);
+          border: 1px solid var(--qiu-color-error);
+        }
+      }
+    }
+
+    /* nprogress进度条 */
+    #nprogress {
+      position: fixed;
+      z-index: calc(var(--qiu-z-index) + 3);
+
+      .bar {
+        background: var(--qiu-color-primary);
+      }
+
+      .peg {
+        box-shadow:
+          0 0 10px var(--qiu-color-primary),
+          0 0 5px var(--qiu-color-primary);
+      }
+    }
+
+    /* el-checkbox */
+    .el-checkbox {
+      &__label {
+        font-size: var(--qiu-font-size-base);
+      }
+    }
+
+    /* el-breadcrumb */
+    .el-breadcrumb {
+      font-size: var(--qiu-font-size-base);
+    }
+
+    /* el-collapse*/
+    .el-collapse {
+      --el-collapse-header-font-size: var(--qiu-font-size-base);
+      --el-collapse-content-font-size: var(--qiu-font-size-base);
+    }
+
+    /* el-table表格 */
+    .el-table {
+      font-size: var(--qiu-font-size-base);
+
+      td {
+        .cell {
+          .el-image {
+            width: 50px;
+            height: 50px;
+            cursor: pointer;
+            border-radius: var(--qiu-border-radius-base);
+          }
+
+          .el-button.is-text + .el-button.is-text {
+            margin-left: 0;
+          }
+        }
+      }
+    }
+
+    /* el-pagination分页 */
+    .el-pagination {
+      --el-pagination-border-radius: var(--qiu-border-radius-base);
+      justify-content: center;
+      margin-top: var(--qiu-margin);
+      font-size: var(--qiu-font-size-base);
+
+      * {
+        font-size: var(--qiu-font-size-base);
+      }
+    }
+
+    /* el-menu菜单 */
+    .el-menu {
+      user-select: none;
+
+      .el-sub-menu__title,
+      .el-menu-item {
+        svg,
+        [class*='ri-'] {
+          margin-right: 3px;
+          margin-left: 0;
+        }
+      }
+    }
+
+    /* el-tabs--top */
+    .el-tabs.el-tabs--top {
+      .el-tabs__item {
+        svg,
+        [class*='ri-'] {
+          margin-right: 3px;
+        }
+      }
+    }
+
+    /* el-breadcrumb */
+    .el-breadcrumb__inner {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      svg,
+      [class*='ri-'] {
+        margin-right: 3px;
+      }
+    }
+
+    /* el-tour */
+    .el-tour {
+      --qiu-tour-title-font-size: 18px;
+
+      &__header {
+        display: flex;
+        justify-items: center;
+        width: 100%;
+        height: 58px;
+        padding: 0 0 0 var(--qiu-padding);
+        margin: 0;
+      }
+
+      &__title {
+        line-height: 58px;
+      }
+
+      &__closebtn {
+        width: auto;
+        height: auto;
+        margin-top: var(--qiu-padding);
+        margin-right: var(--qiu-padding);
+      }
+
+      &__content {
+        max-width: 400px !important;
+        padding: 0;
+
+        .el-button--small {
+          height: 32px;
+          padding: 8px 15px;
+          font-size: var(--qiu-font-size-base);
+          border-radius: var(--qiu-border-radius-base);
+        }
+      }
+
+      &__body {
+        padding: calc(var(--qiu-padding) / 2) var(--qiu-padding) 0 var(--qiu-padding);
+      }
+
+      &__footer {
+        display: flex;
+        align-items: center;
+        padding: var(--qiu-padding);
+      }
+
+      @media (max-width: 768px) {
+        &__content {
+          width: calc(100% - 10vw);
+        }
+      }
+    }
+
+    /* el-dialog */
+    @media (max-width: 768px) {
+      .el-dialog,
+      .el-message-box {
+        width: calc(100% - 10vw);
+        margin-right: 5vw;
+        margin-left: 5vw;
+      }
+    }
+
+    .el-dialog {
+      --qiu-dialog-title-font-size: 18px;
+
+      padding: 0;
+      border-radius: var(--qiu-border-radius-base);
+
+      &--center {
+        .el-dialog__title {
+          padding-left: 0 !important;
+        }
+      }
+
+      &__header {
+        height: calc(var(--qiu-dialog-title-font-size) + var(--qiu-padding) * 2);
+        padding: 0 !important;
+        margin-right: 0;
+        line-height: calc(var(--qiu-dialog-title-font-size) + var(--qiu-padding) * 2);
+        border-top-left-radius: inherit;
+        border-top-right-radius: inherit;
+
+        .el-dialog__title {
+          width: 100%;
+          height: inherit;
+          padding-left: var(--qiu-padding);
+          line-height: inherit;
+        }
+
+        &btn {
+          right: var(--qiu-margin);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 16px;
+          height: inherit;
+
+          &:focus {
+            .el-dialog__close {
+              color: var(--qiu-color-info);
+            }
+          }
+
+          .el-dialog__close {
+            color: var(--qiu-color-info);
+          }
+
+          .el-dialog__fullscreen {
+            font-size: 14px;
+            vertical-align: -3px;
+          }
+        }
+      }
+
+      &__body {
+        padding: var(--qiu-padding) var(--qiu-padding) 0 var(--qiu-padding);
+
+        .el-form:not(.el-form--inline):not(.el-form--label-top) {
+          margin-right: 30px;
+
+          .el-form-item:last-child {
+            margin-bottom: 0;
+          }
+
+          .el-date-editor,
+          .el-select {
+            width: 100%;
+          }
+        }
+      }
+
+      &__footer {
+        padding: var(--qiu-padding);
+      }
+
+      &.is-fullscreen {
+        width: 100%;
+        margin: 0;
+        border-radius: 0;
+
+        .el-dialog__body {
+          height: calc(var(--vh, 1vh) * 100 - var(--qiu-dialog-title-font-size) - var(--qiu-padding) * 4 - 32px);
+          overflow-y: auto;
+        }
+      }
+
+      &.qiu-dialog-plain {
+        .el-dialog__header {
+          background: var(--qiu-color-info-light-9);
+        }
+      }
+
+      &.qiu-dialog-primary {
+        .el-dialog__header {
+          --el-text-color-primary: var(--qiu-color-white);
+          --el-color-info: var(--qiu-color-white);
+          background: var(--qiu-color-primary);
+
+          .el-dialog__close {
+            --el-color-primary: var(--qiu-color-white);
+
+            &:hover {
+              opacity: 0.6;
+            }
+          }
+        }
+      }
+    }
+
+    /* el-el-message-box */
+    .el-message-box {
+      --qiu-messagebox-font-size: 18px;
+
+      padding: 0;
+      border-radius: var(--qiu-border-radius-base);
+
+      &__header {
+        height: calc(var(--qiu-messagebox-font-size) + var(--qiu-padding) * 2);
+        padding: 0 !important;
+        margin-right: 0;
+        line-height: calc(var(--qiu-messagebox-font-size) + var(--qiu-padding) * 2);
+        border-top-left-radius: inherit;
+        border-top-right-radius: inherit;
+
+        .el-message-box__title {
+          width: 100%;
+          height: inherit;
+          padding-left: var(--qiu-padding);
+          line-height: inherit;
+        }
+
+        &btn {
+          right: var(--qiu-margin);
+          width: 16px;
+          height: inherit;
+          line-height: inherit;
+
+          &:focus {
+            .el-message-box__close {
+              color: var(--qiu-color-info);
+            }
+          }
+
+          .el-message-box__close {
+            color: var(--qiu-color-info);
+          }
+        }
+      }
+
+      &__content {
+        padding: calc(var(--qiu-padding) / 2) var(--qiu-padding) 0 var(--qiu-padding);
+      }
+
+      &__btns {
+        padding: var(--qiu-padding);
+      }
+    }
+
+    /* el-card卡片 */
+    .el-card {
+      margin-bottom: var(--qiu-margin);
+      border: 1px solid var(--qiu-border-color);
+      border-radius: var(--qiu-border-radius-base);
+      transition: var(--qiu-transition) !important;
+
+      &__header {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+
+        [class*='ri-'] {
+          margin-right: 3px;
+        }
+
+        .card-header-tag,
+        .card-header-button {
+          position: absolute;
+          right: var(--qiu-margin);
+        }
+      }
+
+      &__body {
+        padding: var(--qiu-padding);
+      }
+    }
+
+    /* .qiu-hey-message */
+    .qiu-hey-message {
+      @mixin qiu-hey-message {
+        padding: 15px;
+        background-color: var(--qiu-color-white);
+        border-color: var(--qiu-color-white);
+        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
+
+        .el-message__content {
+          color: var(--qiu-color-grey);
+        }
+
+        .el-icon-close {
+          color: var(--qiu-color-grey);
+
+          &:hover {
+            opacity: 0.8;
+          }
+        }
+      }
+
+      &-info {
+        @include qiu-hey-message;
+
+        i {
+          color: var(--qiu-color-grey);
+        }
+      }
+
+      &-success {
+        @include qiu-hey-message;
+
+        i {
+          color: var(--qiu-color-success);
+        }
+      }
+
+      &-warning {
+        @include qiu-hey-message;
+
+        i {
+          color: var(--qiu-color-warning);
+        }
+      }
+
+      &-error {
+        @include qiu-hey-message;
+
+        i {
+          color: var(--qiu-color-error);
+        }
+      }
+    }
+
+    /* qiu-table-expand */
+    .qiu-table-expand {
+      padding: var(--qiu-padding);
+      line-height: 30px;
+
+      &-title {
+        display: inline-block;
+        width: 80px;
+        font-weight: bold;
+      }
+    }
+
+    /* el-color-picker */
+    .el-color-picker {
+      &__trigger {
+        width: 20px;
+        height: 20px;
+        padding: 0;
+        border-radius: 0;
+      }
+
+      &__color {
+        border: 0;
+      }
+    }
+
+    /* svg */
+    [fill='#6c63ff'],
+    [fill='#7CADF6'],
+    [fill='#1C85E8'],
+    [fill='#5CA4E6'],
+    [fill='#2F9BFF'] {
+      fill: var(--qiu-color-primary) !important;
+    }
+
+    [fill='#5661AE'],
+    [fill='#465393'] {
+      fill: var(--qiu-color-primary-light-1) !important;
+    }
+
+    [fill='#FEBB94'],
+    [fill='#BC775C'],
+    [fill='#E6A23C'] {
+      fill: var(--qiu-color-warning) !important;
+    }
+
+    .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
+    .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
+      background-color: var(--qiu-color-primary) !important;
+    }
+
+    .el-avatar {
+      background-color: var(--qiu-background-color) !important;
+    }
+
+    .no-background-container {
+      padding: 0 !important;
+      background: var(--qiu-background-color) !important;
+      border: 0 !important;
+    }
+
+    /* 内容全屏 */
+    .fullscreen-container {
+      position: fixed !important;
+      inset: 0 !important;
+      z-index: calc(var(--qiu-z-index) + 3) !important;
+      box-sizing: border-box !important;
+      width: 100vw !important;
+      height: calc(var(--vh, 1vh) * 100) !important;
+      overflow: auto !important;
+      border: 0 !important;
+      border-radius: 0 !important;
+    }
+
+    /* 数据大屏全屏 */
+    .qiu-data-fullscreen {
+      position: fixed !important;
+      inset: 0 !important;
+      z-index: calc(var(--qiu-z-index) + 3) !important;
+      width: 100vw !important;
+      height: calc(var(--vh, 1vh) * 100) !important;
+      padding: 0 !important;
+      margin: 0 !important;
+      border: 0 !important;
+      border-radius: 0 !important;
+    }
+
+    /* el-switch */
+    .el-switch {
+      font-size: var(--qiu-font-size-base);
+
+      &__label * {
+        font-size: var(--qiu-font-size-base);
+      }
+    }
+
+    /* el-upload */
+    .el-upload {
+      &.el-upload--text + .el-button {
+        margin-left: 10px;
+      }
+
+      &__tip {
+        margin-top: 10px;
+        font-size: var(--qiu-font-size-small);
+      }
+    }
+
+    /* 默认布局自动高度 */
+    :not(.no-background-container).auto-height-container {
+      display: flex;
+      flex-direction: column;
+      height: var(--qiu-container-height);
+
+      .el-table,
+      .qiu-table {
+        flex: 1;
+        min-height: 0;
+      }
+
+      .qiu-table {
+        display: flex;
+        flex-direction: column;
+
+        .qiu-table__inner,
+        .el-table {
+          flex: 1;
+          height: 100% !important;
+        }
+      }
+
+      .el-scrollbar {
+        //margin-right: -20px;
+
+        .qiu-auto-box {
+          flex: 1;
+          width: 100%;
+          padding: 0 var(--qiu-padding) 0 0;
+        }
+      }
+
+      @media (max-width: 1024px) {
+        height: auto;
+      }
+    }
+
+    /* 左右布局自动高度 */
+    .no-background-container.auto-height-container {
+      .auto-height-card {
+        margin-bottom: 0;
+
+        > .el-card__body {
+          display: flex;
+          flex-direction: column;
+          height: calc(var(--qiu-container-height) - 2px);
+
+          .el-table {
+            flex: 1;
+          }
+        }
+
+        &.has-header {
+          > .el-card__body {
+            height: calc(var(--qiu-container-height) - 57px);
+          }
+        }
+      }
+
+      @media (max-width: 1200px) {
+        margin-bottom: calc(0 - var(--qiu-margin));
+
+        > .el-row {
+          > .el-col + .el-col {
+            .auto-height-card {
+              margin-bottom: 0;
+            }
+          }
+        }
+
+        .auto-height-card {
+          margin-bottom: var(--qiu-margin);
+
+          > .el-card__body {
+            &:not(:has(.el-alert)) {
+              height: auto;
+            }
+          }
+
+          &.has-header {
+            margin-bottom: 0;
+
+            > .el-card__body {
+              height: auto;
+              min-height: calc(var(--qiu-container-height) - 57px);
+            }
+          }
+        }
+      }
+
+      &.fullscreen-container {
+        padding: var(--qiu-padding) !important;
+
+        .auto-height-card {
+          > .el-card__body {
+            height: calc(var(--vh, 1vh) * 100 - var(--qiu-padding) * 2 - 2px);
+          }
+        }
+      }
+    }
+
+    :not(.auto-height-container).no-background-container {
+      > .el-row:has(.el-card) {
+        margin-bottom: calc(0px - var(--qiu-margin));
+      }
+    }
+
+    .jv-container.jv-light {
+      background: var(--qiu-color-white);
+
+      .jv-key,
+      .jv-item.jv-object {
+        color: var(--qiu-color-black);
+      }
+    }
+
+    .qiu-logo-column .logo {
+      border-right: 0 !important;
+      border-bottom: 0 !important;
+    }
+
+    .qiu-logo-column .title {
+      border-bottom: 0 !important;
+    }
+
+    .qiu-side-bar {
+      margin-left: 0 !important;
+    }
+
+    .qiu-column-bar {
+      border-right: 0 !important;
+    }
+
+    .el-space {
+      &__item {
+        &:empty {
+          display: none;
+        }
+      }
+    }
+
+    button {
+      .el-icon {
+        color: inherit;
+      }
+      svg,
+      path {
+        fill: inherit;
+      }
+
+      i {
+        color: inherit;
+      }
+
+      &:hover {
+        svg,
+        path {
+          fill: inherit;
+        }
+
+        i {
+          color: inherit;
+        }
+      }
+    }
+
+    @media (max-width: 768px) {
+      .el-space {
+        &__item {
+          &:has([class*='hidden-']) {
+            display: none;
+          }
+        }
+      }
+    }
+
+    /* 旋转动画 */
+
+    @keyframes rotate {
+      0% {
+        transform: rotate(0);
+      }
+
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    .rotate {
+      animation: rotate 1s linear infinite;
+    }
+
+    .qiu-icon {
+      --el-font-size-big: var(--qiu-font-size-medium) !important;
+    }
+  }
+}