add pages

src/components/servive-info.vue

 <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;

src/pages/sjfwDetail.vue

+<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>

src/pages/skfwDetail.vue

+<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>

src/pages/zhyyfwDetail.vue

+<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>

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",