引入百度地图组件

package.json

@@ -26,6 +26,7 @@
     "qrcodejs2": "0.0.2",
     "v-clipboard": "^2.2.2",
     "vue": "^2.6.11",
+    "vue-baidu-map": "^0.21.22",
     "vue-router": "^3.1.6",
     "vuex": "^3.1.3",
     "wangeditor": "^3.1.1",

src/main.js

@@ -11,6 +11,13 @@ import "bootstrap/dist/js/bootstrap.min.js";
 import "./plugins/element.js";
 import "./plugins/qrcode.js";
 import "./assets/css/element-variables.scss";
+
+// 百度地图
+import BaiduMap from 'vue-baidu-map'
+Vue.use(BaiduMap, {
+  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
+  ak: 'EoRpk2HWln2YKTEYYH5wutFX'
+})
 // 公共样式、布局样式
 
 // 主题色调修改在assets/_style.scss  修改里面的变量即可

src/views/Org/Departments.vue

@@ -3,47 +3,47 @@
     <div class="guide-msg container">
       <div class="msg-cont">
         <div class="nsjg">
-          <cate :father="bgsCate"></cate>
+          <Title :father="bgsTitle"></Title>
           <p>承担编码中心日常运行管理、政策研究、相关法律事务等工作，承担文秘、档案、保密、督办、安保及后勤工作。</p>
         </div>
         <div class="nsjg">
-          <cate :father="bmglbCate"></cate>
+          <Title :father="bmglbTitle"></Title>
           <p>承担对全国商品条码系统成员的注册、续展、注销等业务管理工作，开展对地方分中心（办事处）业务方面的指导、管理及考核相关工作，开展编码管理规章制度研究和制修订等工作。</p>
         </div>
         <div class="nsjg">
-          <cate :father="jsyjbCate"></cate>
+          <Title :father="jsyjbTitle"></Title>
           <p>承担支撑物品编码事业发展的基础性、前瞻性技术研究，开展全球统一标识系统技术体系、物品编码技术、物联网技术、二维码技术、物流与电子商务等方面标准化及应用研究工作，承担编码中心科研管理工作，承担全国物品编码标准化技术委员会秘书处工作和全国物流信息管理标准化技术委员会秘书处工作。</p>
         </div>
         <div class="nsjg">
-          <cate :father="yjtgbCate"></cate>
+          <Title :father="yjtgbTitle"></Title>
           <p>负责对物品编码相关工作的宣传和应用推广，承担与政府部门、行业组织及企业的沟通联络工作，负责全球统一标识系统在各行业、领域的推广应用，负责编码中心国际交流合作与外事工作。</p>
         </div>
         <div class="nsjg">
-          <cate :father="xxhbCate"></cate>
+          <Title :father="xxhbTitle"></Title>
           <p>负责编码中心信息化工作的统一管理；负责信息化相关的采购工作；负责编码中心网站、公共信息系统、基础数据库、数据中心等公共基础设施的建设、管理与维护工作；负责编码中心网络安全保障与网络保密管理工作；负责信息化领域的技术跟踪与研究工作。</p>
         </div>
         <div class="nsjg">
-          <cate :father="cpkfyybCate"></cate>
+          <Title :father="cpkfyybTitle"></Title>
           <p>承担物品编码与自动识别技术研究成果转化，搭建零售商与供应商沟通合作平台，承担商品信息服务产品的开发与市场化运营工作，开展商品相关信息服务和增值服务工作。</p>
         </div>
         <div class="nsjg">
-          <cate :father="cyfwbCate"></cate>
+          <Title :father="cyfwbTitle"></Title>
           <p>承担商品条码工作服务体系建立与维护工作，指导和监督地方分中心（办事处）服务清单执行情况，开展条码及自动识别技术教育培训和咨询工作。</p>
         </div>
         <div class="nsjg">
-          <cate :father="zljcbCate"></cate>
+          <Title :father="zljcbTitle"></Title>
           <p>统一组织管理全国商品条码质量服务工作，实施服务性检验及市场调查，负责条码、射频识别等检测技术研究及标准化工作，开展条码、射频识别相关检验服务及技术培训。</p>
         </div>
         <div class="nsjg">
-          <cate :father="rlzybCate"></cate>
+          <Title :father="rlzybTitle"></Title>
           <p>承担编码中心人力资源规划、管理与人才队伍建设工作，承担干部任免、岗位设置、工资管理、教育培训、职称管理及退休人员管理等工作。</p>
         </div>
         <div class="nsjg">
-          <cate :father="cwbCate"></cate>
+          <Title :father="cwbTitle"></Title>
           <p>承担条码收费、财务核算、预决算、内部审计、国有资产管理、分支机构条码经营管理等工作，承担科研项目经费管理工作。</p>
         </div>
         <div class="nsjg">
-          <cate :father="dwbgsCate"></cate>
+          <Title :father="dwbgsTitle"></Title>
           <p>承担党委日常工作，负责党务、纪检监察、工青妇等工作。</p>
         </div>
       </div>
@@ -51,55 +51,55 @@
   </div>
 </template>
 <script>
-import cate from "../comps/cate.vue";
+import Title from "../comps/title.vue";
 
 export default {
   components: {
-    cate,
+    Title,
   },
   data() {
     return {
-      bgsCate: {
+      bgsTitle: {
         name: "办公室",
         ico: "",
       },
-      bmglbCate: {
+      bmglbTitle: {
         name: "编码管理部",
         ico: "",
       },
-      jsyjbCate: {
+      jsyjbTitle: {
         name: "技术研究部",
         ico: "",
       },
-      yjtgbCate: {
+      yjtgbTitle: {
         name: "应用推广部",
         ico: "",
       },
-      xxhbCate: {
+      xxhbTitle: {
         name: "信息化部",
         ico: "",
       },
-      cpkfyybCate: {
+      cpkfyybTitle: {
         name: "产品开发运营部",
         ico: "",
       },
-      cyfwbCate: {
+      cyfwbTitle: {
         name: "成员服务部",
         ico: "",
       },
-      zljcbCate: {
+      zljcbTitle: {
         name: "质量检测部",
         ico: "",
       },
-      rlzybCate: {
+      rlzybTitle: {
         name: "人力资源部",
         ico: "",
       },
-      cwbCate: {
+      cwbTitle: {
         name: "产品开发运营部",
         ico: "",
       },
-      dwbgsCate: {
+      dwbgsTitle: {
         name: "党委办公室（纪委办公室）",
         ico: "",
       },

src/views/Org/ISO/Ideology.vue

 <template>
   <div class="guide">
-    <cate :father="lsspCate"></cate>
     <div class="guide-msg container">
+      
       <div class="msg-cont">
-        中国物品编码中心是统一组织、协调、管理我国商品条码、物品编码与自动识别技术的专门机构，隶属于国家市场监督管理总局，1988年成立，1991年4月代表我国加入国际物品编码组织（GS1），负责推广国际通用的、开放的、跨行业的全球统一标识系统和供应链管理标准，向社会提供公共服务平台和标准化解决方案。
+        <Title :father="lsspTitle"></Title>
+        <p>中国物品编码中心是统一组织、协调、管理我国商品条码、物品编码与自动识别技术的专门机构，隶属于国家市场监督管理总局，1988年成立，1991年4月代表我国加入国际物品编码组织（GS1），负责推广国际通用的、开放的、跨行业的全球统一标识系统和供应链管理标准，向社会提供公共服务平台和标准化解决方案。</p>
       </div>
     </div>
   </div>
 </template>
 <script>
-import cate from "../../comps/cate.vue";
+import Title from "../../comps/title.vue";
 
 export default {
   components: {
-    cate,
+    Title,
   },
   data() {
     return {
-      lsspCate: {
+      lsspTitle: {
         name: "质量管理体系",
         ico: "",
       },
@@ -39,6 +40,11 @@ export default {
     .msg-cont {
       line-height: 23px;
       color: rgba(102, 102, 102, 1);
+      p {
+        margin-left: 15px;
+        text-indent: 32px;
+        line-height: 28px;
+      }
     }
   }
 }

src/views/Org/ISO/Policy.vue

 <template>
   <div class="guide">
-    <cate :father="lsspCate"></cate>
     <div class="guide-msg container">
       <div class="msg-cont">
+        <Title :father="lsspTitle"></Title>
+        <p>
           中国物品编码中心是统一组织、协调、管理我国商品条码、物品编码与自动识别技术的专门机构，隶属于国家市场监督管理总局，1988年成立，1991年4月代表我国加入国际物品编码组织（GS1），负责推广国际通用的、开放的、跨行业的全球统一标识系统和供应链管理标准，向社会提供公共服务平台和标准化解决方案。
+        </p>
       </div>
     </div>
   </div>
 </template>
 <script>
-import cate from "../../comps/cate.vue";
+import Title from "../../comps/title.vue";
 
 export default {
   components: {
-    cate,
+    Title,
   },
   data() {
     return {
-      lsspCate: {
+      lsspTitle: {
         name: "质量方针",
         ico: "",
       },
@@ -33,12 +35,16 @@ export default {
     font-size: 14px;
     .msg-title {
       color: rgba(0, 121, 158, 1);
-
       margin-bottom: 20px;
     }
     .msg-cont {
       line-height: 23px;
       color: rgba(102, 102, 102, 1);
+      p {
+        margin-left: 15px;
+        text-indent: 32px;
+        line-height: 28px;
+      }
     }
   }
 }

src/views/Org/Intro.vue

@@ -35,43 +35,77 @@
         </p>
         <p>（九）承办国家市场监督管理总局交办的其他工作。</p>
         <div class="zzjg">
-          <cate :father="zzjgCate"></cate>
+          <Title :father="zzjgTitle"></Title>
           <img src="../../assets/image/home/zzjg-tp.jpg" alt="" />
         </div>
         <div class="zzjg">
-          <cate :father="lxdzCate"></cate>
+          <Title :father="lxdzTitle"></Title>
           <p>北京东城区安外大街东侧138号皇城国际中心B座3-6层 （邮编：100011)</p>
         </div>
         <div class="map">
-          <cate :father="mapCate"></cate>
+          <Title :father="mapTitle"></Title>
+          <baidu-map class="bm-view" :center="map.center" :zoom="map.zoom" :scroll-wheel-zoom="true" >
+            <bm-overview-map
+              anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
+              :isOpen="true"
+            ></bm-overview-map>
+            <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
+            <bm-label
+              :content="map.label"
+              :position="map.center"
+              :labelStyle="{ borderColor: 'black' }"
+              :offset="{ width:-48 }"
+              @click="lookDetail"
+            />
+            <bm-info-window
+              :position="map.center"
+              :show="map.show"
+              @close="infoWindowClose"
+            >
+              <div>中国物品编码中心</div>
+              <div>地址：北京市东城区安定门外大街138号皇城国际大厦B座3-6层</div>
+              <div>邮编：100011</div>
+            </bm-info-window>
+          </baidu-map>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script>
-import cate from "../comps/cate.vue";
+import Title from "../comps/title.vue";
 
 export default {
   components: {
-    cate,
+    Title,
   },
   data() {
     return {
-      zzjgCate: {
+      zzjgTitle: {
         name: "组织架构：",
-        ico: "",
       },
-      lxdzCate: {
+      lxdzTitle: {
         name: "联系地址：",
-        ico: "",
       },
-      mapCate: {
+      mapTitle: {
         name: "乘车及驾车路线图：",
-        ico: "",
+      },
+      map: {
+        label: '中国物品编码中心',
+        center: { lng: 116.415256, lat: 39.961205 },
+        zoom: 16,
+        show: false,
       },
     };
   },
+  methods: {
+    lookDetail() {
+      this.map.show = true;
+    },
+    infoWindowClose() {
+      this.map.show = false;
+    },
+  },
 };
 </script>
 <style lang="scss">
@@ -98,6 +132,13 @@ export default {
           width: 100%;
         }
       }
+      .map {
+        width: 100%;
+        .bm-view {
+          width: 100%;
+          height: 500px;
+        }
+      }
     }
   }
 }

src/views/comps/title.vue

+<template>
+  <div class="zxcxgj-title">
+    <span></span>{{ father.name }}
+  </div>
+</template>
+<script>
+export default {
+  props: ["father"],
+};
+</script>
+<style lang="scss">
+.zxcxgj-title {
+  font-size: 16px;
+  color: #04408d;
+  border-bottom: 1px solid #c5d8ee;
+  padding: 14px 0;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  span {
+    display: inline-block;
+    width: 4px;
+    height: 4px;
+    background: #f26335;
+    border-radius: 50%;
+    margin-right: 10px;
+  }
+}
+</style>
\ No newline at end of file