diff --git a/src/assets/imgs/ic_data.png b/src/assets/imgs/ic_data.png
new file mode 100644
index 0000000000000000000000000000000000000000..50874a9a0cd84cf99964188f85691572ca5730e8
Binary files /dev/null and b/src/assets/imgs/ic_data.png differ
diff --git a/src/assets/imgs/ic_delete.png b/src/assets/imgs/ic_delete.png
new file mode 100644
index 0000000000000000000000000000000000000000..9514770107bcd57d3a74df0d16d6ef42821ae29f
Binary files /dev/null and b/src/assets/imgs/ic_delete.png differ
diff --git a/src/assets/imgs/ic_edit.png b/src/assets/imgs/ic_edit.png
new file mode 100644
index 0000000000000000000000000000000000000000..d9f532c0c5d647d0d827104213f67c8747c0a9eb
Binary files /dev/null and b/src/assets/imgs/ic_edit.png differ
diff --git a/src/components/application-info.vue b/src/components/application-info.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e1100e07043bc210b7f2b1d170ad8b774c7878f8
--- /dev/null
+++ b/src/components/application-info.vue
@@ -0,0 +1,198 @@
+<template>
+  <div class="application_info" v-if="data">
+    <div class="application_title">
+      <span class="application_name" v-text="data.name"></span>
+    </div>
+    <div class="main_container">
+      <div class="main_container-left" v-if="data.img">
+        <img :src="data.img" width="460" />
+      </div>
+      <div class="main_container-right">
+        <ul class="application_base_info">
+          <li>
+            <span>应用开发者：</span>
+            <span v-text="data.providedBy"> </span>
+          </li>
+          <li>
+            <span>上线时间：</span>
+            <span v-text="data.publishTime"></span>
+          </li>
+          <li>
+            <span>部署次数：</span>
+            <span v-text="data.acquireCount"></span>
+          </li>
+          <li>
+            <span>应用类型：</span>
+            <span v-html="data.serviceType"></span>
+          </li>
+          <li>
+            <span>业务领域：</span>
+            <span v-text="data.dataField"></span>
+          </li>
+        </ul>
+        <div class="commodity_information">
+          <span>规&emsp;&emsp;格：</span>
+          <div class="btn_container">
+            <el-button
+              v-for="(item, index) in data.specifications"
+              :key="'specifications_' + index"
+              :type="
+                item.value === commodityData.specification
+                  ? 'primary'
+                  : 'default'
+              "
+              @click="changeSpecification(item)"
+            >
+              {{ item.name }}
+            </el-button>
+          </div>
+        </div>
+        <div class="commodity_action">
+          <el-button type="warning" plain @click="addToCart">
+            加入购物车
+          </el-button>
+          <el-button type="warning" @click="applyImmediately">
+            立即申请
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => null,
+    },
+  },
+  data: () => ({
+    commodityData: {
+      specification: 0,
+    },
+  }),
+  computed: {
+    specificationDescription() {
+      let obj =
+        this.data.specifications[this.commodityData.specification] || {};
+      return obj.description || "";
+    },
+  },
+  methods: {
+    changeSpecification({ value }) {
+      this.commodityData.specification = value;
+    },
+    addToCart() {
+      console.log("addToCart");
+      console.log(this.commodityData);
+    },
+    applyImmediately() {
+      console.log("applyImmediately");
+      console.log(this.commodityData);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.application_info {
+  padding: 20px;
+  background-color: #fff;
+  margin-bottom: 20px;
+}
+.main_container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  margin-top: 25px;
+}
+.main_container-left {
+  padding: 3px;
+  background-color: #f9fafc;
+  margin-right: 30px;
+}
+.main_container-right {
+  flex-grow: 1;
+}
+.application_title {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.application_title > .application_name {
+  font-size: 22px;
+  font-weight: bold;
+  color: #0d1847;
+  line-height: 36px;
+}
+.application_base_info {
+  padding: 18px;
+  background-color: #f9fafc;
+}
+.application_base_info > li,
+.commodity_information {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  font-size: 14px;
+  color: #242c43;
+  line-height: 20px;
+}
+.application_base_info > li:not(:first-child) {
+  margin-top: 18px;
+}
+.application_base_info > li > span:first-child,
+.commodity_information > span:first-child {
+  flex-shrink: 0;
+  white-space: nowrap;
+  color: #8890a7;
+}
+.application_base_info > li > span:nth-child(2) {
+  color: #242c43;
+}
+.commodity_information {
+  margin-top: 30px;
+}
+.commodity_information > span:nth-child(2) {
+  color: #58617a;
+}
+.commodity_information > span:first-child {
+  line-height: 40px;
+}
+.commodity_information > .commodity_text {
+  flex-grow: 1;
+  padding: 13px 18px;
+  background-color: #f9fafc;
+  border-radius: 5px;
+}
+.commodity_information > .btn_container {
+  margin-bottom: -15px;
+}
+.commodity_information > .btn_container > .el-button,
+.commodity_information > .btn_container > .el-input-number {
+  margin: 0 20px 15px 0;
+}
+.commodity_action {
+  margin-top: 50px;
+  text-align: right;
+}
+.commodity_action > .el-button {
+  width: 220px;
+  margin-left: 20px;
+}
+.application_info .el-button--primary {
+  background-color: #515fe7;
+  border-color: #515fe7;
+}
+.application_info .el-button--warning.is-plain {
+  background-color: #fcefd6;
+  border-color: #fac266;
+  color: #e56600;
+}
+.application_info .el-button--warning {
+  background-color: #e56600;
+  border-color: #e56600;
+}
+</style>
diff --git a/src/components/comments-list.vue b/src/components/comments-list.vue
index 869d7f57cbe18c6c633b39bc3805a718f521e8fb..c98904fe5e279c90dab163db2d1ae15549a1f5d6 100644
--- a/src/components/comments-list.vue
+++ b/src/components/comments-list.vue
@@ -55,6 +55,7 @@ export default {
   flex-shrink: 0;
   padding-top: 5px;
   margin-right: 27px;
+  margin-left: 10px;
 }
 .comment-right {
   font-size: 16px;
diff --git a/src/components/comments-pagination.vue b/src/components/comments-pagination.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ed7b68843387324e62eff0a728afbb13121e023d
--- /dev/null
+++ b/src/components/comments-pagination.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="comments_pagination">
+    <div class="total_info">
+      <span>{{ `共${total}个条目` }}</span>
+    </div>
+    <div class="page_size_action">
+      <span>每页行数：</span>
+      <el-select :value="pageSize" @change="sizeChange">
+        <el-option
+          v-for="item in pageSizes"
+          :label="item"
+          :value="item"
+          :key="item"
+        ></el-option>
+      </el-select>
+    </div>
+    <div class="page_action">
+      <a :class="{ disabled: preDisabled }" @click.prevent="prePage">
+        <i class="el-icon-arrow-left"></i>
+      </a>
+      <span>{{ `第${currentPage}页 / 共${totalPages}页` }}</span>
+      <a :class="{ disabled: nextDisabled }" @click.prevent="nextPage">
+        <i class="el-icon-arrow-right"></i>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    total: {
+      type: Number,
+      required: true,
+    },
+    pageSizes: {
+      type: Array,
+      required: true,
+    },
+    pageSize: {
+      type: Number,
+      required: true,
+    },
+    currentPage: {
+      type: Number,
+      required: true,
+    },
+  },
+  data: () => ({}),
+  computed: {
+    totalPages() {
+      return Math.ceil(this.total / this.pageSize);
+    },
+    preDisabled() {
+      return this.currentPage === 1;
+    },
+    nextDisabled() {
+      return this.currentPage === this.totalPages;
+    },
+  },
+  methods: {
+    sizeChange(value) {
+      this.$emit("size-change", value);
+    },
+    prePage() {
+      if (this.preDisabled) {
+        return;
+      }
+      this.$emit("current-change", this.currentPage - 1);
+    },
+    nextPage() {
+      if (this.nextDisabled) {
+        return;
+      }
+      this.$emit("current-change", this.currentPage + 1);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.comments_pagination {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 14px;
+  line-height: 25px;
+  color: #333;
+}
+.total_info {
+  flex-grow: 1;
+}
+.page_size_action {
+  margin-left: 50px;
+}
+.page_size_action > .el-select {
+  width: 70px;
+}
+.page_action {
+  user-select: none;
+  margin-left: 50px;
+}
+.page_action > a {
+  cursor: pointer;
+}
+.page_action > a > i {
+  font-weight: bold;
+}
+.page_action > a.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>
+
+<style>
+.page_size_action > .el-select .el-input__inner,
+.page_size_action > .el-select .el-input.is-focus .el-input__inner {
+  border: 1px solid #fff;
+}
+</style>
diff --git a/src/components/commodity-card.vue b/src/components/commodity-card.vue
index 831a7ffb42290f604336eb2e120e4ccdbe1668db..0cd889e5a11a9cd43e68151018b56ce0d657f40c 100644
--- a/src/components/commodity-card.vue
+++ b/src/components/commodity-card.vue
@@ -14,7 +14,7 @@
     </div>
     <div class="com_card_btn">
         <el-button size="small">加入购物车</el-button>
-        <el-button size="small">查看详情</el-button>
+        <el-button size="small" @click="goUrl(cellData.id)">查看详情</el-button>
     </div>
   </div>
 </template>
@@ -32,7 +32,7 @@ export default {
   methods: {
     goUrl(parame) {
       if (this.url != "") {
-        this.$router.push(this.url + parame);
+        this.$router.push(this.url + "/" + parame);
       }
     }
   },
@@ -42,11 +42,10 @@ export default {
 
 <style scoped>
 .com_card {
-  width: 200px;
+  width: 290px;
   height: 300px;
   padding: 10px;
   background-color: #ddd;
-  margin: 10px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
diff --git a/src/components/commodity-cell.vue b/src/components/commodity-cell.vue
index d00d3f6a5e86cb376ce7f0203a5e53a2f4b1a6ea..52587233d3c1964a9a15e7551311c48ae029ce8d 100644
--- a/src/components/commodity-cell.vue
+++ b/src/components/commodity-cell.vue
@@ -67,7 +67,7 @@ export default {
   methods: {
     goUrl(parame) {
       if (this.url != "") {
-        this.$router.push(this.url + parame);
+        this.$router.push(this.url + "/" + parame);
       }
     }
   },
@@ -149,12 +149,14 @@ export default {
   padding: 1px 8px 2px;
   font-size: 12px;
   font-weight: 500;
+  line-height: 12px;
   border-radius: 15px;
   position: relative;
   top: -2px;
 }
 .map_service {
   background-color: #626DE9;
+  border: solid 1px #626DE9;
   color: #fff;
 }
 .shared {
diff --git a/src/components/commodity-list.vue b/src/components/commodity-list.vue
index 216477f5ec21ae71c681af76374e2d3ec1cf6c84..9e7d82a6b687688ad033ab146170c6b895d681f1 100644
--- a/src/components/commodity-list.vue
+++ b/src/components/commodity-list.vue
@@ -2,8 +2,12 @@
   <div>
     <div v-if="name=='应用商店'" ref="commodityList" class="commodity_card">
       <div ref="commodityCardIn" class="commodity_card_list">
-        <commodity-card v-for="item in datas" :cellData="item" :url="url" :key="item.id"></commodity-card>
-        <commodity-card v-for="item in datas" :cellData="item" :url="url" :key="'s' + item.id"></commodity-card>
+        <div v-for="item in datas" :key="item.id" class="commodity_card_item">
+          <commodity-card class="commodity_card_item_in" :cellData="item" :url="url"></commodity-card>
+        </div>
+        <div v-for="item in datas" :key="'s' + item.id" class="commodity_card_item">
+          <commodity-card class="commodity_card_item_in" :cellData="item" :url="url"></commodity-card>
+        </div>
       </div>
     </div>
     <div v-else class="commodity_cell">
@@ -115,11 +119,13 @@ export default {
       this.pagination.total = this.datas.length;
     },
     pageResize() {
-      let listWidth = this.$refs.commodityList.clientWidth;
-      let rowCardNum = Math.floor(listWidth / 220);
-      this.$refs.commodityCardIn.style.width = rowCardNum * 220 + "px";
-      this.$refs.commodityCardIn.style.marginLeft =
-        (listWidth - rowCardNum * 220) / 2 + "px";
+      let listWidth = this.$refs.commodityCardIn.clientWidth;
+      let rowCardNum = Math.floor(listWidth / 310);
+      let cardArr = this.$refs.commodityCardIn.children;
+      console.log(rowCardNum, listWidth / rowCardNum);
+      for (let i = 0; i < cardArr.length; i++) {
+        cardArr[i].style.width = (listWidth / rowCardNum) - 1 + "px";
+      }
       console.log(this.$refs.commodityCardIn);
     }
   },
@@ -166,9 +172,16 @@ export default {
 .commodity_card {
 }
 .commodity_card_list {
+  width: 100%;
   display: flex;
   flex-wrap: wrap;
 }
+.commodity_card_item {
+  margin: 10px 0;
+}
+.commodity_card_item_in {
+  margin: 0 auto;
+}
 </style>
 <style>
 .com_page_control .el-button {
diff --git a/src/components/service-info.vue b/src/components/service-info.vue
index aaeaf7dcacd2465e11325ce8bf345762d02878c1..c05cff5ef601d97e3fcc2b33196454817787398c 100644
--- a/src/components/service-info.vue
+++ b/src/components/service-info.vue
@@ -1,58 +1,54 @@
 <template>
-  <div class="sevice_info" v-if="serviceData">
+  <div class="service_info" v-if="data">
     <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_name" v-text="data.name"></span>
+      <span class="service_type" v-if="data.type" v-text="data.type"></span>
+      <span class="service_level" v-text="data.openLevel"></span>
       <span class="service_access_info">
         <img :src="require('@/assets/imgs/icon_liulan.png')" />
-        <span v-text="'浏览次数：' + serviceData.viewCount"></span>
+        <span v-text="'浏览次数：' + data.viewCount"></span>
       </span>
       <span class="service_access_info">
         <img :src="require('@/assets/imgs/icon_huoqu.png')" />
-        <span v-text="'获取次数：' + serviceData.acquireCount"></span>
+        <span v-text="'获取次数：' + data.acquireCount"></span>
       </span>
     </div>
     <div class="main_container">
-      <div class="main_container-left" v-if="serviceData.img">
-        <img :src="serviceData.img" width="460" />
+      <div class="main_container-left" v-if="data.img">
+        <img :src="data.img" width="460" />
       </div>
       <div class="main_container-right">
         <ul class="service_base_info">
           <li>
             <span>提供机构：</span>
-            <span v-text="serviceData.providedBy"> </span>
+            <span v-text="data.providedBy"> </span>
           </li>
           <li>
             <span>发布时间：</span>
-            <span v-text="serviceData.publishTime"></span>
+            <span v-text="data.publishTime"></span>
           </li>
           <li>
             <span>更新时间：</span>
-            <span v-text="serviceData.updatedTime"></span>
+            <span v-text="data.updatedTime"></span>
           </li>
           <li>
             <span>数据领域：</span>
-            <span v-text="serviceData.dataField"></span>
+            <span v-text="data.dataField"></span>
           </li>
           <li>
             <span>服务类型：</span>
-            <span v-html="serviceData.serviceType.join('&emsp;')"></span>
+            <span v-html="data.serviceType"></span>
           </li>
           <li>
             <span>资源摘要：</span>
-            <span v-text="serviceData.resourceSummary"></span>
+            <span v-text="data.resourceSummary"></span>
           </li>
         </ul>
         <div class="commodity_information">
           <span>规&emsp;&emsp;格：</span>
           <div class="btn_container">
             <el-button
-              v-for="(item, index) in serviceData.specifications"
+              v-for="(item, index) in data.specifications"
               :key="'specifications_' + index"
               :type="
                 item.value === commodityData.specification
@@ -73,7 +69,7 @@
           <span>购买方式：</span>
           <div class="btn_container">
             <el-button
-              v-for="(item, index) in serviceData.ways"
+              v-for="(item, index) in data.ways"
               v-text="item.name"
               :key="'way_' + index"
               :type="item.value === commodityData.way ? 'primary' : 'default'"
@@ -108,7 +104,7 @@
 <script>
 export default {
   props: {
-    serviceData: {
+    data: {
       type: Object,
       default: () => null,
     },
@@ -123,7 +119,7 @@ export default {
   computed: {
     specificationDescription() {
       let obj =
-        this.serviceData.specifications[this.commodityData.specification] || {};
+        this.data.specifications[this.commodityData.specification] || {};
       return obj.description || "";
     },
   },
@@ -147,7 +143,7 @@ export default {
 </script>
 
 <style scoped>
-.sevice_info {
+.service_info {
   padding: 20px;
   background-color: #fff;
   margin-bottom: 20px;
@@ -270,16 +266,16 @@ export default {
   width: 220px;
   margin-left: 20px;
 }
-.sevice_info .el-button--primary {
+.service_info .el-button--primary {
   background-color: #515fe7;
   border-color: #515fe7;
 }
-.sevice_info .el-button--warning.is-plain {
+.service_info .el-button--warning.is-plain {
   background-color: #fcefd6;
   border-color: #fac266;
   color: #e56600;
 }
-.sevice_info .el-button--warning {
+.service_info .el-button--warning {
   background-color: #e56600;
   border-color: #e56600;
 }
diff --git a/src/components/service-step.vue b/src/components/service-step.vue
deleted file mode 100644
index 9cac97fee88fedc9480a2ae85a3b884856122d96..0000000000000000000000000000000000000000
--- a/src/components/service-step.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-  <div class="service_step">
-    <ul class="step_items">
-      <li class="step_item">
-        <div class="step_icon">
-          <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>
-        </div>
-        <p class="step_title">审核确认</p>
-      </li>
-      <li class="step_line"></li>
-      <li class="step_item">
-        <div class="step_icon">
-          <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>
-        </div>
-        <p class="step_title">服务获取</p>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<style scoped>
-.service_step {
-  min-height: 68px;
-  padding: 30px 0;
-}
-.service_step > .step_items {
-  display: flex;
-  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: 68px;
-  height: 68px;
-  background-color: #515fe7;
-  border: 10px solid #e1e3ee;
-  border-radius: 50%;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 20px;
-  font-weight: bold;
-  color: #fff;
-}
-.service_step .step_item > .step_title {
-  font-size: 16px;
-  line-height: 24px;
-  color: #242c43;
-  margin-top: 7px;
-}
-</style>
diff --git a/src/components/service-steps.vue b/src/components/service-steps.vue
new file mode 100644
index 0000000000000000000000000000000000000000..17401332c1c89d130676525f3edd41040ed055de
--- /dev/null
+++ b/src/components/service-steps.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="service_steps">
+    <ul class="steps_list">
+      <template v-for="(step, index) in data">
+        <li class="step_item" :key="'step_' + index">
+          <div class="step_icon">
+            <span v-text="index + 1"></span>
+          </div>
+          <p class="step_title" v-text="step"></p>
+        </li>
+        <li
+          class="step_line"
+          :key="'step_line_' + index"
+          v-if="index + 1 < data.length"
+        ></li>
+      </template>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: ["服务申请", "信息填写", "审核确认", "服务获取"],
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped>
+.service_steps {
+  min-height: 68px;
+  padding: 30px 0;
+}
+.service_steps > .steps_list {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  text-align: center;
+}
+.service_steps .step_line {
+  width: 168px;
+  border: 1px solid #c0c8f8;
+  margin: 33px 10px 0;
+}
+.service_steps .step_item > .step_icon {
+  width: 68px;
+  height: 68px;
+  background-color: #515fe7;
+  border: 10px solid #e1e3ee;
+  border-radius: 50%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+  font-weight: bold;
+  color: #fff;
+}
+.service_steps .step_item > .step_title {
+  font-size: 16px;
+  line-height: 24px;
+  color: #242c43;
+  margin-top: 7px;
+}
+</style>
diff --git a/src/components/service-tab-comments.vue b/src/components/service-tab-comments.vue
index a1bd7efd4ee801a3617c6427c7b2abfe8a01cee2..33f7904db9f1fee8f5260f2ee4c5b21a0920ee25 100644
--- a/src/components/service-tab-comments.vue
+++ b/src/components/service-tab-comments.vue
@@ -1,54 +1,72 @@
 <template>
-  <div class="service_tab-comments">
+  <div class="service_tab-comments" v-if="data">
     <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>
+    <comments-list :data="data.list"></comments-list>
+    <comments-pagination
+      :total="data.baseInfo.total"
+      :page-sizes="pageSizes"
+      :page-size="pageSize"
+      :current-page="currentPage"
+      @size-change="changePageSize"
+      @current-change="changeCurrentPage"
+    ></comments-pagination>
   </div>
 </template>
 
 <script>
 import commentsScore from "@/components/comments-score";
 import commentsList from "@/components/comments-list";
+import commentsPagination from "@/components/comments-pagination";
 
 export default {
   components: {
     commentsScore,
     commentsList,
+    commentsPagination,
   },
   props: {
-    data: {
-      type: Object,
+    url: {
+      type: String,
       required: true,
     },
   },
-  data: () => ({}),
+  data: () => ({
+    data: null,
+    pageSizes: [10, 50, 100],
+    pageSize: 10,
+    currentPage: 1,
+  }),
   methods: {
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
+    changePageSize(value) {
+      this.pageSize = value;
+      this.currentPage = 1;
+    },
+    changeCurrentPage(value) {
+      this.currentPage = value;
     },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
+    init() {
+      this.$http
+        .get("/static/serviceInfo.json")
+        .then((response) => {
+          this.data = response.body[this.url].comments;
+        })
+        .catch(function(error) {
+          console.log(error);
+        });
     },
   },
-  created() {},
+  mounted() {
+    this.init();
+  },
 };
 </script>
 
 <style scoped>
-.comments_pages {
-  text-align: center;
-  margin-top: 20px;
+.service_tab-comments > .comments_score,
+.service_tab-comments > .comments_list {
+  padding: 0 30px;
+}
+.service_tab-comments > .comments_pagination {
+  margin-top: 60px;
 }
 </style>
diff --git a/src/components/service-tab-detail.vue b/src/components/service-tab-detail.vue
index 7c61fbcc96eb0954a263469e7802fcd1a4fede7a..a3ccd2277ea865b5547dd26a8c2cca938552a2d9 100644
--- a/src/components/service-tab-detail.vue
+++ b/src/components/service-tab-detail.vue
@@ -1,30 +1,25 @@
 <template>
-  <ul class="service_tab-detail">
+  <ul class="service_tab-detail" v-if="data">
     <li
       class="detail-item"
       v-for="(item, index) in data"
-      :key="'detail-' + index"
+      :key="'detail_' + index"
     >
       <h3 class="detail-title" v-text="item.name + '：'"></h3>
 
-      <service-step v-if="item.type == 'step'"></service-step>
+      <service-steps
+        v-if="item.type == 'step'"
+        :data="item.value"
+      ></service-steps>
       <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"
+        row-key="id"
         default-expand-all
         :border="false"
         :data="item.value.datas"
@@ -38,26 +33,50 @@
           :align="v.align || 'left'"
         ></el-table-column>
       </el-table>
+      <el-table
+        v-else-if="item.type == 'list'"
+        class="detail-table detail-list"
+        :border="false"
+        :data="item.value"
+      >
+        <el-table-column prop="name" label="name" width="120"></el-table-column>
+        <el-table-column prop="value" label="value"></el-table-column>
+      </el-table>
     </li>
   </ul>
 </template>
 
 <script>
-import serviceStep from "@/components/service-step";
+import serviceSteps from "@/components/service-steps";
 
 export default {
   components: {
-    serviceStep,
+    serviceSteps,
   },
   props: {
-    data: {
-      type: Array,
+    url: {
+      type: String,
       required: true,
     },
   },
-  data: () => ({}),
-  methods: {},
-  created() {},
+  data: () => ({
+    data: null,
+  }),
+  methods: {
+    init() {
+      this.$http
+        .get("/static/serviceInfo.json")
+        .then((response) => {
+          this.data = response.body[this.url].detail;
+        })
+        .catch(function(error) {
+          console.log(error);
+        });
+    },
+  },
+  mounted() {
+    this.init();
+  },
 };
 </script>
 
@@ -76,7 +95,4 @@ export default {
   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
index 76e2d9ec39ca2bee9eddc19e3ca189c57b66d133..f002b7db8e096bdf3df42a17be1005f79d7b97d0 100644
--- a/src/components/service-tab-provider.vue
+++ b/src/components/service-tab-provider.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="service_tab-provider">
+  <div class="service_tab-provider" v-if="data">
     <div class="provider-left">
       <el-avatar shape="square" :size="156" fit="cover" :src="data.img" />
     </div>
@@ -22,14 +22,29 @@
 <script>
 export default {
   props: {
-    data: {
-      type: Object,
+    url: {
+      type: String,
       required: true,
     },
   },
-  data: () => ({}),
-  methods: {},
-  created() {},
+  data: () => ({
+    data: null,
+  }),
+  methods: {
+    init() {
+      this.$http
+        .get("/static/serviceInfo.json")
+        .then((response) => {
+          this.data = response.body[this.url].provider;
+        })
+        .catch(function(error) {
+          console.log(error);
+        });
+    },
+  },
+  mounted() {
+    this.init();
+  },
 };
 </script>
 
diff --git a/src/components/service-tab-specification.vue b/src/components/service-tab-specification.vue
index ad9202cc6bc0ee16311153d2552d418061c0169a..eb09b95cd1409935419f238d0962bd8a9d78378e 100644
--- a/src/components/service-tab-specification.vue
+++ b/src/components/service-tab-specification.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="service_tab-specification">
+  <div class="service_tab-specification" v-if="data">
     <div class="specification_header">
       <p>申请方式：</p>
       <type-group v-model="type" :types="types"></type-group>
@@ -19,12 +19,13 @@ export default {
     typeGroup,
   },
   props: {
-    data: {
-      type: Array,
+    url: {
+      type: String,
       required: true,
     },
   },
   data: () => ({
+    data: null,
     type: "",
     types: [],
   }),
@@ -33,15 +34,29 @@ export default {
       return this.types.length > 0 ? this.data[this.type].data : [];
     },
   },
-  mounted() {
-    this.types = this.data.map((item, index) => ({
-      name: item.name,
-      value: index,
-    }));
+  methods: {
+    init() {
+      this.$http
+        .get("/static/serviceInfo.json")
+        .then((response) => {
+          this.data = response.body[this.url].specification;
+
+          this.types = this.data.map((item, index) => ({
+            name: item.name,
+            value: index,
+          }));
 
-    if (this.types.length) {
-      this.type = 0;
-    }
+          if (this.types.length) {
+            this.type = 0;
+          }
+        })
+        .catch(function(error) {
+          console.log(error);
+        });
+    },
+  },
+  mounted() {
+    this.init();
   },
 };
 </script>
diff --git a/src/components/service-tabs.vue b/src/components/service-tabs.vue
index d81ecbcddf49cc1ede7ff3dff8accac59fab3f24..05bbab4dc4e0b4dc69e6b7e51cc725a207395efb 100644
--- a/src/components/service-tabs.vue
+++ b/src/components/service-tabs.vue
@@ -2,35 +2,31 @@
   <el-tabs
     class="service_info_tab"
     type="border-card"
-    v-model="serviceTabsActiveName"
+    v-model="tabName"
     :stretch="true"
   >
-    <el-tab-pane label="服务详情信息" name="first">
+    <el-tab-pane :label="detailTitle" name="detail" v-if="detailUrl">
       <service-tab-detail
-        v-if="fwxqxx"
         class="service_info"
-        :data="fwxqxx"
+        :url="detailUrl"
       ></service-tab-detail>
     </el-tab-pane>
-    <el-tab-pane label="规格定价" name="second">
+    <el-tab-pane :label="specificationTitle" name="specification" v-if="specificationUrl">
       <service-tab-specification
-        v-if="ggdj"
         class="service_info"
-        :data="ggdj"
+        :url="specificationUrl"
       ></service-tab-specification>
     </el-tab-pane>
-    <el-tab-pane label="提供机构" name="third">
+    <el-tab-pane :label="providerTitle" name="provider" v-if="providerUrl">
       <service-tab-provider
-        v-if="tgjg"
         class="service_info"
-        :data="tgjg"
+        :url="providerUrl"
       ></service-tab-provider>
     </el-tab-pane>
-    <el-tab-pane label="服务评价信息" name="fourth">
+    <el-tab-pane :label="commentsTitle" name="comments" v-if="commentsUrl">
       <service-tab-comments
-        v-if="ffpjxx"
         class="service_info"
-        :data="ffpjxx"
+        :url="commentsUrl"
       ></service-tab-comments>
     </el-tab-pane>
   </el-tabs>
@@ -50,50 +46,43 @@ export default {
     serviceTabComments,
   },
   props: {
-    type: {
+    detailTitle: {
       type: String,
-      required: true,
+      default: () => "服务详情信息",
     },
-  },
-  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);
-          });
-      });
+    specificationTitle: {
+      type: String,
+      default: () => "规格定价",
     },
-    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);
-        }
-      );
+    providerTitle: {
+      type: String,
+      default: () => "提供机构",
+    },
+    commentsTitle: {
+      type: String,
+      default: () => "服务评价信息",
+    },
+    detailUrl: {
+      type: String,
+      default: () => "",
+    },
+    specificationUrl: {
+      type: String,
+      default: () => "",
+    },
+    providerUrl: {
+      type: String,
+      default: () => "",
+    },
+    commentsUrl: {
+      type: String,
+      default: () => "",
     },
   },
-  created() {
-    this.init();
-  },
+  data: () => ({
+    tabName: "detail",
+  }),
+  methods: {},
 };
 </script>
 
@@ -107,6 +96,9 @@ export default {
   padding: 35px 40px 40px;
   box-sizing: border-box;
 }
+.service_tab-comments {
+  padding: 35px 20px 20px !important;
+}
 </style>
 
 <style>
@@ -149,7 +141,26 @@ export default {
 .service_info_tab .el-table::before {
   display: none;
 }
+.service_info_tab .el-table {
+  width: 100%;
+}
 .service_info_tab .el-table__row:nth-child(odd) td {
   background-color: #f8f9fd;
 }
+.service_info_tab .detail-list .el-table__header-wrapper {
+  display: none;
+}
+.service_info_tab .detail-list .el-table__row td {
+  color: #58617a;
+}
+.service_info_tab .detail-list .el-table__row td:first-child {
+  font-weight: bold;
+  color: #1a2236;
+}
+.service_info_tab .detail-list .el-table__row:nth-child(even) td {
+  background-color: #f8f9fd;
+}
+.service_info_tab .detail-list .el-table__row:nth-child(odd) td {
+  background-color: #fff;
+}
 </style>
diff --git a/src/components/shopping-cart/shopping-cart-cell.vue b/src/components/shopping-cart/shopping-cart-cell.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3a0eaa6cfccb8fd985093ca4baf7522a4dcee0ff
--- /dev/null
+++ b/src/components/shopping-cart/shopping-cart-cell.vue
@@ -0,0 +1,373 @@
+<template>
+  <div class="shopping_cell">
+    <el-row class="shopping_cell_row">
+      <el-col :span="2" class="shopping_cell_check">
+        <el-checkbox v-if="!readOnly" v-model="checkedItem" @change="getState"></el-checkbox>
+        <div v-else class="shopping_cell_expired">
+          <span>已下架</span>
+        </div>
+      </el-col>
+      <el-col :span="9">
+        <div class="shopping_cell_item">
+          <img
+            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+            class="shopping_cell_img"
+          />
+          <div class="shopping_cell_msg">
+            <div class="shopping_cell_name">
+              {{ cellItem.name }}
+              <span
+                v-if="cellItem.mapService"
+                class="tags map_service"
+              >mapService</span>
+              <span v-if="cellItem.state == 1" class="tags shared">共享</span>
+              <span v-else-if="cellItem.state ==  2" class="tags restricted">受限</span>
+              <span v-else class="tags sensitive">敏感</span>
+            </div>
+            <div class="shopping_cell_msg_other">
+              <div class="shopping_cell_type">{{ cellItem.type }}</div>
+              <div class="shopping_cell_creator">{{ cellItem.creator }}</div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="5">
+        <div class="shopping_cell_specification">
+          <div class="shopping_cell_specification_val">
+            <div class="shopping_cell_specification_val_specification">规格：{{ specificationBtns[specification] }}</div>
+            <div class="shopping_cell_specification_val_type">申请方式：{{ specificationApplicationBtns[specificationApplication] }}</div>
+            <div class="shopping_cell_specification_edit">
+              <el-popover placement="right" width="280" v-model="visible" @after-leave="setSpecificationPop">
+                <div>
+                  <div class="shopping_cell_specification_title">规格：</div>
+                  <div>
+                    <el-button
+                      v-for="(item, index) in specificationBtns"
+                      :key="'specification' + index"
+                      :class="specificationPop == index ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'"
+                      size="mini"
+                      @click="changeSpecification(index)"
+                    >{{ index + 1 + ". " + item }}</el-button>
+                  </div>
+                  <div class="shopping_cell_specification_title">申请方式：</div>
+                  <div>
+                    <el-button
+                      v-for="(item, index) in specificationApplicationBtns"
+                      :key="'specification' + index"
+                      :class="specificationApplicationPop == index ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'"
+                      size="mini"
+                       @click="changeSpecificationApplication(index)"
+                    >{{ item }}购买</el-button>
+                  </div>
+                </div>
+                <div class="pop_footer">
+                  <el-button
+                    class="shopping_cell_specification_cancel"
+                    size="mini"
+                    type="text"
+                    @click="visible = false"
+                  >取消</el-button>
+                  <el-button
+                    class="shopping_cell_specification_submit"
+                    size="mini"
+                    @click="submitPop"
+                  >确定</el-button>
+                </div>
+                <el-button v-if="!readOnly" circle size="mini" slot="reference">
+                  <img :src="specificationEdit" />
+                </el-button>
+              </el-popover>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="4" class="shopping_cell_num">
+        <el-input-number :disabled="readOnly" v-model="numItem" size="mini" :min="1"></el-input-number>
+      </el-col>
+      <el-col :span="4" class="shopping_cell_options">
+        <el-checkbox v-if="!readOnly" v-model="checkedSubscription">订阅该服务</el-checkbox>
+        <div class="shopping_cell_options_del">
+          <el-button size="mini">删除</el-button>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    cellItem: { type: Object, default: {} },
+    cellIndex: { type: Number, default: null },
+    cellCheck: {
+      type: Boolean,
+      default: false
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    cellCheck: function(val) {
+      this.checkedItem = val;
+    }
+  },
+  data: () => ({
+    checkedItem: false,
+    numItem: 1,
+    specificationEdit: require("../../assets/imgs/ic_edit.png"),
+    checkedSubscription: false,
+    visible: false,
+    specification: 1,
+    specificationApplication: 0,
+    specificationPop: 1,
+    specificationApplicationPop: 0,
+    specificationBtns: [
+      "访问次数：20/日  访问量：100/日",
+      "访问次数：200/日  访问量：1000/日",
+      "访问次数：无上限  访问量：无上限"
+    ],
+    specificationApplicationBtns: ["按月", "按年"]
+  }),
+  computed: {},
+  methods: {
+    getState(val) {
+      this.$emit("changeState", { state: val, index: this.cellIndex });
+    },
+    changeSpecification(val) {
+      this.specificationPop = val;
+    },
+    changeSpecificationApplication(val) {
+      this.specificationApplicationPop = val;
+    },
+    submitPop() {
+      this.specification = this.specificationPop;
+      this.specificationApplication = this.specificationApplicationPop;
+      this.visible = false;
+    },
+    setSpecificationPop() {
+      this.specificationPop = this.specification;
+      this.specificationApplicationPop = this.specificationApplication;
+    }
+  },
+  mounted() {}
+};
+</script>
+
+<style scoped>
+.shopping_cell {
+  height: 110px;
+  border-bottom: 2px #f4f7fc solid;
+  margin: 10px 0;
+}
+.shopping_cell:nth-last-child(1) {
+  border-bottom: 0;
+  margin: 10px 0;
+}
+.shopping_cell_row {
+}
+.shopping_cell_item {
+  display: flex;
+  justify-content: flex-start;
+}
+.shopping_cell_check {
+  text-align: center;
+  padding-top: 35px;
+}
+.shopping_cell_expired {
+  display: inline-block;
+  text-align: center;
+  padding: 2px 6px;
+  width: 50px;
+  background-color: #e3e5ef;
+  border-radius: 5px;
+  font-size: 12px;
+  color: #8890a7;
+}
+.shopping_cell_img {
+  width: 100px;
+  height: 100px;
+  border-radius: 8px;
+}
+.shopping_cell_msg {
+  width: calc(100% - 120px);
+  margin-left: 10px;
+  position: relative;
+}
+.shopping_cell_name {
+  width: 100%;
+  line-height: 24px;
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  font-size: 16px;
+}
+.shopping_cell_msg_other {
+  position: absolute;
+  bottom: 0;
+}
+.shopping_cell_type {
+  color: #8890a7;
+  font-size: 14px;
+  line-height: 22px;
+}
+.shopping_cell_creator {
+  color: #8890a7;
+  font-size: 14px;
+  line-height: 22px;
+}
+.tags {
+  display: inline-block;
+  margin-left: 10px;
+  padding: 1px 8px 2px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 12px;
+  border-radius: 15px;
+  position: relative;
+  top: -2px;
+}
+.map_service {
+  background-color: #626de9;
+  border: solid 1px #626de9;
+  color: #fff;
+}
+.shared {
+  background-color: #e7fdfc;
+  border: solid 1px #8bd6d0;
+  color: #25bdb1;
+}
+.restricted {
+  background-color: #fffee8;
+  border: solid 1px #e4c884;
+  color: #ef9433;
+}
+.sensitive {
+  background-color: #ffefef;
+  border: solid 1px #d7a4a9;
+  color: #e15260;
+}
+.shopping_cell_specification {
+  width: 80%;
+  height: 100px;
+  margin: 0 10%;
+  background-color: #f9fafc;
+  border-radius: 8px;
+  padding: 10px;
+  position: relative;
+}
+.shopping_cell_specification_val {
+  color: #8890a7;
+  font-size: 14px;
+}
+.shopping_cell_specification_val_type {
+  margin-top: 10px;
+}
+.shopping_cell_num {
+  text-align: center;
+  padding-top: 32px;
+}
+.shopping_cell_options {
+  text-align: center;
+  padding-top: 20px;
+}
+.shopping_cell_specification_edit {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+}
+.shopping_cell_options_del {
+  margin-top: 15px;
+}
+.shopping_cell_specification_title {
+  margin: 10px 0;
+}
+.shopping_cell_specification_btn {
+  margin: 0 10px 10px;
+}
+.shopping_cell_specification_btn.active {
+  background-color: #515fe7;
+  color: #f4f7fc;
+}
+.shopping_cell_specification_submit {
+  background-color: #e56600;
+  color: #f4f7fc;
+  margin-left: 20px;
+}
+.shopping_cell_specification_cancel {
+  color: #58617a;
+}
+.pop_footer {
+  text-align: right;
+  margin: 30px 5px 5px;
+}
+</style>
+<style>
+.shopping_cell_specification_edit .el-button {
+  border: 0;
+  width: 28px;
+  height: 28px;
+}
+.shopping_cell_num .el-input-number--mini {
+  width: 100px;
+}
+.shopping_cell_num .el-input-number__decrease {
+  border-radius: 8px 0 0 8px;
+  color: #8390ee;
+  font-size: 16px;
+}
+.shopping_cell_num .el-input-number__increase {
+  border-radius: 0 8px 8px 0;
+  color: #8390ee;
+  font-size: 16px;
+}
+.shopping_cell_options .el-button {
+  border: 0;
+  font-size: 14px;
+  font-weight: 700;
+  color: #77192d;
+}
+.shopping_cell_options .el-checkbox {
+  color: #8890a7;
+}
+.shopping_cell_options .el-checkbox__input.is-checked + .el-checkbox__label {
+  color: #586077;
+}
+.shopping_cell_options .el-checkbox__inner:hover {
+  border-color: #d0d6f4;
+}
+.shopping_cell_options .el-checkbox__input.is-focus .el-checkbox__inner {
+  border-color: #d0d6f4;
+}
+.shopping_cell_options .el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #d0d6f4;
+  border-color: #d0d6f4;
+}
+.shopping_cell_options .el-checkbox__inner::after {
+  border: 1px solid #666;
+  border-left: 0;
+  border-top: 0;
+}
+.shopping_cell_check .el-checkbox__inner:hover {
+  border-color: #626de9;
+}
+.shopping_cell_check .el-checkbox__input.is-focus .el-checkbox__inner {
+  border-color: #626de9;
+}
+.shopping_cell_check .el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #626de9;
+  border-color: #626de9;
+}
+.el-popover,
+.el-radio-button:first-child:last-child .el-radio-button__inner {
+  border-radius: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/shopping-cart/shopping-cart-com.vue b/src/components/shopping-cart/shopping-cart-com.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f931e9ef8cb670f62fa13a4fb0c87ac4e06e74eb
--- /dev/null
+++ b/src/components/shopping-cart/shopping-cart-com.vue
@@ -0,0 +1,245 @@
+<template>
+  <div>
+    <div class="shopping_list shopping_list_all">
+      <div class="shopping_all_head">
+        <el-row>
+          <el-col :span="2" class="shopping_all_head_item">
+            <el-checkbox v-model="checkShopAll" @change="checkAll">全选</el-checkbox>
+          </el-col>
+          <el-col :span="9" class="shopping_all_head_item">服务信息</el-col>
+          <el-col :span="5" class="shopping_all_head_item">规格</el-col>
+          <el-col :span="4" class="shopping_all_head_item">数量</el-col>
+          <el-col :span="4" class="shopping_all_head_item">操作</el-col>
+        </el-row>
+      </div>
+      <ShoppingCartList
+        ref="shoppingList"
+        :checkShopAll="checkShopAll"
+        :list="list"
+        :checkList="checkList"
+        :readOnly="false"
+        @changeState="changeState"
+        class="shopping_all_list"
+      />
+    </div>
+    <div class="shopping_list shopping_list_fail">
+      <div class="expired_service">已失效服务</div>
+      <ShoppingCartList :readOnly="true" class="shopping_all_list" />
+    </div>
+    <div class="shopping_list shopping_list_options">
+      <div class="shopping_cart_options">
+        <el-row>
+          <el-col :span="2" class="shopping_cart_options_cell">
+            <el-checkbox v-model="checkShopAll" @change="checkAll">全选</el-checkbox>
+          </el-col>
+          <el-col :span="3" class="shopping_cart_options_del">
+            <span v-if="getNum == 0" class="shopping_cart_options_del_service">删除选中服务</span>
+            <span
+              v-else
+              @click="delSelectService"
+              class="shopping_cart_options_del_service_act"
+            >删除选中服务</span>
+          </el-col>
+          <el-col :span="15" class="shopping_cart_options_num">
+            共 {{ checkList.length }} 项服务，已选择
+            <span>{{ getNum }}</span> 项
+          </el-col>
+          <el-col :span="4" class="shopping_cart_options_cell">
+            <el-button v-if="getNum == 0" :disabled="true" class="shopping_cart_options_cell_btn">一键申请</el-button>
+            <el-button v-else class="shopping_cart_options_cell_btn_act">一键申请</el-button>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ShoppingCartList from "@/components/shopping-cart/shopping-cart-list";
+export default {
+  components: {
+    ShoppingCartList
+  },
+  props: {},
+  data: () => ({
+    checkShopAll: false,
+    checkList: [false, false, false],
+    list: [
+      {
+        id: 0,
+        name: "水路货物周转量情况",
+        type: "基础数据服务",
+        creator: "贵州省交通运输厅0",
+        state: 1,
+        mapService: 1
+      },
+      {
+        id: 1,
+        name: "水路货物周转量情况水路货物周水路货物周转量情况水路货物周",
+        type: "基础数据服务",
+        creator: "贵州省交通运输厅1",
+        state: 1
+      },
+      {
+        id: 2,
+        name: "水路货物周转量情况水路货物周转量情况",
+        type: "基础数据服务",
+        creator: "贵州省交通运输厅2",
+        state: 1,
+        mapService: 1
+      }
+    ]
+  }),
+  mounted() {},
+  computed: {
+    getNum() {
+      let num = this.checkList.reduce(
+        (a, v) => (v === true ? a + 1 : a + 0),
+        0
+      );
+      return num;
+    }
+  },
+  methods: {
+    checkAll(val) {
+      this.$refs.shoppingList.setAllState(val);
+    },
+    changeState(val) {
+      console.log(val);
+      this.$set(this.checkList, val.index, val.state);
+      if (this.checkList.indexOf(false) == -1) {
+        this.checkShopAll = true;
+      } else {
+        this.checkShopAll = false;
+      }
+    },
+    delSelectService() {
+      this.checkList.forEach((item, index) => {
+        if (item === true) {
+          console.log(this.list[index]);
+        }
+      });
+    }
+  }
+};
+</script>
+<style scoped>
+.shopping_list {
+  border-radius: 12px;
+  background-color: #ffffff;
+  box-shadow: 0px 3px 6px 0px #f4f7fc;
+  overflow: hidden;
+  margin-bottom: 20px;
+}
+.shopping_list_all {
+}
+.shopping_list_fail {
+}
+.shopping_list_options {
+}
+.shopping_all_list {
+}
+.shopping_fail_head {
+  background-color: #eff1f8;
+  height: 40px;
+}
+.shopping_options {
+  height: 84px;
+}
+.expired_service {
+  height: 48px;
+  font-size: 14px;
+  font-weight: 700;
+  padding: 10px 50px;
+  line-height: 28px;
+  background-color: #eff1f8;
+}
+.shopping_cart_options {
+  height: 80px;
+  padding: 0 20px;
+  font-weight: 700;
+  line-height: 80px;
+}
+.shopping_cart_options_cell {
+  text-align: center;
+}
+.shopping_cart_options_del {
+}
+.shopping_cart_options_del_service {
+  color: #c8d0e7;
+}
+.shopping_cart_options_del_service_act {
+  cursor: pointer;
+  color: #0f2683;
+}
+.shopping_cart_options_num {
+  text-align: right;
+  font-size: 14px;
+  font-weight: 500;
+  color: #58617a;
+}
+.shopping_cart_options_num span {
+  color: #e56600;
+}
+.shopping_cart_options_cell_btn {
+  width: 90%;
+  margin: 0 10%;
+}
+.shopping_cart_options_cell_btn_act {
+  width: 90%;
+  margin: 0 10%;
+  background-color: #e56600;
+  color: #fcefd6;
+}
+.shopping_all_head {
+  background-color: #e5f0ff;
+  height: 48px;
+  padding: 0 20px;
+  font-weight: 700;
+  line-height: 48px;
+}
+.shopping_all_head_item {
+  text-align: center;
+}
+.shopping_list_page {
+  padding: 10px 20px 0;
+}
+</style>
+<style>
+.shopping_cart_options_cell .el-checkbox {
+  font-weight: 700;
+}
+.shopping_cart_options_cell .el-checkbox__inner:hover {
+  border-color: #626de9;
+}
+.shopping_cart_options_cell .el-checkbox__input.is-focus .el-checkbox__inner {
+  border-color: #626de9;
+}
+.shopping_cart_options_cell .el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #626de9;
+  border-color: #626de9;
+}
+.shopping_cart_options_cell
+  .el-checkbox__input.is-checked
+  + .el-checkbox__label {
+  color: #626de9;
+}
+.shopping_all_head_item .el-checkbox {
+  font-weight: 700;
+}
+.shopping_all_head_item .el-checkbox__inner:hover {
+  border-color: #626de9;
+}
+.shopping_all_head_item .el-checkbox__input.is-focus .el-checkbox__inner {
+  border-color: #626de9;
+}
+.shopping_all_head_item .el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #626de9;
+  border-color: #626de9;
+}
+.shopping_all_head_item .el-checkbox__input.is-checked + .el-checkbox__label {
+  color: #626de9;
+}
+</style>
diff --git a/src/components/shopping-cart/shopping-cart-list.vue b/src/components/shopping-cart/shopping-cart-list.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c99d996752a457d1dea271610e005e483aeb1da1
--- /dev/null
+++ b/src/components/shopping-cart/shopping-cart-list.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <div class="shopping_list_page">
+      <ShoppingCartCell
+        v-for="(item, index) in list"
+        :cellItem="item"
+        :cellIndex="index"
+        :cellCheck="checkLists[index]"
+        :key="item.id"
+        :readOnly="readOnly"
+        @changeState="changeState"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import ShoppingCartCell from "@/components/shopping-cart/shopping-cart-cell";
+export default {
+  components: {
+    ShoppingCartCell
+  },
+  props: {
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    checkShopAll: {
+      type: Boolean
+    },
+    list: {
+      type: Array
+    },
+    checkList: {
+      type: Array,
+      default: ()=> {[]}
+    }
+  },
+  watch: {
+    checkList: {
+      immediate: true, // 这句重要
+      handler(val) {
+        console.log("ss")
+        this.checkLists = val;
+      }
+    }
+  },
+  data: () => ({
+    checkedAll: false,
+    checkLists: []
+  }),
+  mounted() {},
+  methods: {
+    changeState(val) {
+      this.$emit("changeState", val);
+    },
+    setAllState(val) {
+      for (let i = 0; i < this.checkLists.length; i++) {
+        this.$set(this.checkLists, i, val)
+      }
+    }
+  }
+};
+</script>
diff --git a/src/pages/shop_list_app_store.vue b/src/pages/shop_list_app_store.vue
index 64a9bb8975b85b1571438ae0b56d1df8c957fdac..9fa987e2c236ea4463d7d4d6da9c56c231b76247 100644
--- a/src/pages/shop_list_app_store.vue
+++ b/src/pages/shop_list_app_store.vue
@@ -5,7 +5,7 @@
         <service-shop-menu></service-shop-menu>
       </el-aside>
       <el-main>
-        <service-list name="应用商店" url="skfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
+        <service-list name="应用商店" url="yysdDetail" urlList="url1sss" urlFilter="urldwad2222"></service-list>
       </el-main>
     </el-container>
   </div>
diff --git a/src/pages/shop_list_comprehensive_app.vue b/src/pages/shop_list_comprehensive_app.vue
index ffbfe4095c8fe7a6fb4001a275b077903f132f18..f2c228402c5ccc14affa544a57f0d8bce503d114 100644
--- a/src/pages/shop_list_comprehensive_app.vue
+++ b/src/pages/shop_list_comprehensive_app.vue
@@ -5,7 +5,7 @@
         <service-shop-menu></service-shop-menu>
       </el-aside>
       <el-main>
-        <service-list name="综合应用" url="skfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
+        <service-list name="综合应用" url="zhyyfwDetail" urlList="url1sss" urlFilter="urldwad2222"></service-list>
       </el-main>
     </el-container>
   </div>
diff --git a/src/pages/shop_list_data.vue b/src/pages/shop_list_data.vue
index 6378df5b1f77ee3c4adc63ac58c3758736595f8c..4a8adba84d70c6d495c0256a1299a5e38ba66bf5 100644
--- a/src/pages/shop_list_data.vue
+++ b/src/pages/shop_list_data.vue
@@ -5,7 +5,7 @@
         <service-shop-menu></service-shop-menu>
       </el-aside>
       <el-main>
-        <service-list name="数据服务" url="sjfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
+        <service-list name="数据服务" url="sjfwDetail" urlList="url1sss" urlFilter="urldwad2222"></service-list>
       </el-main>
     </el-container>
   </div>
diff --git a/src/pages/shop_list_space_time.vue b/src/pages/shop_list_space_time.vue
index ae10980c1bc9be985b24a9090f606baf27c95dbe..892fd4830df61ad610aba376ea0d1aab740cd094 100644
--- a/src/pages/shop_list_space_time.vue
+++ b/src/pages/shop_list_space_time.vue
@@ -5,7 +5,7 @@
         <service-shop-menu></service-shop-menu>
       </el-aside>
       <el-main>
-        <service-list name="时空服务" url="skfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
+        <service-list name="时空服务" url="skfwDetail" urlList="url1sss" urlFilter="urldwad2222"></service-list>
       </el-main>
     </el-container>
   </div>
diff --git a/src/pages/shopping_cart.vue b/src/pages/shopping_cart.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2bebbaaa0efc6e741d3d0b923c4f552f1693f2fb
--- /dev/null
+++ b/src/pages/shopping_cart.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="shopping">
+    <div class="shopping_title">我的购物车</div>
+    <ShoppingCart />
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import ShoppingCart from "@/components/shopping-cart/shopping-cart-com";
+
+export default {
+  components: {
+    ShoppingCart
+  },
+  data: () => ({
+    datas: {}
+  }),
+  mounted() {},
+  methods: {}
+};
+</script>
+<style scoped>
+.shopping {
+  width: 1200px;
+  margin: 0 auto;
+}
+.shopping_title {
+  height: 40px;
+  line-height: 40px;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/sjfwDetail.vue b/src/pages/sjfwDetail.vue
index 29c23ed8f0cc05e6595446f67b80fd5726e8793d..11fb944cc8b08f3e54535cd0c1a6643905c9c16d 100644
--- a/src/pages/sjfwDetail.vue
+++ b/src/pages/sjfwDetail.vue
@@ -8,9 +8,14 @@
       </el-breadcrumb>
     </div>
 
-    <service-info :service-data="serviceData"></service-info>
+    <service-info :data="baseInfo"></service-info>
 
-    <service-tabs type="sjfw"></service-tabs>
+    <service-tabs
+      detail-url="sjfw"
+      specification-url="sjfw"
+      provider-url="sjfw"
+      comments-url="sjfw"
+    ></service-tabs>
   </div>
 </template>
 
@@ -24,7 +29,10 @@ export default {
     serviceTabs,
   },
   data: () => ({
-    serviceData: null,
+    baseInfo: null,
+    detailData: null,
+    specification: null,
+    provider: null,
   }),
   methods: {
     getDataFromApi(_url) {
@@ -40,9 +48,9 @@ export default {
       });
     },
     init() {
-      this.getDataFromApi(`/static/serviceDetail.json`).then(
+      this.getDataFromApi(`/static/serviceBaseInfo.json`).then(
         ({ sjfw }) => {
-          this.serviceData = sjfw;
+          this.baseInfo = sjfw;
         },
         (error) => {
           console.log(error);
diff --git a/src/pages/skfwDetail.vue b/src/pages/skfwDetail.vue
index f118dc5a5eca81ab7f072b23cb7bc93632046b36..0d981dac9af08bcb32f4b5a47d33db74dcb87af4 100644
--- a/src/pages/skfwDetail.vue
+++ b/src/pages/skfwDetail.vue
@@ -8,25 +8,28 @@
       </el-breadcrumb>
     </div>
 
-    <!-- <servive-commodity-info
-      :service-data="serviceData"
-    ></servive-commodity-info>
+    <service-info :data="baseInfo"></service-info>
 
-    <servive-tabs-info type="sjfw"></servive-tabs-info> -->
+    <service-tabs
+      detail-url="skfw"
+      specification-url="skfw"
+      provider-url="skfw"
+      comments-url="skfw"
+    ></service-tabs>
   </div>
 </template>
 
 <script>
-// import serviveCommodityInfo from "@/components/servive-commodity-info";
-// import serviveTabsInfo from "@/components/servive-tabs-info";
+import serviceInfo from "@/components/service-info";
+import serviceTabs from "@/components/service-tabs";
 
 export default {
   components: {
-    // serviveCommodityInfo,
-    // serviveTabsInfo,
+    serviceInfo,
+    serviceTabs,
   },
   data: () => ({
-    serviceData: null,
+    baseInfo: null,
   }),
   methods: {
     getDataFromApi(_url) {
@@ -42,9 +45,9 @@ export default {
       });
     },
     init() {
-      this.getDataFromApi(`/static/serviceDetail.json`).then(
+      this.getDataFromApi(`/static/serviceBaseInfo.json`).then(
         ({ skfw }) => {
-          this.serviceData = skfw;
+          this.baseInfo = skfw;
         },
         (error) => {
           console.log(error);
diff --git a/src/pages/yysdDetail.vue b/src/pages/yysdDetail.vue
index 0a762c7b73b3b0181c946c321003be53630b9e12..68e18ae3f174b8956d77e188a0f1a29d7b7a1c16 100644
--- a/src/pages/yysdDetail.vue
+++ b/src/pages/yysdDetail.vue
@@ -3,30 +3,37 @@
     <div class="sevice_breadcrumb">
       <el-breadcrumb separator="/">
         <el-breadcrumb-item>服务超市</el-breadcrumb-item>
-        <el-breadcrumb-item>数据服务</el-breadcrumb-item>
-        <el-breadcrumb-item>服务详情信息</el-breadcrumb-item>
+        <el-breadcrumb-item>应用商店</el-breadcrumb-item>
+        <el-breadcrumb-item>应用详情信息</el-breadcrumb-item>
       </el-breadcrumb>
     </div>
 
-    <!-- <servive-commodity-info
-      :service-data="serviceData"
-    ></servive-commodity-info>
+    <application-info :data="baseInfo"></application-info>
 
-    <servive-tabs-info type="sjfw"></servive-tabs-info> -->
+    <service-tabs
+      detail-url="yysd"
+      provider-url="yysd"
+      comments-url="yysd"
+      detail-title="应用详情信息"
+      comments-title="应用评价信息"
+    ></service-tabs>
   </div>
 </template>
 
 <script>
-// import serviveCommodityInfo from "@/components/servive-commodity-info";
-// import serviveTabsInfo from "@/components/servive-tabs-info";
+import applicationInfo from "@/components/application-info";
+import serviceTabs from "@/components/service-tabs";
 
 export default {
   components: {
-    // serviveCommodityInfo,
-    // serviveTabsInfo,
+    applicationInfo,
+    serviceTabs,
   },
   data: () => ({
-    serviceData: null,
+    baseInfo: null,
+    detailData: null,
+    specification: null,
+    provider: null,
   }),
   methods: {
     getDataFromApi(_url) {
@@ -42,9 +49,9 @@ export default {
       });
     },
     init() {
-      this.getDataFromApi(`/static/serviceDetail.json`).then(
+      this.getDataFromApi(`/static/serviceBaseInfo.json`).then(
         ({ yysd }) => {
-          this.serviceData = yysd;
+          this.baseInfo = yysd;
         },
         (error) => {
           console.log(error);
diff --git a/src/pages/zhyyfwDetail.vue b/src/pages/zhyyfwDetail.vue
index 0efa800b4241fae844968afeedaaa1a815d601ab..f9d74d396813d5f94503484b874c00c7e2db9451 100644
--- a/src/pages/zhyyfwDetail.vue
+++ b/src/pages/zhyyfwDetail.vue
@@ -8,25 +8,28 @@
       </el-breadcrumb>
     </div>
 
-    <!-- <servive-commodity-info
-      :service-data="serviceData"
-    ></servive-commodity-info>
+    <service-info :data="baseInfo"></service-info>
 
-    <servive-tabs-info type="sjfw"></servive-tabs-info> -->
+    <service-tabs
+      detail-url="zhyyfw"
+      specification-url="zhyyfw"
+      provider-url="zhyyfw"
+      comments-url="zhyyfw"
+    ></service-tabs>
   </div>
 </template>
 
 <script>
-// import serviveCommodityInfo from "@/components/servive-commodity-info";
-// import serviveTabsInfo from "@/components/servive-tabs-info";
+import serviceInfo from "@/components/service-info";
+import serviceTabs from "@/components/service-tabs";
 
 export default {
   components: {
-    // serviveCommodityInfo,
-    // serviveTabsInfo,
+    serviceInfo,
+    serviceTabs,
   },
   data: () => ({
-    serviceData: null,
+    baseInfo: null,
   }),
   methods: {
     getDataFromApi(_url) {
@@ -42,9 +45,9 @@ export default {
       });
     },
     init() {
-      this.getDataFromApi(`/static/serviceDetail.json`).then(
+      this.getDataFromApi(`/static/serviceBaseInfo.json`).then(
         ({ zhyyfw }) => {
-          this.serviceData = zhyyfw;
+          this.baseInfo = zhyyfw;
         },
         (error) => {
           console.log(error);
diff --git a/src/router/index.js b/src/router/index.js
index 5ca99c505e331db1156e15603c9a43bb2ca5a002..12bb250cee44b8a1398d79cba31ffd566f326196 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -111,25 +111,30 @@ export default new Router({
               name: "shopAppStoreList",
               component: () => import("@/pages/shop_list_app_store"),
             },
+            {
+              path: "/shop/shopping_cart", // 购物车页
+              name: "shoppingCart",
+              component: () => import("@/pages/shopping_cart"),
+            },
           ],
         },
         {
-          path: "/sjfwDetail",
+          path: "/sjfwDetail/:id",
           name: "sjfwDetail",
           component: () => import("@/pages/sjfwDetail"),
         }, // 数据服务详情
         {
-          path: "/skfwDetail",
+          path: "/skfwDetail/:id",
           name: "skfwDetail",
           component: () => import("@/pages/skfwDetail"),
         }, // 时空服务详情
         {
-          path: "/zhyyfwDetail",
+          path: "/zhyyfwDetail/:id",
           name: "zhyyfwDetail",
           component: () => import("@/pages/zhyyfwDetail"),
         }, // 综合应用服务详情
         {
-          path: "/yysdDetail",
+          path: "/yysdDetail/:id",
           name: "yysdDetail",
           component: () => import("@/pages/yysdDetail"),
         }, // 应用详情
diff --git a/static/serviceBaseInfo.json b/static/serviceBaseInfo.json
new file mode 100644
index 0000000000000000000000000000000000000000..02e66c9e2eb697ac10fd69a9062b7d8e76eb04db
--- /dev/null
+++ b/static/serviceBaseInfo.json
@@ -0,0 +1,141 @@
+{
+  "sjfw": {
+    "name": "水路货物周转量情况",
+    "openLevel": "共享",
+    "viewCount": "99999",
+    "acquireCount": "9999",
+    "providedBy": "贵州省交通运输厅",
+    "publishTime": "2020-03-12 18:31:12",
+    "updatedTime": "2020-03-12 18:31:12",
+    "dataField": "经济建设",
+    "serviceType": "专题数据服务 企业专题数据服务",
+    "resourceSummary": "提供水路货物周转量排名和同比增长的专题数据服务",
+    "specifications": [
+      {
+        "name": "访问次数：20/日 访问量：100/日",
+        "value": 0,
+        "description": "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行20次免费访问，获取100条数据记录。"
+      },
+      {
+        "name": "访问次数：200/日 访问量：1000/日",
+        "value": 1,
+        "description": "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行200次免费访问，获取1000条数据记录。"
+      },
+      {
+        "name": "访问次数：无上限 访问量：无上限",
+        "value": 2,
+        "description": "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行任意次免费访问，获取数据记录无上限。"
+      }
+    ],
+    "ways": [
+      {
+        "name": "按月购买",
+        "value": 0
+      },
+      {
+        "name": "按年购买",
+        "value": 1
+      }
+    ]
+  },
+  "skfw": {
+    "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+    "name": "贵州应急资源地图微服务",
+    "type": "Map Service",
+    "openLevel": "共享",
+    "viewCount": "99999",
+    "acquireCount": "9999",
+    "providedBy": "贵州省应急管理厅",
+    "publishTime": "2020-03-12 18:31:12",
+    "updatedTime": "2020-03-12 18:31:12",
+    "dataField": "经济建设",
+    "serviceType": "时空云服务 专题地图服务",
+    "resourceSummary": "提供贵州应急资源空间分布展示的专题地图服务，与MO地图合作进行地图资源的摘录和某新服务。",
+    "specifications": [
+      {
+        "name": "访问次数：20/日 访问量：100/日",
+        "value": 0,
+        "description": "用户服务申请通过审核确认后，每日可对应急地图进行20次免费访问"
+      },
+      {
+        "name": "访问次数：200/日 访问量：1000/日",
+        "value": 1,
+        "description": "用户服务申请通过审核确认后，每日可对应急地图进行200次免费访问"
+      },
+      {
+        "name": "访问次数：无上限 访问量：无上限",
+        "value": 2,
+        "description": "用户服务申请通过审核确认后，每日可对应急地图进行免费访问"
+      }
+    ],
+    "ways": [
+      {
+        "name": "按月购买",
+        "value": 0
+      },
+      {
+        "name": "按年购买",
+        "value": 1
+      }
+    ]
+  },
+  "zhyyfw": {
+    "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+    "name": "地图视频融合服务",
+    "openLevel": "共享",
+    "viewCount": "99999",
+    "acquireCount": "9999",
+    "providedBy": "北京比格数据",
+    "publishTime": "2020-03-12 18:31:12",
+    "updatedTime": "2020-03-12 18:31:12",
+    "dataField": "经济建设",
+    "serviceType": "综合应用服务",
+    "resourceSummary": "提供视频监控的空间分布展示和视频监控直播的服务，MOUMOU监控服务和直播服务的新服务。",
+    "specifications": [
+      {
+        "name": "访问次数：20/日 访问量：100/日",
+        "value": 0,
+        "description": "用户服务申请通过审核确认后，每日可对应急地图进行20次免费访问"
+      },
+      {
+        "name": "访问次数：200/日 访问量：1000/日",
+        "value": 1,
+        "description": "用户服务申请通过审核确认后，每日可对应急地图进行200次免费访问"
+      },
+      {
+        "name": "访问次数：无上限 访问量：无上限",
+        "value": 2,
+        "description": "用户服务申请通过审核确认后，每日可对应急地图进行免费访问"
+      }
+    ],
+    "ways": [
+      {
+        "name": "按月购买",
+        "value": 0
+      },
+      {
+        "name": "按年购买",
+        "value": 1
+      }
+    ]
+  },
+  "yysd": {
+    "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+    "name": "mapvideos V1.0",
+    "providedBy": "北京比格数据",
+    "publishTime": "2020-03-12 18:31:12",
+    "acquireCount": "9999",
+    "serviceType": "综合应用服务",
+    "dataField": "经济建设",
+    "specifications": [
+      {
+        "name": "申请获取应用镜像部署权限",
+        "value": 0
+      },
+      {
+        "name": "申请获取应用二次开发权限（需要先行升级为开发者用户）",
+        "value": 1
+      }
+    ]
+  }
+}
diff --git a/static/serviceInfo.json b/static/serviceInfo.json
index 0f185debac3df8fa711b2c994e9cbb61eb77d835..3c70168311a2503a3ec6e810db60b157aa7038ac 100644
--- a/static/serviceInfo.json
+++ b/static/serviceInfo.json
@@ -1,9 +1,10 @@
 {
   "sjfw": {
-    "fwxqxx": [
+    "detail": [
       {
         "name": "获取流程",
-        "type": "step"
+        "type": "step",
+        "value": ["服务申请", "信息填写", "审核确认", "服务获取"]
       },
       {
         "name": "服务描述",
@@ -26,6 +27,7 @@
         "value": {
           "datas": [
             {
+              "id": 10000,
               "zdbm": "errcode",
               "zdlx": "字符串",
               "zdmc": "错误码",
@@ -34,6 +36,7 @@
               "slz": "xxx"
             },
             {
+              "id": 20000,
               "zdbm": "errmsg",
               "zdlx": "对象",
               "zdmc": "错误信息",
@@ -42,6 +45,7 @@
               "slz": "xxx"
             },
             {
+              "id": 30000,
               "zdbm": "data",
               "zdlx": "字符串",
               "zdmc": "数据项",
@@ -50,6 +54,7 @@
               "slz": "xxx",
               "children": [
                 {
+                  "id": 30010,
                   "zdbm": "rows",
                   "zdlx": "对象",
                   "zdmc": "对象",
@@ -99,42 +104,49 @@
         "value": {
           "datas": [
             {
+              "id": 50000,
               "zdbm": "errcode",
               "zdlx": "字符串",
               "zdmc": "错误码",
               "zdsm": "显示字段信息显示字段信息"
             },
             {
+              "id": 60000,
               "zdbm": "errmsg",
               "zdlx": "对象",
               "zdmc": "错误信息",
               "zdsm": "显示字段信息显示字段信息"
             },
             {
+              "id": 70000,
               "zdbm": "data",
               "zdlx": "字符串",
               "zdmc": "数据项",
               "zdsm": "显示字段信息显示字段信息",
               "children": [
                 {
+                  "id": 70010,
                   "zdbm": "rows",
                   "zdlx": "字符串",
                   "zdmc": "数据项",
                   "zdsm": "显示字段信息显示字段信息",
                   "children": [
                     {
+                      "id": 70011,
                       "zdbm": "time",
                       "zdlx": "字符串",
                       "zdmc": "数据项",
                       "zdsm": "显示字段信息显示字段信息"
                     },
                     {
+                      "id": 70012,
                       "zdbm": "count",
                       "zdlx": "字符串",
                       "zdmc": "数据项",
                       "zdsm": "显示字段信息显示字段信息"
                     },
                     {
+                      "id": 70013,
                       "zdbm": "item",
                       "zdlx": "字符串",
                       "zdmc": "数据项",
@@ -143,18 +155,21 @@
                   ]
                 },
                 {
+                  "id": 70020,
                   "zdbm": "city",
                   "zdlx": "字符串",
                   "zdmc": "数据项",
                   "zdsm": "显示字段信息显示字段信息",
                   "children": [
                     {
+                      "id": 70021,
                       "zdbm": "sPoint",
                       "zdlx": "字符串",
                       "zdmc": "数据项",
                       "zdsm": "显示字段信息显示字段信息"
                     },
                     {
+                      "id": 70022,
                       "zdbm": "ePoint",
                       "zdlx": "字符串",
                       "zdmc": "数据项",
@@ -188,7 +203,7 @@
         }
       }
     ],
-    "ggdj": [
+    "specification": [
       {
         "name": "按月",
         "data": [
@@ -224,13 +239,13 @@
         ]
       }
     ],
-    "tgjg": {
+    "provider": {
       "provider": "贵州省交通运输厅",
       "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
       "person": "张先生",
       "phone": "010-66666666"
     },
-    "ffpjxx": {
+    "comments": {
       "baseInfo": {
         "score": 3.5,
         "total": 23,
@@ -257,7 +272,7 @@
           }
         ]
       },
-      "ffpjxxList": [
+      "list": [
         {
           "name": "禺彊",
           "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
@@ -331,294 +346,545 @@
       ]
     }
   },
-  "fwxqxx": [
-    {
-      "name": "获取流程",
-      "type": "step"
-    },
-    {
-      "name": "服务说明",
-      "type": "text",
-      "value": "提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务"
+  "skfw": {
+    "detail": [
+      {
+        "name": "获取流程",
+        "type": "step",
+        "value": ["服务申请", "信息填写", "审核确认", "服务获取"]
+      },
+      {
+        "name": "服务描述",
+        "type": "text",
+        "value": "提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务"
+      },
+      {
+        "name": "服务属性",
+        "type": "list",
+        "value": [
+          {
+            "name": "大小",
+            "value": "66kb"
+          },
+          {
+            "name": "API",
+            "value": "Java"
+          },
+          {
+            "name": "用途",
+            "value": "即用型"
+          },
+          {
+            "name": "空间范围",
+            "value": "111.8915040799999, 114.25605481900004, 28.762848204000022"
+          },
+          {
+            "name": "标签",
+            "value": "T003 智能地图 T001"
+          },
+          {
+            "name": "制作单位",
+            "value": "贵州省应急管理应急管理厅"
+          },
+          {
+            "name": "离线模式",
+            "value": "禁用"
+          }
+        ]
+      }
+    ],
+    "specification": [
+      {
+        "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": ""
+          }
+        ]
+      }
+    ],
+    "provider": {
+      "provider": "贵州省交通运输厅",
+      "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+      "person": "张先生",
+      "phone": "010-66666666"
     },
-    {
-      "name": "服务属性",
-      "type": "list",
-      "value": [
+    "comments": {
+      "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
+          }
+        ]
+      },
+      "list": [
+        {
+          "name": "禺彊",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 5,
+          "description": "这个应用非常实用，可以应用到多个业务领域！",
+          "time": " 2019-12-12"
+        },
         {
-          "name": "大小",
-          "value": "66kb"
+          "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": "API",
-          "value": "Java"
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
         },
         {
-          "name": "用途",
-          "value": "即用型"
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
         },
         {
-          "name": "空间范围（WGS84）",
-          "value": "未设置"
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
         },
         {
-          "name": "标签",
-          "value": "T003 智能地图 T001"
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
         },
         {
-          "name": "制作单位",
-          "value": "应急管理厅"
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
         },
         {
-          "name": "离线模式",
-          "value": "禁用"
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
         },
         {
-          "name": "附加代码",
-          "value": "无"
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
         }
       ]
-    },
-    {
-      "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": [
+    }
+  },
+  "zhyyfw": {
+    "detail": [
+      {
+        "name": "获取流程",
+        "type": "step",
+        "value": ["服务申请", "信息填写", "审核确认", "服务获取"]
+      },
+      {
+        "name": "服务描述",
+        "type": "text",
+        "value": "提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务"
+      },
+      {
+        "name": "微服务响应列表",
+        "type": "table",
+        "value": {
+          "datas": [
+            {
+              "name": "apaas-mapvideos-1",
+              "description": "地图视频融合应用服务"
+            },
+            {
+              "name": "apaas-mapvideos-2",
+              "description": "地图视频融合应用服务"
+            },
+            {
+              "name": "apaas-mapvideos-3",
+              "description": "地图视频融合应用服务"
+            }
+          ],
+          "columns": [
+            {
+              "prop": "name",
+              "label": "微服务名称"
+            },
+            {
+              "prop": "description",
+              "label": "微服务描述"
+            }
+          ]
+        }
+      }
+    ],
+    "specification": [
+      {
+        "name": "按月",
+        "data": [
           {
-            "prop": "zdbm",
-            "label": "字段编码",
-            "align": "center"
+            "gg": "访问次数：20/日 访问量：100/日",
+            "ggsm": "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行20次免费访问，获取100条数据记录。"
           },
           {
-            "prop": "zdlx",
-            "label": "字段类型",
-            "align": "center"
+            "gg": "访访问次数：200/日 访问量：1000/日",
+            "ggsm": "用户服务申请通过审核确认并完成付费后，每日可对水路货物周转量情况进行200次访问，获取1000条数据记录。"
           },
           {
-            "prop": "zdmc",
-            "label": "字段名称"
+            "gg": "访问次数：无上限 访问量",
+            "ggsm": ""
+          }
+        ]
+      },
+      {
+        "name": "按年",
+        "data": [
+          {
+            "gg": "访问次数：20/年 访问量：100/年",
+            "ggsm": "用户服务申请通过审核确认后，每年可对水路货物周转量情况进行20次免费访问，获取100条数据记录。"
+          },
+          {
+            "gg": "访访问次数：200/年 访问量：1000/年",
+            "ggsm": "用户服务申请通过审核确认并完成付费后，每年可对水路货物周转量情况进行200次访问，获取1000条数据记录。"
           },
           {
-            "prop": "zdsm",
-            "label": "显示字段信息显示字段信息"
+            "gg": "访问次数：无上限 访问量",
+            "ggsm": ""
           }
         ]
       }
+    ],
+    "provider": {
+      "provider": "贵州省交通运输厅",
+      "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+      "person": "张先生",
+      "phone": "010-66666666"
     },
-    {
-      "name": "微服务响应列表",
-      "type": "table",
-      "value": {
-        "datas": [
+    "comments": {
+      "baseInfo": {
+        "score": 3.5,
+        "total": 23,
+        "starInfo": [
           {
-            "name": "apaas-mapvideos",
-            "description": "地图视频融合应用服务"
+            "star": 5,
+            "percent": 40
           },
           {
-            "name": "apaas-mapvideos",
-            "description": "地图视频融合应用服务"
-          }
-        ],
-        "columns": [
+            "star": 4,
+            "percent": 30
+          },
+          {
+            "star": 3,
+            "percent": 20
+          },
           {
-            "prop": "name",
-            "label": "*微服务名称"
+            "star": 2,
+            "percent": 5
           },
           {
-            "prop": "description",
-            "label": "微服务描述",
-            "align": "center"
+            "star": 1,
+            "percent": 5
           }
         ]
-      }
-    }
-  ],
-  "ggdj": [
-    {
-      "gg": "访问次数：20/日 访问量：100/日",
-      "ggsm": "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行20次免费访问，获取100条数据记录。"
-    },
-    {
-      "gg": "访访问次数：200/日 访问量：1000/日",
-      "ggsm": "用户服务申请通过审核确认并完成付费后，每日可对水路货物周转量情况进行200次访问，获取1000条数据记录。"
-    },
-    {
-      "gg": "访问次数：无上限 访问量",
-      "ggsm": ""
-    }
-  ],
-  "tgjg": {
-    "name": "贵州省交通运输厅",
-    "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-    "lxr": "张先生",
-    "lxdh": "010-66666666"
-  },
-  "ffpjxx": {
-    "baseInfo": {
-      "score": 3.5,
-      "total": 23,
-      "starInfo": [
+      },
+      "list": [
         {
+          "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,
-          "percent": 40
+          "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"
         },
         {
-          "star": 4,
-          "percent": 30
+          "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,
-          "percent": 20
+          "description": "赞！",
+          "time": " 2019-12-12"
         },
         {
-          "star": 2,
-          "percent": 10
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
         },
         {
-          "star": 1,
-          "percent": 0
+          "name": "左宜",
+          "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+          "star": 3,
+          "description": "赞！",
+          "time": " 2019-12-12"
         }
       ]
-    },
-    "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"
-      },
+    }
+  },
+  "yysd": {
+    "detail": [
       {
-        "name": "左宜",
-        "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-        "star": 3,
-        "description": "赞！",
-        "time": " 2019-12-12"
+        "name": "获取流程",
+        "type": "step",
+        "value": ["应用申请", "信息填写", "审核确认", "应用获取"]
       },
       {
-        "name": "左宜",
-        "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-        "star": 3,
-        "description": "赞！",
-        "time": " 2019-12-12"
+        "name": "应用简介",
+        "type": "text",
+        "value": "本应用将视频设备的空间位置信息精准匹配至地图上，通过点击地图上的视频设备能够实现在设备真实位置对视频进行调用，包括实时视频流数据的调用和对视频设备的操作。"
       },
       {
-        "name": "左宜",
-        "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-        "star": 3,
-        "description": "赞！",
-        "time": " 2019-12-12"
+        "name": "功能简介",
+        "type": "list",
+        "value": [
+          {
+            "name": "1",
+            "value": "在地图上查找视频设备；"
+          },
+          {
+            "name": "2",
+            "value": "在地图上定位视频设备位置；"
+          },
+          {
+            "name": "3",
+            "value": "调用多路视频的实时视频数据；"
+          },
+          {
+            "name": "4",
+            "value": "操作球机视频设备。"
+          }
+        ]
       },
       {
-        "name": "左宜",
-        "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-        "star": 3,
-        "description": "赞！",
-        "time": " 2019-12-12"
+        "name": "应用场景",
+        "type": "text",
+        "value": "针对应急突发事件，基于地图准确定位应急事件发生地点后，指挥人员希望能够快速获取事件发生地点周围一定范围内的所有信息资源，快速掌握现场情况，通过视频地图融合应用能够快速找到应急事件周围的视频监控设备后直接在地图上调用和查看实时视频了解现场情况，"
       },
       {
-        "name": "左宜",
-        "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-        "star": 3,
-        "description": "赞！",
-        "time": " 2019-12-12"
+        "name": "应用参数",
+        "type": "list",
+        "value": [
+          {
+            "name": "repository",
+            "value": "\"hub.wodcloud.com/apaas/apaas-mapvideos\""
+          },
+          {
+            "name": "tag",
+            "value": "\"1.0.0\""
+          },
+          {
+            "name": "repository",
+            "value": "\"mapvideo.wodcloud.local\""
+          }
+        ]
       }
-    ]
+    ],
+    "provider": {
+      "provider": "贵州省交通运输厅",
+      "img": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+      "person": "张先生",
+      "phone": "010-66666666"
+    },
+    "comments": {
+      "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
+          }
+        ]
+      },
+      "list": [
+        {
+          "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"
+        }
+      ]
+    }
   }
 }