diff --git a/src/assets/reception/department-list-item-bkg.png b/src/assets/reception/department-list-item-bkg.png
new file mode 100644
index 0000000..24f1445
Binary files /dev/null and b/src/assets/reception/department-list-item-bkg.png differ
diff --git a/src/components/Reception/Navbar.vue b/src/components/Reception/Navbar.vue
index f5c8467..9d208d0 100644
--- a/src/components/Reception/Navbar.vue
+++ b/src/components/Reception/Navbar.vue
@@ -30,8 +30,9 @@ export default {
   display: flex;
   align-items: center;
   background: #247EC3;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
 
-  z-index: 999;
+  z-index: 999999;
   position: sticky;
   top: 0;
 
@@ -71,6 +72,7 @@ export default {
       font-weight: 500;
       color: #FFFFFF;
       line-height: 33px;
+      cursor: pointer;
     }
 
     margin-left: auto;
diff --git a/src/components/Reception/Search.vue b/src/components/Reception/Search.vue
index 8de0abb..8326f3a 100644
--- a/src/components/Reception/Search.vue
+++ b/src/components/Reception/Search.vue
@@ -1,81 +1,73 @@
 <template>
   <div class="search">
     <div class="select-bar">
-      <el-dropdown trigger="click" placement="bottom" @command="e => selectValue = e">
-        <el-button type="primary" class="dropdown-button">
-          <div style="display: flex;align-items: center;">
-            <i class="el-icon-search el-icon--left"></i><p class="dropdown-button__text">{{selectValue}}</p><i class="el-icon-arrow-down el-icon--right"></i>
-          </div>
-        </el-button>
-        <template #dropdown>
-          <el-dropdown-menu style="width: 235px;" class="main-drop">
-            <el-dropdown-item command="部门工作职责">
-              <div style="text-align: center">部门工作职责</div>
-            </el-dropdown-item>
-            <el-dropdown-item command="制度文件">
-              <div style="text-align: center">制度文件</div>
-            </el-dropdown-item>
-            <el-dropdown-item command="工作流程">
-              <div style="text-align: center">工作流程</div>
-            </el-dropdown-item>
-            <el-dropdown-item command="岗位工作及标准">
-              <div style="text-align: center">岗位工作及标准</div>
-            </el-dropdown-item>
-            <el-dropdown-item command="表单中心">
-              <div style="text-align: center">表单中心</div>
-            </el-dropdown-item>
-          </el-dropdown-menu>
+      <el-popover v-model="popoverShow" transition="el-zoom-in-top" popper-class="select-bar__popover" :visible-arrow="false" trigger="manual" placement="bottom-start">
+        <template #reference>
+          <el-button type="primary" class="dropdown-button" @click="popoverShow = !popoverShow">
+            <div class="btn-slot">
+              <i class="el-icon-search el-icon--left"></i><p class="dropdown-button__text">{{selectValue}}</p><i class="el-icon-arrow-down el-icon--right"></i>
+            </div>
+          </el-button>
         </template>
-      </el-dropdown>
+        <template>
+          <div class="dropdown-box">
+            <div class="left">
+              <div class="left-item" v-for="i in ['制度文件','工作流程','岗位工作及标准','表单中心']" @click="selectValue = i">
+                {{ i }}
+              </div>
+            </div>
 
-      <div class="select-bar__blank">
-      </div>
-    </div>
-    <div class="search__bottom">
-      <div class="top">
-        <div class="search__bottom--btn">
-          <el-dropdown trigger="click" placement="bottom" @command="e => selectValue = e">
-            <el-button type="primary" class="dropdown-search-button">
-              <span style="padding-right: 10px;">任意词</span><i class="el-icon-arrow-down el-icon--right"></i>
-            </el-button>
-            <template #dropdown>
-              <el-dropdown-menu class="select-drop">
-                <el-dropdown-item command="制度文件">
-                  <div style="text-align: center">制度文件</div>
-                </el-dropdown-item>
-                <el-dropdown-item command="工作流程">
-                  <div style="text-align: center">工作流程</div>
-                </el-dropdown-item>
-                <el-dropdown-item command="岗位工作及标准">
-                  <div style="text-align: center">岗位工作及标准</div>
-                </el-dropdown-item>
-                <el-dropdown-item command="表单中心">
-                  <div style="text-align: center">表单中心</div>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </div>
-
-        <div class="search__bottom--input">
-          <el-input placeholder="请输入内容" size="" v-model="inputValue">
-            <template #append>
-              <el-button style="background: #247EC3;color: #fff;border: none;border-bottom-left-radius: 0;border-top-left-radius: 0;">搜 索</el-button>
-            </template>
-          </el-input>
-        </div>
-      </div>
+            <div class="right">
+             <div class="search-bar">
+               <el-dropdown trigger="click" placement="bottom" @command="e => selectValue = e">
+                 <el-button type="primary" class="dropdown-search-button">
+                   <div class="btn-slot">
+                     <span>任意词</span><i style="padding-left: 10px;" class="el-icon-arrow-down el-icon--right"></i>
+                   </div>
+                 </el-button>
+                 <template #dropdown>
+                   <el-dropdown-menu class="select-drop">
+                     <el-dropdown-item command="制度文件">
+                       <div style="text-align: center">制度文件</div>
+                     </el-dropdown-item>
+                     <el-dropdown-item command="工作流程">
+                       <div style="text-align: center">工作流程</div>
+                     </el-dropdown-item>
+                     <el-dropdown-item command="岗位工作及标准">
+                       <div style="text-align: center">岗位工作及标准</div>
+                     </el-dropdown-item>
+                     <el-dropdown-item command="表单中心">
+                       <div style="text-align: center">表单中心</div>
+                     </el-dropdown-item>
+                   </el-dropdown-menu>
+                 </template>
+               </el-dropdown>
+               <div class="search__bottom--input">
+                 <el-input placeholder="请输入内容" size="" v-model="inputValue">
+                   <template #append>
+                     <el-button style="background: #247EC3;color: #fff;border: none;border-bottom-left-radius: 0;border-top-left-radius: 0;">搜 索</el-button>
+                   </template>
+                 </el-input>
+               </div>
+             </div>
 
-      <div class="bottom">
-        <div class="history__icon">
-          <el-image style="width: 30px;height: 31px" fit="cover" :src="require('@/assets/reception/history-icon.png')"></el-image>
-        </div>
-        <div class="history__word">
-          <div class="history__word--top">常用搜索</div>
-          <div class="history__word--bottom">
-            <span style="cursor: pointer;" v-for="(i, index) in ['奖学金', '集体户口', '助学金', '党建']">{{ i }}{{ index !== 3 ? '&nbsp|&nbsp' : '' }}</span>
+             <div class="history">
+               <div class="history__icon">
+                 <el-image style="width: 30px;height: 31px" fit="cover" :src="require('@/assets/reception/history-icon.png')"></el-image>
+               </div>
+               <div class="history__word">
+                 <div class="history__word--top">常用搜索</div>
+                 <div class="history__word--bottom">
+                   <span style="cursor: pointer;" v-for="(i, index) in ['奖学金', '集体户口', '助学金', '党建']">{{ i }}{{ index !== 3 ? '&nbsp|&nbsp' : '' }}</span>
+                 </div>
+               </div>
+             </div>
+            </div>
           </div>
-        </div>
+        </template>
+      </el-popover>
+
+      <div class="select-bar__blank">
       </div>
     </div>
   </div>
@@ -85,78 +77,67 @@
 export default {
   data() {
     return {
+      popoverShow: false,
       selectValue: '搜索内部资料',
       inputValue: '',
     }
   },
   methods: {},
   computed: {},
+  mounted() {
+    this.popoverShow = true
+  }
 }
 </script>
 
 <style scoped lang="scss">
-.search {
-  width: 100%;
-
-  padding: 33px 18.75% 38px 18.75%;
-  overflow: hidden;
-  position: relative;
+.dropdown-box {
+  display: flex;
 
-  &::before {
-    content: '';
-    background: #1e9fff;
-    filter: blur(8px);
+  & .left {
+    flex-basis: 25%;
 
-    z-index: 0;
-    position: absolute;
-    top: -10px;
-    right: -10px;
-    bottom: -10px;
-    left: -10px;
-  }
+    & > div:last-child {
+      border-bottom-left-radius: 4px;
+    }
+    &-item {
+      color: #333;
+      text-align: center;
+      font-weight: 500;
+      font-size: 13px;
+      cursor: pointer;
+      transition: all .2s;
 
-  .select-bar {
-    height: 39px;
-    display: flex;
+      padding: 14px 0;
 
-    position: relative;
-    &__blank {
-      background: #fff;
-      flex: 1;
-      border-top-right-radius: 4px;
+      &:hover {
+        color: #fff;
+        background: #247EC3;
+      }
     }
   }
-  &__bottom {
-    width: 100%;
-    background-size: cover;
+  & .right {
+    border-bottom-right-radius: 4px;
+    flex: 1;
     background: url("../../assets/reception/search-bottom-bkg.png") no-repeat center;
-    border-radius: 0 0 4px 4px;
-
-    padding-bottom: 43px;
-    position: relative;
+    background-size: cover;
 
-    & .top {
+    & .search-bar {
       display: flex;
-      justify-content: center;
-      align-items: center;
-
-      padding: 24px 190px 0 190px;
-
-      .search__bottom--btn {
 
-        & .dropdown-search-button {
-          width: 103px;
-          height: 35px;
-          font-size: 13px;
-          color: #000;
-          background: #fff;
-          border-radius: 6px;
-          border: none;
+      margin: 24px 26.7% 0 8.8%;
+      & .dropdown-search-button {
+        width: 103px;
+        height: 35px;
+        font-size: 13px;
+        color: #000;
+        background: #fff;
+        border-radius: 6px;
+        border: none;
 
-          margin-right: 13px;
-        }
+        margin-right: 13px;
       }
-      .search__bottom--input {
+      & .search__bottom--input {
         flex: 1;
         height: 35px;
 
@@ -169,13 +150,13 @@ export default {
       }
     }
 
-    & .bottom {
+    & .history {
       display: flex;
       align-items: center;
 
-      padding: 43px 31.58% 0 31.58%;
+      margin: 43px 0 0 8.8%;
 
-      & .history__word {
+      &__word {
         font-size: 13px;
         color: #fff;
 
@@ -184,16 +165,56 @@ export default {
     }
   }
 }
+.search {
+  height: 295px;
+  width: 100%;
+
+  padding: 33px 18.75% 38px 18.75%;
+  overflow: hidden;
+  position: relative;
+
+  &::before {
+    content: '';
+    background: #1e9fff;
+    filter: blur(8px);
+
+    z-index: 0;
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    bottom: -10px;
+    left: -10px;
+  }
+
+  .select-bar {
+    height: 39px;
+    display: flex;
 
+    position: relative;
+    & > span {
+      flex-basis: 25%;
+    }
+    &__blank {
+      background: #fff;
+      flex: 1;
+      filter: drop-shadow(0 1px .5px #fff);
+      border-top-right-radius: 4px;
+    }
+  }
+}
+.btn-slot {
+  display: flex;
+  align-items: center;
+}
 .dropdown-button {
-  width: 235px;
+  width: 100%;
   background: #376BA3!important;
   color: #fff!important;
   border: none!important;
   border-radius: 4px 0 0 0;
 
-  padding-left: 29px !important;
-  padding-right: 18px !important;
+  padding-left: 12.3% !important;
+  padding-right: 7% !important;
 
   &__text {
     flex: 1;
@@ -208,26 +229,42 @@ export default {
   border: none;
 }
 
+@media (max-width: 900px) {
+  .dropdown-search-button {
+    width: 80px !important;
+  }
+  .btn-slot {
+
+    & > i {
+      display: none;
+    }
+  }
+}
 </style>
 
 <style lang="scss">
-.main-drop[x-placement^=bottom] {
-  padding: 0!important;
+.select-bar__popover {
+  width: calc(100% - 2 * 18.75%);
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+  box-shadow: none;
   border: none;
-  border-radius: 0 0 4px 4px;
-  margin-top: 0 !important;
 
-  & > li {
-    height: 39px;
+  padding: 0!important;
+  margin-top: 0!important;
+}
+@media screen and (max-width: 900px) {
+  .select-bar__popover {
+    width: calc(900px - 337.5px);
+
+    position: absolute;
+    left: 168.75px !important;
   }
 }
 .el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus {
   background: #247EC3!important;
   color: #fff!important;
 }
-.main-drop > li:nth-child(5) {
-  border-radius: 0 0 4px 4px;
-}
 .select-drop[x-placement^=bottom] {
   padding: 0!important;
   border: none;
diff --git a/src/router/index.js b/src/router/index.js
index 04daedf..edb8ed8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,124 +1,136 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-
-Vue.use(Router)
-
-/* Layout */
-import Layout from '@/layout'
-
-/**
- * Note: sub-menu only appear when route children.length >= 1
- * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
- *
- * hidden: true                   if set true, item will not show in the sidebar(default is false)
- * alwaysShow: true               if set true, will always show the root menu
- *                                if not set alwaysShow, when item has more than one children route,
- *                                it will becomes nested mode, otherwise not show the root menu
- * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
- * name:'router-name'             the name is used by <keep-alive> (must set!!!)
- * meta : {
-    roles: ['admin','editor']    control the page roles (you can set multiple roles)
-    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
-    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
-    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
-    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
-  }
- */
-
-/**
- * constantRoutes
- * a base page that does not have permission requirements
- * all roles can be accessed
- */
-export const constantRoutes = [
-  {
-    path: '/login',
-    component: () => import('@/views/login/index'),
-    hidden: true
-  },
-
-  {
-    path: '/404',
-    component: () => import('@/views/404'),
-    hidden: true
-  },
-  {
-    path: '/info',
-    component: Layout,
-    children: [{
-      path: 'password',
-      component: () => import('@/views/system/password'),
-      name: '密码修改',
-      meta: {
-        title: '密码修改'
-      }
-    }],
-    hidden: true
-  },
-  {
-    path: '/index',
-    redirect: '/index/home',
-    component: () => import('@/views/reception'),
-    children: [
-      {
-        path: 'home',
-        component: () => import('@/views/reception/home')
-      },
-      {
-        path: 'department',
-        component: () => import('@/views/reception/department')
-      }
-    ],
-    hidden: true
-  },
-
-  {
-    path: '/',
-    component: Layout,
-    redirect: '/dashboard',
-    children: [{
-      path: 'dashboard',
-      name: '系统首页',
-      component: () => import('@/views/dashboard/index'),
-      meta: {
-        title: '系统首页',
-        icon: 'dashboard'
-      }
-    }, ]
-  }
-]
-
-
-
-/**
- * asyncRoutes
- * the routes that need to be dynamically loaded based on user roles
- */
-export const asyncRoutes = [
-
-
-  // 404 page must be placed at the end !!!
-  {
-    path: '*',
-    redirect: '/404',
-    hidden: true
-  }
-]
-
-const createRouter = () => new Router({
-  // mode: 'history', // require service support
-  scrollBehavior: () => ({
-    y: 0
-  }),
-  routes: constantRoutes
-})
-
-const router = createRouter()
-
-// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
-export function resetRouter() {
-  const newRouter = createRouter()
-  router.matcher = newRouter.matcher // reset router
-}
-
-export default router
+import Vue from 'vue'
+import Router from 'vue-router'
+
+Vue.use(Router)
+
+/* Layout */
+import Layout from '@/layout'
+
+/**
+ * Note: sub-menu only appear when route children.length >= 1
+ * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
+ *
+ * hidden: true                   if set true, item will not show in the sidebar(default is false)
+ * alwaysShow: true               if set true, will always show the root menu
+ *                                if not set alwaysShow, when item has more than one children route,
+ *                                it will becomes nested mode, otherwise not show the root menu
+ * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
+ * name:'router-name'             the name is used by <keep-alive> (must set!!!)
+ * meta : {
+    roles: ['admin','editor']    control the page roles (you can set multiple roles)
+    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
+    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
+    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
+    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
+  }
+ */
+
+/**
+ * constantRoutes
+ * a base page that does not have permission requirements
+ * all roles can be accessed
+ */
+export const constantRoutes = [
+  {
+    path: '/login',
+    component: () => import('@/views/login/index'),
+    hidden: true
+  },
+
+  {
+    path: '/404',
+    component: () => import('@/views/404'),
+    hidden: true
+  },
+  {
+    path: '/info',
+    component: Layout,
+    children: [{
+      path: 'password',
+      component: () => import('@/views/system/password'),
+      name: '密码修改',
+      meta: {
+        title: '密码修改'
+      }
+    }],
+    hidden: true
+  },
+  {
+    path: '/index',
+    redirect: '/index/home',
+    component: () => import('@/views/reception'),
+    children: [
+      {
+        path: 'home',
+        component: () => import('@/views/reception/home')
+      },
+      {
+        path: 'department',
+        component: () => import('@/views/reception/department')
+      },
+      {
+        path: 'label',
+        component: () => import('@/views/reception/label')
+      },
+      {
+        path: 'list1',
+        component: () => import('@/views/reception/list1')
+      },
+      {
+        path: 'list2',
+        component: () => import('@/views/reception/list2')
+      }
+    ],
+    hidden: true
+  },
+
+  {
+    path: '/',
+    component: Layout,
+    redirect: '/dashboard',
+    children: [{
+      path: 'dashboard',
+      name: '系统首页',
+      component: () => import('@/views/dashboard/index'),
+      meta: {
+        title: '系统首页',
+        icon: 'dashboard'
+      }
+    }, ]
+  }
+]
+
+
+
+/**
+ * asyncRoutes
+ * the routes that need to be dynamically loaded based on user roles
+ */
+export const asyncRoutes = [
+
+
+  // 404 page must be placed at the end !!!
+  {
+    path: '*',
+    redirect: '/404',
+    hidden: true
+  }
+]
+
+const createRouter = () => new Router({
+  // mode: 'history', // require service support
+  scrollBehavior: () => ({
+    y: 0
+  }),
+  routes: constantRoutes
+})
+
+const router = createRouter()
+
+// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
+export function resetRouter() {
+  const newRouter = createRouter()
+  router.matcher = newRouter.matcher // reset router
+}
+
+export default router
diff --git a/src/views/reception/department/index.vue b/src/views/reception/department/index.vue
index 0df43e9..1bb449d 100644
--- a/src/views/reception/department/index.vue
+++ b/src/views/reception/department/index.vue
@@ -3,12 +3,19 @@
     <div class="container">
       <div class="title">
         <div class="title__text">所有部门</div>
-        <el-input placeholder="请输入内容" v-model="input" class="title__input">
+        <el-input placeholder="搜索部门" v-model="input" class="title__input">
           <template #append>
             <el-button class="title__input--btn" icon="el-icon-search"></el-button>
           </template>
         </el-input>
       </div>
+
+      <div class="list">
+        <div class="list__item" v-for="i in 15">
+          党委办公室、 党委组织部（合署)
+          <el-image class="list__item--icon" mode="coutain" :src="require('@/assets/reception/department-list-item-bkg.png')"></el-image>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -37,7 +44,7 @@ export default {
   border-radius: 2px;
   box-shadow: 0 0 15px 0 rgba(130,127,126,0.1);
 
-  padding: 24px 23px 59px 22px;
+  padding: 24px 23px 44px 22px;
   .title {
     display: flex;
     justify-content: space-between;
@@ -69,4 +76,40 @@ export default {
     }
   }
 }
+
+.list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 17px;
+
+  margin-top: 21px;
+
+  &__item {
+    color: #247EC3;
+    font-weight: 500;
+    font-size: 16px;
+    text-align: center;
+    background: linear-gradient(to bottom,#fff 25%, #f0f7fc);
+    border: 1px solid #F8F8F8;
+    cursor: pointer;
+    transition: all .2s;
+
+    padding: 34px 41px;
+    margin-bottom: 16px;
+    position: relative;
+
+    &:hover {
+      color: #fff;
+      background: #3c7ac0;
+    }
+    &--icon {
+      width: 44px;
+      height: 50px;
+
+      position: absolute;
+      bottom: 0;
+      right: 0;
+    }
+  }
+}
 </style>
diff --git a/src/views/reception/home/index.vue b/src/views/reception/home/index.vue
index e49fadf..2dd7e51 100644
--- a/src/views/reception/home/index.vue
+++ b/src/views/reception/home/index.vue
@@ -9,25 +9,9 @@
           </div>
 
           <ul class="news__list">
-            <li class="news__list--item">
+            <li class="news__list--item" v-for="i in 5">
               <div>教育部关于公布《高等学校信息公开事项清单》的通知</div>
-              <div>2023-05-21</div>
-            </li>
-            <li class="news__list--item">
-              <div>高等学校信息公开办法（教育部令第29号）</div>
-              <div>2023-05-21</div>
-            </li>
-            <li class="news__list--item">
-              <div>苏州卫生职业技术学院信息公开实施办法（试行）</div>
-              <div>2023-05-21</div>
-            </li>
-            <li class="news__list--item">
-              <div>苏州卫生职业技术学院信息公开实施办法（试行）</div>
-              <div>2023-05-21</div>
-            </li>
-            <li class="news__list--item">
-              <div> 苏州卫生职业技术学院信息公开实施办法（试行）</div>
-              <div>2023-05-21</div>
+              <div>{{ $moment(new Date()).format('YYYY-MM-DD') }}</div>
             </li>
           </ul>
         </el-col>
@@ -39,25 +23,9 @@
           </div>
 
           <ul class="news__list">
-            <li class="news__list--item">
+            <li class="news__list--item" v-for="i in 5">
               <div>教育部关于公布《高等学校信息公开事项清单》的通知</div>
-              <div>2023-05-21</div>
-            </li>
-            <li class="news__list--item">
-              <div>高等学校信息公开办法（教育部令第29号）</div>
-              <div>2023-05-21</div>
-            </li>
-            <li class="news__list--item">
-              <div>苏州卫生职业技术学院信息公开实施办法（试行）</div>
-              <div>2023-05-21</div>
-            </li>
-            <li class="news__list--item">
-              <div>苏州卫生职业技术学院信息公开实施办法（试行）</div>
-              <div>2023-05-21</div>
-            </li>
-            <li class="news__list--item">
-              <div> 苏州卫生职业技术学院信息公开实施办法（试行）</div>
-              <div>2023-05-21</div>
+              <div>{{ $moment(new Date()).format('YYYY-MM-DD') }}</div>
             </li>
           </ul>
         </el-col>
@@ -85,7 +53,7 @@
     </div>
 
     <div class="label">
-      <div class="label__first">
+      <div class="label__first" @click="$router.push('/index/label')">
         <el-image style="width: 49px;height: 49px;margin-bottom: 29px;"
                   :src="require('@/assets/reception/icon-light.png')"></el-image>
         <div>标签</div>
@@ -218,12 +186,20 @@ export default {
 
       &:hover {
         color: #3c7ac0;
+
+        & > div:nth-child(2) {
+          color: #333;
+        }
+        &::before {
+          background: #3c7ac0;
+        }
       }
       & > div {
         font-size: 13px;
 
         &:nth-child(2) {
           color: #999999;
+          transition: all .2s;
         }
       }
       &::before {
@@ -232,6 +208,7 @@ export default {
         height: 6px;
         border-radius: 6px;
         background: #cad8e4;
+        transition: all .2s;
 
         position: absolute;
         top: calc(50% - 3px);
@@ -353,6 +330,7 @@ export default {
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    cursor: pointer;
 
     & > div {
       color: #fff;
@@ -374,6 +352,7 @@ export default {
       display: flex;
       align-items: center;
       justify-content: center;
+      cursor: pointer;
     }
     &__left--single {
       flex: 2.2;
diff --git a/src/views/reception/index.vue b/src/views/reception/index.vue
index 08d619f..716b1bf 100644
--- a/src/views/reception/index.vue
+++ b/src/views/reception/index.vue
@@ -42,6 +42,7 @@ export default {
 .body {
   background: #fff;
   min-height: 100vh;
+
 }
 .fade-in {
   animation: fade-in 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
diff --git a/src/views/reception/label/index.vue b/src/views/reception/label/index.vue
new file mode 100644
index 0000000..f7f4e52
--- /dev/null
+++ b/src/views/reception/label/index.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="label">
+    <div class="container">
+      <div class="title">
+        <div class="title__text">所有标签</div>
+        <el-input placeholder="搜索标签" v-model="input" class="title__input">
+          <template #append>
+            <el-button class="title__input--btn" icon="el-icon-search"></el-button>
+          </template>
+        </el-input>
+      </div>
+
+      <div class="list">
+        <div class="list__item" v-for="i in 15">
+          <div>
+            <svg viewBox="0 0 13 11"
+                 preserveAspectRatio="xMinYMin meet">
+              <path d="M 1 11 L 1 1 L 12 1 L 12 10 l -7 0 l 0 -5 l 4 0"
+                    fill="none"
+                    stroke="#4c84c5"
+                    stroke-width="2"
+                    pathLength="1"></path>
+            </svg>
+            <div>{{ labels[i % labels.length] }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      input: '',
+      labels: ['学籍管理','人才','补助','培养方案','综合科技','党建工作创新奖','处置','党建工作创新奖','处置','党建工作创新奖','处置'],
+    }
+  },
+  methods: {},
+  computed: {},
+}
+</script>
+
+<style scoped lang="scss">
+.label {
+  background: #f8f8f8;
+
+  padding: 31px 18.75%;
+}
+
+.container {
+  background: #fff;
+  border-radius: 2px;
+  box-shadow: 0 0 15px 0 rgba(130,127,126,0.1);
+
+  padding: 24px 23px 44px 22px;
+  .title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &__text {
+
+      padding-left: 5px;
+    }
+    &__input {
+      width: 207px;
+
+      & ::v-deep .el-input__inner {
+        height: 35px;
+      }
+
+      &--btn {
+        width: 48px;
+        height: 35px;
+        background: #3788D6;
+        color: #fff;
+        border: none;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+}
+
+.list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-column-gap: 17px;
+  grid-row-gap: 30px;
+
+  margin-top: 19px;
+
+  &__item {
+    display: flex;
+
+    & > div {
+      display: flex;
+      align-items: center;
+      transition: all .2s;
+      border-radius: 30px;
+      cursor: pointer;
+
+      padding: 9px 19px;
+
+      & > svg {
+        width: 13px;
+        height: 11px;
+      }
+      & > div {
+
+        padding-left: 13px;
+      }
+
+      &:hover {
+        background: #EEEBEA;
+      }
+    }
+
+  }
+}
+</style>
diff --git a/src/views/reception/list1/index.vue b/src/views/reception/list1/index.vue
new file mode 100644
index 0000000..2c3f043
--- /dev/null
+++ b/src/views/reception/list1/index.vue
@@ -0,0 +1,132 @@
+<template>
+  <div class="list1">
+    <div class="container">
+      <div class="list">
+        <div class="list__item" v-for="i in 8">
+          <div class="list__item--name">教育部关于公布《高等学校信息公开事项清单》的通知</div>
+          <div class="list__item--date">{{ $moment(new Date()).format('YYYY-MM-DD') }}</div>
+          <div class="list__item--btn">预览</div>
+          <div class="list__item--download">
+            <i class="el-icon-download"></i>
+          </div>
+        </div>
+      </div>
+
+      <el-pagination
+        class="page"
+        background
+        layout="prev, pager, next"
+        :total="1000">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  methods: {},
+  computed: {},
+}
+</script>
+
+<style scoped lang="scss">
+.list1 {
+  background: #f8f8f8;
+
+  padding: 31px 18.75%;
+}
+.container {
+  background: #fff;
+  border-radius: 2px;
+  box-shadow: 0 0 15px 0 rgba(130,127,126,0.1);
+
+  padding: 24px 23px 44px 22px;
+
+}
+.list {
+
+  &__item {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #F8F8F8;
+
+    padding: 11px 9px 11px 27px;
+    position: relative;
+
+    &::before {
+      content: '';
+      height: 6px;
+      width: 6px;
+      border-radius: 6px;
+      background: #cad8e4;
+
+      transform: translateY(-50%);
+      position: absolute;
+      left: 0;
+      top: 50%;
+    }
+    &--name {
+      font-size: 13px;
+      color: #333;
+      flex: 1;
+
+    }
+    &--date {
+      font-size: 13px;
+      color: #999999;
+
+      margin-right: 42px;
+    }
+    &--btn {
+      cursor: pointer;
+      font-size: 13px;
+      color: #247EC3;
+      border-radius: 30px;
+      border: 1px solid #247EC3;
+      transition: all .2s;
+
+      padding: 7px 17px;
+      margin-right: 23px;
+
+      &:hover {
+        color: #fff;
+        background: #247EC3;
+      }
+    }
+    &--download {
+      cursor: pointer;
+      & > i{
+        font-size: 16px;
+        color: #247EC3;
+      }
+
+      padding-right: 9px;
+    }
+  }
+}
+
+.page {
+  display: flex;
+  justify-content: center;
+
+  margin-top: 30px;
+
+  & ::v-deep .btn-prev, ::v-deep .btn-next ,::v-deep .el-pager > li {
+    width: 39px;
+    height: 39px;
+    line-height: 39px;
+    text-align: center;
+    border-radius: 100px;
+    background: #fff;
+    transition: all .2s;
+  }
+
+  & ::v-deep .btn-prev, ::v-deep .btn-next {
+    background: #fff;
+    border: 1px solid #e7e7e7;
+  }
+}
+</style>
diff --git a/src/views/reception/list2/index.vue b/src/views/reception/list2/index.vue
new file mode 100644
index 0000000..9a1bb36
--- /dev/null
+++ b/src/views/reception/list2/index.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="list1">
+    <div class="container">
+      <div class="list">
+        <div class="list__item" v-for="i in 8">
+          <div class="list__item--pre">苏卫【2011】2号</div>
+          <div class="list__item--name">教育部关于公布《高等学校信息公开事项清单》的通知</div>
+          <div class="list__item--date">{{ $moment(new Date()).format('YYYY-MM-DD') }}</div>
+          <div class="list__item--btn">预览</div>
+          <div class="list__item--download">
+            <i class="el-icon-download"></i>
+          </div>
+        </div>
+      </div>
+
+      <el-pagination
+        class="page"
+        background
+        layout="prev, pager, next"
+        :total="1000">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  methods: {},
+  computed: {},
+}
+</script>
+
+<style scoped lang="scss">
+.list1 {
+  background: #f8f8f8;
+
+  padding: 31px 18.75%;
+}
+.container {
+  background: #fff;
+  border-radius: 2px;
+  box-shadow: 0 0 15px 0 rgba(130,127,126,0.1);
+
+  padding: 24px 23px 44px 22px;
+
+}
+.list {
+
+  &__item {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #F8F8F8;
+
+    padding: 11px 9px 11px 0;
+
+    &--pre {
+      font-size: 13px;
+      font-weight: 500;
+      color: #398AC9;
+
+      padding-right: 10px;
+      position: relative;
+
+      &::after {
+        content:'';
+        width: 2px;
+        background: #398AC9;
+
+        position: absolute;
+        top: 2px;
+        bottom: 2px;
+        right: -1px;
+      }
+    }
+    &--name {
+      font-size: 13px;
+      color: #333;
+      flex: 1;
+
+      padding-left: 10px;
+    }
+    &--date {
+      font-size: 13px;
+      color: #999999;
+
+      margin-right: 42px;
+    }
+    &--btn {
+      cursor: pointer;
+      font-size: 13px;
+      color: #247EC3;
+      border-radius: 30px;
+      border: 1px solid #247EC3;
+      transition: all .2s;
+
+      padding: 7px 17px;
+      margin-right: 23px;
+
+      &:hover {
+        color: #fff;
+        background: #247EC3;
+      }
+    }
+    &--download {
+      cursor: pointer;
+      & > i{
+        font-size: 16px;
+        color: #247EC3;
+      }
+
+      padding-right: 9px;
+    }
+  }
+}
+
+.page {
+  display: flex;
+  justify-content: center;
+
+  margin-top: 30px;
+
+  & ::v-deep .btn-prev, ::v-deep .btn-next ,::v-deep .el-pager > li {
+    width: 39px;
+    height: 39px;
+    line-height: 39px;
+    text-align: center;
+    border-radius: 100px;
+    background: #fff;
+    transition: all .2s;
+  }
+
+  & ::v-deep .btn-prev, ::v-deep .btn-next {
+    background: #fff;
+    border: 1px solid #e7e7e7;
+  }
+}
+</style>