videoApp/src/renderer/assets/less/admin.less

/*管理界面样式*/
.containers {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 980px;
  background-color: #333;
  display: flex;

  /*左边留白*/
  .leftblank {
    width: 8%;
    height: 100%;
  }

  /*主要内容*/
  .maincontent {
    width: 84%;
    height: 100%;
    background-color: #000;

    /*标题*/
    .title {
      width: 100%;
      height: 60px;
      background-color: saddlebrown;
      display: flex;
      align-items: center;
      justify-content: center;

      p {
        font-size:30px;
        color: deepskyblue;
        font-weight: 900;
      }
    }

    /*大屏管理*/
    .screenmanage {
      width: 100%;
      height: 87%;
      background-color: orange;
      display: flex;

      /*预案管理*/
      .pre_planmanage {
        width: 10%;
        height: 100%;
        background-color: #102658;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items:center;

        h2 {
          color:#ffffff;
        }

        .el-button--small, .el-button--small.is-round {
          font-size:16px;
          margin-bottom:20px;
          margin-left:0;
        }
      }

      /*大屏控制*/
      .bigscreen_control {
        width: 80%;
        height: 100%;
        background-color: orange;

        /*分屏*/
        .split_screen {
          width: 100%;
          height: 70%;
          background-color: #000000;
          box-sizing: border-box;
          border: 4px solid skyblue;
          overflow: hidden;
          color:#ffffff;
          font-size:50px;

          /*分屏项*/
          .item {
            border: 1px solid #fff;
            color:#fff;
            font-size:50px;
            background-color: #717171;
          }
        }

        /*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%);
        }

        /*控制按钮*/
        .control_btns {
          width: 100%;
          height: 30%;
          background-color: #002140;

          /*分屏按钮*/
          .split_btns {
            width: 100%;
            height: 50%;
            background-color: purple;
            display: flex;
            justify-content: space-around;
            align-items: center;
          }

          /*其他按钮*/
          .other_btns {
            width: 100%;
            height: 50%;
            background-color: mediumpurple;
          }
        }
      }

      /*信号源列表*/
      .signal_source {
        width: 20%;
        height: 100%;
        background-color: #102658;
        display: flex;
        flex-direction: column;
        align-items:center;

        /*标题*/
        .signal_title {
          height: 60px;
          color:#ffffff;
        }

        /*主体*/
        .signal_body {
          width:100%;
          height: 93%;

          /*信号源项*/
          .signal_item {
            width: 100%;
            height: 180px;
            display: flex;
            justify-content: center;
            align-items: center;

            /*背景*/
            .signal_item_bg {
              width: 94%;
              height: 180px;
              display: flex;
              justify-content: center;
              align-items: center;
              &:hover {
                background-color: rgba(113, 113, 113, 0.4);
              }

              /*主体*/
              .signal_item_bg_body {
                width:96%;
                height:96%;
                background-color: rgba(127, 127, 127, 0.55);

                /*空间*/
                .signal_item_bg_body_space {
                  width:94%;
                  height:80%;
                  background-color: green;
                  margin:6px auto;
                }
                /*文字*/
                .signal_item_bg_body_font {
                  width:100%;
                  height:15%;
                  text-align: center;
                  margin:0 auto;
                  font-size:20px;
                  color:#fff;
                }
              }
            }
          }

        }

      }
    }

    /*底部功能菜单*/
    .footmenu {
      width: 100%;
      height: 66px;
      background-color: saddlebrown;
    }
  }

  /*右边留白*/
  .rightblank {
    width: 8%;
    height: 100%;
  }
}