$marginTop:14%;

.ppt-item {
    .closeBtn,.dragBtn,.copyBtn,.addBtn {
        color:#BDBDBD;
        width:20px;
        height:20px;
        cursor: pointer;
        background: url('~@/assets/img/ppt_m/ppt-del.png') no-repeat center/cover;
        background-color: white;
        border-radius: 50%;
        position:absolute;
        //具体位置需要一个个算
    }
    .dragBtn{
      background: url('~@/assets/img/ppt_m/ppt-drag.png') no-repeat center/cover;
      background-color: white;
    }
    .copyBtn,.addBtn{
      border-radius: 0%;
      /* background-image: none;
      background-color: transparent;
      i{
        font-size: 20px;
      } */
    }
    .copyBtn{
      background: url('~@/assets/img/ppt_m/ppt-copy.png') no-repeat center/cover;
    }
    .addBtn{
      background: url('~@/assets/img/ppt_m/ppt-add.png') no-repeat center/cover;
    }
    .chart-wrap{
        position: absolute;
        img{
            width: 100%;
            height: 100%;
            display: none;
        }
    }
    .editor-wrap{
        position: relative;
        .line-top,.line-bottom{
            position: absolute;
            width: 100%;
            top:0;
            left:0;
            height: 1px;
            background-image: linear-gradient(to right, #999999 0%, #999999 50%,transparent 0%);
            background-size: 28px 1px;
            background-repeat: repeat-x;
        }
        .line-right,.line-left{
            position: absolute;
            top:0;
            right:0;
            width: 1px;
            height: 100%;
            background-image: linear-gradient(to bottom, #999999 0%, #999999 50%,transparent 0%);
            background-size: 1px 28px;
            background-repeat: repeat-y;
        }
        .line-left{
            left:0;
            right: auto;
        }
        .line-bottom{
            top:auto;
            bottom:0;
        }
        .content-wrap{
            width:100%;
            height:100%;
            padding:10px;
            font-size: 16px;
            position:relative;
            ul{
                margin-left: 1em;
                list-style-type: disc;
            }
            ol{
                margin-left: 1em;
                list-style-type: decimal;
            }
            .content{
                position:absolute;
                left: 0;
                top:0;
                transform-origin: 0 0;
            }
        }
    }
    .layers{
      position: absolute;
      left: 0;right: 0;top:0;bottom: 0;
      background-color: #99999946;
      &.no-cover{
        background-color: transparent;
      }
      .shape{
        /* display: flex; */
        /* position:absolute; */
        cursor:move;
        .borderline{
          position:absolute;
          left:0;
          right:0;
          top:0;
          bottom: 0;
          border: 1px dashed black;
          &.line{
            border:none;
          }
          .resize-handle{
            position:absolute;
            margin: -5px;
            width:10px;
            height:10px;
            border: 1px solid #6324d1;
            box-sizing: content-box;
            background-color: #fff;
            &.left-1,&.left-2,&.left-3{left:0;}
            &.left-1,&.right-1,&.line-middle-1{top:0;}
            &.left-2,&.right-2{top:calc(50% + 5px);transform: translateY(-50%);}
            &.left-3,&.right-3,&.line-middle-2{bottom:0;}
            &.right-1,&.right-2,&.right-3{right:0;}
            &.left-1,&.right-3,&.end,&.start{cursor: nwse-resize;}
            &.left-2,&.right-2{cursor: ew-resize;}
            &.left-3,&.right-1{cursor: nesw-resize;}
            &.line-middle-1,&.line-middle-2{left:calc(50% + 5px);transform: translateX(-50%);cursor: ns-resize;}
          }
        }
        /* .shape-content{
          svg{
            overflow:visible;
            transform-origin: 0 0;
          }
        } */
      }
    }
    .total-wrap{
      position:relative;
      top: $marginTop;
      width: 100%;
      height: calc(100% - #{$marginTop});
      display: flex;
    }
    //版式1,6
    .full {
        width: 100%;
        height: 100%;
        position: absolute;
        top:0;
        align-items: flex-start;
        //chart容器
        .chart-wrap {
            width: 90%;
            height: 90%;
            margin-top: 10px;
            /* background-color: rgba(255, 192, 203, 0.507); */
        }
        .editor-wrap {
            width: 90%;
            height: 90%;
            margin-top: 10px;
        }
        //删除按钮
        .closeBtn{
            top:0;
            right:calc(5% - 10px);
        }
    }

    //版式2
    .chart-full-left {
        width: 60%;
        height: 100%;
        position: absolute;
        left: 0;
        top:0;
        .chart-wrap {
            width: 90%;
            height: 80%;
            /* background-color: rgba(0, 128, 0, 0.389); */
        }
        .editor-wrap {
          width: 90%;
          height: 80%;
        }
        .closeBtn{
            top:calc(10% - 10px);
            right:calc(5% - 10px);
        }
    }

    .word-full-right {
        width: 40%;
        height: 100%;
        position: absolute;
        right: 0;
        top:0;
        justify-content: flex-start;
        //富文本容器
        .editor-wrap {
            width: 90%;
            height: 80%;
        }
        .chart-wrap {
          width: 90%;
          height: 80%;
      }
    }

    //版式345 7
    .wrap-full-left {
        width: 50%;
        height: 100%;
        position: absolute;
        top:0;
        left: 0;
        &-half {
            width: 100%;
            height: 50%;
            position: relative;
            &.top {
                .chart-wrap {
                    width: 90%;
                    height: 84%;
                }
                .closeBtn{
                    top:calc(4% - 10px);
                    right:2.5%;
                }
            }

            &.bottom {
                align-items: flex-start;
                /* background-color: rgba(255, 127, 80,0.5); */
                .el-wrap{
                  align-items: flex-start;
                  .dragBtn,.closeBtn,.copyBtn{
                    top:-1.5% !important;
                  }
                  .tool-list{
                    top:-20px !important;
                  }
                }
                .chart-wrap {
                    width: 90%;
                    height: 84%;
                    /* background-color: coral; */
                }
                .closeBtn{
                    top:0;
                    right:2.5%;
                }
            }
        }
        .chart-wrap {
            width: 90%;
            height: 80%;
        }
        .editor-wrap {
          width: 90%;
          height: 84%;
        }
        .closeBtn{
            top:calc(10% - 10px);
            right:calc(5% - 10px);
        }
    }

    .wrap-full-right {
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        &-half {
            width: 100%;
            height: 50%;
            position:relative;
            &.top {
                .chart-wrap {
                  width: 90%;
                  height: 84%;
                }
                .closeBtn{
                  top:calc(4% - 10px);
                  right:2.5%;
                }
            }

            &.bottom {
                align-items: flex-start;
                /* background-color: rgba(65, 105, 225,0.5); */
                .el-wrap{
                  align-items: flex-start;
                  .dragBtn,.closeBtn,.copyBtn{
                    top:-1.5% !important;
                  }
                  .tool-list{
                    top:-20px !important;
                  }
                }
                .chart-wrap {
                    width: 90%;
                    height: 84%;
                     /* background-color: royalblue; */
                }
                .closeBtn{
                    top:0;
                    right:2.5%;
                }
            }
        }
        .editor-wrap {
            width: 90%;
            height: 84%;
        }
        .chart-wrap {
            width: 90%;
            height: 80%;
        }
        .closeBtn{
            top:calc(10% - 10px);
            right:calc(5% - 10px);
        }
    }

    //版式8 9
    .wrap-full-top,.wrap-full-bottom{
      width:100%;
      height:50%;
      position:relative;
      &.top-70{
        height:70%;
      }
      &.bottom-30{
        height: 30%;
      }
      .half{
        height:100%;
        position:absolute;
        &-left,&-right{
          width:50%;
        }
        &-left{
          top:0;
          left:0;
          .closeBtn{
            top: calc(4% - 10px);
            right:2.5%;
          }
        }
        &-right{
          top:0;
          right:0;
          .closeBtn{
            top: calc(4% - 10px);
            right: 2.5%;
          }
        }
      }
      .chart-wrap {
        width: 90%;
        height: 90%;
       /*  margin-top: 10px; */
      }
      .editor-wrap {
        width: 90%;
        height: 80%;
      }
      .closeBtn{
        top:0;
        right:calc(5% - 10px);
      }
    }
    .wrap-full-bottom{
      .editor-wrap{
        align-self: flex-start;
      }
      .el-wrap{
        align-items: flex-start;
        .dragBtn,.closeBtn{
          top:0 !important;
        }

      }
    }
    
    //layer-mask 更改版式345 9布局, ↑原先样式保留不动
    .wrap-full-left-half{
      position:absolute;
      left:0;
      height: 50%;
      width:50%;
      &.top {
        top:0;
        .chart-wrap {
            width: 90%;
            height: 84%;
        }
        .closeBtn{
            top:calc(4% - 10px);
            right:2.5%;
        }
      }
      &.bottom {
        top:50%;
        align-items: flex-start;
        .el-wrap{
          align-items: flex-start;
          .dragBtn,.closeBtn,.copyBtn{
            top:0 !important;
          }
        }
        .chart-wrap {
            width: 90%;
            height: 84%;
        }
        .closeBtn{
            top:0;
            right:2.5%;
        }
      }
      .editor-wrap {
        width: 90%;
        height: 84%;
      }
    }
    .wrap-full-right-half{
      position:absolute;
      right:0;
      height: 50%;
      width:50%;
      &.top {
        top:0;
        .chart-wrap {
          width: 90%;
          height: 84%;
        }
        .closeBtn{
          top:calc(4% - 10px);
          right:2.5%;
        }
      }
      &.bottom {
        top:50%;
        align-items: flex-start;
        .el-wrap{
          align-items: flex-start;
          .dragBtn,.closeBtn,.copyBtn{
            top:0 !important;
          }
        }
        .chart-wrap {
            width: 90%;
            height: 84%;
        }
        .closeBtn{
            top:0;
            right:2.5%;
        }
      }
      .editor-wrap {
        width: 90%;
        height: 84%;
      }
    }
    .half{
      .chart-wrap {
        width: 90%;
        height: 90%;
       /*  margin-top: 10px; */
      }
      .editor-wrap {
        width: 90%;
        height: 80%;
      }
    }

}