foucui 1.0.1 → 2.0.0

package/styles/qiu.scss

@@ -1,1149 +0,0 @@
-/**
- * @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;
-    }
-  }
-}