diff --git a/src/components/codes.vue b/src/components/codes.vue
index c62926efaae33cbc8370fef695f2679cbfe252a3..cf64cf7fbf14afc3c44155e1ced2494a01093f71 100644
--- a/src/components/codes.vue
+++ b/src/components/codes.vue
@@ -22,7 +22,7 @@ export default {
 
   mounted() {
     this.aceEditor = ace.edit(this.$refs.ace, {
-      maxLines: 36,
+      maxLines: 38,
       minLines: 10,
       fontSize: 14,
       mode: this.acemodePath,
diff --git a/src/components/commodity.vue b/src/components/commodity.vue
new file mode 100644
index 0000000000000000000000000000000000000000..aa66a405d93491c58638d9cbcb4a1906b34efed2
--- /dev/null
+++ b/src/components/commodity.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="commodity">
+    <el-row>
+      <el-col :span="24">
+        <div class="com_title">水路货物周转量情况</div>
+      </el-col>
+      <el-col :span="12">
+        <div class="com_item">
+          <span class="com_item_title">提供机构：</span>
+          <span class="com_data">北京比格数据</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">发布时间：</span>
+          <span class="com_data">2020-03-12 18:31:12</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">更新时间：</span>
+          <span class="com_data">2020-03-12 18:31:12</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">数据领域：</span>
+          <span class="com_data">经济建设</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">服务类型：</span>
+          <span class="com_data">综合应用服务</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">资源摘要：</span>
+          <span
+            class="com_data"
+          >提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">开放级别：</span>
+          <span class="com_data">
+            <el-tag size="small">共享</el-tag>
+          </span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">浏览次数：</span>
+          <span class="com_data_view">99999</span>
+          <span class="com_item_title">获取次数：</span>
+          <span class="com_data_get">99999</span>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="com_item">
+          <span class="com_item_title">规格：</span>
+          <span class="com_data">综合应用服务</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">规格说明：</span>
+          <span class="com_data">综合应用服务</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">购买方式：</span>
+          <span class="com_data">综合应用服务</span>
+        </div>
+        <div class="com_item">
+          <span class="com_item_title">购买时长：</span>
+          <span class="com_data">
+            <el-input-number v-model="num" @change="handleChange" size="small" :min="1" :max="10" label="描述文字"></el-input-number>月
+          </span>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({
+    num: 1
+  }),
+  computed: {},
+  watch: {},
+  methods: {},
+  mounted() {}
+};
+</script>
+
+<style scoped>
+.commodity {
+  padding: 10px;
+}
+.com_title {
+  font-size: 22px;
+}
+.com_item {
+  font-size: 16px;
+  line-height: 26px;
+  margin-top: 10px;
+  color: #51ac14;
+  display: flex;
+  align-self: start;
+}
+.com_item_title {
+  width: 80px;
+}
+.com_data {
+  display: inline-block;
+  width: calc(100% - 90px);
+  color: #f1ac14;
+}
+.com_data_view {
+  color: #f1ac14;
+  margin-right: 10px;
+}
+.com_data_get {
+  color: #f1ac14;
+}
+</style>
+
diff --git a/src/components/table-um.vue b/src/components/table-um.vue
index c19059e2daee7f02e7c909cbd179afa14d88e94f..6233b70d6db5360b1ed41a5c565125203c389eb2 100644
--- a/src/components/table-um.vue
+++ b/src/components/table-um.vue
@@ -99,6 +99,7 @@
           :label="item.label"
           :width="item.width"
           :align="item.align"
+          :min-width="item.minWidth"
           :render-header="item.require ? renderHeader : null"
         >
           <template slot-scope="scope">
diff --git a/src/pages/example_commodity.vue b/src/pages/example_commodity.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1034c215e106d65c1f66e7d1ef030b4b21d5c7c9
--- /dev/null
+++ b/src/pages/example_commodity.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="com_ex">
+    <block-radius>
+      <Commodity :datas="datas" />
+    </block-radius>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import Commodity from "@/components/commodity.vue";
+import BlockRadius from "@/components/block-radius";
+export default {
+  components: {
+    Commodity,
+    BlockRadius
+  },
+  data: () => ({
+    datas: {
+
+    }
+  }),
+  mounted() {
+  },
+  methods: {}
+};
+</script>
+<style scoped>
+.com_ex {
+  margin-top: 100px;
+  padding: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/example_table.vue b/src/pages/example_table.vue
index 44373c9859d58b02ee69f2b348ea991de068ee48..246ae92af85921ff32e4818866177df56dc1e5cb 100644
--- a/src/pages/example_table.vue
+++ b/src/pages/example_table.vue
@@ -11,9 +11,9 @@
       :searchShow="true"
       :addRowBtn="addRowBtn"
       :autoAdd="false"
-      :isDialog="true"
-      :isSelection="true"
-      :isIndex="true"
+      :isDialog="false"
+      :isSelection="false"
+      :isIndex="false"
       :confirmOptions="confirmOptions"
       :detailsUrl="detailsUrl"
       @primary-edit="editItem"
@@ -21,6 +21,7 @@
       :stripe="true"
       :pageSizeShow="true"
       :filterList="filterList"
+      cellClassName="cell_width"
     ></ces-table>
     <h3>可编辑表格，供服务测试用</h3>
     <ces-table
@@ -74,7 +75,7 @@ import cesTable from "@/components/table-um";
 export default {
   data: () => ({
     headers: [
-      { label: "服务url", prop: "date", type: "href", align: "left" },
+      { label: "服务url", prop: "date", type: "href", align: "left",minWidth: "50%" },
       { label: "服务名称", prop: "name", type: "href", align: "center" },
       { label: "中文名", prop: "address", type: "href", align: "right" },
       {
diff --git a/src/pages/fwzc_fwcs.vue b/src/pages/fwzc_fwcs.vue
index 9c71ac56383b1bfe28faa0716dab0de5bbc33c6b..22a7b283d1e52d4df880643c533dd0a09a5670e6 100644
--- a/src/pages/fwzc_fwcs.vue
+++ b/src/pages/fwzc_fwcs.vue
@@ -171,14 +171,14 @@
 </template>
 
 <script>
-import blockRadius from "@/components/block-radius";
-import cesTable from "@/components/table-um";
-import codes from "@/components/codes";
+import BlockRadius from "@/components/block-radius";
+import CesTable from "@/components/table-um";
+import Codes from "@/components/codes";
 export default {
   components: {
-    blockRadius,
-    cesTable,
-    "v-apaas-code": codes
+    BlockRadius,
+    CesTable,
+    "v-apaas-code": Codes
   },
   data: () => ({
     btnList: [
diff --git a/src/router/index.js b/src/router/index.js
index 5b37700c41364e25be043549ac7e7ee86ed3bb2b..431910e68cf30e26d1013e8bf4606ea888573b83 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -85,7 +85,12 @@ export default new Router({
     {
       path: "/example_topology", // 拓扑图实例
       name: "example_topology",
-      component: () => import("@/pages/example_topology"),
+      component: () => import("@/pages/example_topology")
     },
-  ],
+    {
+      path: "/example_commodity", // 商品详情实例
+      name: "example_commodity",
+      component: () => import("@/pages/example_commodity")
+    }
+  ]
 });