style.less 1.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. .geo-map-container {
  2. width: 100%;
  3. height: 100%;
  4. // max-height: 550px;
  5. overflow: hidden;
  6. border-top-left-radius: 12px;
  7. border-top-right-radius: 12px;
  8. .geo-map-body {
  9. height: calc(100% - 54px);
  10. padding: 0 20px;
  11. background-color: #061e3f;
  12. border-right: 1px solid rgba(61, 129, 240, 0.5);
  13. border-left: 1px solid rgba(61, 129, 240, 0.5);
  14. & > div {
  15. height: 100%;
  16. }
  17. }
  18. .geo-map-header {
  19. display: flex;
  20. background-color: #061e3f;
  21. & > div {
  22. &:first-child {
  23. flex: 1;
  24. height: 37px;
  25. border-top: 1px solid rgba(61, 129, 240, 0.5);
  26. border-left: 1px solid rgba(61, 129, 240, 0.5);
  27. border-top-left-radius: 12px;
  28. }
  29. &:last-child {
  30. flex: 1;
  31. height: 37px;
  32. border-top: 1px solid rgba(61, 129, 240, 0.5);
  33. border-right: 1px solid rgba(61, 129, 240, 0.5);
  34. border-top-right-radius: 12px;
  35. }
  36. &:nth-child(2) {
  37. flex: none;
  38. width: 326px;
  39. height: 37px;
  40. background: #061e3f url('~@/assets/images/screen/map-bg-header.png') no-repeat center 100%;
  41. }
  42. }
  43. }
  44. .geo-map-footer {
  45. display: flex;
  46. height: 17px;
  47. & > div {
  48. &:first-child {
  49. flex: none;
  50. width: 99px;
  51. height: 17px;
  52. background: url('~@/assets/images/screen/map-bg-lbt.png') no-repeat 100% 100%;
  53. }
  54. &:last-child {
  55. flex: none;
  56. width: 99px;
  57. height: 17px;
  58. background: url('~@/assets/images/screen/map-bg-rbt.png') no-repeat 100% 100%;
  59. }
  60. &:nth-child(2) {
  61. flex: 1;
  62. height: 17px;
  63. background: url('~@/assets/images/screen/map-bg-mbt.png') repeat-x;
  64. }
  65. }
  66. }
  67. }