cr.map.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510
  1. /**
  2. * 作者:王成
  3. * 创建日期:2021年12月15日
  4. * 操作系统:MAC
  5. * 描述:地图页面的通用样式
  6. */
  7. /* 通用样式 */
  8. html,
  9. body {
  10. height: 100%;
  11. padding: 0px;
  12. width: 100%;
  13. }
  14. /* body样式 */
  15. body {
  16. margin: 0px;
  17. background: url(../img/map/map_back.jpg) no-repeat left top;
  18. background-size: 100% 100%;
  19. }
  20. /* 地图界面的按钮容器样式 */
  21. .wc-map-div-btn {
  22. position: relative;
  23. width: 40px;
  24. height: 40px;
  25. line-height: 40px;
  26. text-align: center;
  27. background-color: rgba(0, 0, 0, 0.55);
  28. padding: 4px;
  29. border-width: 0px;
  30. margin-top: 4px;
  31. }
  32. /* 按钮内图标样式 */
  33. .wc-map-div-btn span {
  34. font-size: 30px;
  35. color: #ffffff;
  36. background: linear-gradient(to bottom, rgb(255, 255, 0) 50%, rgb(76, 245, 255) 50%);
  37. -webkit-background-clip: text;
  38. color: transparent;
  39. }
  40. /* 本页独立导航栏样式 */
  41. .cr-bar {
  42. background-color: rgba(255, 255, 255, 0) !important;
  43. border: solid 0px rgb(255, 255, 255) !important;
  44. box-shadow: none !important;
  45. }
  46. /* 查询输入框样式 */
  47. .mui-search input {
  48. background-color: rgba(174, 186, 208, 0.85) !important;
  49. border: solid 1px rgba(170, 176, 198, 0.85) !important;
  50. color: rgb(33, 47, 100) !important;
  51. font-size: 13px !important;
  52. border-radius: 22px !important;
  53. }
  54. /* 输入框提示文字颜色 */
  55. .mui-search .mui-placeholder {
  56. color: rgba(255, 255, 255, 0.65) !important;
  57. font-size: 12px;
  58. }
  59. /* 弹框的高度 */
  60. .mui-popover {
  61. height: 300px;
  62. }
  63. /* 图层控制器 文字样式 */
  64. .mui-checkbox label {
  65. font-size: 16px;
  66. }
  67. /* 图层控制器 图标样式 */
  68. .mui-checkbox label span {
  69. font-size: 20px;
  70. margin-right: 5px;
  71. }
  72. /* 图层控制器 文字样式 */
  73. .mui-radio label {
  74. font-size: 16px;
  75. }
  76. /* 图层控制器 图标样式 */
  77. .mui-radio label span {
  78. font-size: 20px;
  79. margin-right: 5px;
  80. }
  81. /* 引入外部字体 */
  82. @font-face {
  83. font-family: alFont;
  84. src: url('../fonts/iconfont.ttf');
  85. }
  86. /* 修改选中前图标 */
  87. .mui-checkbox input[type=checkbox]:before {
  88. font-family: alFont;
  89. content: '\e63a';
  90. }
  91. /* 修改选中后图标 */
  92. .mui-checkbox input[type=checkbox]:checked:before {
  93. font-family: alFont;
  94. content: '\e639';
  95. }
  96. /* 修改选中前图标 */
  97. .mui-radio input[type=radio]:before {
  98. font-family: alFont;
  99. content: '\e63a';
  100. }
  101. /* 修改选中后图标 */
  102. .mui-radio input[type=radio]:checked:before {
  103. font-family: alFont;
  104. content: '\e639';
  105. }
  106. /* 复选框上下中间对齐 */
  107. .mui-checkbox input[type='checkbox'] {
  108. top: 7px;
  109. }
  110. /* 图层控制图层名称文字颜色 */
  111. .mui-checkbox label {
  112. font-size: 14px !important;
  113. color: rgb(69, 69, 69);
  114. }
  115. /* 复选框上下中间对齐 */
  116. .mui-radio input[type='radio'] {
  117. top: 7px;
  118. }
  119. /* 图层控制图层名称文字颜色 */
  120. .mui-radio label {
  121. font-size: 14px !important;
  122. color: rgb(0, 69, 0);
  123. }
  124. /* 3D地图中定位图层的按钮样式 */
  125. .cr-layer-control-location {
  126. display: inline-block;
  127. position: absolute;
  128. height: 26px;
  129. width: 26px;
  130. line-height: 26px;
  131. top: 6px;
  132. right: 50px;
  133. text-align: center;
  134. font-size: 18px !important;
  135. color: #ffffff;
  136. background: linear-gradient(to bottom, rgb(57, 124, 229) 50%, rgb(69, 69, 69) 50%);
  137. -webkit-background-clip: text;
  138. color: transparent;
  139. }
  140. /* 修改图层控制标题 */
  141. h5 {
  142. margin-top: 10px;
  143. margin-bottom: 10px;
  144. margin-left: 10px;
  145. font-size: 15px;
  146. color: black;
  147. font-weight: bold;
  148. }
  149. /* 底部弹出框的标题样式 */
  150. .mui-popover header {
  151. height: 40px;
  152. line-height: 40px;
  153. background-color: rgb(37, 109, 187) !important;
  154. font-size: 14px;
  155. font-weight: bold;
  156. border-top-right-radius: 10px;
  157. border-top-left-radius: 10px;
  158. text-align: center;
  159. color: rgb(255, 255, 255) !important;
  160. }
  161. /* 坐标查询弹框 */
  162. .wc-popover-coord-input {
  163. height: 180px !important;
  164. background-color: rgb(230, 230, 230) !important;
  165. border-top-right-radius: 10px !important;
  166. border-top-left-radius: 10px !important;
  167. }
  168. /* 案件查询底部弹出框 */
  169. .wc-popover-case {
  170. height: 260px !important;
  171. background-color: rgb(230, 230, 230) !important;
  172. border-top-right-radius: 10px !important;
  173. border-top-left-radius: 10px !important;
  174. }
  175. /* 行样式 */
  176. .wc-row {
  177. display: flex;
  178. flex-direction: row;
  179. align-items: center;
  180. margin-top: 10px;
  181. border-radius: 5px;
  182. margin-left: 10px;
  183. margin-right: 10px;
  184. width: calc(100% - 20px);
  185. }
  186. /* 输入行样式 */
  187. .wc-input-row {
  188. border: solid 1px rgba(41, 90, 254, 0.6) !important;
  189. height: 30px !important;
  190. }
  191. /* 输入行图标样式 */
  192. .wc-input-row span:nth-child(1) {
  193. color: rgb(255, 255, 255);
  194. font-size: 14px;
  195. margin-left: 10px;
  196. margin-right: 5px;
  197. background: linear-gradient(to bottom, rgb(0, 0, 244) 50%, rgb(205, 197, 0) 50%);
  198. -webkit-background-clip: text;
  199. color: transparent;
  200. }
  201. /* 输入行文字标签样式 */
  202. .wc-input-row span:nth-child(2) {
  203. color: rgb(41, 90, 254);
  204. font-size: 14px;
  205. margin-right: 10px;
  206. }
  207. /* 输入行输入容器样式 */
  208. .wc-input-row .mui-input-row {
  209. width: calc(100% - 100px) !important;
  210. margin: 0px !important;
  211. }
  212. /* 输入行输入框样式 */
  213. .wc-input-row .mui-input-row .mui-input {
  214. margin: 0px !important;
  215. background-color: rgba(255, 255, 255, 0) !important;
  216. border: solid 1px rgba(255, 255, 255, 0.0) !important;
  217. font-size: 14px !important;
  218. }
  219. /* 输入框提示文字样式 */
  220. .wc-input-row .mui-input-row .mui-input::placeholder{
  221. font-size: 14px;
  222. }
  223. /**
  224. *
  225. */
  226. /* 地图窗口样式 */
  227. .map3d {
  228. position: relative;
  229. background-color: rgb(128, 128, 128);
  230. height: calc(100vh - 0px);
  231. width: calc(100vw - 0px);
  232. }
  233. /* 底部信息栏样式 */
  234. .divButtomInfo {
  235. position: absolute;
  236. bottom: 10px;
  237. left: 10px;
  238. width: 160px;
  239. height: 110px;
  240. background-color: rgba(0, 0, 0, 0.45);
  241. border-radius: 5px;
  242. font-size: 12px;
  243. color: rgba(255, 255, 255, 1.0);
  244. display: flex;
  245. flex-direction: column;
  246. padding: 5px;
  247. }
  248. /* 3D 地图底部展示信息内部div样式 */
  249. .divButtomInfo>div {
  250. height: 25px;
  251. line-height: 25px;
  252. }
  253. /* 3D 地图底部展示信息内部div 内部标签标题样式 */
  254. .divButtomInfo>div>span:nth-child(1) {
  255. display: inline-block;
  256. width: 45px;
  257. text-align: right;
  258. margin-right: 5px;
  259. font-family: 'TTTGB-Medium';
  260. }
  261. /* 3D 地图底部展示信息内部div 内部标签值样式 */
  262. .divButtomInfo>div>span:nth-child(2) {
  263. color: yellowgreen;
  264. font-family: 'TTTGB-Medium';
  265. }
  266. /* 三维地图 气泡窗口 容器样式 */
  267. .cr-popup {
  268. display: flex;
  269. flex-direction: column;
  270. justify-content: center;
  271. align-items: center;
  272. width: 110px;
  273. height: 50px;
  274. border: 0px solid rgb(255, 0, 0);
  275. position: absolute;
  276. background-color: rgba(174, 186, 208, 0.65);
  277. border-radius: 10px;
  278. top: -300px;
  279. left: -500px;
  280. }
  281. /* 三维地图 气泡窗口 小箭头样式 */
  282. .cr-popup .arrow {
  283. position: absolute;
  284. width: 30px;
  285. height: 30px;
  286. bottom: -30px;
  287. left: 45px;
  288. }
  289. /* 三维地图 气泡窗口 小箭头样式 */
  290. .cr-popup .arrow * {
  291. display: block;
  292. border-width: 10px;
  293. position: absolute;
  294. border-style: dashed dashed dashed dashed;
  295. font-size: 0;
  296. line-height: 0;
  297. }
  298. /* 三维地图 气泡窗口 小箭头样式 */
  299. .cr-popup .arrow em {
  300. border-color: rgba(174, 186, 208, 0.65) transparent transparent transparent;
  301. }
  302. /* 案件查询按钮样式 */
  303. .wc-btn-case-query {
  304. position: relative;
  305. border-radius: 3px;
  306. margin-left: 3px;
  307. margin-right: 3px;
  308. height: 34px !important;
  309. background-color: rgb(115, 140, 238) !important;
  310. border: solid 0px rgb(255, 255, 255) !important;
  311. }
  312. /* 三维地图 气泡提示信息窗口 容器样式 */
  313. .cr-tooltip-popup {
  314. display: flex;
  315. flex-direction: column;
  316. justify-content: center;
  317. align-items: center;
  318. width: 180px;
  319. height: 40px;
  320. border: 0px solid rgb(255, 0, 0);
  321. position: absolute;
  322. background-color: rgba(174, 186, 208, 0.65);
  323. border-radius: 20px;
  324. top: 200px;
  325. left: 300px;
  326. }
  327. /* 三维地图 气泡提示信息窗口 标题样式 */
  328. .cr-tooltip-popup .title {
  329. color: rgb(255, 255, 255);
  330. font-size: 10px;
  331. font-family: 'TTTGB-Medium';
  332. }
  333. /* 三维地图 气泡提示信息窗口 上标样式 */
  334. .cr-tooltip-popup>div>sup {
  335. color: rgb(255, 255, 0);
  336. font-size: 5px !important;
  337. top: -6px;
  338. font-family: 'TTTGB-Medium';
  339. }
  340. /* 三维地图 气泡提示信息窗口 小箭头样式 */
  341. .cr-tooltip-popup .arrow {
  342. position: absolute;
  343. width: 30px;
  344. height: 30px;
  345. bottom: -30px;
  346. left: calc(calc(180px - 20px) / 2);
  347. /* 这很重要 主要是为了计算小箭头的位置 */
  348. }
  349. /* 三维地图 气泡提示信息窗口 竖线样式 */
  350. .cr-tooltip-popup .line {
  351. position: absolute;
  352. width: 30px;
  353. height: 50px;
  354. background-color: rgba(0, 0, 0, 0.0);
  355. bottom: -60px;
  356. border-right: dashed 2px rgb(255, 255, 0);
  357. left: calc(calc(180px) / 2 - 29px);
  358. }
  359. /* 三维地图 气泡提示信息窗口 底部小圆圈样式 */
  360. .cr-tooltip-popup .circle {
  361. position: absolute;
  362. width: 10px;
  363. height: 10px;
  364. background-color: rgba(0, 0, 0, 0.0);
  365. bottom: calc(-60px - 10px);
  366. left: calc(calc(180px - 10px) / 2);
  367. border: solid 2px rgb(255, 255, 0);
  368. border-radius: 10px;
  369. }
  370. /* 三维地图 气泡提示信息窗口 小箭头样式 */
  371. .cr-tooltip-popup .arrow * {
  372. display: block;
  373. border-width: 10px;
  374. position: absolute;
  375. border-style: dashed dashed dashed dashed;
  376. font-size: 0;
  377. line-height: 0;
  378. }
  379. /* 三维地图 气泡提示信息窗口 小箭头样式 */
  380. .cr-tooltip-popup .arrow em {
  381. border-color: rgba(174, 186, 208, 0.65) transparent transparent transparent;
  382. }
  383. /**
  384. * 三维地图标签样式
  385. */
  386. /* 三维标签 容器样式 */
  387. .jt-tooltip-popup {
  388. position: absolute;
  389. display: flex;
  390. flex-direction: column;
  391. justify-content: center;
  392. align-items: center;
  393. width: 120px;
  394. height: 90px;
  395. top: 200px;
  396. left: 300px;
  397. }
  398. /* 三维标签 容器样式 */
  399. .jt-tooltip-popup>div:nth-child(1) {
  400. border: 0px solid rgb(255, 0, 0);
  401. width: 100%;
  402. height: 30px;
  403. background-image: linear-gradient(to right, rgba(171, 108, 190, 0.65), rgba(138, 227, 196, 0.65));
  404. border-radius: 5px;
  405. border: dashed 1px rgb(255, 255, 0);
  406. display: flex;
  407. flex-direction: column;
  408. justify-content: center;
  409. align-items: center;
  410. line-height: 12px;
  411. }
  412. /* 三维标签 容器内部标题样式 */
  413. .jt-tooltip-popup .title {
  414. color: rgb(10, 10, 10);
  415. font-size: 10px;
  416. font-family: 'TTTGB-Medium';
  417. text-decoration: underline;
  418. }
  419. /* 三维标签 容器内部状态样式 */
  420. .jt-tooltip-popup .state {
  421. color: rgb(255, 255, 255);
  422. font-size: 10px;
  423. font-family: 'TTTGB-Medium';
  424. }
  425. /* 三维标签 容器内部面积样式 */
  426. .jt-tooltip-popup .area {
  427. color: rgb(120, 55, 190);
  428. font-size: 10px;
  429. font-family: 'TTTGB-Medium';
  430. margin-left: 5px;
  431. }
  432. /* 三维标签 竖线样式 */
  433. .jt-tooltip-popup>div:nth-child(2) {
  434. width: 1px;
  435. height: 50px;
  436. background-color: rgba(0, 0, 0, 0.0);
  437. border-right: dashed 2px rgb(255, 255, 0);
  438. }
  439. /* 三维标签 底部小圆圈样式 */
  440. .jt-tooltip-popup>div:nth-child(3) {
  441. width: 10px;
  442. height: 10px;
  443. background-color: rgba(0, 0, 0, 0.0);
  444. bottom: calc(-50px - 10px);
  445. left: calc(calc(180px - 10px) / 2);
  446. border: solid 2px rgb(255, 255, 0);
  447. border-radius: 10px;
  448. }