index.less 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. @import "./theme.less";
  2. .screenWrapper {
  3. width: 100%;
  4. height: calc(100vh - 60px);
  5. display: flex;
  6. flex-direction: column;
  7. overflow: hidden;
  8. position: relative;
  9. background: url("../../../assets/bigscreen/screen-bg.jpg") no-repeat center center;
  10. background-size: cover;
  11. .fullscreenBtn {
  12. position: absolute;
  13. top: 0;
  14. right: 0;
  15. z-index: 10000;
  16. background: rgba(0, 0, 0, 0.7);
  17. color: #00ff88;
  18. border: none;
  19. border-radius: 4px;
  20. padding: 8px 18px;
  21. font-size: 16px;
  22. cursor: pointer;
  23. transition: background 0.2s;
  24. &:hover {
  25. background: rgba(0, 0, 0, 0.9);
  26. }
  27. }
  28. }
  29. .screenContainer {
  30. width: 3840px;
  31. height: 2160px;
  32. padding: 24px;
  33. display: flex;
  34. flex-direction: column;
  35. box-sizing: border-box;
  36. overflow: hidden;
  37. gap: @gap-size;
  38. position: absolute;
  39. left: 0;
  40. top: 0;
  41. }
  42. .headPanel {
  43. height: 200px;
  44. gap: @gap-size;
  45. }
  46. .contentPanel {
  47. display: flex;
  48. flex: 1;
  49. width: 100%;
  50. height: 100%;
  51. overflow: hidden;
  52. gap: @gap-size;
  53. &Left,
  54. &Center,
  55. &Right {
  56. display: flex;
  57. flex-direction: column;
  58. height: 100%;
  59. }
  60. &Left {
  61. width: 25%;
  62. }
  63. &Center {
  64. width: 50%;
  65. }
  66. &Right {
  67. width: 25%;
  68. }
  69. }