diff --git a/src/components/commodity-cell.vue b/src/components/commodity-cell.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f8f522761f17f1d9bef0f1934c830bfde1a3d645
--- /dev/null
+++ b/src/components/commodity-cell.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="com_cell">
+    <div class="com_cell_img_box">
+      <img
+        src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+        class="com_cell_img"
+      />
+    </div>
+    <div class="com_cell_message">
+      <div class="com_cell_msg_title">水路货物周转量情况</div>
+      <div class="com_cell_item">
+        <span class="com_cell_item_title">资源摘要：</span>
+        <span
+          class="com_cell_data"
+        >提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务提供水路货物周转量排名和同比增长的专题数据服务</span>
+      </div>
+      <div class="com_cell_item">
+        <span class="com_cell_item_title">提供机构：</span>
+        <span class="com_cell_data">贵州省交通运输厅</span>
+      </div>
+      <div class="com_cell_item">
+        <span class="com_cell_item_title">数据领域：</span>
+        <span class="com_cell_data">经济建设</span>
+      </div>
+      <div class="com_cell_item">
+        <span class="com_cell_item_title">服务类型：</span>
+        <span class="com_cell_data">数据服务 专题数据服务 企业专题数据服务</span>
+      </div>
+      <div class="com_cell_item">
+        <span class="com_cell_item_title">更新时间：</span>
+        <span class="com_cell_data">2020-03-12 18:31:12</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({}),
+  computed: {},
+  watch: {},
+  methods: {},
+  mounted() {}
+};
+</script>
+
+<style scoped>
+.com_cell {
+  display: flex;
+  justify-content: flex-start;
+  padding: 10px;
+  border-bottom: 2px #f4f7fc solid;
+}
+.com_cell_img_box {
+  width: 166px;
+  height: 166px;
+  border-radius: 12px;
+  overflow: hidden;
+}
+.com_cell_img {
+  width: 100%;
+  height: 100%;
+}
+.com_cell_message {
+  padding-left: 20px;
+  width: calc(100% - 190px);
+}
+.com_cell_msg_title {
+  color: #0d1847;
+  font-size: 22px;
+  font-weight: 700;
+  margin-bottom: 6px;
+}
+.com_cell_item {
+  font-size: 16px;
+  line-height: 26px;
+  margin-top: 1px;
+  color: #51ac14;
+  display: flex;
+  align-self: start;
+}
+.com_cell_item_title {
+  width: 80px;
+}
+.com_cell_data {
+  display: inline-block;
+  width: calc(100% - 90px);
+  color: #f1ac14;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
+
diff --git a/src/components/commodity-list.vue b/src/components/commodity-list.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c8c908e36cd97222aefbf245303393451ff88b3c
--- /dev/null
+++ b/src/components/commodity-list.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <commodity-cell v-for="item in list" :key="item"></commodity-cell>
+  </div>
+</template>
+
+<script>
+import CommodityCell from "@/components/commodity-cell.vue";
+export default {
+  components: {
+    "commodity-cell": CommodityCell
+  },
+  data: () => ({
+    list: [1, 2, 3, 4, 5, 6]
+  }),
+  computed: {},
+  watch: {},
+  methods: {},
+  mounted() {}
+};
+</script>
+
+<style scoped>
+</style>
+
diff --git a/src/components/commodity.vue b/src/components/commodity.vue
index aa66a405d93491c58638d9cbcb4a1906b34efed2..74f2430acb591265c40b9837d0ee3c1d637eaa3a 100644
--- a/src/components/commodity.vue
+++ b/src/components/commodity.vue
@@ -2,65 +2,90 @@
   <div class="commodity">
     <el-row>
       <el-col :span="24">
-        <div class="com_title">水路货物周转量情况</div>
+        <div class="com_title">{{ datas.productName }}</div>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="11">
+        <div>
+          <img
+            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+            class="commodity_img"
+          />
+        </div>
         <div class="com_item">
           <span class="com_item_title">提供机构：</span>
-          <span class="com_data">北京比格数据</span>
+          <span class="com_data">{{ datas.providedBy }}</span>
         </div>
         <div class="com_item">
           <span class="com_item_title">发布时间：</span>
-          <span class="com_data">2020-03-12 18:31:12</span>
+          <span class="com_data">{{ datas.releaseTime }}</span>
         </div>
         <div class="com_item">
           <span class="com_item_title">更新时间：</span>
-          <span class="com_data">2020-03-12 18:31:12</span>
+          <span class="com_data">{{ datas.updated }}</span>
         </div>
         <div class="com_item">
           <span class="com_item_title">数据领域：</span>
-          <span class="com_data">经济建设</span>
+          <span class="com_data">{{ datas.dataField }}</span>
         </div>
         <div class="com_item">
           <span class="com_item_title">服务类型：</span>
-          <span class="com_data">综合应用服务</span>
+          <span class="com_data">{{ datas.serviceType }}</span>
         </div>
         <div class="com_item">
           <span class="com_item_title">资源摘要：</span>
-          <span
-            class="com_data"
-          >提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务</span>
+          <span class="com_data">{{ datas.resourceSummary }}</span>
         </div>
         <div class="com_item">
           <span class="com_item_title">开放级别：</span>
           <span class="com_data">
-            <el-tag size="small">共享</el-tag>
+            <el-tag size="small">{{ datas.openLevel }}</el-tag>
           </span>
         </div>
         <div class="com_item">
           <span class="com_item_title">浏览次数：</span>
-          <span class="com_data_view">99999</span>
+          <span class="com_data_view">{{ datas.views }}</span>
           <span class="com_item_title">获取次数：</span>
-          <span class="com_data_get">99999</span>
+          <span class="com_data_get">{{ datas.numberOfAcquisitions }}</span>
         </div>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="11" :offset="2">
         <div class="com_item">
           <span class="com_item_title">规格：</span>
-          <span class="com_data">综合应用服务</span>
+          <span class="com_data">
+            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
+            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
+            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
+            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
+            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
+            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
+            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
+            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
+            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
+            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
+          </span>
         </div>
         <div class="com_item">
           <span class="com_item_title">规格说明：</span>
-          <span class="com_data">综合应用服务</span>
+          <span class="com_data">{{ datas.specifications }}</span>
         </div>
         <div class="com_item">
           <span class="com_item_title">购买方式：</span>
-          <span class="com_data">综合应用服务</span>
+          <span class="com_data">
+            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
+            <el-button size="mini" class="com_data_button_btm" round>超小按钮</el-button>
+          </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>月
+            <el-input-number
+              v-model="num"
+              @change="handleChange"
+              size="small"
+              :min="1"
+              :max="12"
+              label="描述文字"
+            ></el-input-number>&nbsp;月
           </span>
         </div>
       </el-col>
@@ -71,6 +96,24 @@
 <script>
 export default {
   components: {},
+  props: {
+    datas: {
+      type: Object,
+      default: {
+        productName: "",
+        providedBy: "",
+        releaseTime: "",
+        updated: "",
+        dataField: "",
+        serviceType: "",
+        resourceSummary: "",
+        openLevel: "",
+        views: "",
+        numberOfAcquisitions: "",
+        specifications: ""
+      }
+    }
+  },
   data: () => ({
     num: 1
   }),
@@ -111,5 +154,18 @@ export default {
 .com_data_get {
   color: #f1ac14;
 }
+.com_data_button_btm {
+  margin-bottom: 10px;
+}
+.commodity_img {
+  width: 100%;
+}
 </style>
-
+<style>
+.com_data .el-input-number__decrease {
+  border-radius: 8px 0 0 8px;
+}
+.com_data .el-input-number__increase {
+  border-radius: 0 8px 8px 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/example_com_list.vue b/src/pages/example_com_list.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2f014b3ab89e5a8d3dce0989dbab9e976824288b
--- /dev/null
+++ b/src/pages/example_com_list.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="com_ex">
+    <block-radius>
+      <h3>商品列表，分页啥乱七八糟的都没有，再说</h3>
+      <commodity-list :datas="datas"></commodity-list>
+    </block-radius>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import CommodityList from "@/components/commodity-list.vue";
+import BlockRadius from "@/components/block-radius";
+export default {
+  components: {
+    "commodity-list": CommodityList,
+    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_commodity.vue b/src/pages/example_commodity.vue
index 1034c215e106d65c1f66e7d1ef030b4b21d5c7c9..81affe1131df9558a47eb9fbdd819382f1dba764 100644
--- a/src/pages/example_commodity.vue
+++ b/src/pages/example_commodity.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="com_ex">
     <block-radius>
+      <h3>按原型大致做了一下，调优等后续</h3>
       <Commodity :datas="datas" />
     </block-radius>
   </div>
@@ -17,11 +18,22 @@ export default {
   },
   data: () => ({
     datas: {
-
+      productName: "地图视频融合服务",
+      providedBy: "北京比格数据",
+      releaseTime: "2020-03-12 18:31:12",
+      updated: "2020-03-12 18:31:12",
+      dataField: "经济建设",
+      serviceType: "综合应用服务",
+      resourceSummary:
+        "提供视频监控的空间分布展示和视频监控直播的服务提供视频监控的空间分布展示和视频监控直播的服务",
+      openLevel: "共享",
+      views: "99999",
+      numberOfAcquisitions: "99999",
+      specifications:
+        "用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问用户服务申请通过审核确认后，每日可对应急资源地图进行20次免费访问"
     }
   }),
-  mounted() {
-  },
+  mounted() {},
   methods: {}
 };
 </script>
diff --git a/src/pages/example_table.vue b/src/pages/example_table.vue
index 246ae92af85921ff32e4818866177df56dc1e5cb..0493d86aba9377e4973c4151e7f1d4cd190b9af3 100644
--- a/src/pages/example_table.vue
+++ b/src/pages/example_table.vue
@@ -75,9 +75,9 @@ import cesTable from "@/components/table-um";
 export default {
   data: () => ({
     headers: [
-      { label: "服务url", prop: "date", type: "href", align: "left",minWidth: "50%" },
-      { label: "服务名称", prop: "name", type: "href", align: "center" },
-      { label: "中文名", prop: "address", type: "href", align: "right" },
+      { label: "服务url", prop: "date", type: "href", align: "left", minWidth: "50%" },
+      { label: "服务名称", prop: "name", type: "href", align: "center", minWidth: "60%" },
+      { label: "中文名", prop: "address", type: "href", align: "right",width: "100" },
       {
         label: "操作",
         type: "Button",
diff --git a/src/router/index.js b/src/router/index.js
index 431910e68cf30e26d1013e8bf4606ea888573b83..29c9d41d2a2aab83b5fb791f0c59e25844999af2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -91,6 +91,11 @@ export default new Router({
       path: "/example_commodity", // 商品详情实例
       name: "example_commodity",
       component: () => import("@/pages/example_commodity")
+    },
+    {
+      path: "/example_com_list", // 商品列表实例
+      name: "example_com_list",
+      component: () => import("@/pages/example_com_list")
     }
   ]
 });