diff --git a/src/components/servive-info.vue b/src/components/servive-info.vue
index 1a1fe09a4fcd6aed01fbaaaee65ace128ae47262..9ddbfd486da05db23fa8ce23cd36c78663c52168 100644
--- a/src/components/servive-info.vue
+++ b/src/components/servive-info.vue
@@ -1,8 +1,8 @@
 <template>
   <el-tabs
+    class="service_info_tab"
     type="border-card"
     v-model="serviceTabsActiveName"
-    @tab-click="handleClick"
     :stretch="true"
     style="margin-top: 20px;"
   >
@@ -545,23 +545,21 @@ export default {
       ],
     }, // 服务评价信息
   }),
-  methods: {
-    handleClick(tab, event) {
-      console.log(tab, event);
-    },
-  },
+  methods: {},
   mounted() {},
 };
 </script>
 
 <style scoped>
+.service_info_tab {
+  width: 70%;
+  margin: 0 auto;
+}
 .service_info {
-  width: 80%;
   min-height: 500px;
   padding: 10px 20px;
-  margin: 0 auto;
   box-sizing: border-box;
-  background-color: #eee;
+  /* background-color: #eee; */
 }
 .service_info .fwxqxx_item {
   margin-bottom: 20px;
diff --git a/src/pages/sjfwDetail.vue b/src/pages/sjfwDetail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ef98da6a55a5b9efc368d286e0769eea6ba8c797
--- /dev/null
+++ b/src/pages/sjfwDetail.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="com_ex">
+    <block-radius>
+      <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>
+
+      <Commodity :datas="datas" />
+
+      <servive-info></servive-info>
+    </block-radius>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import Commodity from "@/components/commodity.vue";
+import BlockRadius from "@/components/block-radius";
+import serviveInfo from "@/components/servive-info";
+export default {
+  components: {
+    Commodity,
+    BlockRadius,
+    serviveInfo,
+  },
+  data: () => ({
+    datas: {
+      productName: "地图视频融合服务",
+      providedBy: "北京比格数据",
+      releaseTime: "2020-03-12 18:31:12",
+      updated: "2020-03-12 18:31:12",
+      dataField: "经济建设",
+      serviceType: "综合应用服务",
+      resourceSummary:
+        "提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务",
+      openLevel: "共享",
+      views: "99999",
+      numberOfAcquisitions: "99999",
+      specifications:
+        "用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问",
+    },
+  }),
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style scoped>
+.com_ex {
+  margin-top: 100px;
+  padding: 20px;
+}
+</style>
diff --git a/src/pages/skfwDetail.vue b/src/pages/skfwDetail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ef98da6a55a5b9efc368d286e0769eea6ba8c797
--- /dev/null
+++ b/src/pages/skfwDetail.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="com_ex">
+    <block-radius>
+      <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>
+
+      <Commodity :datas="datas" />
+
+      <servive-info></servive-info>
+    </block-radius>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import Commodity from "@/components/commodity.vue";
+import BlockRadius from "@/components/block-radius";
+import serviveInfo from "@/components/servive-info";
+export default {
+  components: {
+    Commodity,
+    BlockRadius,
+    serviveInfo,
+  },
+  data: () => ({
+    datas: {
+      productName: "地图视频融合服务",
+      providedBy: "北京比格数据",
+      releaseTime: "2020-03-12 18:31:12",
+      updated: "2020-03-12 18:31:12",
+      dataField: "经济建设",
+      serviceType: "综合应用服务",
+      resourceSummary:
+        "提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务",
+      openLevel: "共享",
+      views: "99999",
+      numberOfAcquisitions: "99999",
+      specifications:
+        "用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问",
+    },
+  }),
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style scoped>
+.com_ex {
+  margin-top: 100px;
+  padding: 20px;
+}
+</style>
diff --git a/src/pages/zhyyfwDetail.vue b/src/pages/zhyyfwDetail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ef98da6a55a5b9efc368d286e0769eea6ba8c797
--- /dev/null
+++ b/src/pages/zhyyfwDetail.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="com_ex">
+    <block-radius>
+      <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>
+
+      <Commodity :datas="datas" />
+
+      <servive-info></servive-info>
+    </block-radius>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import Commodity from "@/components/commodity.vue";
+import BlockRadius from "@/components/block-radius";
+import serviveInfo from "@/components/servive-info";
+export default {
+  components: {
+    Commodity,
+    BlockRadius,
+    serviveInfo,
+  },
+  data: () => ({
+    datas: {
+      productName: "地图视频融合服务",
+      providedBy: "北京比格数据",
+      releaseTime: "2020-03-12 18:31:12",
+      updated: "2020-03-12 18:31:12",
+      dataField: "经济建设",
+      serviceType: "综合应用服务",
+      resourceSummary:
+        "提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务",
+      openLevel: "共享",
+      views: "99999",
+      numberOfAcquisitions: "99999",
+      specifications:
+        "用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问",
+    },
+  }),
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style scoped>
+.com_ex {
+  margin-top: 100px;
+  padding: 20px;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 81668ebf8bfa2b2b719833ce798946dcd43811bf..1dba5b27053a00e8170216e2984c0cc84f12918c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -24,6 +24,21 @@ export default new Router({
       component: () => import("@/pages/index"),
       redirect: "/workplace",
       children: [
+        {
+          path: "/sjfwDetail",
+          name: "sjfwDetail",
+          component: () => import("@/pages/sjfwDetail"),
+        }, // 数据服务详情
+        {
+          path: "/skfwDetail",
+          name: "skfwDetail",
+          component: () => import("@/pages/skfwDetail"),
+        }, // 时空服务详情
+        {
+          path: "/zhyyfwDetail",
+          name: "zhyyfwDetail",
+          component: () => import("@/pages/zhyyfwDetail"),
+        }, // 综合应用服务详情
         {
           path: "/workplace",
           name: "workPlace",