diff --git a/src/assets/imgs/tool_ic_ganzhifw.png b/src/assets/imgs/tool_ic_ganzhifw.png
new file mode 100644
index 0000000000000000000000000000000000000000..cf12810418a53953dd4b11c5403291865082312b
Binary files /dev/null and b/src/assets/imgs/tool_ic_ganzhifw.png differ
diff --git a/src/assets/imgs/tool_ic_ganzhifw_sel.png b/src/assets/imgs/tool_ic_ganzhifw_sel.png
new file mode 100644
index 0000000000000000000000000000000000000000..ccace457321c7fed48e9ac2de21df96ea05b1279
Binary files /dev/null and b/src/assets/imgs/tool_ic_ganzhifw_sel.png differ
diff --git a/src/assets/imgs/tool_ic_shikongfw.png b/src/assets/imgs/tool_ic_shikongfw.png
new file mode 100644
index 0000000000000000000000000000000000000000..ca18ff14399733c60fe5ec54c8c48d67813e8118
Binary files /dev/null and b/src/assets/imgs/tool_ic_shikongfw.png differ
diff --git a/src/assets/imgs/tool_ic_shikongfw_sel.png b/src/assets/imgs/tool_ic_shikongfw_sel.png
new file mode 100644
index 0000000000000000000000000000000000000000..45f46183bfe7aabb631266775bd7cc116dace8ba
Binary files /dev/null and b/src/assets/imgs/tool_ic_shikongfw_sel.png differ
diff --git a/src/assets/imgs/tool_ic_shipinfw.png b/src/assets/imgs/tool_ic_shipinfw.png
new file mode 100644
index 0000000000000000000000000000000000000000..60546bc541f0a29a03c6caec07dc2afd550d6f3b
Binary files /dev/null and b/src/assets/imgs/tool_ic_shipinfw.png differ
diff --git a/src/assets/imgs/tool_ic_shipinfw_sel.png b/src/assets/imgs/tool_ic_shipinfw_sel.png
new file mode 100644
index 0000000000000000000000000000000000000000..0de231ead7918d4daadbfa636a5ae077da8afdff
Binary files /dev/null and b/src/assets/imgs/tool_ic_shipinfw_sel.png differ
diff --git a/src/assets/imgs/tool_ic_shujufw.png b/src/assets/imgs/tool_ic_shujufw.png
new file mode 100644
index 0000000000000000000000000000000000000000..34d42c110665bdf96b4aae31aa888b67519da497
Binary files /dev/null and b/src/assets/imgs/tool_ic_shujufw.png differ
diff --git a/src/assets/imgs/tool_ic_shujufw_sel.png b/src/assets/imgs/tool_ic_shujufw_sel.png
new file mode 100644
index 0000000000000000000000000000000000000000..e14155be92e50615b2929274b765d4bea435adc3
Binary files /dev/null and b/src/assets/imgs/tool_ic_shujufw_sel.png differ
diff --git a/src/assets/imgs/tool_ic_yingyongsd.png b/src/assets/imgs/tool_ic_yingyongsd.png
new file mode 100644
index 0000000000000000000000000000000000000000..74b98642de02570175c4f791040908802a722634
Binary files /dev/null and b/src/assets/imgs/tool_ic_yingyongsd.png differ
diff --git a/src/assets/imgs/tool_ic_yingyongsd_sel.png b/src/assets/imgs/tool_ic_yingyongsd_sel.png
new file mode 100644
index 0000000000000000000000000000000000000000..78503e1a0297c5ac0b0b8daca9aa6a88c4662b22
Binary files /dev/null and b/src/assets/imgs/tool_ic_yingyongsd_sel.png differ
diff --git a/src/assets/imgs/tool_ic_yunziyuanfw.png b/src/assets/imgs/tool_ic_yunziyuanfw.png
new file mode 100644
index 0000000000000000000000000000000000000000..9573ad1c4c2fddcb2c34e7250d1bbacc3d4498ea
Binary files /dev/null and b/src/assets/imgs/tool_ic_yunziyuanfw.png differ
diff --git a/src/assets/imgs/tool_ic_yunziyuanfw_sel.png b/src/assets/imgs/tool_ic_yunziyuanfw_sel.png
new file mode 100644
index 0000000000000000000000000000000000000000..792515864cf2e8cf44f942a453d6487b2687b7f0
Binary files /dev/null and b/src/assets/imgs/tool_ic_yunziyuanfw_sel.png differ
diff --git a/src/assets/imgs/tool_ic_zongheyyfw.png b/src/assets/imgs/tool_ic_zongheyyfw.png
new file mode 100644
index 0000000000000000000000000000000000000000..ddb5caa1f69e6282dbb1ac14bca2ff9110a4e5c4
Binary files /dev/null and b/src/assets/imgs/tool_ic_zongheyyfw.png differ
diff --git a/src/assets/imgs/tool_ic_zongheyyfw_sel.png b/src/assets/imgs/tool_ic_zongheyyfw_sel.png
new file mode 100644
index 0000000000000000000000000000000000000000..273965e7be3ab73656a4afd5d7ff18a0be7ca749
Binary files /dev/null and b/src/assets/imgs/tool_ic_zongheyyfw_sel.png differ
diff --git a/src/components/commodity-cell.vue b/src/components/commodity-cell.vue
index e3100c50823ee15de664d3f84029720c998d196e..16decf854ed3fbbd007414ff32cebc40f0271727 100644
--- a/src/components/commodity-cell.vue
+++ b/src/components/commodity-cell.vue
@@ -7,7 +7,12 @@
       />
     </div>
     <div class="com_cell_message">
-      <div class="com_cell_msg_title" @click="goUrl('ssurl')">水路货物周转量情况</div>
+      <div class="com_cell_msg_title">
+        水路货物周转量情况
+        <span v-if="cellData.id == 1" class="tags shared">共享</span>
+        <span v-else-if="cellData.id ==  2" class="tags restricted">受限</span>
+        <span v-else class="tags sensitive">敏感</span>
+      </div>
       <div class="com_cell_item">
         <span class="com_cell_item_title">资源摘要：</span>
         <span
@@ -31,6 +36,20 @@
         <span class="com_cell_data">2020-03-12 18:31:12</span>
       </div>
     </div>
+    <div class="com_cell_right">
+      <el-rate
+        v-model="cellData.id"
+        disabled
+        show-score
+        text-color="#58617a"
+        score-template="{value}"
+      ></el-rate>
+      <div class="com_cell_right_text">
+        <span class="com_cell_right_time_tit">本月获取次数：</span>
+        <span class="com_cell_right_time">26987455次</span>
+      </div>
+      <el-button class="com_cell_right_btn" @click="goUrl('ssurl')">查看详情</el-button>
+    </div>
   </div>
 </template>
 
@@ -38,7 +57,8 @@
 export default {
   components: {},
   props: {
-    url: { type: String, default: "" }
+    url: { type: String, default: "" },
+    cellData: { type: Object, default: {} }
   },
   data: () => ({}),
   computed: {},
@@ -58,7 +78,7 @@ export default {
 .com_cell {
   display: flex;
   justify-content: flex-start;
-  padding: 10px;
+  padding: 20px 10px;
   border-bottom: 2px #f4f7fc solid;
 }
 .com_cell_img_box {
@@ -73,20 +93,19 @@ export default {
 }
 .com_cell_message {
   padding-left: 20px;
-  width: calc(100% - 190px);
+  width: calc(100% - 420px);
 }
 .com_cell_msg_title {
   color: #0d1847;
   font-size: 22px;
   font-weight: 700;
   margin-bottom: 6px;
-  cursor: pointer;
 }
 .com_cell_item {
   font-size: 16px;
   line-height: 26px;
   margin-top: 1px;
-  color: #51ac14;
+  color: #8890a7;
   display: flex;
   align-self: start;
 }
@@ -96,10 +115,67 @@ export default {
 .com_cell_data {
   display: inline-block;
   width: calc(100% - 90px);
-  color: #f1ac14;
+  color: #242c43;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.com_cell_right {
+  width: 250px;
+  padding: 25px 0 0 60px;
+}
+.com_cell_right_text {
+  font-size: 14px;
+  margin-top: 15px;
+}
+.com_cell_right_time_tit {
+  color: #8890a7;
+}
+.com_cell_right_time {
+  color: #242c43;
+}
+.com_cell_right_btn {
+  background-color: #0f2683;
+  color: #f8f9fd;
+  width: 160px;
+  height: 40px;
+  border-radius: 20px;
+  margin-top: 35px;
+}
+.tags {
+  display: inline-block;
+  margin-left: 10px;
+  padding: 1px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 10px;
+  position: relative;
+  top: -2px;
+}
+.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;
+}
 </style>
-
+<style>
+.com_cell_right .el-rate__text {
+  display: inline-block;
+  margin-left: 10px;
+  font-size: 22px;
+  font-weight: 700;
+}
+.com_cell_right .el-rate__icon {
+  font-size: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/commodity-list.vue b/src/components/commodity-list.vue
index ae96a43b8cea2c1ec4b0702704dfc0215175365a..683a9a48f6831bebeb1a8de9ee13dff203c36c9d 100644
--- a/src/components/commodity-list.vue
+++ b/src/components/commodity-list.vue
@@ -1,48 +1,50 @@
 <template>
   <div>
-    <commodity-cell v-for="item in datas" :url="url" :key="item"></commodity-cell>
+    <commodity-cell v-for="item in datas" :cellData="item" :url="url" :key="item.id"></commodity-cell>
     <!-- 分页 -->
     <section class="com-pagination" v-if="paginationShow">
       <div class="com_page_total">共 {{ pagination.total }} 个条目</div>
-      <div class="com_page_num" v-if="pageSizeShow">
-        <div class="com_page_num_sel">
-          <el-select
-            v-model="pagination.rowsPerPage"
-            placeholder="请选择"
-            size="mini"
-            @change="handleSizeChange"
-          >
-            <el-option
-              v-for="item in pageOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            ></el-option>
-          </el-select>
+      <div class="com_page_item">
+        <div class="com_page_num" v-if="pageSizeShow">
+          <div>每页行数：</div>
+          <div class="com_page_num_sel">
+            <el-select
+              v-model="pagination.rowsPerPage"
+              placeholder="请选择"
+              size="small"
+              @change="handleSizeChange"
+            >
+              <el-option
+                v-for="item in pageOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </div>
         </div>
-        <div>条 / 页</div>
-      </div>
-      <div class="com_page_control">
-        <el-button
-          icon="el-icon-arrow-left"
-          circle
-          size="mini"
-          @click="handleCurrentChange(-1)"
-          :disabled="pagination.page == 1"
-        ></el-button>
-        &nbsp;&nbsp;第{{ pagination.page }}页 / 共{{
-        Math.ceil(pagination.total / pagination.rowsPerPage)
-        }}页
-        <el-button
-          icon="el-icon-arrow-right"
-          circle
-          size="mini"
-          @click="handleCurrentChange(1)"
-          :disabled="
+        <div class="com_page_control">
+          <el-button
+            icon="el-icon-arrow-left"
+            circle
+            size="mini"
+            @click="handleCurrentChange(-1)"
+            :disabled="pagination.page == 1"
+          ></el-button>
+          &nbsp;&nbsp;第{{ pagination.page }}页 / 共{{
+          Math.ceil(pagination.total / pagination.rowsPerPage)
+          }}页
+          <el-button
+            icon="el-icon-arrow-right"
+            circle
+            size="mini"
+            @click="handleCurrentChange(1)"
+            :disabled="
             pagination.page >=
               Math.ceil(pagination.total / pagination.rowsPerPage)
           "
-        ></el-button>
+          ></el-button>
+        </div>
       </div>
     </section>
   </div>
@@ -99,7 +101,7 @@ export default {
       this.$emit("refresh");
     },
     getTotal() {
-      this.total = this.datas.length;
+      this.pagination.total = this.datas.length;
     }
   },
   mounted() {
@@ -119,17 +121,30 @@ export default {
   align-items: center;
 }
 .com_page_num {
-  width: 120px;
+  width: 140px;
+  margin-right: 20px;
   display: flex;
   justify-content: space-around;
   align-items: center;
 }
 .com_page_num_sel {
-  width: 66px;
+  width: 50px;
+  font-size: 14px;
+  position: relative;
+  top: 1px;
+}
+.com_page_item {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
 }
 </style>
 <style>
 .com_page_control .el-button {
   border: 0;
 }
+.com_page_num .el-input__inner {
+  border: 0;
+  padding: 0;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/service_shop_menu.vue b/src/components/service_shop_menu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0ad7086e1862eedf95ada453ca3434e1931f76e9
--- /dev/null
+++ b/src/components/service_shop_menu.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="service_shop_menu">
+    <ul class="service_shop_menu_list">
+      <li v-for="(item, index) in menuList" :key="index" @click="active(item)">
+        <img :src="require('../assets/imgs/' + item.default + '.png')" class="menu_img" />
+        <span class="menu_item">{{ item.label }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    menuList: {
+      type: Array,
+      default: [
+        {
+          id: 0,
+          label: "数据服务",
+          active: "tool_ic_shujufw_sel",
+          default: "tool_ic_shujufw"
+        },
+        {
+          id: 1,
+          label: "时空服务",
+          active: "tool_ic_shikongfw_sel",
+          default: "tool_ic_shikongfw"
+        },
+        {
+          id: 2,
+          label: "视频服务",
+          active: "tool_ic_shipinfw_sel",
+          default: "tool_ic_shipinfw"
+        },
+        {
+          id: 3,
+          label: "感知服务",
+          active: "tool_ic_ganzhifw_sel",
+          default: "tool_ic_ganzhifw"
+        },
+        {
+          id: 4,
+          label: "综合应用服务",
+          active: "tool_ic_zongheyyfw_sel",
+          default: "tool_ic_zongheyyfw"
+        },
+        {
+          id: 5,
+          label: "云资源服务",
+          active: "tool_ic_yunziyuanfw_sel",
+          default: "tool_ic_yunziyuanfw"
+        },
+        {
+          id: 6,
+          label: "应用商店",
+          active: "tool_ic_yingyongsd_sel",
+          default: "tool_ic_yingyongsd"
+        }
+      ]
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    active() {}
+  }
+};
+</script>
+
+<style scoped>
+.service_shop_menu {
+  background-color: #0d1847;
+  position: fixed;
+  top: 84px;
+  left: 0;
+  width: 200px;
+  height: 100%;
+  padding-top: 30px;
+}
+.service_shop_menu_list > li {
+  padding: 16px 10px 8px 22px;
+  border-left: 5px solid #0d1847;
+  font-size: 16px;
+  line-height: 24px;
+  cursor: pointer;
+}
+.service_shop_menu_list > li:hover,
+.service_shop_menu_list > li.current {
+  border-left: 5px solid #e56600;
+  background-color: #182665;
+  color: #e6ebfe;
+}
+.menu_img {
+  width: 25px;
+  margin-right: 6px;
+}
+.menu_item {
+  position: relative;
+  color: #6573ae;
+  top: -6px;
+}
+</style>
diff --git a/src/components/table-um.vue b/src/components/table-um.vue
index 5b4c0daaef573dab85970c71b9f2b4dee60d0848..01b249b71b8985a38863e8351af4dd503a632418 100644
--- a/src/components/table-um.vue
+++ b/src/components/table-um.vue
@@ -165,45 +165,47 @@
     <!-- 分页 -->
     <section class="ces-pagination" v-if="paginationShow">
       <div class="ces_page_total">共 {{ pagination.total }} 个条目</div>
-      <div class="ces_page_num" v-if="pageSizeShow">
-        <div class="ces_page_num_sel">
-          <el-select
-            v-model="pagination.rowsPerPage"
-            placeholder="请选择"
-            size="mini"
-            @change="handleSizeChange"
-          >
-            <el-option
-              v-for="item in pageOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            ></el-option>
-          </el-select>
+      <div class="ces_page_item">
+        <div class="ces_page_num" v-if="pageSizeShow">
+          <div>每页行数：</div>
+          <div class="ces_page_num_sel">
+            <el-select
+              v-model="pagination.rowsPerPage"
+              placeholder="请选择"
+              size="small"
+              @change="handleSizeChange"
+            >
+              <el-option
+                v-for="item in pageOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+          </div>
         </div>
-        <div>条 / 页</div>
-      </div>
-      <div class="ces_page_control">
-        <el-button
-          icon="el-icon-arrow-left"
-          circle
-          size="mini"
-          @click="handleCurrentChange(-1)"
-          :disabled="pagination.page == 1"
-        ></el-button>
-        &nbsp;&nbsp;第{{ pagination.page }}页 / 共{{
-        Math.ceil(pagination.total / pagination.rowsPerPage)
-        }}页
-        <el-button
-          icon="el-icon-arrow-right"
-          circle
-          size="mini"
-          @click="handleCurrentChange(1)"
-          :disabled="
+        <div class="ces_page_control">
+          <el-button
+            icon="el-icon-arrow-left"
+            circle
+            size="mini"
+            @click="handleCurrentChange(-1)"
+            :disabled="pagination.page == 1"
+          ></el-button>
+          &nbsp;&nbsp;第{{ pagination.page }}页 / 共{{
+          Math.ceil(pagination.total / pagination.rowsPerPage)
+          }}页
+          <el-button
+            icon="el-icon-arrow-right"
+            circle
+            size="mini"
+            @click="handleCurrentChange(1)"
+            :disabled="
             pagination.page >=
               Math.ceil(pagination.total / pagination.rowsPerPage)
           "
-        ></el-button>
+          ></el-button>
+        </div>
       </div>
     </section>
   </section>
@@ -673,6 +675,13 @@ em {
 .th_pink {
   background-color: #faf2e2 !important;
 }
+.ces_page_control .el-button {
+  border: 0;
+}
+.ces_page_num .el-input__inner {
+  border: 0;
+  padding: 0;
+}
 </style>
 <style scoped>
 .ces-table {
@@ -703,13 +712,17 @@ em {
 /* .ces_page_total {
 } */
 .ces_page_num {
-  width: 120px;
+  width: 140px;
+  margin-right: 20px;
   display: flex;
   justify-content: space-around;
   align-items: center;
 }
 .ces_page_num_sel {
-  width: 66px;
+  width: 50px;
+  font-size: 14px;
+  position: relative;
+  top: 1px;
 }
 .table_radius {
   border-radius: 8px;
@@ -788,7 +801,9 @@ em {
   background-color: #515fe7;
   color: #f4f7fc;
 }
-.ces_page_control .el-button {
-  border: 0;
+.ces_page_item {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
 }
 </style>
diff --git a/src/pages/example_com_list.vue b/src/pages/example_com_list.vue
index 2a73f5a443b9e2a5c434cb4e9e76f3427bd45723..00feff7213a06edf8f2b6eaadda67e2dd606345d 100644
--- a/src/pages/example_com_list.vue
+++ b/src/pages/example_com_list.vue
@@ -17,7 +17,7 @@ export default {
     BlockRadius
   },
   data: () => ({
-    list: [1, 2, 3, 4, 5, 6]
+    list: [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }]
   }),
   mounted() {},
   methods: {}
diff --git a/src/pages/example_table.vue b/src/pages/example_table.vue
index f4f260ad2fccf04a09fd855d3ada5a3f02f27bf9..dd43c156ab8f202eda15e451d13611ddd279897e 100644
--- a/src/pages/example_table.vue
+++ b/src/pages/example_table.vue
@@ -20,6 +20,7 @@
       @primary-del="delItem"
       :emptyText="emptyText"
       :stripe="true"
+      :paginationShow="true"
       :pageSizeShow="true"
       :filterList="filterList"
       cellClassName="cell_width"
diff --git a/src/pages/service_list.vue b/src/pages/service_list.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bd1e2e847ee2c0445b5291fb4efbec657477b742
--- /dev/null
+++ b/src/pages/service_list.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="service_list">
+    <el-container>
+      <el-aside width="200px">
+        <service-shop-menu></service-shop-menu>
+      </el-aside>
+      <el-main>
+        <block-radius>
+          <commodity-list :datas="list" url="urlssss" :paginationShow="true" :pageSizeShow="true"></commodity-list>
+        </block-radius>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import CommodityList from "@/components/commodity-list.vue";
+import BlockRadius from "@/components/block-radius";
+import ServiceShopMenu from "@/components/service_shop_menu";
+export default {
+  components: {
+    "commodity-list": CommodityList,
+    BlockRadius,
+    ServiceShopMenu
+  },
+  data: () => ({
+    list: [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }]
+  }),
+  mounted() {},
+  methods: {}
+};
+</script>
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 81668ebf8bfa2b2b719833ce798946dcd43811bf..d48fa4c31df30ec5ccd23159e20ad989031768d4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -65,6 +65,18 @@ export default new Router({
             },
           ],
         },
+        {
+          path: "/fwcs", // 服务超市
+          name: "fwcs",
+          component: () => import("@/pages/service_list"),
+          children: [
+            {
+              path: "/service_list", // 服务超市列表页
+              name: "fwcsList",
+              component: () => import("@/pages/service_list"),
+            },
+          ],
+        },
       ],
     },
     {