diff --git a/src/pages/sjfwDetail.vue b/src/pages/sjfwDetail.vue
index 05114e462eb3bb68b799ecd0a47f6933acb421f3..20d32a6291e7788ef25e88352bb0fd3cfc7ac929 100644
--- a/src/pages/sjfwDetail.vue
+++ b/src/pages/sjfwDetail.vue
@@ -24,51 +24,35 @@ export default {
     serviveContent,
   },
   data: () => ({
-    serviceData: {
-      name: "水路货物周转量情况",
-      openLevel: "共享",
-      viewCount: "99999",
-      acquireCount: "9999",
-      providedBy: "贵州省交通运输厅",
-      publishTime: "2020-03-12 18:31:12",
-      updatedTime: "2020-03-12 18:31:12",
-      dataField: "经济建设",
-      serviceType: ["专题数据服务", "企业专题数据服务"],
-      resourceSummary: "提供水路货物周转量排名和同比增长的专题数据服务",
-      specifications: [
-        {
-          name: "访问次数：20/日 访问量：100/日",
-          value: 0,
-          description:
-            "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行20次免费访问，获取100条数据记录。",
-        },
-        {
-          name: "访问次数：200/日 访问量：1000/日",
-          value: 1,
-          description:
-            "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行200次免费访问，获取1000条数据记录。",
-        },
-        {
-          name: "访问次数：无上限 访问量：无上限",
-          value: 2,
-          description:
-            "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行任意次免费访问，获取数据记录无上限。",
-        },
-      ],
-      ways: [
-        {
-          name: "按月购买",
-          value: 0,
-        },
-        {
-          name: "按年购买",
-          value: 1,
+    serviceData: null,
+  }),
+  methods: {
+    getDataFromApi(_url) {
+      return new Promise((resolve, reject) => {
+        this.$http
+          .get(_url)
+          .then((response) => {
+            resolve(response.body);
+          })
+          .catch(function(error) {
+            reject(error);
+          });
+      });
+    },
+    init() {
+      this.getDataFromApi(`/static/serviceDetail.json`).then(
+        ({ sjfw }) => {
+          this.serviceData = sjfw;
         },
-      ],
+        (error) => {
+          console.log(error);
+        }
+      );
     },
-  }),
-  methods: {},
-  mounted() {},
+  },
+  mounted() {
+    this.init();
+  },
 };
 </script>
 
diff --git a/src/pages/skfwDetail.vue b/src/pages/skfwDetail.vue
index fc5f44178ea8b026d930adf575958f60edbb3563..f6332582ec5f2caa9f6f060d6a57a7a6cfe6a271 100644
--- a/src/pages/skfwDetail.vue
+++ b/src/pages/skfwDetail.vue
@@ -24,54 +24,35 @@ export default {
     serviveContent,
   },
   data: () => ({
-    serviceData: {
-      img:
-        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-      name: "贵州应急资源地图微服务",
-      type: "Map Service",
-      openLevel: "共享",
-      viewCount: "99999",
-      acquireCount: "9999",
-      providedBy: "贵州省应急管理厅",
-      publishTime: "2020-03-12 18:31:12",
-      updatedTime: "2020-03-12 18:31:12",
-      dataField: "经济建设",
-      serviceType: ["时空云服务", "专题地图服务"],
-      resourceSummary: "提供贵州应急资源空间分布展示的专题地图服务，与MO地图合作进行地图资源的摘录和某新服务。",
-      specifications: [
-        {
-          name: "访问次数：20/日 访问量：100/日",
-          value: 0,
-          description:
-            "用户服务申请通过审核确认后，每日可对应急地图进行20次免费访问",
-        },
-        {
-          name: "访问次数：200/日 访问量：1000/日",
-          value: 1,
-          description:
-            "用户服务申请通过审核确认后，每日可对应急地图进行200次免费访问",
-        },
-        {
-          name: "访问次数：无上限 访问量：无上限",
-          value: 2,
-          description:
-            "用户服务申请通过审核确认后，每日可对应急地图进行免费访问",
-        },
-      ],
-      ways: [
-        {
-          name: "按月购买",
-          value: 0,
-        },
-        {
-          name: "按年购买",
-          value: 1,
+    serviceData: null,
+  }),
+  methods: {
+    getDataFromApi(_url) {
+      return new Promise((resolve, reject) => {
+        this.$http
+          .get(_url)
+          .then((response) => {
+            resolve(response.body);
+          })
+          .catch(function(error) {
+            reject(error);
+          });
+      });
+    },
+    init() {
+      this.getDataFromApi(`/static/serviceDetail.json`).then(
+        ({ skfw }) => {
+          this.serviceData = skfw;
         },
-      ],
+        (error) => {
+          console.log(error);
+        }
+      );
     },
-  }),
-  mounted() {},
-  methods: {},
+  },
+  mounted() {
+    this.init();
+  },
 };
 </script>
 
diff --git a/src/pages/yysdDetail.vue b/src/pages/yysdDetail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0a4114466a6cb3860f341289ddcaf222e7d634e2
--- /dev/null
+++ b/src/pages/yysdDetail.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="sevice_detail">
+    <div class="sevice_breadcrumb">
+      <el-breadcrumb separator="/" class="bread_crumb">
+        <el-breadcrumb-item>服务超市</el-breadcrumb-item>
+        <el-breadcrumb-item>数据服务</el-breadcrumb-item>
+        <el-breadcrumb-item>服务详情信息</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+
+    <servive-content :service-data="serviceData"></servive-content>
+
+    <servive-info></servive-info>
+  </div>
+</template>
+
+<script>
+import serviveInfo from "@/components/servive-info";
+import serviveContent from "@/components/servive-content";
+
+export default {
+  components: {
+    serviveInfo,
+    serviveContent,
+  },
+  data: () => ({
+    serviceData: null,
+  }),
+  methods: {
+    getDataFromApi(_url) {
+      return new Promise((resolve, reject) => {
+        this.$http
+          .get(_url)
+          .then((response) => {
+            resolve(response.body);
+          })
+          .catch(function(error) {
+            reject(error);
+          });
+      });
+    },
+    init() {
+      this.getDataFromApi(`/static/serviceDetail.json`).then(
+        ({ yysd }) => {
+          this.serviceData = yysd;
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
+</script>
+
+<style scoped>
+.sevice_detail {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+.sevice_breadcrumb > .el-breadcrumb {
+  line-height: 42px;
+}
+</style>
diff --git a/src/pages/zhyyfwDetail.vue b/src/pages/zhyyfwDetail.vue
index 774781c0e16cd9e28d518379f19fd441caf0e47b..e002ea2a4c442fc57820c4379a2dc83177a8291b 100644
--- a/src/pages/zhyyfwDetail.vue
+++ b/src/pages/zhyyfwDetail.vue
@@ -24,53 +24,35 @@ export default {
     serviveContent,
   },
   data: () => ({
-    serviceData: {
-      img:
-        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-      name: "地图视频融合服务",
-      openLevel: "共享",
-      viewCount: "99999",
-      acquireCount: "9999",
-      providedBy: "北京比格数据",
-      publishTime: "2020-03-12 18:31:12",
-      updatedTime: "2020-03-12 18:31:12",
-      dataField: "经济建设",
-      serviceType: ["综合应用服务"],
-      resourceSummary: "提供视频监控的空间分布展示和视频监控直播的服务，MOUMOU监控服务和直播服务的新服务。",
-      specifications: [
-        {
-          name: "访问次数：20/日 访问量：100/日",
-          value: 0,
-          description:
-            "用户服务申请通过审核确认后，每日可对应急地图进行20次免费访问",
-        },
-        {
-          name: "访问次数：200/日 访问量：1000/日",
-          value: 1,
-          description:
-            "用户服务申请通过审核确认后，每日可对应急地图进行200次免费访问",
-        },
-        {
-          name: "访问次数：无上限 访问量：无上限",
-          value: 2,
-          description:
-            "用户服务申请通过审核确认后，每日可对应急地图进行免费访问",
-        },
-      ],
-      ways: [
-        {
-          name: "按月购买",
-          value: 0,
-        },
-        {
-          name: "按年购买",
-          value: 1,
+    serviceData: null,
+  }),
+  methods: {
+    getDataFromApi(_url) {
+      return new Promise((resolve, reject) => {
+        this.$http
+          .get(_url)
+          .then((response) => {
+            resolve(response.body);
+          })
+          .catch(function(error) {
+            reject(error);
+          });
+      });
+    },
+    init() {
+      this.getDataFromApi(`/static/serviceDetail.json`).then(
+        ({ zhyyfw }) => {
+          this.serviceData = zhyyfw;
         },
-      ],
+        (error) => {
+          console.log(error);
+        }
+      );
     },
-  }),
-  mounted() {},
-  methods: {},
+  },
+  mounted() {
+    this.init();
+  },
 };
 </script>
 
diff --git a/src/router/index.js b/src/router/index.js
index 2f6c1b061866b72d6b597ac4cfca8ff192e7e02f..c26d8d1573cc7641f82f7a6c1f2dd2277374c9be 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -97,6 +97,11 @@ export default new Router({
           name: "zhyyfwDetail",
           component: () => import("@/pages/zhyyfwDetail"),
         }, // 综合应用服务详情
+        {
+          path: "/yysdDetail",
+          name: "yysdDetail",
+          component: () => import("@/pages/yysdDetail"),
+        }, // 应用详情
         {
           path: "/workplace",
           name: "workPlace",
diff --git a/static/serviceDetail.json b/static/serviceDetail.json
new file mode 100644
index 0000000000000000000000000000000000000000..1375346a8f975491cd807009c5f8458a36351dcd
--- /dev/null
+++ b/static/serviceDetail.json
@@ -0,0 +1,161 @@
+{
+  "sjfw": {
+    "name": "水路货物周转量情况",
+    "openLevel": "共享",
+    "viewCount": "99999",
+    "acquireCount": "9999",
+    "providedBy": "贵州省交通运输厅",
+    "publishTime": "2020-03-12 18:31:12",
+    "updatedTime": "2020-03-12 18:31:12",
+    "dataField": "经济建设",
+    "serviceType": ["专题数据服务", "企业专题数据服务"],
+    "resourceSummary": "提供水路货物周转量排名和同比增长的专题数据服务",
+    "specifications": [
+      {
+        "name": "访问次数：20/日 访问量：100/日",
+        "value": 0,
+        "description": "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行20次免费访问，获取100条数据记录。"
+      },
+      {
+        "name": "访问次数：200/日 访问量：1000/日",
+        "value": 1,
+        "description": "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行200次免费访问，获取1000条数据记录。"
+      },
+      {
+        "name": "访问次数：无上限 访问量：无上限",
+        "value": 2,
+        "description": "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行任意次免费访问，获取数据记录无上限。"
+      }
+    ],
+    "ways": [
+      {
+        "name": "按月购买",
+        "value": 0
+      },
+      {
+        "name": "按年购买",
+        "value": 1
+      }
+    ]
+  },
+  "skfw": {
+    "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+    "name": "贵州应急资源地图微服务",
+    "type": "Map Service",
+    "openLevel": "共享",
+    "viewCount": "99999",
+    "acquireCount": "9999",
+    "providedBy": "贵州省应急管理厅",
+    "publishTime": "2020-03-12 18:31:12",
+    "updatedTime": "2020-03-12 18:31:12",
+    "dataField": "经济建设",
+    "serviceType": ["时空云服务", "专题地图服务"],
+    "resourceSummary": "提供贵州应急资源空间分布展示的专题地图服务，与MO地图合作进行地图资源的摘录和某新服务。",
+    "specifications": [
+      {
+        "name": "访问次数：20/日 访问量：100/日",
+        "value": 0,
+        "description": "用户服务申请通过审核确认后，每日可对应急地图进行20次免费访问"
+      },
+      {
+        "name": "访问次数：200/日 访问量：1000/日",
+        "value": 1,
+        "description": "用户服务申请通过审核确认后，每日可对应急地图进行200次免费访问"
+      },
+      {
+        "name": "访问次数：无上限 访问量：无上限",
+        "value": 2,
+        "description": "用户服务申请通过审核确认后，每日可对应急地图进行免费访问"
+      }
+    ],
+    "ways": [
+      {
+        "name": "按月购买",
+        "value": 0
+      },
+      {
+        "name": "按年购买",
+        "value": 1
+      }
+    ]
+  },
+  "zhyyfw": {
+    "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+    "name": "地图视频融合服务",
+    "openLevel": "共享",
+    "viewCount": "99999",
+    "acquireCount": "9999",
+    "providedBy": "北京比格数据",
+    "publishTime": "2020-03-12 18:31:12",
+    "updatedTime": "2020-03-12 18:31:12",
+    "dataField": "经济建设",
+    "serviceType": ["综合应用服务"],
+    "resourceSummary": "提供视频监控的空间分布展示和视频监控直播的服务，MOUMOU监控服务和直播服务的新服务。",
+    "specifications": [
+      {
+        "name": "访问次数：20/日 访问量：100/日",
+        "value": 0,
+        "description": "用户服务申请通过审核确认后，每日可对应急地图进行20次免费访问"
+      },
+      {
+        "name": "访问次数：200/日 访问量：1000/日",
+        "value": 1,
+        "description": "用户服务申请通过审核确认后，每日可对应急地图进行200次免费访问"
+      },
+      {
+        "name": "访问次数：无上限 访问量：无上限",
+        "value": 2,
+        "description": "用户服务申请通过审核确认后，每日可对应急地图进行免费访问"
+      }
+    ],
+    "ways": [
+      {
+        "name": "按月购买",
+        "value": 0
+      },
+      {
+        "name": "按年购买",
+        "value": 1
+      }
+    ]
+  },
+  "yysd": {
+    "name": "mapvideos V1.0",
+    "openLevel": "共享",
+    "viewCount": "99999",
+    "acquireCount": "9999",
+    "providedBy": "北京比格数据",
+    "publishTime": "2020-03-12 18:31:12",
+    "updatedTime": "2020-03-12 18:31:12",
+    "dataField": "经济建设",
+    "serviceType": ["综合应用服务"],
+    "resourceSummary": "提供视频监控的空间分布展示和视频监控直播的服务，MOUMOU监控服务和直播服务的新服务。",
+    "specifications": [
+      {
+        "name": "访问次数：20/日 访问量：100/日",
+        "value": 0,
+        "description": "用户服务申请通过审核确认后，每日可对应急地图进行20次免费访问"
+      },
+      {
+        "name": "访问次数：200/日 访问量：1000/日",
+        "value": 1,
+        "description": "用户服务申请通过审核确认后，每日可对应急地图进行200次免费访问"
+      },
+      {
+        "name": "访问次数：无上限 访问量：无上限",
+        "value": 2,
+        "description": "用户服务申请通过审核确认后，每日可对应急地图进行免费访问"
+      }
+    ],
+    "ways": [
+      {
+        "name": "按月购买",
+        "value": 0
+      },
+      {
+        "name": "按年购买",
+        "value": 1
+      }
+    ]
+  }
+}