BaiduMapPage.css 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. /* BaiduMapPage.css */
  2. .baidu-map-page {
  3. height: 50vh;
  4. display: flex;
  5. flex-direction: column;
  6. font-family: 'Microsoft YaHei', sans-serif;
  7. }
  8. .map-header {
  9. background-color: #2c3e50;
  10. color: white;
  11. padding: 15px 20px;
  12. display: flex;
  13. justify-content: space-between;
  14. align-items: center;
  15. box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  16. }
  17. .map-header h1 {
  18. margin: 0;
  19. font-size: 1.5rem;
  20. }
  21. .search-box {
  22. display: flex;
  23. }
  24. .search-box input {
  25. padding: 8px 12px;
  26. border: none;
  27. border-radius: 4px 0 0 4px;
  28. width: 300px;
  29. font-size: 1rem;
  30. }
  31. .search-box button {
  32. padding: 8px 16px;
  33. background-color: #3498db;
  34. color: white;
  35. border: none;
  36. border-radius: 0 4px 4px 0;
  37. cursor: pointer;
  38. font-size: 1rem;
  39. }
  40. .search-box button:hover {
  41. background-color: #2980b9;
  42. }
  43. .map-container {
  44. display: flex;
  45. flex: 1;
  46. overflow: hidden;
  47. }
  48. .map-sidebar {
  49. width: 300px;
  50. background-color: #f8f9fa;
  51. padding: 20px;
  52. overflow-y: auto;
  53. border-right: 1px solid #e0e0e0;
  54. }
  55. .sidebar-section {
  56. margin-bottom: 25px;
  57. }
  58. .sidebar-section h3 {
  59. margin-top: 0;
  60. color: #2c3e50;
  61. border-bottom: 1px solid #ddd;
  62. padding-bottom: 8px;
  63. }
  64. .sidebar-section input {
  65. width: 100%;
  66. padding: 8px;
  67. margin-bottom: 10px;
  68. border: 1px solid #ddd;
  69. border-radius: 4px;
  70. box-sizing: border-box;
  71. }
  72. .sidebar-section button {
  73. width: 100%;
  74. padding: 10px;
  75. background-color: #3498db;
  76. color: white;
  77. border: none;
  78. border-radius: 4px;
  79. cursor: pointer;
  80. margin-bottom: 8px;
  81. font-size: 0.9rem;
  82. }
  83. .sidebar-section button:hover {
  84. background-color: #2980b9;
  85. }
  86. .sidebar-section ul {
  87. list-style-type: none;
  88. padding: 0;
  89. margin: 0;
  90. }
  91. .sidebar-section li {
  92. padding: 8px;
  93. border-bottom: 1px solid #eee;
  94. cursor: pointer;
  95. }
  96. .sidebar-section li:hover {
  97. background-color: #eef7ff;
  98. }
  99. .map-content {
  100. flex: 1;
  101. height: 100%;
  102. }
  103. .BMap_cpyCtrl {
  104. display: none;
  105. }
  106. .anchorBL {
  107. display: none;
  108. }