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/side-nav-bar.vue b/src/components/side-nav-bar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7329a95c5e8fdb5a1c99d2332f8325f71e69f969
--- /dev/null
+++ b/src/components/side-nav-bar.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="side_nav_bar">
+    <h3 class="side_nav_bar_title">
+      <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..c19059e2daee7f02e7c909cbd179afa14d88e94f 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"
@@ -108,18 +108,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/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/router/index.js b/src/router/index.js
index cc569cf99cdc20c243aedbfa4b7cebe6ae321b29..5b37700c41364e25be043549ac7e7ee86ed3bb2b 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,54 +25,67 @@ export default new Router({
       redirect: "/workplace",
       children: [
         {
-        path: "/workplace",
-        name: "workPlace",
-        component: () => import("@/pages/workPlace"),
-      },
+          path: "/workplace",
+          name: "workPlace",
+          component: () => import("@/pages/workPlace"),
+        },
+        {
+          path: "/servicedetail",
+          name: "servicedetail",
+          component: () => import("@/pages/serviceDetail"),
+        },
         {
-        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: "/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")
-    }
-  ]
+      component: () => import("@/pages/example_topology"),
+    },
+  ],
 });