123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- /*分屏样式*/
- /*分屏*/
- .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%);
- }
|