diff --git a/src/api/workBook.js b/src/api/workBook.js
index 0966b91..08f30e3 100644
--- a/src/api/workBook.js
+++ b/src/api/workBook.js
@@ -2,8 +2,8 @@ import request from '@/utils/request'
 
 /**
  * 工作手册列表
- * @param {Object}} data 
- * @returns 
+ * @param {Object}} data
+ * @returns
  */
 export function workBookList(data) {
   return request({
@@ -15,13 +15,21 @@ export function workBookList(data) {
 
 /**
  * 工作手册详情
- * @param {String} id 
- * @returns 
+ * @param {String} id
+ * @returns
  */
 export function getWorkBookInfo(id) {
   return request({
     url: '/api/convenience/workBook/detail',
     method: 'get',
-    params:id
+    params: id
   })
-}
\ No newline at end of file
+}
+
+export function deptList(data) {
+  return request({
+    url: '/api/convenience/dept/list',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index 71ef299..cf5651f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -241,6 +241,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: "/staff",
diff --git a/src/views/serviceGuide/detail.vue b/src/views/serviceGuide/detail.vue
new file mode 100644
index 0000000..500ee25
--- /dev/null
+++ b/src/views/serviceGuide/detail.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="app-container">
+    <el-form>
+      <el-form-item label="办事指南标题：">
+        <span>{{ info.title }}</span>
+      </el-form-item>
+      <el-form-item label="县级部门：">
+        <span>{{ info.dept && info.dept.name }}</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
+        />
+      </el-form-item>
+    </el-form>
+
+    <!-- <Editor v-model="info.content" style="width: 100%" :disabled="true" /> -->
+    <div v-html="info.content" />
+  </div>
+</template>
+
+<script>
+// import Editor from '@/components/UEditor/index.vue'
+import { getWorkBookInfo } from '@/api/workBook'
+
+export default {
+  // components: { Editor },
+  data() {
+    return {
+      id: this.$route.query.id,
+      info: {}
+    }
+  },
+  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..6a202c6
--- /dev/null
+++ b/src/views/serviceGuide/list.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="app-container" style="padding-top:15px">
+    <div id="guideLine" style="background:#fff;padding-bottom:62px; padding-top: 20px">
+      <div class="title" style="margin-bottom: 20px">办事指南</div>
+      <el-input
+        v-model="listQuery.keyword"
+        placeholder="输入关键字查询办事指南"
+        prefix-icon="el-icon-search"
+        clearable
+        style="width:200px;margin-left:15px"
+      />
+      <el-select v-model="listQuery.deptId" clearable placeholder="请选择部门" style="width:200px;margin-left:10px">
+        <el-option v-for="item of depts" :key="item.id" :value="item.id" :label="item.name" />
+      </el-select>
+      <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, deptList } from '@/api/workBook'
+
+export default {
+  // components: { Pagination },
+  data() {
+    return {
+      listLoading: false,
+      loading: false,
+      list: [],
+      listQuery: {
+        lastPageIndex: 1,
+        size: 99999,
+        keyword: undefined,
+        category: 'HANDLING_GUIDELINE',
+        deptId: undefined
+      },
+
+      depts: []
+    }
+  },
+  created() {
+    this.getList()
+    this.getDepts()
+  },
+  methods: {
+    getList() {
+      this.listLoading = true
+      workBookList(this.listQuery).then(res => {
+        // console.log(res)
+        this.listLoading = false
+        this.list = res.d.records
+      })
+    },
+    getDepts() {
+      deptList({ size: 99999 }).then(res => {
+        this.depts = 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>