diff --git a/src/router/index.js b/src/router/index.js
index 151a516..663042d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -170,6 +170,42 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: "/serviceGuide",
+    component: Layout,
+    name: "ServiceGuide",
+    redirect: "/serviceGuide/list",
+    meta: {
+      title: "办事指南",
+      icon: "list"
+    },
+    hidden: false,
+    children: [
+      {
+        path: "list",
+        component: () => import("@/views/serviceGuide/list"),
+        name: "ServiceGuideList",
+        meta: {
+          title: "办事指南列表",
+          icon: "workBook",
+          affix: true,
+          parentTitle: "办事指南"
+        }
+      },
+      {
+        path: "detail",
+        component: () => import("@/views/serviceGuide/detail"),
+        name: "serviceGuideDetail",
+        meta: {
+          title: "办事指南详情",
+          icon: "workBook",
+          affix: true,
+          parentTitle: "办事指南详情"
+        },
+        hidden: true
+      }
+    ]
+  },
   {
     path: "/helpPrint",
     component: Layout,
diff --git a/src/views/convenience/add.vue b/src/views/convenience/add.vue
index 754c03b..50bce16 100644
--- a/src/views/convenience/add.vue
+++ b/src/views/convenience/add.vue
@@ -37,6 +37,10 @@
         </el-select>
       </el-form-item>
 
+      <el-form-item>
+        <el-button type="default" style="border:1px solid rgb(64, 129, 255);color:rgb(64, 129, 255)"  @click="toGuidLine">查看办事指南 ></el-button>
+      </el-form-item>
+
       <el-form-item label="文字说明" prop="remark">
         <el-input
           v-model="convenience.remark"
@@ -138,7 +142,12 @@ export default {
     handlePreview() {},
     handleRemove() {},
     beforeRemove() {},
-    handleExceed() {}
+    handleExceed() {},
+    toGuidLine(){
+      this.$router.push({
+                path: '/serviceGuide/list',
+              })
+    },
   }
 };
 </script>
diff --git a/src/views/serviceGuide/detail.vue b/src/views/serviceGuide/detail.vue
new file mode 100644
index 0000000..bae670f
--- /dev/null
+++ b/src/views/serviceGuide/detail.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="app-container">
+    <el-form>
+      <el-form-item label="办事指南标题：">
+        <span>{{ info.title }}</span>
+      </el-form-item>
+      <el-form-item label="办事指南简介：">
+        <span>{{ info.introduction }}</span>
+      </el-form-item>
+      <el-form-item v-if="info.videoUrl !== '' && info.videoUrl !== null">
+        <video
+          :src="info.videoUrl"
+          style="width:600px;height:300px"
+          controls
+        ></video>
+      </el-form-item>
+    </el-form>
+
+    <!-- <Editor v-model="info.content" style="width: 100%" :disabled="true" /> -->
+    <div v-html="info.content"></div>
+  </div>
+</template>
+
+<script>
+import Editor from "@/components/UEditor/index.vue";
+import { getWorkBookInfo  } from "@/api/workBook";
+
+export default {
+  data() {
+    return {
+      id: this.$route.query.id,
+      info: {}
+    };
+  },
+  components: { Editor },
+  created() {
+    this.getInfo();
+  },
+  methods: {
+    getInfo() {
+      // console.log(this.id);
+      getWorkBookInfo({ id: this.id }).then(res => {
+        console.log(res);
+        this.info = res.d;
+      });
+    }
+  }
+};
+</script>
+
+<style></style>
diff --git a/src/views/serviceGuide/list.vue b/src/views/serviceGuide/list.vue
new file mode 100644
index 0000000..e731c5a
--- /dev/null
+++ b/src/views/serviceGuide/list.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="app-container" style="padding-top:15px">
+    <div id="guideLine" style="background:#fff;padding-bottom:62px">
+      <div class="title">办事指南</div>
+      <el-input
+        placeholder="输入关键字查询办事指南"
+        prefix-icon="el-icon-search"
+        v-model="listQuery.keyword"
+        clearable
+        class="searchInput"
+      >
+      </el-input>
+      <el-button
+        type="primary"
+        style="padding:9px 28px ;margin-left:10px"
+        @click="handleSearch"
+        >搜索</el-button
+      >
+      <ul class="guideList">
+        <li v-for="item in list" :key="item.id" @click="toDetail(item.id)">
+          {{ item.title }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import Pagination from "@/components/Pagination";
+import { workBookList } from "@/api/workBook";
+
+export default {
+  components: { Pagination },
+  data() {
+    return {
+      listLoading: false,
+      loading: false,
+      list: [],
+      listQuery: {
+        lastPageIndex: 1,
+        size: 99999,
+        keyword: undefined,
+        category: "HANDLING_GUIDELINE"
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    getList() {
+      this.listLoading = true;
+      workBookList(this.listQuery).then(res => {
+        // console.log(res)
+        this.listLoading = false;
+        this.list = res.d.records;
+      });
+    },
+    handleSearch() {
+      this.getList();
+    },
+    toDetail(id) {
+      this.$router.push({
+        path: "/serviceGuide/detail",
+        query: { id }
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.workBookLayout {
+  padding-top: 20px;
+  background: #fff;
+  height: 100%;
+}
+.app-container .title {
+  border-left: 5px solid #1890ff;
+  padding-left: 8px;
+  font-size: 18px;
+  color: #000000;
+}
+.img {
+  width: 486px;
+  height: 268px;
+}
+.guideList {
+  list-style: none;
+  padding-left: 15px;
+  /* border: 1px solid #e5e5e5; */
+}
+.guideList li {
+  padding: 18px 21px;
+  border: 1px solid #e5e5e5;
+  margin: 0 0 -1px -1px;
+  font-size: 14px;
+  cursor: pointer;
+}
+.guideList li:hover {
+  color: #4081ff;
+}
+.searchInput {
+  width: 681px;
+  height: 50px;
+  line-height: 50px;
+  margin: 18px 0 0 15px;
+}
+#guideLine .el-input--medium .el-input__inner {
+  height: 50px !important;
+  line-height: 50px !important;
+}
+</style>