旅行地圖-佩秀測試 chienyen

千葉餐飲全台地圖導航

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #eaf6f6; margin: 0; padding: 20px; display: flex; justify-content: center; } /* 地圖容器設定：用來定位熱點 */ .map-container { position: relative; max-width: 800px; /* 可依你的圖片實際大小調整 */ width: 100%; } .map-container img { width: 100%; height: auto; display: block; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } /* 點擊熱點按鈕樣式 */ .hotspot { position: absolute; width: 30px; height: 30px; background-color: rgba(255, 0, 0, 0.5); /* 半透明紅色方便你對齊，設定好可改為 rgba(0,0,0,0) 隱藏 */ border-radius: 50%; cursor: pointer; transform: translate(-50%, -50%); /* 讓座標對齊中心點 */ transition: transform 0.2s, background-color 0.2s; } .hotspot:hover { transform: translate(-50%, -50%) scale(1.2); background-color: rgba(255, 0, 0, 0.8); } /* 彈出視窗 (Modal) 樣式 */ .modal-overlay { display: none; /* 預設隱藏 */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 1000; justify-content: center; align-items: center; } .modal-content { background-color: white; padding: 20px; border-radius: 12px; width: 90%; max-width: 400px; position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.3); text-align: center; } .close-btn { position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer; color: #666; } .close-btn:hover { color: #000; } .modal-image { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; margin-bottom: 15px; background-color: #eee; /* 圖片尚未載入時的底色 */ } .modal-title { margin: 0 0 10px 0; color: #333; } .modal-desc { color: #666; font-size: 14px; margin-bottom: 10px; } .modal-address { color: #2c3e50; font-weight: bold; font-size: 14px; }

門店名稱