diff --git a/src/views/components/notice-detail.vue b/src/views/components/notice-detail.vue
new file mode 100644
index 0000000..e923f27
--- /dev/null
+++ b/src/views/components/notice-detail.vue
@@ -0,0 +1,22 @@
+<template>
+  <el-row class="app-container" justify="center" type="flex">
+    <el-col :span="12">
+      <div>宪法至上，习近平为法治中国建设指明方向</div>
+      <div>2021-12-04发布</div>
+      <div>
+        精神是一个民族赖以长久生存的灵魂，唯有精神上达到一定高度，这个民族才能在历史的洪流中屹立不倒、奋勇前进。中华上下五千年，孕育了磅礴坚韧的中国精神，深深融入于中华儿女的血脉和灵魂之中。
+        什么是中国精神？翻开中华民族的厚重历史，是“岂曰无衣？与子同袍”的同仇敌忾，是“长太息以掩涕兮，哀民生之多艰”的忧民爱民情怀，是“苟利于民，不必法古；苟周于事，不必循俗”的改革求新，是“捐躯赴国难，视死忽如归”的牺牲奉献……中国精神浸润于口口相传的诗词歌赋里，化形在包罗万象的古老汉字里，甚至融会在中国人一日三餐、一饭一蔬中。中国精神是以爱国主义为核心的民族精神，以改革创新为核心的时代精神，是凝心聚力的兴国之魂、强国之魂。
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: 'notice-detail'
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/manufacturer/components/notice-content.vue b/src/views/manufacturer/components/notice-content.vue
new file mode 100644
index 0000000..91e2b46
--- /dev/null
+++ b/src/views/manufacturer/components/notice-content.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="item">
+    <div class="time mt10">2021-12-12 10:30</div>
+    <el-row class="content mt10">
+      <el-col :span="4">
+        <img src="http://www.dummyimage.com/50x50"/>
+      </el-col>
+      <el-col :span="20" class="right">
+        <div>
+          <span class="title">祈福的历史</span>
+          <div class="status"></div>
+        </div>
+        <div class="content">{{ '1'.repeat(50) }}</div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'notice-content',
+  props: {
+    msg: Object
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.item {
+  & > .time {
+    color: rgba(168, 168, 168, 1);
+    font-size: 14px;
+  }
+
+  & > .content {
+    display: flex;
+
+
+    & > .right {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      font-family: PingFangSC-regular;
+
+      .title {
+        color: rgba(16, 16, 16, 1);
+        font-size: 12px;
+      }
+
+      .content {
+        color: rgba(174, 174, 174, 1);
+        font-size: 12px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow-x: hidden;
+        width: 100%;
+      }
+
+
+      .title, .content {
+        padding: 0 10px;
+      }
+    }
+
+
+  }
+}
+</style>
diff --git a/src/views/manufacturer/components/notice.vue b/src/views/manufacturer/components/notice.vue
new file mode 100644
index 0000000..f3e692e
--- /dev/null
+++ b/src/views/manufacturer/components/notice.vue
@@ -0,0 +1,41 @@
+<template>
+  <el-dialog :visible="true" v-if="type==='notice-list'" :show-close="false" width="500px">
+    <el-row type="flex" slot="title" justify="space-between" class="title">
+      <el-col>全部消息</el-col>
+      <el-col class="text-right">
+        <span @click="$emit('read:all')">标记全部已读</span>
+      </el-col>
+    </el-row>
+    <template v-for="item in 2">
+      <notice-content v-on:click.native="$router.push({path:`/public/notice/${item}`})"/>
+      <el-divider/>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import NoticeContent from './notice-content'
+import { debug } from 'script-ext-html-webpack-plugin/lib/common'
+
+export default {
+  name: 'notice',
+  methods: { debug },
+  components: { NoticeContent },
+  props: {
+    type: String
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.text-right {
+  text-align: right;
+}
+
+.title {
+  color: rgba(16, 16, 16, 1);
+  font-size: 16px;
+  text-align: left;
+  font-family: SourceHanSansSC-regular;
+}
+</style>
diff --git a/src/views/manufacturer/index.vue b/src/views/manufacturer/index.vue
index a121914..85ac8e5 100644
--- a/src/views/manufacturer/index.vue
+++ b/src/views/manufacturer/index.vue
@@ -102,24 +102,12 @@
         <el-card class="notice mt10">
           <el-row type="flex">
             <el-col class="title">系统通知</el-col>
-            <el-col class="all">全部<i class="el-icon-arrow-right"></i></el-col>
+            <el-col class="all">
+              <div @click="type='notice-list'">全部<i class="el-icon-arrow-right"></i></div>
+            </el-col>
           </el-row>
           <template v-for="item in 2">
-            <div class="item">
-              <div class="time mt10">2021-12-12 10:30</div>
-              <el-row class="content mt10">
-                <el-col :span="4">
-                  <img src="http://www.dummyimage.com/50x50"/>
-                </el-col>
-                <el-col :span="20" class="right">
-                  <div>
-                    <span class="title">祈福的历史</span>
-                    <div class="status"></div>
-                  </div>
-                  <div class="content">{{ '1'.repeat(50) }}</div>
-                </el-col>
-              </el-row>
-            </div>
+            <notice-content v-on:click.native="$router.push({path:`/public/notice/${item}`})"/>
             <el-divider/>
           </template>
         </el-card>
@@ -127,16 +115,19 @@
       </el-row>
     </template>
     <pay @back="type='list'" @success="type='list';$modal.msgSuccess('支付成功')" v-else-if="type==='pay'"/>
+    <notice @read:all="type='list';$modal.msgSuccess('读取所有')" :type="type"/>
   </div>
 </template>
 
 <script>
 import echarts from '@/plugins/echarts'
 import Pay from './components/pay'
+import Notice from './components/notice'
+import NoticeContent from './components/notice-content'
 
 export default {
   name: 'index.vue',
-  components: { Pay },
+  components: { Pay, Notice, NoticeContent },
   data() {
     return {
       type: 'list'
@@ -198,45 +189,7 @@ $circle-radius: 25px;
     font-family: SourceHanSansSC-regular;
   }
 
-  .item {
-    & > .time {
-      color: rgba(168, 168, 168, 1);
-      font-size: 14px;
-    }
-
-    & > .content {
-      display: flex;
-
-
-      & > .right {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        font-family: PingFangSC-regular;
 
-        .title {
-          color: rgba(16, 16, 16, 1);
-          font-size: 12px;
-        }
-
-        .content {
-          color: rgba(174, 174, 174, 1);
-          font-size: 12px;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          overflow-x: hidden;
-          width: 100%;
-        }
-
-
-        .title, .content {
-          padding: 0 10px;
-        }
-      }
-
-
-    }
-  }
 }
 
 .info {