index.less 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. .spinnclass {
  2. // height: calc(100% - 245px);
  3. }
  4. :global {
  5. .ant-spin-container {
  6. height: 100%;
  7. }
  8. }
  9. .mapwrap {
  10. position: relative;
  11. // height: calc(100% - 285px);
  12. height: 100%;
  13. overflow: hidden;
  14. text-decoration: none;
  15. user-select: none;
  16. tap-highlight-color: rgba(0, 0, 0, 0);
  17. .controlBar {
  18. margin-bottom: 15px;
  19. }
  20. .mapControl {
  21. position: absolute;
  22. right: 20px;
  23. bottom: 20px;
  24. z-index: 1;
  25. // display: none;
  26. .iconfont {
  27. font-size: 25px;
  28. }
  29. .zoom {
  30. display: flex;
  31. align-items: center;
  32. justify-content: center;
  33. width: 40px;
  34. height: 40px;
  35. margin-bottom: 7px;
  36. font-size: 25px;
  37. background: #fff;
  38. border-radius: 4px;
  39. cursor: pointer;
  40. }
  41. .zoom:hover {
  42. box-shadow: 0 0 2px rgba(0, 0, 0, 0.05), 0 4px 15px rgba(0, 0, 0, 0.05);
  43. }
  44. .zoom.disable {
  45. opacity: 0.4;
  46. }
  47. }
  48. }
  49. .map {
  50. position: relative;
  51. width: 3000px;
  52. height: 1200px;
  53. transform-origin: 0% 0%;
  54. cursor: pointer;
  55. .hasPerson {
  56. position: absolute;
  57. top: 2px;
  58. right: 5px;
  59. display: flex;
  60. align-items: center;
  61. justify-content: center;
  62. height: 20px;
  63. padding: 0 5px;
  64. color: #626c78;
  65. font-size: 11px;
  66. white-space: nowrap;
  67. background-color: #edf1f5;
  68. border-radius: 10px;
  69. transform-origin: 100% 0%;
  70. }
  71. .houseWrap {
  72. position: absolute;
  73. box-sizing: border-box;
  74. padding: 3px;
  75. }
  76. .house {
  77. position: relative;
  78. box-sizing: border-box;
  79. width: 100%;
  80. height: 100%;
  81. border: 2px solid #fff;
  82. border-radius: 6px;
  83. // .noDevice {
  84. // position: absolute;
  85. // top: 0;
  86. // left: 0;
  87. // box-sizing: border-box;
  88. // width: 100%;
  89. // height: 100%;
  90. // padding: 4px;
  91. // white-space: nowrap;
  92. // // background: rgba(255, 255, 255, 0.8);
  93. // .noText {
  94. // padding: 4px 6px;
  95. // background-color: #ccc;
  96. // border-radius: 5px;
  97. // }
  98. // }
  99. .allDevice {
  100. position: absolute;
  101. top: 2px;
  102. left: 5px;
  103. z-index: 1;
  104. display: flex;
  105. width: 100%;
  106. transform-origin: 0% 0%;
  107. .icon {
  108. display: flex;
  109. flex-shrink: 0;
  110. align-items: center;
  111. justify-content: center;
  112. width: 20px;
  113. height: 20px;
  114. margin-right: 3px;
  115. color: #fff;
  116. font-size: 11px;
  117. background: transparent;
  118. border-radius: 22px;
  119. transform-origin: 0% 0%;
  120. }
  121. }
  122. .allTime {
  123. position: absolute;
  124. top: 4px;
  125. left: 4px;
  126. z-index: 1;
  127. // display: flex;
  128. box-sizing: border-box;
  129. width: 100%;
  130. padding-right: 4px;
  131. overflow: hidden;
  132. color: #4d5262;
  133. font-size: 10px;
  134. white-space: nowrap;
  135. text-overflow: ellipsis;
  136. text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  137. .overworkTime {
  138. color: #5e8bcf;
  139. font-weight: 700;
  140. }
  141. .meetTime {
  142. color: #00dc23;
  143. font-weight: 700;
  144. }
  145. }
  146. .content {
  147. display: flex;
  148. flex-direction: column;
  149. align-items: center;
  150. justify-content: center;
  151. height: 100%;
  152. .name {
  153. box-sizing: border-box;
  154. width: 100%;
  155. padding: 0 3px;
  156. color: #000;
  157. font-size: 12px;
  158. text-align: center;
  159. //text-shadow: 1px 1px 1px #fff;
  160. text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  161. }
  162. }
  163. .contentDiv {
  164. display: inline-block;
  165. // padding: 6px;
  166. text-align: center;
  167. }
  168. .pointer {
  169. display: flex;
  170. align-items: center;
  171. height: 100%;
  172. }
  173. }
  174. .notclick {
  175. background: url(~@/assets/images/page-equipment/bg_disable.png) repeat;
  176. border-color: #dfe3ed;
  177. cursor: default;
  178. .contentDiv {
  179. background-color: #eceff4;
  180. }
  181. }
  182. .searchSel {
  183. border-color: rgba(77, 148, 255, 0.8);
  184. }
  185. }
  186. .equipmentMap {
  187. .house {
  188. cursor: pointer;
  189. .showModal {
  190. position: absolute;
  191. right: 5px;
  192. bottom: 5px;
  193. z-index: 2;
  194. display: flex;
  195. display: none;
  196. align-items: center;
  197. justify-content: center;
  198. width: 20px;
  199. height: 20px;
  200. font-size: 10px;
  201. line-height: 20px;
  202. background: #fff;
  203. border-radius: 20px;
  204. transform-origin: 100% 100%;
  205. }
  206. &:hover .showModal {
  207. display: flex;
  208. }
  209. }
  210. }