eep_page/src/styles/mixin.scss

@use './variables.scss' as *;

// 富文本样式
@mixin rich-text($font-size: 16pt) {
  font-family: 'Arial', 'Helvetica', sans-serif;
  font-size: $font-size;

  :deep ul {
    padding-inline-start: 40px;

    li {
      list-style: disc;
    }
  }
}

// 设置基础样式
@mixin setting-base {
  .serial-number {
    :deep .el-form-item__content {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .svg-icon {
      cursor: pointer;
    }
  }

  .el-input {
    margin-right: 16px;
  }

  .el-divider {
    margin: 16px 0;
  }
}

// 预览基础样式
@mixin preview-base {
  display: grid;
  gap: 6px;
  padding: 8px;

  :deep .rich-text {
    @include rich-text;

    &.mce-content-body {
      padding-top: 4px;
    }

    &:not(.mce-edit-focus) {
      p {
        margin: 0;
      }
    }

    &.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
      top: 6px;
    }
  }

  .main {
    grid-area: main;
    width: 100%;

    .lang {
      grid-area: lang;
    }
  }
}

// 序号样式
@mixin serial-number($height: 36px) {
  width: 40px;
  height: $height;
  padding: 4px 8px;
  font-size: 14px;
  color: $text-color;
  background-color: $fill-color;
  border-radius: 2px;
}

// 页面基础样式
@mixin page-base {
  display: flex;
  flex-direction: column;
  row-gap: 5px;
  min-width: 1100px;
  min-height: 100%;
  padding: 5px;
  margin: 0 5px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 10%);
}

// 列表样式
@mixin table-list {
  &-list {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding-bottom: 10px;

    .el-table {
      display: flex;
      flex-direction: column;

      :deep &__body-wrapper {
        flex: 1;
      }
    }
  }
}

@mixin page-content($isMenu: false) {
  display: flex;
  flex-direction: column;
  min-width: 1100px;
  min-height: calc(100% - 5px);

  > .menu {
    position: sticky;
    top: 5px;
    left: 0;
    margin: 5px 10px;
  }

  &__header {
    position: sticky;
    top: if($isMenu, 56px, 5px);
    left: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 6px 4px;
    margin-bottom: 5px;
    background-color: #fff;
    border-top: $border;
    border-bottom: $border;

    > .menu-container {
      display: flex;
      justify-content: space-between;
      width: 360px;
      padding: 4px 8px;
      border-right: $border;
    }

    > .courseware {
      display: flex;
      flex-grow: 1;
      column-gap: 16px;
      align-items: center;
      justify-content: space-between;
      height: 40px;

      .name-path {
        flex: 1;
        height: 40px;
        padding: 4px 8px;
        font-size: 14px;
        line-height: 32px;
        border-right: $border;
      }

      .operator {
        display: flex;
        column-gap: 8px;
        align-items: center;

        .link {
          + .link {
            margin-left: 0;

            &::before {
              margin-right: 8px;
              color: #999;
              content: '|';
            }
          }
        }
      }
    }
  }

  > main {
    display: flex;
    flex: 1;
    flex-direction: column;
    row-gap: 5px;
    min-width: 1100px;
    min-height: if($isMenu, calc(100% - 57px), 100%);
    padding: 5px;
    margin: 0 5px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 10%);
  }
}

// 旋转动画
@mixin spin($second: 3s) {
  animation: spin $second linear infinite;

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
}