<template>
|
<div class="container mx-auto px-4 py-8 bg-white" style="padding-top: 40px">
|
<!-- 面包屑导航 -->
|
<div class="mb-6 text-gray-500">
|
<el-breadcrumb separator="/">
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
<el-breadcrumb-item>联系我们</el-breadcrumb-item>
|
</el-breadcrumb>
|
</div>
|
<el-row class="w-full">
|
<el-col :span="10">
|
<div id="my_map"></div>
|
</el-col>
|
<el-col :span="12">
|
<!-- 联系信息卡片 -->
|
<div class="mx-auto bg-white rounded-lg ml-[6rem] py-10">
|
<h1 class="w-[487px] text-2xl font-bold mb-6 text-center text-[#222222] text-[24px] mb-[26px]">
|
上海义维流体科技有限公司</h1>
|
|
<div class="space-y-4 flex flex-col items-center justify-center gap-[10px]">
|
<div class="flex text-[16px] items-start justify-center w-[487px] line-height-16">
|
<div class="w-24 text-align-right">地 址：</div>
|
<div class="flex-1 text-ellipsis-style">上海市闵行区浦江镇江月路999号1幢615室</div>
|
</div>
|
|
<div class="flex text-[16px] items-start justify-center w-[487px] line-height-16">
|
<div class="w-24 text-align-right">邮 编：
|
</div>
|
<div class="flex-1 text-ellipsis-style">201108</div>
|
</div>
|
|
<div class="flex text-[16px] items-start justify-center w-[487px] line-height-16">
|
<div class="w-24 text-align-right">工作时间：</div>
|
<div class="flex-1 text-ellipsis-style">周一至周五 8:30 - 17:30</div>
|
</div>
|
|
<div class="flex text-[16px] items-start justify-center w-[487px] line-height-16">
|
<div class="w-24 text-align-right">售后电话：</div>
|
<div class="flex-1 text-ellipsis-style">021-34306562</div>
|
</div>
|
|
<div class="flex text-[16px] items-start justify-center w-[487px] line-height-16">
|
<div class="w-24 text-align-right">售后邮箱：</div>
|
<div class="flex-1 text-ellipsis-style">
|
<a href="mailto:eventech@163.com" class="text-blue-600 hover:text-blue-800">
|
eventech@163.com
|
</a>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { onMounted } from 'vue';
|
import { ElRow, ElCol } from 'element-plus';
|
import AMapLoader from '@amap/amap-jsapi-loader';
|
|
let map = null;
|
|
onMounted(() => {
|
AMapLoader.load({
|
key: '3627ed9deaac2622e26a7169f0c36b1b',
|
version: '2.0',
|
plugins: ['AMap.Geolocation'],
|
}).then((AMap) => {
|
map = new AMap.Map('my_map', {
|
zoom: 15,
|
center: [121.52, 31.09],
|
});
|
|
map.on('complete', () => {
|
console.log('地图加载成功')
|
let marker = new AMap.Marker({
|
position: [121.52, 31.09],
|
offset: new AMap.Pixel(0, 0),
|
anchor:'bottom-center',
|
});
|
|
// 自定义点标记内容
|
let markerContent = document.createElement("div");
|
// 点标记中的图标
|
let markerImg = document.createElement("img");
|
markerImg.className = "markerlnglat";
|
markerImg.src = "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png";
|
markerImg.setAttribute('width', '25px');
|
markerImg.setAttribute('height', '34px');
|
markerContent.appendChild(markerImg);
|
|
// 点标记中的文本
|
let markerSpan = document.createElement("span");
|
markerSpan.className = 'custom-marker';
|
markerSpan.innerHTML = "上海义维流体科技有限公司";
|
markerContent.appendChild(markerSpan);
|
|
marker.setContent(markerContent); //更新点标记内容
|
marker.setPosition([121.52, 31.09]); //更新点标记位置
|
|
|
map.add(marker)
|
})
|
});
|
})
|
</script>
|
|
<style scoped>
|
#my_map {
|
width: 100%;
|
height: 500px;
|
}
|
|
.line-height-16 {
|
line-height: 16px;
|
}
|
|
.text-ellipsis-style {
|
width: 100%;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
</style>
|
<style>
|
.custom-marker {
|
position: absolute;
|
top: 33px;
|
right: -70px;
|
color: #fff;
|
padding: 4px 10px;
|
box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);
|
white-space: nowrap;
|
font-size: 12px;
|
font-family: "";
|
background-color: #003a8f;
|
border-radius: 3px;
|
}
|
</style>
|
