|
|
@@ -5,7 +5,39 @@
|
|
|
<dividerIndex :info="{ title: '联系我们', enTitle: 'Contact Us' }" />
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="infoList">
|
|
|
- 1
|
|
|
+ <el-col :span="14" class="map">
|
|
|
+ <div id="container"></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" class="mapInfo">
|
|
|
+ <el-col :span="24" class="tabs">
|
|
|
+ <el-col :span="8" :class="['tabsList', item.id == tabAcitve ? 'tabAcitve' : '']"
|
|
|
+ v-for="(item, index) in tabList" :key="index" @click="tabChange(item)">
|
|
|
+ <span class="title">{{ item.title }}</span>
|
|
|
+ <span class="borderBottom"></span>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="mapList">
|
|
|
+ <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
|
|
|
+ <el-col :span="24" class="title">
|
|
|
+ {{ item.title }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="other">
|
|
|
+ <el-col :span="12" class="address">
|
|
|
+ <el-icon>
|
|
|
+ <LocationFilled color="#1C88FE" />
|
|
|
+ </el-icon>
|
|
|
+ 地址：{{ item.address }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="mobile">
|
|
|
+ <el-icon>
|
|
|
+ <PhoneFilled color="#1C88FE" />
|
|
|
+ </el-icon>
|
|
|
+ 联系电话：{{ item.mobile }}
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -13,9 +45,152 @@
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
// 基础
|
|
|
-import { ref } from 'vue'
|
|
|
+import { onMounted, onUnmounted, ref } from "vue";
|
|
|
+import AMapLoader from "@amap/amap-jsapi-loader";
|
|
|
+
|
|
|
import dividerIndex from '../../../components/windows/dividerIndex.vue'
|
|
|
|
|
|
+const map = ref();
|
|
|
+
|
|
|
+const tabList = ref([
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ title: '供水服务公司'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '2',
|
|
|
+ title: '二次供水'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '3',
|
|
|
+ title: '客服服务中心'
|
|
|
+ }
|
|
|
+])
|
|
|
+const tabAcitve = ref('1')
|
|
|
+/* 选项卡选择 */
|
|
|
+const tabChange = (event: { id: string }) => {
|
|
|
+ tabAcitve.value = event.id
|
|
|
+}
|
|
|
+
|
|
|
+/* */
|
|
|
+const list = ref([
|
|
|
+ {
|
|
|
+ title: '朝阳区供水服务分公司',
|
|
|
+ address: '建设街2778号',
|
|
|
+ mobile: '82828282'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '朝阳区供水服务分公司',
|
|
|
+ address: '建设街2778号',
|
|
|
+ mobile: '82828282'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '朝阳区供水服务分公司',
|
|
|
+ address: '建设街2778号',
|
|
|
+ mobile: '82828282'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '朝阳区供水服务分公司',
|
|
|
+ address: '建设街2778号',
|
|
|
+ mobile: '82828282'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '朝阳区供水服务分公司',
|
|
|
+ address: '建设街2778号',
|
|
|
+ mobile: '82828282'
|
|
|
+ }, {
|
|
|
+ title: '朝阳区供水服务分公司',
|
|
|
+ address: '建设街2778号',
|
|
|
+ mobile: '82828282'
|
|
|
+ }
|
|
|
+
|
|
|
+])
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ AMapLoader.load({
|
|
|
+ key: "a6970a58d4d2719b7cb3a5f738f82d31",
|
|
|
+ version: "2.0",
|
|
|
+ plugins: [],
|
|
|
+ })
|
|
|
+ .then((AMap) => {
|
|
|
+ const mapInfo = new AMap.Map("container", {
|
|
|
+ zoom: 14,
|
|
|
+ center: [125.323643, 43.816996],
|
|
|
+ });
|
|
|
+
|
|
|
+ const labelsLayer = new AMap.LabelsLayer({
|
|
|
+ zooms: [3, 20],
|
|
|
+ zIndex: 1000,
|
|
|
+ });
|
|
|
+ const icon = {
|
|
|
+ type: "image",
|
|
|
+ image: "/local.png",
|
|
|
+ size: [30, 30],
|
|
|
+ anchor: "center",
|
|
|
+ };
|
|
|
+ const labelMarker0 = new AMap.LabelMarker({
|
|
|
+ name: "标注",
|
|
|
+ position: [125.295471, 43.876446],
|
|
|
+ zIndex: 14,
|
|
|
+ rank: 1,
|
|
|
+ icon: icon,
|
|
|
+ text: {
|
|
|
+ content: "朝阳区供水分公司",
|
|
|
+ direction: "right",
|
|
|
+ offset: [-80, 25],
|
|
|
+ style: {
|
|
|
+ fontSize: 16,
|
|
|
+ fillColor: "#008000",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const labelMarker1 = new AMap.LabelMarker({
|
|
|
+ name: "标注",
|
|
|
+ position: [125.323643, 43.816996],
|
|
|
+ zIndex: 14,
|
|
|
+ rank: 1,
|
|
|
+ icon: icon,
|
|
|
+ text: {
|
|
|
+ content: "长春市人民政府",
|
|
|
+ direction: "right",
|
|
|
+ offset: [-80, 25],
|
|
|
+ style: {
|
|
|
+ fontSize: 16,
|
|
|
+ fillColor: "#008000",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const labelMarker2 = new AMap.LabelMarker({
|
|
|
+ name: "标注",
|
|
|
+ position: [125.322527, 43.80083],
|
|
|
+ zIndex: 14,
|
|
|
+ rank: 1,
|
|
|
+ icon: icon,
|
|
|
+ text: {
|
|
|
+ content: "钜城，华亿广场",
|
|
|
+ direction: "right",
|
|
|
+ offset: [-80, 25],
|
|
|
+ style: {
|
|
|
+ fontSize: 16,
|
|
|
+ fillColor: "#008000",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ labelsLayer.add([labelMarker0, labelMarker1, labelMarker2]);
|
|
|
+ mapInfo.add(labelsLayer);
|
|
|
+
|
|
|
+
|
|
|
+ map.value = mapInfo
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ map.value?.destroy();
|
|
|
+});
|
|
|
+
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
.main {
|
|
|
@@ -25,6 +200,154 @@ import dividerIndex from '../../../components/windows/dividerIndex.vue'
|
|
|
margin: 40px 0;
|
|
|
}
|
|
|
|
|
|
+ .infoList {
|
|
|
+ background-color: rgba(236, 248, 255);
|
|
|
+ height: 595px;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .map {
|
|
|
+ #container {
|
|
|
+ width: 100%;
|
|
|
+ height: 595px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mapInfo {
|
|
|
+ padding: 15px 20px;
|
|
|
+
|
|
|
+ .tabs {
|
|
|
+ display: flex;
|
|
|
+ height: 50px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+
|
|
|
+ .tabsList {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: rgb(102, 102, 102);
|
|
|
+ font-family: '黑体';
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 26px;
|
|
|
+ letter-spacing: 0px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .borderBottom {
|
|
|
+ display: inline-block;
|
|
|
+ width: 80%;
|
|
|
+ height: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabsList:hover {
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: rgb(25, 25, 26) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .borderBottom {
|
|
|
+ background-color: rgb(21, 134, 255);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabAcitve {
|
|
|
+ .title {
|
|
|
+ color: rgb(25, 25, 26) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .borderBottom {
|
|
|
+ background-color: rgb(21, 134, 255);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mapList {
|
|
|
+ height: calc(595px - 30px - 50px - 10px);
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .list {
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ padding: 12px 26px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: rgb(25, 25, 26);
|
|
|
+ font-family: '黑体';
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 23px;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ margin: 0 0 18px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .other {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .address {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ text-align: center;
|
|
|
+ color: rgb(25, 25, 26);
|
|
|
+ font-family: '黑体';
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 23px;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mobile {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ text-align: center;
|
|
|
+ color: rgb(25, 25, 26);
|
|
|
+ font-family: '黑体';
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 23px;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+/*修改滚动条样式*/
|
|
|
+div::-webkit-scrollbar {
|
|
|
+ width: 5px;
|
|
|
+ height: 5px;
|
|
|
+ /**/
|
|
|
+}
|
|
|
+
|
|
|
+div::-webkit-scrollbar-track {
|
|
|
+ background: transparent;
|
|
|
+ border-radius: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+div::-webkit-scrollbar-thumb {
|
|
|
+ background: rgb(21, 134, 255);
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+div::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: rgb(21, 134, 255);
|
|
|
+}
|
|
|
|
|
|
+div::-webkit-scrollbar-corner {
|
|
|
+ background: rgb(21, 134, 255);
|
|
|
}
|
|
|
</style>
|
