diff --git a/src/App.vue b/src/App.vue
index a40691aff192c6c059ceaa638e10e3dd5f6d5553..467cac269ec628f069373f7d4fc7aeb17370694d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,36 +1,45 @@
 <template>
-  <div id="app">
+  <div id="app" :class="{ is_fwgl: isFwgl }">
     <bd-menu class="outmenu"></bd-menu>
     <router-view />
   </div>
 </template>
 
 <script>
-import bdMenu from './components/menu' 
+import bdMenu from "./components/menu";
 export default {
   data: () => ({}),
-  components:{
-    bdMenu
+  computed: {
+    isFwgl() {
+      return this.$route.name && this.$route.name.indexOf("fwgl") > -1;
+    },
   },
-  methods: {
-   
+  components: {
+    bdMenu,
   },
-  created() {
-    
-  }
+  methods: {},
+  created() {},
 };
 </script>
 
 <style scoped>
-.outmenu{
+.outmenu {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 99;
 }
-#app{
+#app {
   background-color: #f6f7fb;
   padding-bottom: 20px;
 }
+</style>
 
+<style>
+.is_fwgl {
+  padding-bottom: 0 !important;
+}
+.is_fwgl .decor {
+  display: none !important;
+}
 </style>
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/side-nav-bar.vue b/src/components/side-nav-bar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9ec25200ed1d3d52422f30d11f24213a21586b30
--- /dev/null
+++ b/src/components/side-nav-bar.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="side_nav_bar">
+    <h3 class="side_nav_bar_title">
+      <img :src="require('../assets/imgs/tool_fuwu.png')" width="20" style="margin-right: 10px;" />
+      <span v-text="title"></span>
+    </h3>
+    <ul class="side_nav_bar_list">
+      <li
+        v-for="(nav, index) in navList"
+        :class="{ current: $route.path.indexOf(nav.path) > -1 }"
+        :key="'nav' + index"
+        @click="navAction(nav)"
+      >
+        <span v-text="nav.name"></span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "sideNavBar",
+  props: {
+    title: {
+      type: String,
+      default: () => "我的服务",
+    },
+    navList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  methods: {
+    navAction(nav) {
+      this.$router.push(nav.path);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.side_nav_bar {
+  background-color: #0d1847;
+}
+.side_nav_bar_title {
+  height: 40px;
+  background-color: #182665;
+  border-radius: 10px;
+  overflow: hidden;
+  margin: 20px 15px 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.side_nav_bar_title > span {
+  font-size: 16px;
+  color: #c3caf8;
+}
+.side_nav_bar_list > li {
+  padding: 12px 10px 12px 42px;
+  border-left: 5px solid #0d1847;
+  font-size: 14px;
+  line-height: 24px;
+  color: #e6ebfe;
+  cursor: pointer;
+}
+.side_nav_bar_list > li:hover,
+.side_nav_bar_list > li.current {
+  border-left: 5px solid #e56600;
+  background-color: #182665;
+  color: #e6ebfe;
+}
+</style>
diff --git a/src/components/table-um.vue b/src/components/table-um.vue
index 172c7132b7965af0b748f0157a1a6d6b7dce636c..6233b70d6db5360b1ed41a5c565125203c389eb2 100644
--- a/src/components/table-um.vue
+++ b/src/components/table-um.vue
@@ -31,7 +31,7 @@
           v-if="searchShow"
           v-model="search"
           placeholder="请输入账号、中文名"
-          style="max-width:180px;"
+          style="max-width:220px;"
           size="mini"
           @input="searchVal"
           class="ces_toolbar_inp"
@@ -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">
@@ -108,18 +109,22 @@
                 <em
                   v-if="btn.label == '删除' || btn.label == '移除'"
                   :class="btn.type"
+                  style="color: #830f53"
                   @click="handleRemove(scope.row, btn.label)"
-                  >{{ btn.label }}</em
                 >
+                  {{ btn.label }}
+                </em>
                 <em
                   v-else
                   :class="btn.type"
+                  style="color: #0f2683"
                   @click="handleClick(btn.type, scope.row)"
-                  >{{ btn.label }}</em
                 >
-                <em v-if="btn.line" style="padding:0 20px;color:#edf0ff">{{
-                  btn.line
-                }}</em>
+                  {{ btn.label }}
+                </em>
+                <em v-if="btn.line" style="padding:0 20px;color:#edf0ff">
+                  {{ btn.line }}
+                </em>
               </b>
             </span>
             <!--href 链接-->
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/fwgl.vue b/src/pages/fwgl.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2e5bca46f5c434c23fa9a018002d3a29aed8d4b4
--- /dev/null
+++ b/src/pages/fwgl.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="fwgl_container">
+    <side-nav-bar :nav-list="navList"></side-nav-bar>
+    <div class="main_container">
+      <router-view
+        :key="'type_' + $route.params && $route.params.type"
+      ></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+import sideNavBar from "@/components/side-nav-bar";
+
+export default {
+  components: {
+    sideNavBar,
+  },
+  data: () => ({
+    navList: [],
+    userLevel: 0,
+  }),
+  computed: {},
+  methods: {},
+  mounted() {
+    this.navList = [
+      // 普通用户
+      {
+        level: 0,
+        name: "注册发布的服务",
+        path: "/fwgl/list/0/注册发布的服务",
+      },
+      {
+        level: 0,
+        name: "申请的服务",
+        path: "/fwgl/list/1/申请的服务",
+      },
+      {
+        level: 0,
+        name: "审批的服务",
+        path: "/fwgl/list/2/审批的服务",
+      },
+      {
+        level: 0,
+        name: "云资源服务",
+        path: "/fwgl/list/3/云资源服务",
+      },
+      // 组织管理员
+      {
+        level: 1,
+        name: "组织服务管理",
+        path: "/fwgl/list/4/组织服务管理",
+      },
+      {
+        level: 1,
+        name: "服务审批管理",
+        path: "/fwgl/list/5/服务审批管理",
+      },
+      {
+        level: 1,
+        name: "云资源管理",
+        path: "/fwgl/list/6/云资源管理",
+      },
+      // 超级管理员
+      {
+        level: 2,
+        name: "平台服务管理",
+        path: "/fwgl/list/7/平台服务管理",
+      },
+      {
+        level: 2,
+        name: "服务审批管理",
+        path: "/fwgl/list/8/服务审批管理",
+      },
+      {
+        level: 2,
+        name: "云资源管理",
+        path: "/fwgl/list/9/云资源管理",
+      },
+    ].filter((nav) => nav.level === this.userLevel);
+
+    this.$router.push(this.navList[0].path);
+  },
+  /* updated() {
+    if (this.$route.params && this.$route.params.type === undefined) {
+      this.$router.push(this.navList[0].path);
+    }
+  }, */
+};
+</script>
+
+<style scoped>
+.fwgl_container {
+  height: calc(100vh - 84px);
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+.side_nav_bar {
+  width: 180px;
+  flex-shrink: 0;
+}
+.main_container {
+  width: calc(100% - 180px);
+  flex-grow: 1;
+  flex-shrink: 1;
+  background-color: #f6f7fb;
+}
+</style>
diff --git a/src/pages/fwglList.vue b/src/pages/fwglList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e36f27bc21e9f89377fb280614d36b998fb50486
--- /dev/null
+++ b/src/pages/fwglList.vue
@@ -0,0 +1,198 @@
+<template>
+  <div class="list_container">
+    <el-breadcrumb separator="/" class="bread_crumb">
+      <el-breadcrumb-item>我的服务</el-breadcrumb-item>
+      <el-breadcrumb-item>{{ $route.params.name }}</el-breadcrumb-item>
+    </el-breadcrumb>
+    <div class="table_container">
+      <ces-table
+        class="r_yhgl_table"
+        size="mini"
+        :border="false"
+        :headers="headers"
+        url="tableData"
+        :searchShow="true"
+        :autoAdd="false"
+        :isDialog="true"
+        :confirmOptions="confirmOptions"
+        :detailsUrl="detailsUrl"
+        @primary-edit="editItem"
+        @sold-out="soldOutItem"
+        :emptyText="emptyText"
+        :stripe="true"
+        :pageSizeShow="true"
+        :filterList="filterList"
+      ></ces-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import cesTable from "@/components/table-um";
+export default {
+  data: () => ({
+    headers: [],
+    url: "",
+    detailsUrl: "ss/",
+    confirmOptions: {
+      title: "提示", //提示
+      message: "确认删除该条数据？", //""
+      btnCancelText: "取消", //取消
+      btnSubmitText: "确定", //确定
+    },
+    emptyText: "暂时没数据",
+    filterList: [
+      {
+        name: "服务类型",
+        prop: "fwlx",
+        data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"],
+      },
+      {
+        name: "服务领域",
+        prop: "fwly",
+        data: [
+          "数据服务",
+          "时空服务",
+          "视频服务",
+          "感知服务",
+          "综合服务",
+          "数据服务2",
+          "时空服务2",
+          "视频服务2",
+          "感知服务2",
+          "综合服务2",
+          "感知服务3",
+          "综合服务3",
+        ],
+      },
+      {
+        name: "开放程度",
+        prop: "kfcd",
+        data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"],
+      },
+      {
+        name: "服务状态",
+        prop: "fwzt",
+        data: ["数据服务", "时空服务", "视频服务", "感知服务", "综合服务"],
+      },
+    ],
+  }),
+  components: {
+    cesTable,
+  },
+  methods: {
+    editItem(item) {
+      console.log(item);
+    },
+    soldOutItem(item) {
+      console.log(item);
+    },
+  },
+  mounted() {
+    this.headers = [];
+
+    this.headers.push(
+      { label: "服务名称", prop: "name", type: "href", align: "left" },
+      { label: "服务url", prop: "date", type: "href", align: "center" },
+      { label: "开放程度", prop: "address", type: "href", align: "center" },
+      { label: "服务描述", prop: "address", type: "href", align: "left" },
+      { label: "注册发布时间", prop: "address", type: "href", align: "center" },
+      { label: "服务类型", prop: "address", type: "href", align: "center" }
+    );
+
+    switch (parseInt(this.$route.params.type)) {
+      case 0:
+        this.headers.push({
+          label: "操作",
+          type: "Button",
+          align: "center",
+          width: 240,
+          btnList: [
+            {
+              type: "primary-edit",
+              label: "编辑",
+              line: "|",
+            },
+            {
+              type: "sold-out",
+              label: "申请下架",
+              line: "|",
+            },
+            {
+              type: "primary-del",
+              label: "删除",
+            },
+          ],
+        });
+        break;
+      case 1:
+        this.headers.push(
+          { label: "申请状态", prop: "address", type: "href", align: "center" },
+          {
+            label: "操作",
+            type: "Button",
+            align: "center",
+            width: 160,
+            btnList: [
+              {
+                type: "sold-out",
+                label: "取消",
+                line: "|",
+              },
+              {
+                type: "primary-del",
+                label: "删除",
+              },
+            ],
+          }
+        );
+        break;
+      case 2:
+        this.headers.push(
+          { label: "审批时间", prop: "address", type: "href", align: "center" },
+          { label: "审批状态", prop: "address", type: "href", align: "center" },
+          {
+            label: "操作",
+            type: "Button",
+            align: "center",
+            width: 160,
+            btnList: [
+              {
+                type: "sold-out",
+                label: "审批",
+                line: "|",
+              },
+              {
+                type: "primary-del",
+                label: "删除",
+              },
+            ],
+          }
+        );
+        break;
+    }
+  },
+};
+</script>
+
+<style scope>
+.list_container {
+  height: 100%;
+  overflow: hidden;
+}
+.bread_crumb {
+  margin: 20px;
+  font-size: 14px;
+}
+.table_container {
+  height: calc(100% - 75px);
+  padding: 15px 20px;
+  margin: 0 20px;
+  border-radius: 10px;
+  overflow: hidden;
+  background-color: #fff;
+}
+.table_container .ces-table-page {
+  margin-top: 42px;
+}
+</style>
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 2777b7693280768ad9cf8551313d2bc258d4504a..431910e68cf30e26d1013e8bf4606ea888573b83 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,13 +1,22 @@
 import Vue from "vue";
 import Router from "vue-router";
 
+import Index from "@/pages/index";
+import workPlace from "@/pages/workPlace";
 Vue.use(Router);
 
+const originalPush = Router.prototype.push;
+Router.prototype.push = function push(location, onResolve, onReject) {
+  if (onResolve || onReject)
+    return originalPush.call(this, location, onResolve, onReject);
+  return originalPush.call(this, location).catch((err) => err);
+};
+
 export default new Router({
   routes: [
     {
       path: "/",
-      redirect: "/index"
+      redirect: "/index",
     },
     {
       path: "/index",
@@ -16,59 +25,72 @@ export default new Router({
       redirect: "/workplace",
       children: [
         {
-        path: "/workplace",
-        name: "workPlace",
-        component: () => import("@/pages/workPlace"),
-      },
-      {
-        path: "/servicedetail",
-        name: "servicedetail",
-        component: () => import("@/pages/serviceDetail"),
-      },
-      {
-        path: "/serviceedit",
-        name: "serviceedit",
-        component: () => import("@/pages/serviceEdit"),
-      },
-      {
-        path: "/fwzc", // 服务注册
-        name: "fwzc",
-        redirect: "/fwzc/fwcs",
-        component: () => import("@/pages/fwzc_fwcs"),
-        children: [
-          {
-            path: "/fwzc/fwcs", // 服务注册/服务测试
-            name: "fwcs",
-            component: () => import("@/pages/fwzc_fwcs")
-          },
-        ]
-      }
-      ]
+          path: "/workplace",
+          name: "workPlace",
+          component: () => import("@/pages/workPlace"),
+        },
+        {
+          path: "/servicedetail",
+          name: "servicedetail",
+          component: () => import("@/pages/serviceDetail"),
+        },
+        {
+          path: "/fwzc", // 服务注册
+          name: "fwzc",
+          redirect: "/fwzc/fwcs",
+          component: () => import("@/pages/fwzc_fwcs"),
+          children: [
+            {
+              path: "/fwzc/fwcs", // 服务注册/服务测试
+              name: "fwcs",
+              component: () => import("@/pages/fwzc_fwcs"),
+            },
+          ],
+        },
+        {
+          path: "/fwgl", // 服务注册
+          name: "fwgl",
+          // redirect: "/fwgl/list",
+          component: () => import("@/pages/fwgl"),
+          children: [
+            {
+              path: "/fwgl/list/:type/:name", // 服务注册/服务测试
+              name: "fwglList",
+              component: () => import("@/pages/fwglList"),
+            },
+          ],
+        },
+      ],
     },
     {
       path: "/example_table", // 表格实例
       name: "example_table",
-      component: () => import("@/pages/example_table")
+      component: () => import("@/pages/example_table"),
     },
     {
       path: "/example_upload", // 表格实例
       name: "example_upload",
-      component: () => import("@/pages/example_upload")
+      component: () => import("@/pages/example_upload"),
     },
     {
       path: "/example_code", // 编辑器实例
       name: "example_code",
-      component: () => import("@/pages/example_code")
+      component: () => import("@/pages/example_code"),
     },
     {
       path: "/example_icon", // svg 实例
       name: "example_icon",
-      component: () => import("@/pages/example_icon")
+      component: () => import("@/pages/example_icon"),
     },
     {
       path: "/example_topology", // 拓扑图实例
       name: "example_topology",
       component: () => import("@/pages/example_topology")
+    },
+    {
+      path: "/example_commodity", // 商品详情实例
+      name: "example_commodity",
+      component: () => import("@/pages/example_commodity")
     }
   ]
 });