|
|
@@ -1,353 +1,352 @@
|
|
|
<template>
|
|
|
- <el-row class="main animate__animated animate__backInRight">
|
|
|
- <el-col :span="24" class="info">
|
|
|
- <el-col :span="24" class="top">
|
|
|
- <dividerIndex :info="{ title: '联系我们', enTitle: 'Contact Us' }" />
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" class="infoList">
|
|
|
- <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-row class="main animate__animated animate__backInRight">
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <el-col :span="24" class="top">
|
|
|
+ <dividerIndex :info="{ title: '联系我们', enTitle: 'Contact Us' }" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="infoList">
|
|
|
+ <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-row>
|
|
|
+ </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>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
// 基础
|
|
|
-import { onMounted, onUnmounted, ref } from "vue";
|
|
|
-import AMapLoader from "@amap/amap-jsapi-loader";
|
|
|
+import { onMounted, onUnmounted, ref } from 'vue'
|
|
|
+import AMapLoader from '@amap/amap-jsapi-loader'
|
|
|
|
|
|
import dividerIndex from '../../../components/windows/dividerIndex.vue'
|
|
|
|
|
|
-const map = ref();
|
|
|
+const map = ref()
|
|
|
|
|
|
const tabList = ref([
|
|
|
- {
|
|
|
- id: '1',
|
|
|
- title: '供水服务公司'
|
|
|
- },
|
|
|
- {
|
|
|
- id: '2',
|
|
|
- title: '二次供水'
|
|
|
- },
|
|
|
- {
|
|
|
- id: '3',
|
|
|
- title: '客服服务中心'
|
|
|
- }
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ title: '供水服务公司',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '2',
|
|
|
+ title: '二次供水',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '3',
|
|
|
+ title: '客服服务中心',
|
|
|
+ },
|
|
|
])
|
|
|
const tabAcitve = ref('1')
|
|
|
/* 选项卡选择 */
|
|
|
const tabChange = (event: { id: string }) => {
|
|
|
- tabAcitve.value = event.id
|
|
|
+ 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'
|
|
|
- }
|
|
|
-
|
|
|
+ {
|
|
|
+ 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: [],
|
|
|
+ AMapLoader.load({
|
|
|
+ key: 'a6970a58d4d2719b7cb3a5f738f82d31',
|
|
|
+ version: '2.0',
|
|
|
+ plugins: [],
|
|
|
+ })
|
|
|
+ .then((AMap) => {
|
|
|
+ const mapInfo = new AMap.Map('container', {
|
|
|
+ zoom: 14,
|
|
|
+ center: [125.323643, 43.816996],
|
|
|
})
|
|
|
- .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();
|
|
|
-});
|
|
|
+ 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 {
|
|
|
- padding: 0 17%;
|
|
|
-
|
|
|
- .top {
|
|
|
- margin: 40px 0;
|
|
|
+ padding: 0 17%;
|
|
|
+
|
|
|
+ .top {
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .infoList {
|
|
|
- background-color: rgba(236, 248, 255);
|
|
|
- height: 595px;
|
|
|
- overflow: hidden;
|
|
|
+ .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;
|
|
|
-
|
|
|
- .map {
|
|
|
- #container {
|
|
|
- width: 100%;
|
|
|
- height: 595px;
|
|
|
- }
|
|
|
+ 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;
|
|
|
}
|
|
|
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
+ .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;
|
|
|
- /**/
|
|
|
+ width: 5px;
|
|
|
+ height: 5px;
|
|
|
+ /**/
|
|
|
}
|
|
|
|
|
|
div::-webkit-scrollbar-track {
|
|
|
- background: transparent;
|
|
|
- border-radius: 2px;
|
|
|
+ background: transparent;
|
|
|
+ border-radius: 2px;
|
|
|
}
|
|
|
|
|
|
div::-webkit-scrollbar-thumb {
|
|
|
- background: rgb(21, 134, 255);
|
|
|
- border-radius: 10px;
|
|
|
+ background: rgb(21, 134, 255);
|
|
|
+ border-radius: 10px;
|
|
|
}
|
|
|
|
|
|
div::-webkit-scrollbar-thumb:hover {
|
|
|
- background: rgb(21, 134, 255);
|
|
|
+ background: rgb(21, 134, 255);
|
|
|
}
|
|
|
|
|
|
div::-webkit-scrollbar-corner {
|
|
|
- background: rgb(21, 134, 255);
|
|
|
+ background: rgb(21, 134, 255);
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
