styles.less 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  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. .loading{
  15. background: #fff;
  16. height: 100%;
  17. width: 100%;
  18. text-align: center;
  19. position: fixed;
  20. z-index: 10000;
  21. left:0;
  22. top:0;
  23. .ant-spin{
  24. margin-top: 50%;
  25. }
  26. }
  27. // 工作区域
  28. .checkWork{
  29. flex-grow: 1;
  30. display: flex;
  31. flex-direction: column;
  32. overflow: auto;
  33. // 摄像头切,换预置位及打分统计
  34. .checkWork-head{
  35. position: relative;
  36. .checkWork-head-row{
  37. &:first-child{
  38. > div{
  39. display: flex;
  40. align-items: center;
  41. width: 100%;
  42. > div{
  43. &:last-child{
  44. flex-grow: 1;
  45. }
  46. }
  47. }
  48. }
  49. > div{
  50. width: 100%;
  51. padding: 5px 10px;
  52. display: flex;
  53. align-items: center;
  54. &:first-child{
  55. border-bottom: 1px solid #eee;
  56. }
  57. > div{
  58. width: 33.3%;
  59. padding: 3px 0;
  60. }
  61. .ant-dropdown-link{
  62. width: 100%;
  63. display: block;
  64. text-align: right;
  65. color: #666666;
  66. }
  67. }
  68. }
  69. }
  70. .checkWork-body{
  71. flex-grow: 1;
  72. display: flex;
  73. background: #f8f8f8;
  74. overflow: auto;
  75. .checkWork-body-tabs{
  76. width: 26%;
  77. padding: 1px 0;
  78. overflow-y: scroll;
  79. box-shadow: 1px 1px 3px #eee;
  80. .tabs-items{
  81. text-align: center;
  82. padding:8px 5px;
  83. position: relative;
  84. margin: 5px;
  85. background: #fff;
  86. .edit{
  87. font-size: 14px;
  88. color: #ff0000;
  89. }
  90. .aicon{
  91. color: #fff;
  92. position: absolute;
  93. font-size: 12px;
  94. left: -5px;
  95. top: -6px;
  96. background: #ff0000;
  97. padding: 3px;
  98. border-radius: 100%;
  99. }
  100. }
  101. .tabs-items.active{
  102. background: #91D5FF;
  103. }
  104. }
  105. .checkWork-body-tabCons{
  106. width: 74%;
  107. padding: 5px;
  108. overflow-y: scroll;
  109. .tabCons-items{
  110. background: #fff;
  111. padding: 5px;
  112. margin-bottom: 10px;
  113. border-radius: 5px;
  114. box-shadow: 1px 1px 3px #eee;
  115. .photos{
  116. span{
  117. border: 1px solid #eee;
  118. }
  119. display: block;
  120. > div{
  121. display: inline-block;
  122. }
  123. }
  124. > div{
  125. display: flex;
  126. align-items: center;
  127. > div{
  128. padding: 5px;
  129. &:first-child{
  130. flex-grow: 1;
  131. }
  132. .anticon{
  133. font-size: 30px;
  134. color: #666;
  135. margin-left: 15px;
  136. }
  137. .choose-bhs{
  138. color: #13C2C2;
  139. }
  140. .choose-bhg{
  141. color: #ff0000;
  142. }
  143. .choose-hg{
  144. color: #00be00;
  145. }
  146. }
  147. }
  148. }
  149. }
  150. }
  151. }
  152. }
  153. // 播放器
  154. .videoPlay{
  155. position: relative;
  156. height: 240px;
  157. .control-yt,.control-yt-close{
  158. position: absolute;
  159. right: 15px;
  160. top: 15px;
  161. z-index: 100000;
  162. width: 32px;
  163. height: 32px;
  164. background: url(../static/icons/kz-mini.png) no-repeat center center;
  165. background-size: contain;
  166. }
  167. .control-yt-close{
  168. background: url(../static/icons/close.png) no-repeat center center;
  169. background-size: contain;
  170. }
  171. .ytBtns{
  172. position: absolute;
  173. width: 40px;
  174. height: 40px;
  175. z-index: 10000;
  176. opacity: 50%;
  177. }
  178. .yt-left{
  179. left: 20%;
  180. top: 100px;
  181. background: url(../static/icons/left.png) no-repeat center center;
  182. background-size: contain;
  183. }
  184. .yt-right{
  185. right: 20%;
  186. top: 100px;
  187. background: url(../static/icons/right.png) no-repeat center center;
  188. background-size: contain;
  189. }
  190. .yt-top{
  191. left: 50%;
  192. top: 20px;
  193. margin-left: -20px;
  194. background: url(../static/icons/up.png) no-repeat center center;
  195. background-size: contain;
  196. }
  197. .yt-bottom{
  198. left: 50%;
  199. bottom: 20px;
  200. margin-left: -20px;
  201. background: url(../static/icons/down.png) no-repeat center center;
  202. background-size: contain;
  203. }
  204. .prism-player .prism-controlbar{
  205. background: rgba(0, 0, 0, 0.5);
  206. }
  207. }
  208. // 拍照弹框
  209. .pzPopus{
  210. .pz-pinglun{
  211. display: flex;
  212. align-items: center;
  213. .remarks{
  214. flex-grow: 1;
  215. padding-right: 15px;
  216. }
  217. .icons{
  218. border: 1px solid #aaa;
  219. padding: 10px;
  220. border-radius: 100%;
  221. width: 60px;
  222. height: 60px;
  223. display: flex;
  224. align-items: center;
  225. justify-content: center;
  226. .aicon{
  227. font-size: 30px;
  228. color: #999;
  229. }
  230. }
  231. }
  232. .imglist{
  233. display: flex;
  234. align-items: center;
  235. flex-wrap: wrap;
  236. padding: 30px 0 20px;
  237. > div{
  238. position: relative;
  239. padding: 3px;
  240. border: 1px solid #eee;
  241. border-radius: 5px;
  242. margin-right: 15px;
  243. img{
  244. width: 45px;
  245. height: 45px;
  246. }
  247. .aicon{
  248. color: #fff;
  249. position: absolute;
  250. font-size: 12px;
  251. right: -6px;
  252. top: -8px;
  253. background: #FF0000;
  254. padding: 2px;
  255. border-radius: 100%;
  256. }
  257. }
  258. }
  259. .f-btns{
  260. padding: 10px 0;
  261. }
  262. }