styles.less 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. *{
  2. padding: 0;
  3. margin: 0;
  4. }
  5. body{
  6. height: 100%;
  7. overflow: hidden;
  8. }
  9. .storeCheck{
  10. height: calc(100vh);
  11. display: flex;
  12. flex-direction: column;
  13. // 工作区域
  14. .checkWork{
  15. flex-grow: 1;
  16. display: flex;
  17. flex-direction: column;
  18. overflow: auto;
  19. // 摄像头切,换预置位及打分统计
  20. .checkWork-head{
  21. position: relative;
  22. .checkWork-head-row{
  23. display: flex;
  24. align-items: center;
  25. border-bottom: 1px solid #eee;
  26. &:first-child{
  27. > div{
  28. display: flex;
  29. align-items: center;
  30. > div{
  31. &:last-child{
  32. flex-grow: 1;
  33. }
  34. }
  35. }
  36. }
  37. > div{
  38. width: 50%;
  39. padding: 5px 10px;
  40. &:first-child{
  41. border-right: 1px solid #eee;
  42. }
  43. > div{
  44. padding: 3px 0;
  45. }
  46. }
  47. }
  48. }
  49. .checkWork-body{
  50. flex-grow: 1;
  51. display: flex;
  52. background: #f8f8f8;
  53. overflow: auto;
  54. .checkWork-body-tabs{
  55. width: 26%;
  56. padding: 1px 0;
  57. overflow-y: scroll;
  58. background: #fff;
  59. box-shadow: 1px 1px 3px #eee;
  60. .tabs-items{
  61. text-align: center;
  62. padding:8px 5px;
  63. border-bottom: 1px solid #f8f8f8;
  64. }
  65. .tabs-items.active{
  66. background: #91D5FF;
  67. }
  68. }
  69. .checkWork-body-tabCons{
  70. width: 74%;
  71. padding: 5px;
  72. overflow-y: scroll;
  73. .tabCons-items{
  74. background: #fff;
  75. padding: 5px;
  76. margin-bottom: 10px;
  77. border-radius: 5px;
  78. box-shadow: 1px 1px 3px #eee;
  79. > div{
  80. display: flex;
  81. align-items: center;
  82. > div{
  83. padding: 5px;
  84. &:first-child{
  85. flex-grow: 1;
  86. }
  87. }
  88. }
  89. }
  90. }
  91. }
  92. }
  93. }
  94. // 播放器
  95. .videoPlay{
  96. position: relative;
  97. height: 240px;
  98. .control-yt,.control-yt-close{
  99. position: absolute;
  100. right: 15px;
  101. top: 15px;
  102. z-index: 100000;
  103. width: 32px;
  104. height: 32px;
  105. background: url(../static/icons/kz-mini.png) no-repeat center center;
  106. background-size: contain;
  107. }
  108. .control-yt-close{
  109. background: url(../static/icons/close.png) no-repeat center center;
  110. background-size: contain;
  111. }
  112. .ytBtns{
  113. position: absolute;
  114. width: 40px;
  115. height: 40px;
  116. z-index: 10000;
  117. opacity: 50%;
  118. }
  119. .yt-left{
  120. left: 20%;
  121. top: 100px;
  122. background: url(../static/icons/left.png) no-repeat center center;
  123. background-size: contain;
  124. }
  125. .yt-right{
  126. right: 20%;
  127. top: 100px;
  128. background: url(../static/icons/right.png) no-repeat center center;
  129. background-size: contain;
  130. }
  131. .yt-top{
  132. left: 50%;
  133. top: 20px;
  134. margin-left: -20px;
  135. background: url(../static/icons/up.png) no-repeat center center;
  136. background-size: contain;
  137. }
  138. .yt-bottom{
  139. left: 50%;
  140. bottom: 20px;
  141. margin-left: -20px;
  142. background: url(../static/icons/down.png) no-repeat center center;
  143. background-size: contain;
  144. }
  145. .prism-player .prism-controlbar{
  146. background: rgba(0, 0, 0, 0.5);
  147. }
  148. }