@import "@/styles/variables.scss";
.page-container {
  padding: 24px 40px;
  background-color: #f4f4f5;
  .el-page-header {
    border-bottom: 1px solid #cbcbcb;
    padding: 20px;
    background-color: #ffffff;
    margin-bottom: 20px;
    &::after {
      height: 14px;
    }
    ::v-deep {
      .el-page-header__content {
        font-size: 14px;
      }
    }
  }
  .page-head {
    display: flex;
    //width: 1100px;
    width: 100%;
    justify-content: flex-end;
    margin: auto;
  }
  .page-body {
    //padding: 24px 0;
    //width: 1100px;
    width: 100%;
    max-width: 100%;
    margin: 24px auto;
    .preview-module {
      iframe {
        width: 120%;
        height: 750px;
        transform: scale(.8);
        transform-origin: left top;
      }
    }
  }
  .form-box {
    background-color: #ffffff;
    padding: 40px;
    width: 100%;
    margin: auto;
    position: relative;
    box-shadow: 0 0 10px #e4e4e4;
    .el-date-editor {
      width: 100%;
    }
  }
  .download-url {
    .el-icon-delete {
      cursor: pointer;
    }
  }
  .outline-bar-list {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    grid-gap: 8px;
    .outline-bar-item {
      display: flex;
      border: 1px solid #eeeeee;
      padding: 10px 20px;
      transition: .2s ease-in-out;
      .bar-item-label {
        flex: 1;
        min-width: 1px;
      }
      .del-opt {
        cursor: pointer;
        i {
          font-size: 20px;
        }
      }
      &:hover {
        border-style: dashed;
        border-color: $--color-primary;
        i {
          color: $--color-danger;
        }
      }
    }
  }
  .operate-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 40px;
  }
}
