123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 |
- @import "./theme.less";
- .screenWrapper {
- width: 100%;
- height: calc(100vh - 60px);
- display: flex;
- flex-direction: column;
- overflow: hidden;
- position: relative;
- background: url("../../../assets/bigscreen/screen-bg.jpg") no-repeat center center;
- background-size: cover;
- .fullscreenBtn {
- position: absolute;
- top: 0;
- right: 0;
- z-index: 10000;
- background: rgba(0, 0, 0, 0.7);
- color: #00ff88;
- border: none;
- border-radius: 4px;
- padding: 8px 18px;
- font-size: 16px;
- cursor: pointer;
- transition: background 0.2s;
- &:hover {
- background: rgba(0, 0, 0, 0.9);
- }
- }
- }
- .screenContainer {
- width: 3840px;
- height: 2160px;
- padding: 24px;
- display: flex;
- flex-direction: column;
- box-sizing: border-box;
- overflow: hidden;
- gap: @gap-size;
- position: absolute;
- left: 0;
- top: 0;
- }
- .headPanel {
- height: 200px;
- gap: @gap-size;
- }
- .contentPanel {
- display: flex;
- flex: 1;
- width: 100%;
- height: 100%;
- overflow: hidden;
- gap: @gap-size;
- &Left,
- &Center,
- &Right {
- display: flex;
- flex-direction: column;
- height: 100%;
- }
- &Left {
- width: 25%;
- }
- &Center {
- width: 50%;
- }
- &Right {
- width: 25%;
- }
- }
|