splitscreen.less 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. /*分屏样式*/
  2. /*分屏*/
  3. .split_screen {
  4. position: absolute;
  5. width: 100%;
  6. height: 70%;
  7. background-color: #000000;
  8. box-sizing: border-box;
  9. overflow: hidden;
  10. color:#ffffff;
  11. font-size:20px;
  12. /*分屏项(信号源)*/
  13. .sitem {
  14. border: 1px solid #000000;
  15. color:#fff;
  16. //background-color: #717171;
  17. position: relative;
  18. // 关闭信号源开窗按钮
  19. .closeBtn {
  20. position: absolute;
  21. right:2px;
  22. top:2px;
  23. color:#ffffff;
  24. width:20px;
  25. height: 20px;
  26. text-align: center;
  27. line-height: 20px;
  28. font-size:30px;
  29. z-index: 99999;
  30. cursor: default;
  31. }
  32. }
  33. /*分屏项(栅格)*/
  34. .sitem2 {
  35. color:#000;
  36. border: 1px solid #3b3b3b;
  37. background-color: #0b0b0b;
  38. margin-right: -1px;
  39. margin-bottom: -1px;
  40. }
  41. }
  42. /*1分屏*/
  43. .split_screen_one {
  44. display: grid;
  45. grid-template-columns: repeat(1,100%);
  46. grid-template-rows: repeat(1,100%);
  47. }
  48. /*4分屏*/
  49. .split_screen_four {
  50. display: grid;
  51. grid-template-columns: repeat(2,50%);
  52. grid-template-rows: repeat(2,50%);
  53. }
  54. /*9分屏*/
  55. .split_screen_nine {
  56. display: grid;
  57. grid-template-columns: repeat(3,33.333333%);
  58. grid-template-rows: repeat(3,33.333333%);
  59. }
  60. /*16分屏*/
  61. .split_screen_sixteen {
  62. display: grid;
  63. grid-template-columns: repeat(4,25%);
  64. grid-template-rows: repeat(4,25%);
  65. }