map.less 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  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. .mapControl {
  15. position: absolute;
  16. right: 20px;
  17. bottom: 20px;
  18. z-index: 1;
  19. .zoom {
  20. display: flex;
  21. align-items: center;
  22. justify-content: center;
  23. width: 40px;
  24. height: 40px;
  25. margin-bottom: 7px;
  26. font-size: 25px;
  27. background: #fff;
  28. border-radius: 4px;
  29. cursor: pointer;
  30. }
  31. .zoom:hover {
  32. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.05), 0px 4px 15px rgba(0, 0, 0, 0.05);
  33. }
  34. .zoom.disable {
  35. opacity: 0.4;
  36. }
  37. }
  38. }
  39. .map {
  40. position: relative;
  41. width: 3000px;
  42. height: 1200px;
  43. transform-origin: 0% 0%;
  44. cursor: pointer;
  45. .houseWrap {
  46. position: absolute;
  47. box-sizing: border-box;
  48. padding: 3px;
  49. }
  50. .house {
  51. position: relative;
  52. box-sizing: border-box;
  53. width: 100%;
  54. height: 100%;
  55. border: 2px solid #fff;
  56. border-radius: 6px;
  57. // .noDevice {
  58. // position: absolute;
  59. // top: 0;
  60. // left: 0;
  61. // box-sizing: border-box;
  62. // width: 100%;
  63. // height: 100%;
  64. // padding: 4px;
  65. // white-space: nowrap;
  66. // // background: rgba(255, 255, 255, 0.8);
  67. // .noText {
  68. // padding: 4px 6px;
  69. // background-color: #ccc;
  70. // border-radius: 5px;
  71. // }
  72. // }
  73. .allDevice {
  74. position: absolute;
  75. top: 6px;
  76. left: 6px;
  77. z-index: 1;
  78. display: flex;
  79. width: 100%;
  80. .icon {
  81. display: flex;
  82. align-items: center;
  83. justify-content: center;
  84. width: 22px;
  85. height: 22px;
  86. margin-right: 3px;
  87. color: #ffffff;
  88. font-size: 11px;
  89. background: transparent;
  90. border-radius: 22px;
  91. }
  92. }
  93. .allTime {
  94. position: absolute;
  95. top: 4px;
  96. left: 4px;
  97. z-index: 1;
  98. display: flex;
  99. width: 100%;
  100. color: #4d5262;
  101. font-size: 10px;
  102. text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  103. .overworkTime {
  104. color: #5e8bcf;
  105. }
  106. .meetTime {
  107. color: #00dc23;
  108. }
  109. }
  110. .content {
  111. display: flex;
  112. flex-direction: column;
  113. align-items: center;
  114. justify-content: center;
  115. height: 100%;
  116. .name {
  117. box-sizing: border-box;
  118. width: 100%;
  119. padding: 0 3px;
  120. color: #000000;
  121. font-size: 13px;
  122. text-align: center;
  123. //text-shadow: 1px 1px 1px #ffffff;
  124. text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  125. }
  126. }
  127. .contentDiv {
  128. display: inline-block;
  129. // padding: 6px;
  130. text-align: center;
  131. }
  132. }
  133. .notclick {
  134. background: url(../images/bg_disable.png) repeat;
  135. border-color: #dfe3ed;
  136. cursor: default;
  137. .contentDiv {
  138. background-color: #eceff4;
  139. }
  140. }
  141. .searchSel {
  142. border-color: rgba(77, 148, 255, 0.8);
  143. }
  144. }
  145. .equipmentMap {
  146. .house {
  147. cursor: pointer;
  148. .showModal {
  149. position: absolute;
  150. right: 6px;
  151. bottom: 7px;
  152. z-index: 2;
  153. display: flex;
  154. display: none;
  155. align-items: center;
  156. justify-content: center;
  157. width: 22px;
  158. height: 22px;
  159. font-size: 12px;
  160. background: #ffffff;
  161. border-radius: 22px;
  162. }
  163. &:hover .showModal {
  164. display: flex;
  165. }
  166. }
  167. }