videoApp/src/renderer/assets/less/splitscreen.less

/*分屏样式*/
/*分屏*/
.split_screen {
  position: absolute;
  width: 100%;
  height: 70%;
  background-color: #000000;
  box-sizing: border-box;
  overflow: hidden;
  color:#ffffff;
  font-size:20px;

  /*分屏项(信号源)*/
  .sitem {
    border: 1px solid #000000;
    color:#fff;
    //background-color: #717171;
    position: relative;

    // 关闭信号源开窗按钮
    .closeBtn {
      position: absolute;
      right:2px;
      top:2px;
      color:#ffffff;
      width:20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      font-size:30px;
      z-index: 99999;
      cursor: default;
    }
  }

  /*分屏项(栅格)*/
  .sitem2 {
    color:#000;
    border: 1px solid #3b3b3b;
    background-color: #0b0b0b;
    margin-right: -1px;
    margin-bottom: -1px;
  }
}

/*1分屏*/
.split_screen_one {
  display: grid;
  grid-template-columns: repeat(1,100%);
  grid-template-rows: repeat(1,100%);
}

/*4分屏*/
.split_screen_four {
  display: grid;
  grid-template-columns: repeat(2,50%);
  grid-template-rows: repeat(2,50%);
}

/*9分屏*/
.split_screen_nine {
  display: grid;
  grid-template-columns: repeat(3,33.333333%);
  grid-template-rows: repeat(3,33.333333%);
}

/*16分屏*/
.split_screen_sixteen {
  display: grid;
  grid-template-columns: repeat(4,25%);
  grid-template-rows: repeat(4,25%);
}