// formRight
.form-content {
  height: 100%;

  .form-content-body {
    height: 100%;
    display: flex;
    flex-direction: column;

    .form-content-body-top,
    .form-content-body-bottom {
      padding: 0 20px;
    }

    .form-content-body-top {
      height: 50px;
      background: #f3f5f9;
      display: flex;
      justify-content: center;
      align-items: center;

      .form-content-body-top-l {
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        flex: 1;
        overflow: hidden;

        .form-content-titles {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 3em;
          flex: 0 0 auto;
          position: relative;

          &:before {
            content: '#';
            margin: 0 .25em;
            color: #999;
          }

          &:nth-last-child(2) {
            flex-shrink: 1;
          }

          :global(.el-input) {
            position: absolute;
            left: 0;
            right: 0;
            //opacity: 0;
            z-index: 1;
            :global(input){
              height: inherit;
              padding: 4px;
            }
          }

          &.form-content-titles-editting {
            width: auto;
            min-width: 100px;
            border: none;
            // border-bottom: 2px solid #cfcfcf;
            line-height: 2.5em;
            border-radius: 0;
            background-color: #fdfdfd;

            // &:after {
            //  content: '|';
            //  margin-left: 0.25em;
            //  margin-right: 0.5em;
            //  animation: cursor 1s infinite;
            // }
            //
            // @keyframes cursor {
            //  0%, 60%, 100% {
            //    opacity: 1
            //  }
            //  60.999%, 99.999% {
            //    opacity: 0
            //  }
            // }
            //
            // @-webkit-keyframes cursor {
            //  0%, 60%, 100% {
            //    opacity: 1
            //  }
            //  60.999%, 99.999% {
            //    opacity: 0
            //  }
            // }
          }
        }

        :global(.xiatu-rich) {
          padding: 0.25em 0.5em;
          cursor: pointer;
          border-radius: 3px;

          &:hover {
            background-color: #e6e6e6;
          }
        }
      }

      .form-content-body-top-r {
        .form-content-body-btns, .form-content-body-btn-group {
          display: flex;

          :global(.xiatu-rich) {
            display: flex;
            flex-direction: column;
            margin-left: 1.2em;
            text-align: center;
            color: #333;
            cursor: pointer;

            &:hover, &:global(.active) {
              color: #3f8cff;
            }

            &:before {
              font-size: 18px;
            }

            &:after {
              font-size: 12px;
            }

          }

          :global(.xt-xinzeng) {
            &:after {
              content: '新增';
            }
          }

          :global(.xt-yulan) {
            &:after {
              content: '预览';
            }
          }

          :global(.xt-bianji) {
            &:after {
              content: '编辑';
            }
          }
        }

        .form-content-body-btn-group {
          margin-left: 1.2em;
          position: relative;

          &:before {
            content: '';
            position: absolute;
            left: 0;
            top: 5px;
            bottom: 5px;
            width: 1px;
            background-color: #ccc;
          }
        }
      }
    }

    .form-content-body-bottom {
      flex: 1;
      // overflow: hidden;
      overflow: auto;
      background-color: #f9f9f9;
    }

  }

}
