From 6f2c9d80e009d69b7cd97e60ff68996f24dd7597 Mon Sep 17 00:00:00 2001
From: xuyiming <xuyiming@bd-apaas.com>
Date: Tue, 12 May 2020 18:19:05 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=9C=8D=E5=8A=A1=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/imgs/score_bg.png                  | Bin 0 -> 5808 bytes
 src/components/comments-list.vue              |  87 +++
 src/components/comments-score.vue             | 139 +++++
 .../{servive-content.vue => service-info.vue} |  36 +-
 .../{servive-step.vue => service-step.vue}    |  46 +-
 src/components/service-tab-comments.vue       |  54 ++
 src/components/service-tab-detail.vue         |  82 +++
 src/components/service-tab-provider.vue       |  79 +++
 src/components/service-tab-specification.vue  |  60 +++
 src/components/service-tabs.vue               | 155 ++++++
 src/components/servive-info.vue               | 342 ------------
 src/components/type-group.vue                 |  58 ++
 src/pages/example_commodity.vue               |   4 -
 src/pages/sjfwDetail.vue                      |  12 +-
 src/pages/skfwDetail.vue                      |  14 +-
 src/pages/yysdDetail.vue                      |  14 +-
 src/pages/zhyyfwDetail.vue                    |  14 +-
 static/serviceInfo.json                       | 500 ++++++++++++++----
 18 files changed, 1189 insertions(+), 507 deletions(-)
 create mode 100644 src/assets/imgs/score_bg.png
 create mode 100644 src/components/comments-list.vue
 create mode 100644 src/components/comments-score.vue
 rename src/components/{servive-content.vue => service-info.vue} (91%)
 rename src/components/{servive-step.vue => service-step.vue} (65%)
 create mode 100644 src/components/service-tab-comments.vue
 create mode 100644 src/components/service-tab-detail.vue
 create mode 100644 src/components/service-tab-provider.vue
 create mode 100644 src/components/service-tab-specification.vue
 create mode 100644 src/components/service-tabs.vue
 delete mode 100644 src/components/servive-info.vue
 create mode 100644 src/components/type-group.vue

diff --git a/src/assets/imgs/score_bg.png b/src/assets/imgs/score_bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..03424edd8d320076523ab50007d3b2f8df3d6c6f
GIT binary patch
literal 5808
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

literal 0
HcmV?d00001

diff --git a/src/components/comments-list.vue b/src/components/comments-list.vue
new file mode 100644
index 0000000..869d7f5
--- /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 0000000..537b7ea
--- /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 d37effe..aaeaf7d 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 b6734f7..9cac97f 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 0000000..a1bd7ef
--- /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 0000000..7c61fbc
--- /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 0000000..76e2d9e
--- /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 0000000..ad9202c
--- /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 0000000..d81ecbc
--- /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 29c8072..0000000
--- 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 0000000..c2db1da
--- /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 de2a70b..76f5c3a 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 9ca84f9..29c23ed 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 7a895d1..f118dc5 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 600e078..0a762c7 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 50a10eb..0efa800 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 011381c..0f185de 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,
-- 
2.26.0