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%;
  }
}

// 序号样式
@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 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: 46px;
    padding: 6px 4px;
    margin-bottom: 5px;
    background-color: #fff;
    border-top: $border;
    border-bottom: $border;
  }

  > 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%);
  }
}