diff --git a/src/assets/imgs/score_bg.png b/src/assets/imgs/score_bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..03424edd8d320076523ab50007d3b2f8df3d6c6f
Binary files /dev/null and b/src/assets/imgs/score_bg.png differ
diff --git a/src/components/comments-list.vue b/src/components/comments-list.vue
new file mode 100644
index 0000000000000000000000000000000000000000..869d7f57cbe18c6c633b39bc3805a718f521e8fb
--- /dev/null
+++ b/src/components/comments-list.vue
@@ -0,0 +1,87 @@
+<template>
+  <ul class="comments_list">
+    <li
+      class="comment_card"
+      v-for="(item, index) in data"
+      :key="'comment_' + index"
+    >
+      <div class="comment-left">
+        <el-avatar :size="60" fit="cover" :src="item.img" />
+      </div>
+      <div class="comment-right">
+        <p class="comment-user_name" v-text="item.name"></p>
+        <div class="commnet-rate">
+          <el-rate
+            :colors="['#e69232', '#e69232', '#e69232']"
+            :value="item.star"
+            disabled
+            score-template="{value}"
+          >
+          </el-rate>
+        </div>
+        <p class="comment-description" v-text="item.description"></p>
+        <p class="comment-time" v-text="item.time"></p>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      required: true,
+    },
+  },
+  data: () => ({}),
+  methods: {},
+  created() {},
+};
+</script>
+
+<style scoped>
+.comment_card {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding: 25px 0;
+  border-top: 2px solid #f4f7fc;
+}
+.comment_card:last-child {
+  border-bottom: 2px solid #f4f7fc;
+}
+.comment-left {
+  flex-shrink: 0;
+  padding-top: 5px;
+  margin-right: 27px;
+}
+.comment-right {
+  font-size: 16px;
+  line-height: 25px;
+}
+.comment-right > .comment-user_name {
+  padding-left: 3px;
+  color: #58617a;
+}
+.comment-right > .comment-description {
+  padding-left: 3px;
+  color: #242c43;
+  margin-top: 10px;
+}
+.comment-right > .comment-time {
+  padding-left: 3px;
+  color: #8890a7;
+  margin-top: 3px;
+}
+</style>
+
+<style>
+.comment-right > .commnet-rate .el-rate {
+  height: 25px;
+}
+.comment-right > .commnet-rate .el-rate__icon {
+  font-size: 25px;
+  margin-right: 0;
+}
+</style>
diff --git a/src/components/comments-score.vue b/src/components/comments-score.vue
new file mode 100644
index 0000000000000000000000000000000000000000..537b7ea940e710755ecc62563b9470cd56bafbff
--- /dev/null
+++ b/src/components/comments-score.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="comments_score">
+    <div class="comments_score-left">
+      <span v-text="data.score"></span>
+    </div>
+    <div class="comments_score-center">
+      <p class="comment-full_score">满分5分</p>
+      <div class="comment-total_rata">
+        <el-rate
+          :colors="['#e69232', '#e69232', '#e69232']"
+          :value="data.score"
+          disabled
+        >
+        </el-rate>
+      </div>
+      <p class="commen-total_count" v-text="'共' + data.total + '个评分'"></p>
+    </div>
+    <ul class="comments_score-right">
+      <li
+        class="comments_score_item"
+        v-for="(item, index) in data.starInfo"
+        :key="'star_info_' + index"
+      >
+        <el-rate
+          class="comments_score_item-rate"
+          :colors="['#8890a7', '#8890a7', '#8890a7']"
+          :value="item.star"
+          disabled
+          disabled-void-color="transparent"
+        >
+        </el-rate>
+        <el-progress
+          class="comments_score_item-progress"
+          :percentage="item.percent"
+          :show-text="false"
+          color="#ea7d19"
+        ></el-progress>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: () => ({}),
+  methods: {},
+  created() {},
+};
+</script>
+
+<style scoped>
+.comments_score {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 35px;
+}
+.comments_score-left {
+  flex-shrink: 0;
+  width: 96px;
+  height: 110px;
+  background-image: url(../assets/imgs/score_bg.png);
+  background-size: 100% 100%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-family: Arial;
+  font-size: 50px;
+  font-weight: bold;
+  margin-right: 25px;
+}
+.comments_score-center {
+  flex-shrink: 0;
+  padding-right: 48px;
+  border-right: 2px solid #f4f7fc;
+  margin-right: 48px;
+}
+.comments_score-center > .comment-full_score {
+  padding-left: 5px;
+  font-size: 14px;
+  line-height: 25px;
+  color: #a9aec0;
+}
+.comments_score-center > .comment-total_rata {
+  margin-top: 10px;
+}
+.comments_score-center > .commen-total_count {
+  padding-left: 5px;
+  font-size: 14px;
+  line-height: 25px;
+  color: #3f4f9c;
+  margin-top: 2px;
+}
+.comments_score-right {
+  flex-grow: 1;
+}
+.comments_score_item {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.comments_score_item-rate {
+  display: inline-flex;
+  flex-direction: row-reverse;
+  justify-content: flex-start;
+  align-items: center;
+}
+.comments_score_item-progress {
+  flex-grow: 1;
+  max-width: 200px;
+  margin-left: 10px;
+}
+</style>
+
+<style>
+.comments_score-center > .comment-total_rata .el-rate {
+  height: 30px;
+}
+.comments_score-center > .comment-total_rata .el-rate__icon {
+  font-size: 30px;
+  margin-right: 0;
+}
+.comments_score_item-rate .el-rate {
+  height: 14px;
+}
+.comments_score_item-rate .el-rate__icon {
+  font-size: 14px;
+  margin-right: 0;
+}
+.comments_score_item-progress .el-progress-bar__outer {
+  background: #e2e3ed;
+}
+</style>
diff --git a/src/components/servive-content.vue b/src/components/service-info.vue
similarity index 91%
rename from src/components/servive-content.vue
rename to src/components/service-info.vue
index d37effef8e5217f28e20b9f9068bbfbb9fc45cda..aaeaf7dcacd2465e11325ce8bf345762d02878c1 100644
--- a/src/components/servive-content.vue
+++ b/src/components/service-info.vue
@@ -1,9 +1,13 @@
 <template>
-  <div class="sevice_content" v-if="serviceData">
+  <div class="sevice_info" v-if="serviceData">
     <div class="service_title">
       <span class="service_name" v-text="serviceData.name"></span>
-      <span class="service_type" v-if="serviceData.type" v-text="serviceData.type">共享</span>
-      <span class="service_level" v-text="serviceData.openLevel">共享</span>
+      <span
+        class="service_type"
+        v-if="serviceData.type"
+        v-text="serviceData.type"
+      ></span>
+      <span class="service_level" v-text="serviceData.openLevel"></span>
       <span class="service_access_info">
         <img :src="require('@/assets/imgs/icon_liulan.png')" />
         <span v-text="'浏览次数：' + serviceData.viewCount"></span>
@@ -13,11 +17,11 @@
         <span v-text="'获取次数：' + serviceData.acquireCount"></span>
       </span>
     </div>
-    <div class="main_content">
-      <div class="left_content" v-if="serviceData.img">
+    <div class="main_container">
+      <div class="main_container-left" v-if="serviceData.img">
         <img :src="serviceData.img" width="460" />
       </div>
-      <div class="right_content">
+      <div class="main_container-right">
         <ul class="service_base_info">
           <li>
             <span>提供机构：</span>
@@ -57,7 +61,7 @@
               "
               @click="changeSpecification(item)"
             >
-              {{ index + 1 + ". " + item.name }}
+              {{ item.name }}
             </el-button>
           </div>
         </div>
@@ -70,11 +74,11 @@
           <div class="btn_container">
             <el-button
               v-for="(item, index) in serviceData.ways"
+              v-text="item.name"
               :key="'way_' + index"
               :type="item.value === commodityData.way ? 'primary' : 'default'"
               @click="changeWay(item)"
             >
-              按月购买
             </el-button>
           </div>
         </div>
@@ -139,27 +143,27 @@ export default {
       console.log(this.commodityData);
     },
   },
-  mounted() {},
 };
 </script>
 
 <style scoped>
-.sevice_content {
+.sevice_info {
   padding: 20px;
   background-color: #fff;
+  margin-bottom: 20px;
 }
-.main_content {
+.main_container {
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   margin-top: 25px;
 }
-.left_content {
+.main_container-left {
   padding: 3px;
   background-color: #f9fafc;
   margin-right: 30px;
 }
-.right_content {
+.main_container-right {
   flex-grow: 1;
 }
 .service_title {
@@ -266,16 +270,16 @@ export default {
   width: 220px;
   margin-left: 20px;
 }
-.sevice_content .el-button--primary {
+.sevice_info .el-button--primary {
   background-color: #515fe7;
   border-color: #515fe7;
 }
-.sevice_content .el-button--warning.is-plain {
+.sevice_info .el-button--warning.is-plain {
   background-color: #fcefd6;
   border-color: #fac266;
   color: #e56600;
 }
-.sevice_content .el-button--warning {
+.sevice_info .el-button--warning {
   background-color: #e56600;
   border-color: #e56600;
 }
diff --git a/src/components/servive-step.vue b/src/components/service-step.vue
similarity index 65%
rename from src/components/servive-step.vue
rename to src/components/service-step.vue
index b6734f7d335d84c3c3c152979bd494c5a699df48..9cac97fee88fedc9480a2ae85a3b884856122d96 100644
--- a/src/components/servive-step.vue
+++ b/src/components/service-step.vue
@@ -1,28 +1,30 @@
 <template>
   <div class="service_step">
-    <div class="step_bg"></div>
     <ul class="step_items">
       <li class="step_item">
         <div class="step_icon">
-            <span>1</span>
+          <span>1</span>
         </div>
         <p class="step_title">服务申请</p>
       </li>
+      <li class="step_line"></li>
       <li class="step_item">
         <div class="step_icon">
-            <span>2</span>
+          <span>2</span>
         </div>
         <p class="step_title">审核确认</p>
       </li>
+      <li class="step_line"></li>
       <li class="step_item">
         <div class="step_icon">
-            <span>3</span>
+          <span>3</span>
         </div>
         <p class="step_title">费用支付</p>
       </li>
+      <li class="step_line"></li>
       <li class="step_item">
         <div class="step_icon">
-            <span>4</span>
+          <span>4</span>
         </div>
         <p class="step_title">服务获取</p>
       </li>
@@ -32,39 +34,37 @@
 
 <style scoped>
 .service_step {
-  position: relative;
-  min-height: 48px;
-}
-.service_step > .step_bg {
-  position: absolute;
-  top: 23px;
-  right: 24px;
-  left: 24px;
-  border: 1px solid #1abc9c;
+  min-height: 68px;
+  padding: 30px 0;
 }
 .service_step > .step_items {
-  position: relative;
-  z-index: 2;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: flex-start;
   text-align: center;
 }
+.service_step .step_line {
+  width: 168px;
+  border: 1px  solid #c0c8f8;
+  margin: 33px 10px 0;
+}
 .service_step .step_item > .step_icon {
-  width: 48px;
-  height: 48px;
+  width: 68px;
+  height: 68px;
+  background-color: #515fe7;
+  border: 10px solid #e1e3ee;
   border-radius: 50%;
-  background-color: #1abc9c;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  font-size: 28px;
+  font-size: 20px;
   font-weight: bold;
   color: #fff;
 }
 .service_step .step_item > .step_title {
-  font-size: 12px;
+  font-size: 16px;
   line-height: 24px;
-  color: #1abc9c;
+  color: #242c43;
+  margin-top: 7px;
 }
 </style>
diff --git a/src/components/service-tab-comments.vue b/src/components/service-tab-comments.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a1bd7efd4ee801a3617c6427c7b2abfe8a01cee2
--- /dev/null
+++ b/src/components/service-tab-comments.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="service_tab-comments">
+    <comments-score :data="data.baseInfo"></comments-score>
+    <comments-list :data="data.ffpjxxList"></comments-list>
+
+    <div class="comments_pages">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :total="data.baseInfo.total"
+        :page-sizes="[10, 50, 100]"
+        :current-page="1"
+        :page-size="10"
+        layout="total, sizes, prev, pager, next, jumper"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import commentsScore from "@/components/comments-score";
+import commentsList from "@/components/comments-list";
+
+export default {
+  components: {
+    commentsScore,
+    commentsList,
+  },
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: () => ({}),
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+  },
+  created() {},
+};
+</script>
+
+<style scoped>
+.comments_pages {
+  text-align: center;
+  margin-top: 20px;
+}
+</style>
diff --git a/src/components/service-tab-detail.vue b/src/components/service-tab-detail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7c61fbcc96eb0954a263469e7802fcd1a4fede7a
--- /dev/null
+++ b/src/components/service-tab-detail.vue
@@ -0,0 +1,82 @@
+<template>
+  <ul class="service_tab-detail">
+    <li
+      class="detail-item"
+      v-for="(item, index) in data"
+      :key="'detail-' + index"
+    >
+      <h3 class="detail-title" v-text="item.name + '：'"></h3>
+
+      <service-step v-if="item.type == 'step'"></service-step>
+      <p
+        v-else-if="item.type == 'text'"
+        class="detail-text"
+        v-text="item.value"
+      ></p>
+      <ul v-else-if="item.type == 'list'">
+        <li v-for="(v, i) in item.value" :key="'detail-li_' + index + '_' + i">
+          <p class="detail-text">
+            <span v-text="v.name + '：'"></span>
+            <span v-text="v.value"></span>
+          </p>
+        </li>
+      </ul>
+      <el-table
+        v-else-if="item.type == 'table'"
+        class="detail-table"
+        :row-key="(row) => item.name + '_' + row.zdbm"
+        default-expand-all
+        :border="false"
+        :data="item.value.datas"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      >
+        <el-table-column
+          v-for="(v, i) in item.value.columns"
+          :key="'table_column_' + index + '_' + i"
+          :prop="v.prop"
+          :label="v.label"
+          :align="v.align || 'left'"
+        ></el-table-column>
+      </el-table>
+    </li>
+  </ul>
+</template>
+
+<script>
+import serviceStep from "@/components/service-step";
+
+export default {
+  components: {
+    serviceStep,
+  },
+  props: {
+    data: {
+      type: Array,
+      required: true,
+    },
+  },
+  data: () => ({}),
+  methods: {},
+  created() {},
+};
+</script>
+
+<style scoped>
+.detail-item:not(:last-child) {
+  margin-bottom: 20px;
+}
+.detail-item .detail-title {
+  font-size: 14px;
+  line-height: 25px;
+  color: #8890a7;
+  margin-bottom: 3px;
+}
+.detail-item .detail-text {
+  font-size: 14px;
+  line-height: 25px;
+  color: #242c43;
+}
+.detail-item .detail-table {
+  width: 100%;
+}
+</style>
diff --git a/src/components/service-tab-provider.vue b/src/components/service-tab-provider.vue
new file mode 100644
index 0000000000000000000000000000000000000000..76e2d9ec39ca2bee9eddc19e3ca189c57b66d133
--- /dev/null
+++ b/src/components/service-tab-provider.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="service_tab-provider">
+    <div class="provider-left">
+      <el-avatar shape="square" :size="156" fit="cover" :src="data.img" />
+    </div>
+    <div class="provider-right">
+      <p class="provider_name" v-text="data.provider"></p>
+      <div class="provider_info">
+        <p>
+          <span>联系人：</span>
+          <span v-text="data.person"></span>
+        </p>
+        <p>
+          <span>联系电话：</span>
+          <span v-text="data.phone"></span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+  },
+  data: () => ({}),
+  methods: {},
+  created() {},
+};
+</script>
+
+<style scoped>
+.service_tab-provider {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.provider-left {
+  flex-shrink: 0;
+  padding: 3px;
+  background-color: #f6f7fb;
+  border-radius: 9px;
+  font-size: 0;
+}
+.provider-left > .el-avatar--square {
+  border-radius: 7px;
+}
+.provider-right {
+  flex-grow: 1;
+  margin-left: 20px;
+}
+.provider-right > .provider_name {
+  font-size: 20px;
+  font-weight: bold;
+  color: #0d1847;
+  line-height: 36px;
+}
+.provider-right > .provider_info {
+  padding: 20px;
+  background-color: #f6f7fb;
+  border-radius: 6px;
+  margin-top: 20px;
+}
+.provider-right > .provider_info > p {
+  font-size: 14px;
+  color: #242c43;
+  line-height: 25px;
+}
+.provider-right > .provider_info > p:not(:first-child) {
+  margin-top: 16px;
+}
+.provider-right > .provider_info > p > span:first-child {
+  color: #8890a7;
+}
+</style>
diff --git a/src/components/service-tab-specification.vue b/src/components/service-tab-specification.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ad9202cc6bc0ee16311153d2552d418061c0169a
--- /dev/null
+++ b/src/components/service-tab-specification.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="service_tab-specification">
+    <div class="specification_header">
+      <p>申请方式：</p>
+      <type-group v-model="type" :types="types"></type-group>
+    </div>
+    <el-table class="specification_table" :data="tableData" :border="false">
+      <el-table-column prop="gg" label="规格" width="360"></el-table-column>
+      <el-table-column prop="ggsm" label="规格说明"></el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import typeGroup from "@/components/type-group";
+
+export default {
+  components: {
+    typeGroup,
+  },
+  props: {
+    data: {
+      type: Array,
+      required: true,
+    },
+  },
+  data: () => ({
+    type: "",
+    types: [],
+  }),
+  computed: {
+    tableData() {
+      return this.types.length > 0 ? this.data[this.type].data : [];
+    },
+  },
+  mounted() {
+    this.types = this.data.map((item, index) => ({
+      name: item.name,
+      value: index,
+    }));
+
+    if (this.types.length) {
+      this.type = 0;
+    }
+  },
+};
+</script>
+
+<style scoped>
+.specification_header > p {
+  font-size: 14px;
+  color: #8890a7;
+  line-height: 25px;
+  margin-bottom: 10px;
+}
+.specification_table {
+  width: 100%;
+  margin-top: 20px;
+}
+</style>
diff --git a/src/components/service-tabs.vue b/src/components/service-tabs.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d81ecbcddf49cc1ede7ff3dff8accac59fab3f24
--- /dev/null
+++ b/src/components/service-tabs.vue
@@ -0,0 +1,155 @@
+<template>
+  <el-tabs
+    class="service_info_tab"
+    type="border-card"
+    v-model="serviceTabsActiveName"
+    :stretch="true"
+  >
+    <el-tab-pane label="服务详情信息" name="first">
+      <service-tab-detail
+        v-if="fwxqxx"
+        class="service_info"
+        :data="fwxqxx"
+      ></service-tab-detail>
+    </el-tab-pane>
+    <el-tab-pane label="规格定价" name="second">
+      <service-tab-specification
+        v-if="ggdj"
+        class="service_info"
+        :data="ggdj"
+      ></service-tab-specification>
+    </el-tab-pane>
+    <el-tab-pane label="提供机构" name="third">
+      <service-tab-provider
+        v-if="tgjg"
+        class="service_info"
+        :data="tgjg"
+      ></service-tab-provider>
+    </el-tab-pane>
+    <el-tab-pane label="服务评价信息" name="fourth">
+      <service-tab-comments
+        v-if="ffpjxx"
+        class="service_info"
+        :data="ffpjxx"
+      ></service-tab-comments>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+import serviceTabDetail from "@/components/service-tab-detail";
+import serviceTabSpecification from "@/components/service-tab-specification";
+import serviceTabProvider from "@/components/service-tab-provider";
+import serviceTabComments from "@/components/service-tab-comments";
+
+export default {
+  components: {
+    serviceTabDetail,
+    serviceTabSpecification,
+    serviceTabProvider,
+    serviceTabComments,
+  },
+  props: {
+    type: {
+      type: String,
+      required: true,
+    },
+  },
+  data: () => ({
+    serviceTabsActiveName: "first",
+    fwxqxx: null, // 服务详情信息
+    ggdj: null, // 规格定价
+    tgjg: null, // 提供机构
+    ffpjxx: 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/serviceInfo.json`).then(
+        (data) => {
+          let _data = data[this.type];
+
+          this.fwxqxx = _data.fwxqxx;
+          this.ggdj = _data.ggdj;
+          this.tgjg = _data.tgjg;
+          this.ffpjxx = _data.ffpjxx;
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+    },
+  },
+  created() {
+    this.init();
+  },
+};
+</script>
+
+<style scoped>
+.service_info_tab {
+  border: none;
+  box-shadow: none;
+  margin-bottom: 40px;
+}
+.service_info {
+  padding: 35px 40px 40px;
+  box-sizing: border-box;
+}
+</style>
+
+<style>
+.service_info_tab.el-tabs--border-card > .el-tabs__content {
+  padding: 0;
+}
+.service_info_tab.el-tabs--border-card > .el-tabs__header .el-tabs__item {
+  height: 65px !important;
+  line-height: 59px !important;
+  background-color: #fff;
+  border-top: 4px solid #fff;
+  border-bottom: 2px solid #f4f7fc;
+}
+.service_info_tab.el-tabs--border-card
+  > .el-tabs__header
+  .el-tabs__item.is-active {
+  border-top: 4px solid #f5ab4c;
+  border-right: 2px solid #fcefd6;
+  border-bottom: 2px solid #fff;
+  border-left: 2px solid #fcefd6;
+  color: #e56600 !important;
+}
+.service_info_tab.el-tabs--border-card
+  > .el-tabs__header
+  .el-tabs__item:first-child {
+  border-left: none;
+}
+.service_info_tab.el-tabs--border-card
+  > .el-tabs__header
+  .el-tabs__item:last-child {
+  border-right: none;
+}
+.service_info_tab .el-table th > .cell {
+  color: #1a2236;
+}
+.service_info_tab .el-table td,
+.service_info_tab .el-table th.is-leaf {
+  border: none !important;
+}
+.service_info_tab .el-table::before {
+  display: none;
+}
+.service_info_tab .el-table__row:nth-child(odd) td {
+  background-color: #f8f9fd;
+}
+</style>
diff --git a/src/components/servive-info.vue b/src/components/servive-info.vue
deleted file mode 100644
index 29c80729f36d730c5494c73313db5a91f5ec56ab..0000000000000000000000000000000000000000
--- a/src/components/servive-info.vue
+++ /dev/null
@@ -1,342 +0,0 @@
-<template>
-  <el-tabs
-    class="service_info_tab"
-    type="border-card"
-    v-model="serviceTabsActiveName"
-    :stretch="true"
-    style="margin-top: 20px;"
-  >
-    <el-tab-pane label="服务详情信息" name="first">
-      <ul class="service_info" v-if="fwxqxxDatas">
-        <li
-          class="fwxqxx_item"
-          v-for="(item, index) in fwxqxxDatas"
-          :key="'fwxqxx_' + index"
-        >
-          <h3 class="fwxqxx_title" v-text="'· ' + item.name"></h3>
-          <servive-step
-            v-if="item.type == 'step'"
-            style="margin: 0 20px;"
-          ></servive-step>
-          <p
-            v-else-if="item.type == 'text'"
-            class="fwxqxx_text"
-            v-text="item.value"
-          ></p>
-          <ul v-else-if="item.type == 'list'">
-            <li
-              v-for="(v, i) in item.value"
-              :key="'fwxqxx_li_' + index + '_' + i"
-            >
-              <p class="fwxqxx_text">
-                <span v-text="v.name + '：'"></span>
-                <span v-text="v.value"></span>
-              </p>
-            </li>
-          </ul>
-          <el-table
-            v-else-if="item.type == 'table'"
-            class="fwxqxx_table"
-            :data="item.value.datas"
-            border
-          >
-            <el-table-column
-              type="index"
-              :index="(index) => index + 1"
-              align="center"
-            >
-            </el-table-column>
-            <el-table-column
-              v-for="(v, i) in item.value.columns"
-              :key="'table_column_' + index + '_' + i"
-              :prop="v.prop"
-              :label="v.label"
-              :align="v.align || 'left'"
-            ></el-table-column>
-          </el-table>
-          <el-table
-            v-else-if="item.type == 'table2'"
-            class="fwxqxx_table fwxqxx_table_2"
-            :data="item.value.datas"
-            border
-          >
-            <el-table-column prop="name" label="" align="right" width="200">
-              <template slot-scope="scope">
-                <span v-text="scope.row.name + '：'"></span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="value" label="">
-              <template slot-scope="scope">
-                <pre
-                  v-if="scope.row.type == 'code'"
-                  v-html="scope.row.value"
-                ></pre>
-                <span v-else v-text="scope.row.value"></span>
-              </template>
-            </el-table-column>
-          </el-table>
-        </li>
-      </ul>
-    </el-tab-pane>
-    <el-tab-pane label="规格定价" name="second">
-      <div class="service_info" v-if="ggdjData">
-        <div class="ggdj_header">
-          <span>购买方式：</span>
-          <el-button-group>
-            <el-button type="danger">
-              按月
-            </el-button>
-            <el-button type="default">
-              按年
-            </el-button>
-          </el-button-group>
-        </div>
-        <el-table class="ggdj_table" :data="ggdjData" border>
-          <el-table-column prop="gg" label="规格"></el-table-column>
-          <el-table-column prop="ggsm" label="规格说明"></el-table-column>
-        </el-table>
-      </div>
-    </el-tab-pane>
-    <el-tab-pane label="提供机构" name="third">
-      <div class="service_info" v-if="tgjgData">
-        <p class="tgjg_dw" v-text="tgjgData.name"></p>
-        <div class="tgjg_img">
-          <img :src="tgjgData.img" width="100%" />
-        </div>
-        <div class="tgjg_lxfs">
-          <p>联系人：<span v-text="tgjgData.lxr"></span></p>
-          <p>联系电话：<span v-text="tgjgData.lxdh"></span></p>
-        </div>
-      </div>
-    </el-tab-pane>
-    <el-tab-pane label="服务评价信息" name="fourth">
-      <div class="service_info" v-if="ffpjxxData">
-        <div class="fwpjxx_score">
-          <div class="fwpjxx_score_left">
-            <p v-text="ffpjxxData.baseInfo.score + '分'"></p>
-            <p>满分5分</p>
-            <p v-text="'共' + ffpjxxData.baseInfo.total + '个评分'"></p>
-          </div>
-          <ul class="fwpjxx_score_right">
-            <li
-              class="fwpjxx_score_item"
-              v-for="(item, index) in ffpjxxData.baseInfo.starInfo"
-              :key="'star_info_' + index"
-            >
-              <el-rate
-                :value="item.star"
-                disabled
-                text-color="#ff9900"
-                score-template="{value}"
-              >
-              </el-rate>
-              <el-progress
-                :percentage="item.percent"
-                :show-text="false"
-              ></el-progress>
-            </li>
-          </ul>
-        </div>
-        <ul class="fwpjxx_items">
-          <li
-            class="fwpjxx_item"
-            v-for="(item, index) in ffpjxxData.ffpjxxList"
-            :key="'fwpjxx_' + index"
-          >
-            <el-avatar :size="60" :src="item.img"> </el-avatar>
-            <div class="fwpjxx_content">
-              <p>
-                <span v-text="item.name"></span>
-                <el-rate
-                  :value="item.star"
-                  disabled
-                  text-color="#ff9900"
-                  score-template="{value}"
-                >
-                </el-rate>
-                <span v-text="item.time"></span>
-              </p>
-              <p v-text="item.description"></p>
-            </div>
-          </li>
-        </ul>
-        <div class="fwpjxx_pages">
-          <el-pagination
-            background
-            layout="prev, pager, next"
-            :page-size="10"
-            :total="ffpjxxData.baseInfo.total"
-          ></el-pagination>
-        </div>
-      </div>
-    </el-tab-pane>
-  </el-tabs>
-</template>
-
-<script>
-// @ is an alias to /src
-import Commodity from "@/components/commodity.vue";
-import BlockRadius from "@/components/block-radius";
-import serviveStep from "@/components/servive-step";
-export default {
-  components: {
-    Commodity,
-    BlockRadius,
-    serviveStep,
-  },
-  data: () => ({
-    serviceTabsActiveName: "first",
-    fwxqxxDatas: null, // 服务详情信息
-    ggdjData: null, // 规格定价
-    tgjgData: null, // 提供机构
-    ffpjxxData: 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/serviceInfo.json`).then(
-        ({ fwxqxxDatas, ggdjData, tgjgData, ffpjxxData }) => {
-          this.fwxqxxDatas = fwxqxxDatas;
-          this.ggdjData = ggdjData;
-          this.tgjgData = tgjgData;
-          this.ffpjxxData = ffpjxxData;
-        },
-        (error) => {
-          console.log(error);
-        }
-      );
-    },
-  },
-  created() {
-    this.init();
-  },
-};
-</script>
-
-<style scoped>
-.service_info {
-  min-height: 500px;
-  padding: 10px 20px;
-  box-sizing: border-box;
-  /* background-color: #eee; */
-}
-.service_info .fwxqxx_item {
-  margin-bottom: 20px;
-}
-.service_info .fwxqxx_item > .fwxqxx_title {
-  font-size: 13px;
-  font-weight: bold;
-  line-height: 20px;
-  margin-bottom: 5px;
-}
-.service_info .fwxqxx_item > .fwxqxx_text {
-  font-size: 16px;
-  line-height: 24px;
-  color: #333;
-}
-.service_info .fwxqxx_item > .fwxqxx_table {
-  width: 100%;
-}
-.service_info .ggdj_header {
-  margin-bottom: 10px;
-}
-.service_info .ggdj_table {
-  width: 100%;
-}
-.service_info .tgjg_dw {
-  font-size: 20px;
-  line-height: 30px;
-  margin-bottom: 10px;
-}
-.service_info .tgjg_img {
-  width: 400px;
-  margin-bottom: 10px;
-}
-.service_info .tgjg_lxfs {
-  font-size: 16px;
-  line-height: 24px;
-}
-.service_info .fwpjxx_score {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  margin: 10px 0;
-}
-.service_info .fwpjxx_score > .fwpjxx_score_left {
-  flex-shrink: 0;
-  margin-right: 20px;
-}
-.service_info .fwpjxx_score > .fwpjxx_score_left > p:nth-child(1) {
-  font-size: 32px;
-  font-weight: bold;
-}
-.service_info .fwpjxx_score > .fwpjxx_score_left > p:nth-child(2) {
-  font-size: 14px;
-  color: #333;
-}
-.service_info .fwpjxx_score > .fwpjxx_score_left > p:nth-child(3) {
-  font-size: 18px;
-  color: #ccc;
-}
-.service_info .fwpjxx_score > .fwpjxx_score_right {
-  flex-grow: 1;
-}
-.service_info .fwpjxx_score_item {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  max-width: 480px;
-}
-.service_info .fwpjxx_score_item > .el-progress {
-  flex-grow: 1;
-  margin-left: 10px;
-}
-.service_info .fwpjxx_item {
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  margin-top: 20px;
-}
-.service_info .fwpjxx_item > .el-avatar {
-  flex-shrink: 0;
-  margin-right: 20px;
-}
-.service_info .fwpjxx_item > .fwpjxx_content > p:nth-child(1) {
-  display: inline-flex;
-  justify-content: flex-start;
-  align-items: center;
-  font-size: 18px;
-  color: #999;
-}
-.service_info .fwpjxx_item > .fwpjxx_content > p:nth-child(1) > .el-rate {
-  margin: 0 60px 0 30px;
-}
-.service_info .fwpjxx_item > .fwpjxx_content > p:nth-child(2) {
-  font-size: 18px;
-  color: #666;
-}
-.service_info .fwpjxx_pages {
-  text-align: center;
-  margin: 20px 0 10px;
-}
-</style>
-
-<style>
-.fwpjxx_score_item .el-progress-bar__outer {
-  background: #fff;
-}
-.fwxqxx_table_2 .el-table__header-wrapper {
-  display: none;
-}
-</style>
diff --git a/src/components/type-group.vue b/src/components/type-group.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c2db1dafc2ca185e49e8a3ffaf77676583f8bf09
--- /dev/null
+++ b/src/components/type-group.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="type_group">
+    <span
+      v-for="item in types"
+      class="type_item"
+      v-text="item.name"
+      :class="{ current: item.value === type }"
+      :key="item.value"
+      @click="$emit('change-type', item.value)"
+    ></span>
+  </div>
+</template>
+
+<script>
+export default {
+  model: {
+    prop: "type",
+    event: "change-type",
+  },
+  props: {
+    type: {
+      type: [Number, String],
+    },
+    types: {
+      type: Array,
+      default: () => [],
+    },
+  },
+};
+</script>
+
+<style scoped>
+.type_group {
+  display: inline-flex;
+  background-color: #f6f7fb;
+  padding: 6px;
+  border-radius: 6px;
+}
+.type_item {
+  min-width: 100px;
+  padding: 10px;
+  box-sizing: border-box;
+  border-radius: 5px;
+  overflow: hidden;
+  font-size: 14px;
+  color: #58617a;
+  line-height: 22px;
+  text-align: center;
+  cursor: pointer;
+}
+.type_item:not(:first-child) {
+  margin-left: 10px;
+}
+.type_item.current {
+  background-color: #515fe7;
+  color: #fff;
+}
+</style>
diff --git a/src/pages/example_commodity.vue b/src/pages/example_commodity.vue
index de2a70b975768c869150597fb3bfb0ae45002b61..76f5c3a3a720ae7976079db15081057c23135ffc 100644
--- a/src/pages/example_commodity.vue
+++ b/src/pages/example_commodity.vue
@@ -4,8 +4,6 @@
       <h3>按原型大致做了一下，调优等后续</h3>
 
       <Commodity :datas="datas" />
-
-      <servive-info></servive-info>
     </block-radius>
   </div>
 </template>
@@ -14,12 +12,10 @@
 // @ 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: {
diff --git a/src/pages/sjfwDetail.vue b/src/pages/sjfwDetail.vue
index 9ca84f9ff8ce5ffe2c4742212511cedaab149341..29c23ed8f0cc05e6595446f67b80fd5726e8793d 100644
--- a/src/pages/sjfwDetail.vue
+++ b/src/pages/sjfwDetail.vue
@@ -8,20 +8,20 @@
       </el-breadcrumb>
     </div>
 
-    <servive-content :service-data="serviceData"></servive-content>
+    <service-info :service-data="serviceData"></service-info>
 
-    <servive-info></servive-info>
+    <service-tabs type="sjfw"></service-tabs>
   </div>
 </template>
 
 <script>
-import serviveInfo from "@/components/servive-info";
-import serviveContent from "@/components/servive-content";
+import serviceInfo from "@/components/service-info";
+import serviceTabs from "@/components/service-tabs";
 
 export default {
   components: {
-    serviveInfo,
-    serviveContent,
+    serviceInfo,
+    serviceTabs,
   },
   data: () => ({
     serviceData: null,
diff --git a/src/pages/skfwDetail.vue b/src/pages/skfwDetail.vue
index 7a895d1879413a0a4e4e7b927c879ee8e49277ed..f118dc5a5eca81ab7f072b23cb7bc93632046b36 100644
--- a/src/pages/skfwDetail.vue
+++ b/src/pages/skfwDetail.vue
@@ -8,20 +8,22 @@
       </el-breadcrumb>
     </div>
 
-    <servive-content :service-data="serviceData"></servive-content>
+    <!-- <servive-commodity-info
+      :service-data="serviceData"
+    ></servive-commodity-info>
 
-    <servive-info></servive-info>
+    <servive-tabs-info type="sjfw"></servive-tabs-info> -->
   </div>
 </template>
 
 <script>
-import serviveInfo from "@/components/servive-info";
-import serviveContent from "@/components/servive-content";
+// import serviveCommodityInfo from "@/components/servive-commodity-info";
+// import serviveTabsInfo from "@/components/servive-tabs-info";
 
 export default {
   components: {
-    serviveInfo,
-    serviveContent,
+    // serviveCommodityInfo,
+    // serviveTabsInfo,
   },
   data: () => ({
     serviceData: null,
diff --git a/src/pages/yysdDetail.vue b/src/pages/yysdDetail.vue
index 600e078cc0d030e4917c568b9024f2164baa42a8..0a762c7b73b3b0181c946c321003be53630b9e12 100644
--- a/src/pages/yysdDetail.vue
+++ b/src/pages/yysdDetail.vue
@@ -8,20 +8,22 @@
       </el-breadcrumb>
     </div>
 
-    <servive-content :service-data="serviceData"></servive-content>
+    <!-- <servive-commodity-info
+      :service-data="serviceData"
+    ></servive-commodity-info>
 
-    <servive-info></servive-info>
+    <servive-tabs-info type="sjfw"></servive-tabs-info> -->
   </div>
 </template>
 
 <script>
-import serviveInfo from "@/components/servive-info";
-import serviveContent from "@/components/servive-content";
+// import serviveCommodityInfo from "@/components/servive-commodity-info";
+// import serviveTabsInfo from "@/components/servive-tabs-info";
 
 export default {
   components: {
-    serviveInfo,
-    serviveContent,
+    // serviveCommodityInfo,
+    // serviveTabsInfo,
   },
   data: () => ({
     serviceData: null,
diff --git a/src/pages/zhyyfwDetail.vue b/src/pages/zhyyfwDetail.vue
index 50a10ebe68aaf2fe115c2a25aeba9db643c8c8be..0efa800b4241fae844968afeedaaa1a815d601ab 100644
--- a/src/pages/zhyyfwDetail.vue
+++ b/src/pages/zhyyfwDetail.vue
@@ -8,20 +8,22 @@
       </el-breadcrumb>
     </div>
 
-    <servive-content :service-data="serviceData"></servive-content>
+    <!-- <servive-commodity-info
+      :service-data="serviceData"
+    ></servive-commodity-info>
 
-    <servive-info></servive-info>
+    <servive-tabs-info type="sjfw"></servive-tabs-info> -->
   </div>
 </template>
 
 <script>
-import serviveInfo from "@/components/servive-info";
-import serviveContent from "@/components/servive-content";
+// import serviveCommodityInfo from "@/components/servive-commodity-info";
+// import serviveTabsInfo from "@/components/servive-tabs-info";
 
 export default {
   components: {
-    serviveInfo,
-    serviveContent,
+    // serviveCommodityInfo,
+    // serviveTabsInfo,
   },
   data: () => ({
     serviceData: null,
diff --git a/static/serviceInfo.json b/static/serviceInfo.json
index 011381ce98f2e1914e60ebfeeef4484e7621a038..0f185debac3df8fa711b2c994e9cbb61eb77d835 100644
--- a/static/serviceInfo.json
+++ b/static/serviceInfo.json
@@ -1,5 +1,337 @@
 {
-  "fwxqxxDatas": [
+  "sjfw": {
+    "fwxqxx": [
+      {
+        "name": "获取流程",
+        "type": "step"
+      },
+      {
+        "name": "服务描述",
+        "type": "text",
+        "value": "提供水路货物周转量排名和同比增长的专题数据服务，提供水路货物周转量排名和同比增长的专题数据服务，提供水路货物周转量排名和同比增长的专题数据服务，提供水路货物周转量排名和同比增长的专题数据服务。"
+      },
+      {
+        "name": "请求方式",
+        "type": "text",
+        "value": "GET"
+      },
+      {
+        "name": "编码格式",
+        "type": "text",
+        "value": "UTF-8"
+      },
+      {
+        "name": "请求参数",
+        "type": "table",
+        "value": {
+          "datas": [
+            {
+              "zdbm": "errcode",
+              "zdlx": "字符串",
+              "zdmc": "错误码",
+              "zdsm": "显示字段信息显示字段信息",
+              "sfbx": "是",
+              "slz": "xxx"
+            },
+            {
+              "zdbm": "errmsg",
+              "zdlx": "对象",
+              "zdmc": "错误信息",
+              "zdsm": "显示字段信息显示字段信息",
+              "sfbx": "是",
+              "slz": "xxx"
+            },
+            {
+              "zdbm": "data",
+              "zdlx": "字符串",
+              "zdmc": "数据项",
+              "zdsm": "显示字段信息显示字段信息",
+              "sfbx": "否",
+              "slz": "xxx",
+              "children": [
+                {
+                  "zdbm": "rows",
+                  "zdlx": "对象",
+                  "zdmc": "对象",
+                  "zdsm": "显示字段信息显示字段信息",
+                  "sfbx": "否",
+                  "slz": "xxx"
+                }
+              ]
+            }
+          ],
+          "columns": [
+            {
+              "prop": "zdbm",
+              "label": "字段编码",
+              "align": "center"
+            },
+            {
+              "prop": "zdlx",
+              "label": "字段类型",
+              "align": "center"
+            },
+            {
+              "prop": "zdmc",
+              "label": "字段名称",
+              "align": "center"
+            },
+            {
+              "prop": "zdsm",
+              "label": "字段说明"
+            },
+            {
+              "prop": "sfbx",
+              "label": "是否必须",
+              "align": "center"
+            },
+            {
+              "prop": "slz",
+              "label": "示例值",
+              "align": "center"
+            }
+          ]
+        }
+      },
+      {
+        "name": "响应参数",
+        "type": "table",
+        "value": {
+          "datas": [
+            {
+              "zdbm": "errcode",
+              "zdlx": "字符串",
+              "zdmc": "错误码",
+              "zdsm": "显示字段信息显示字段信息"
+            },
+            {
+              "zdbm": "errmsg",
+              "zdlx": "对象",
+              "zdmc": "错误信息",
+              "zdsm": "显示字段信息显示字段信息"
+            },
+            {
+              "zdbm": "data",
+              "zdlx": "字符串",
+              "zdmc": "数据项",
+              "zdsm": "显示字段信息显示字段信息",
+              "children": [
+                {
+                  "zdbm": "rows",
+                  "zdlx": "字符串",
+                  "zdmc": "数据项",
+                  "zdsm": "显示字段信息显示字段信息",
+                  "children": [
+                    {
+                      "zdbm": "time",
+                      "zdlx": "字符串",
+                      "zdmc": "数据项",
+                      "zdsm": "显示字段信息显示字段信息"
+                    },
+                    {
+                      "zdbm": "count",
+                      "zdlx": "字符串",
+                      "zdmc": "数据项",
+                      "zdsm": "显示字段信息显示字段信息"
+                    },
+                    {
+                      "zdbm": "item",
+                      "zdlx": "字符串",
+                      "zdmc": "数据项",
+                      "zdsm": "显示字段信息显示字段信息"
+                    }
+                  ]
+                },
+                {
+                  "zdbm": "city",
+                  "zdlx": "字符串",
+                  "zdmc": "数据项",
+                  "zdsm": "显示字段信息显示字段信息",
+                  "children": [
+                    {
+                      "zdbm": "sPoint",
+                      "zdlx": "字符串",
+                      "zdmc": "数据项",
+                      "zdsm": "显示字段信息显示字段信息"
+                    },
+                    {
+                      "zdbm": "ePoint",
+                      "zdlx": "字符串",
+                      "zdmc": "数据项",
+                      "zdsm": "显示字段信息显示字段信息"
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "columns": [
+            {
+              "prop": "zdbm",
+              "label": "字段编码",
+              "align": "center"
+            },
+            {
+              "prop": "zdlx",
+              "label": "字段类型",
+              "align": "center"
+            },
+            {
+              "prop": "zdmc",
+              "label": "字段名称"
+            },
+            {
+              "prop": "zdsm",
+              "label": "字段说明"
+            }
+          ]
+        }
+      }
+    ],
+    "ggdj": [
+      {
+        "name": "按月",
+        "data": [
+          {
+            "gg": "访问次数：20/日 访问量：100/日",
+            "ggsm": "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行20次免费访问，获取100条数据记录。"
+          },
+          {
+            "gg": "访访问次数：200/日 访问量：1000/日",
+            "ggsm": "用户服务申请通过审核确认并完成付费后，每日可对水路货物周转量情况进行200次访问，获取1000条数据记录。"
+          },
+          {
+            "gg": "访问次数：无上限 访问量",
+            "ggsm": ""
+          }
+        ]
+      },
+      {
+        "name": "按年",
+        "data": [
+          {
+            "gg": "访问次数：20/年 访问量：100/年",
+            "ggsm": "用户服务申请通过审核确认后，每年可对水路货物周转量情况进行20次免费访问，获取100条数据记录。"
+          },
+          {
+            "gg": "访访问次数：200/年 访问量：1000/年",
+            "ggsm": "用户服务申请通过审核确认并完成付费后，每年可对水路货物周转量情况进行200次访问，获取1000条数据记录。"
+          },
+          {
+            "gg": "访问次数：无上限 访问量",
+            "ggsm": ""
+          }
+        ]
+      }
+    ],
+    "tgjg": {
+      "provider": "贵州省交通运输厅",
+      "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+      "person": "张先生",
+      "phone": "010-66666666"
+    },
+    "ffpjxx": {
+      "baseInfo": {
+        "score": 3.5,
+        "total": 23,
+        "starInfo": [
+          {
+            "star": 5,
+            "percent": 40
+          },
+          {
+            "star": 4,
+            "percent": 30
+          },
+          {
+            "star": 3,
+            "percent": 20
+          },
+          {
+            "star": 2,
+            "percent": 5
+          },
+          {
+            "star": 1,
+            "percent": 5
+          }
+        ]
+      },
+      "ffpjxxList": [
+        {
+          "name": "禺彊",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 5,
+          "description": "这个应用非常实用，可以应用到多个业务领域！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "海纳",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 5,
+          "description": "赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        },
+        {
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
+        }
+      ]
+    }
+  },
+  "fwxqxx": [
     {
       "name": "获取流程",
       "type": "step"
@@ -53,25 +385,73 @@
       "value": {
         "datas": [
           {
-            "zdmc": "排名",
-            "zdbm": "grade",
-            "zdlx": "string",
-            "zdms": "企业水路货物周转量排名",
-            "slz": "1"
+            "zdbm": "errcode",
+            "zdlx": "字符串",
+            "zdmc": "错误码",
+            "zdsm": "显示字段信息显示字段信息"
+          },
+          {
+            "zdbm": "errmsg",
+            "zdlx": "对象",
+            "zdmc": "错误信息",
+            "zdsm": "显示字段信息显示字段信息"
           },
           {
-            "zdmc": "同比增长",
-            "zdbm": "increase",
-            "zdlx": "string",
-            "zdms": "同比增长量信息",
-            "slz": "\"100%\""
+            "zdbm": "data",
+            "zdlx": "字符串",
+            "zdmc": "数据项",
+            "zdsm": "显示字段信息显示字段信息",
+            "children": [
+              {
+                "zdbm": "rows",
+                "zdlx": "字符串",
+                "zdmc": "数据项",
+                "zdsm": "显示字段信息显示字段信息",
+                "children": [
+                  {
+                    "zdbm": "time",
+                    "zdlx": "字符串",
+                    "zdmc": "数据项",
+                    "zdsm": "显示字段信息显示字段信息"
+                  },
+                  {
+                    "zdbm": "count",
+                    "zdlx": "字符串",
+                    "zdmc": "数据项",
+                    "zdsm": "显示字段信息显示字段信息"
+                  },
+                  {
+                    "zdbm": "item",
+                    "zdlx": "字符串",
+                    "zdmc": "数据项",
+                    "zdsm": "显示字段信息显示字段信息"
+                  }
+                ]
+              },
+              {
+                "zdbm": "city",
+                "zdlx": "字符串",
+                "zdmc": "数据项",
+                "zdsm": "显示字段信息显示字段信息",
+                "children": [
+                  {
+                    "zdbm": "sPoint",
+                    "zdlx": "字符串",
+                    "zdmc": "数据项",
+                    "zdsm": "显示字段信息显示字段信息"
+                  },
+                  {
+                    "zdbm": "ePoint",
+                    "zdlx": "字符串",
+                    "zdmc": "数据项",
+                    "zdsm": "显示字段信息显示字段信息"
+                  }
+                ]
+              }
+            ]
           }
         ],
         "columns": [
-          {
-            "prop": "zdmc",
-            "label": "字段名称"
-          },
           {
             "prop": "zdbm",
             "label": "字段编码",
@@ -83,88 +463,12 @@
             "align": "center"
           },
           {
-            "prop": "zdms",
-            "label": "字段描述"
-          },
-          {
-            "prop": "slz",
-            "label": "示例值",
-            "align": "center"
-          }
-        ]
-      }
-    },
-    {
-      "name": "接口详情信息",
-      "type": "table2",
-      "value": {
-        "datas": [
-          {
-            "name": "接口地址",
-            "value": "/cigservice/baseservice/fillder/turnover",
-            "type": "text"
-          },
-          {
-            "name": "请求方式",
-            "value": "GET",
-            "type": "text"
-          },
-          {
-            "name": "编码格式",
-            "value": "UTF-8",
-            "type": "text"
-          },
-          {
-            "name": "接口编码",
-            "value": "turnover",
-            "type": "text"
-          },
-          {
-            "name": "接口描述",
-            "value": "水路货运周转量排名",
-            "type": "text"
-          },
-          {
-            "name": "请求参数",
-            "value": "无请求参数",
-            "type": "text"
-          },
-          {
-            "name": "响应参数",
-            "value": "无响应参数",
-            "type": "text"
-          },
-          {
-            "name": "响应示例",
-            "value": {
-              "success": 1,
-              "data": [
-                {
-                  "data": [
-                    {
-                      "grade": "19",
-                      "increase": "100%"
-                    }
-                  ],
-                  "column": [
-                    {
-                      "title": "排名",
-                      "key": "grade"
-                    },
-                    {
-                      "title": "同比增长",
-                      "key": "increase"
-                    }
-                  ]
-                }
-              ]
-            },
-            "type": "code"
+            "prop": "zdmc",
+            "label": "字段名称"
           },
           {
-            "name": "请求示例NodeJs",
-            "value": "var http = require('http');",
-            "type": "code"
+            "prop": "zdsm",
+            "label": "显示字段信息显示字段信息"
           }
         ]
       }
@@ -197,7 +501,7 @@
       }
     }
   ],
-  "ggdjData": [
+  "ggdj": [
     {
       "gg": "访问次数：20/日 访问量：100/日",
       "ggsm": "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行20次免费访问，获取100条数据记录。"
@@ -211,13 +515,13 @@
       "ggsm": ""
     }
   ],
-  "tgjgData": {
+  "tgjg": {
     "name": "贵州省交通运输厅",
     "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
     "lxr": "张先生",
     "lxdh": "010-66666666"
   },
-  "ffpjxxData": {
+  "ffpjxx": {
     "baseInfo": {
       "score": 3.5,
       "total": 23,