:global{
  .video-boxs{
    position: absolute;
    // top: 50%;
    // left: 50%;
    width: 70%;
    height: 85%;
    background-color: #000;
    z-index: 101;
    transform: translate(-50%,-50%);
    .box-header{
      width: 100%;
      height: 41px;
      background-color: #0E70FF;
      color: #fff;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-right: 16px;
      .icon{
        cursor: pointer;
      }
    }
    .box-tool:hover{
      background: #000000;
      .tool-item{
        img{
          height: 18px;
        }
        .name{
          color: #fff;
        }
      }
    }
    .box-tool{
      // width: 280px;
      width: 100%;
      display: flex;
      justify-content: center;
      height: 55px;
      // background-color: #2E2E2E;
      // opacity: 0.5;
      // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
      // border-radius: 28px;
      opacity: 0.8;
      // background: #000000;
      bottom: 0px;
      position: absolute;
      left: 50%;
      // top: 2px;
      transform: translateX(-50%);
      padding: 8px 36px 0;
      display: flex;
      align-items: center;
      z-index: 100;
      .tool-item{
        cursor: pointer;
        color: #fff;
        text-align: center;
        width: 56px;
        height: 47px;
        img{
          width: 18px;
          height: 0;
          margin-bottom: 4px;
        }
        .name{
          color: #fffefe00;
        }
      }
      .change-abs{
        position: relative;
        .change-content{
          position: absolute;
          bottom: 60px;
          right: -140px;
          display: flex;
          width: 640px;
          height: 125px;
          background: #333438;
          border-radius: 4px;
          z-index: 99;
          justify-content: space-around;
          .change-item{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-left: 20px;
            justify-content: center;
            width: 105px;
            .change-img{
              width: 76px;
              height: 52px;
            }
            .ant-checkbox + span{
              color: #fff;
            }
          }
        }
      }
    }
    .box-tool-default{
      background: #000000;
      .tool-item{
        img{
          height: 18px;
        }
        .name{
          color: #fff;
        }
      }
    }
    .video-content{
      width: 100%;
      min-height: 80%;
      height: calc(~"100% - 41px");
      padding-top: 16px;
      overflow: auto;
      scrollbar-width: none; /* firefox */
      -ms-overflow-style: none; /* IE 10+ */

      // 传统九宫格
      .video-layout0, .video-layout3, .video-layout4{
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        padding-left: 3px;
        justify-content: center;
        .video-main{
          margin-right: 1px;
          margin-bottom: 1px;
        }
        .video-box {
          position: relative;
          background-color: #dbdbdb;
          margin-bottom: 1px;
          margin-right: 1px;
          z-index: 11;
        }
      }
      .video-layout4-20, .video-layout4-21, .video-layout4-22, .video-layout4-23, .video-layout4-24{
        .video-main{
          width: 18.99%;
          height: 18.99%;
        }
        .video-box {
          width: 18.99%;
          height: 18.99%;
        }
      }
      .video-layout4-15, .video-layout4-16, .video-layout4-17, .video-layout4-18, .video-layout4-19{
        .video-main{
          width: 18.99%;
          height: 23.99%;
        }
        .video-box {
          width: 18.99%;
          height: 23.99%;
        }
      }
      .video-layout3-12, .video-layout3-13, .video-layout3-14, .video-layout3-15, .video-layout4-12, .video-layout4-13, .video-layout4-14, .video-layout4-15{
        .video-main{
          width: 23.99%;
          height: 23.99%;
        }
        .video-box {
          width: 23.99%;
          height: 23.99%;
        }
      }
      .video-layout3-9, .video-layout3-10, .video-layout3-11, .video-layout4-9, .video-layout4-10, .video-layout4-11{
        .video-main{
          width: 23.99%;
          height: 32.33%;
        }
        .video-box {
          width: 23.99%;
          height: 32.33%;
        }
      }
      .video-layout0-6, .video-layout0-7, .video-layout0-8, .video-layout3-6, .video-layout3-7, .video-layout3-8, .video-layout4-6, .video-layout4-7, .video-layout4-8{
        .video-main{
          width: 32.33%;
          height: 32.33%;
        }
        .video-box {
          width: 32.33%;
          height: 32.33%;
        }
      }
      .video-layout0-4, .video-layout0-5, .video-layout3-4, .video-layout3-5, .video-layout4-4, .video-layout4-5{
        .video-main{
          width: 32.33%;
          height: 49.8%;
        }
        .video-box {
          width: 32.33%;
          height: 49.8%;
        }
      }
      .video-layout0-2, .video-layout0-3, .video-layout3-2, .video-layout3-3, .video-layout4-2, .video-layout4-3{
        .video-main{
          width: 49.8%;
          height: 49.8%;
        }
        .video-box {
          width: 49.8%;
          height: 49.8%;
        }
      }
      .video-layout0-1, .video-layout3-1, .video-layout4-1{
        .video-main{
          width: 49.8%;
          height: 99.8%;
        }
        .video-box {
          background-color: #dbdbdb;
          width: 49.8%;
          height: 99.8%;
        }
      }
      .video-layout0-0, .video-layout3-0, .video-layout4-0{
        width: 100%;
        height: 100%;
        .video-main{
          width: 100%;
          height: 100%;
          margin-right: 1px;
          margin-bottom: 1px;
        }
        .video-main-hidden{
          display: none;
        }
        .video-box{
          width: 100%;
          height: 100%;
          margin-right: 1px;
          margin-bottom: 1px;
        }
      }
      .video-item{
        width: 30%;
        height: 30%;
        font-size: 24px;
        text-align: center;
        margin-bottom: 16px;
      }
    }

    // 右侧列表
    .video-layout1{
      display: inline-block;
      height: 100%;
      width: 17%;
      float: right;
      overflow-y: auto;
      overflow-x: hidden;
      .video-main{
        margin-right: 1px;
        margin-bottom: 1px;
        width: 100%;
        height: 135px;
      }
      .video-box {
        position: relative;
        background-color: #dbdbdb;
        margin-bottom: 1px;
        margin-right: 1px;
        z-index: 11;
        width: 100%;
        height: 135px;
      }
      .video-box-checked {
        position: absolute;
        top: 0;
        left: 0;
        width: calc(~"100% - 18%");
        height: 100%;
      }
    }

    // 顶部列表
    .video-layout2{
      display: inline-block;
      width: 100%;
      height: 17%;
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;/* 父级元素中的内容不换行 */
      .video-main{
        margin-right: 1px;
        margin-bottom: 1px;
        width: 240px;
        height: 100%;
        display: inline-block;
        vertical-align: top;
      }
      .video-box {
        position: relative;
        background-color: #dbdbdb;
        margin-bottom: 1px;
        margin-right: 1px;
        z-index: 11;
        width: 240px;
        height: 100%;
        display: inline-block;
        vertical-align: top;
      }
      .video-box-checked {
        position: absolute;
        left: 0;
        top: 18%;
        width: 100%;
        height: calc(~"100% - 18%");
      }
    }
    .video-option-left{
      position: absolute;
      top: 50%;
      left: 0;
      display: flex;
      width: 20px;
      height: 50px;
      background-color: #616161;
      justify-content: center;
      color: #fff;
      align-items: center;
    }
    .video-option-right{
      position: absolute;
      top: 50%;
      right: 0;
      display: flex;
      width: 20px;
      height: 50px;
      background-color: #616161;
      justify-content: center;
      color: #fff;
      align-items: center;
      z-index: 99;
    }
    .video-content::-webkit-scrollbar{
      display: none; /* Chrome Safari */
    }

    // .video-layout0{
    //   display: flex;
    //   flex-wrap: wrap;
    //   justify-content: space-between;
    //   .video-item{
    //     width: 240px;
    //     height: 135px;
    //     background-color: aqua;
    //     font-size: 24px;
    //     text-align: center;
    //     margin-bottom: 16px;
    //   }
    // }
    .video-left{
      width: 70%;
      height: 100%;
      margin-right: 5%;
      .video-container{
        width: 100% !important;
        height: 100% !important;
      }
    }
    .video-right{
      width: 20%;
      height: 100%;
      font-size: 24px;
      text-align: center;
      overflow: auto;
      .video-container{
        width: 100% !important;
        height: 112px;
        margin-bottom: 16px;
      }
    }
    .video-right::-webkit-scrollbar {
      display: none;
    }
    .video-name{
      color: #fff;
      position: absolute;
      bottom: 0;
      transform: translateX(-50%);
      height: 28px;
      background: #000;
      opacity: 0.6;
      text-align: center;
      line-height: 28px;
      z-index: 100;
      width: 75px;
      display: flex;
      left: 38px;
      justify-content: space-evenly;
    }
    .video-name2{
      color: #fff;
      position: absolute;
      top: 30%;
      width: 58px;
      height: 28px;
      background: #000;
      opacity: 0.6;
      text-align: center;
      line-height: 28px;
    }
  }
}