diff --git a/src/assets/imgs/msg_ic_bbgx.png b/src/assets/imgs/msg_ic_bbgx.png
new file mode 100644
index 0000000000000000000000000000000000000000..d515ab5ffdf582fa525fe3523727aa65f8faa31a
Binary files /dev/null and b/src/assets/imgs/msg_ic_bbgx.png differ
diff --git a/src/assets/imgs/msg_ic_bbgx_visited.png b/src/assets/imgs/msg_ic_bbgx_visited.png
new file mode 100644
index 0000000000000000000000000000000000000000..e8c0f627ca113b138ede092553d336c912f3801a
Binary files /dev/null and b/src/assets/imgs/msg_ic_bbgx_visited.png differ
diff --git a/src/assets/imgs/msg_ic_fwts.png b/src/assets/imgs/msg_ic_fwts.png
new file mode 100644
index 0000000000000000000000000000000000000000..4007b0cac4fcb0b0854abb585fce3a007b8e2761
Binary files /dev/null and b/src/assets/imgs/msg_ic_fwts.png differ
diff --git a/src/assets/imgs/msg_ic_fwts_visited.png b/src/assets/imgs/msg_ic_fwts_visited.png
new file mode 100644
index 0000000000000000000000000000000000000000..e251cae4f3e16b0c26cec9ce8a056bf7cc37b466
Binary files /dev/null and b/src/assets/imgs/msg_ic_fwts_visited.png differ
diff --git a/src/assets/imgs/msg_ic_ptwh.png b/src/assets/imgs/msg_ic_ptwh.png
new file mode 100644
index 0000000000000000000000000000000000000000..c69ae6ae2296b01131495583780ec1a944bb19af
Binary files /dev/null and b/src/assets/imgs/msg_ic_ptwh.png differ
diff --git a/src/assets/imgs/msg_ic_ptwh_visited.png b/src/assets/imgs/msg_ic_ptwh_visited.png
new file mode 100644
index 0000000000000000000000000000000000000000..7531cee053c2907eded1bbe9f20fbd79017caa8a
Binary files /dev/null and b/src/assets/imgs/msg_ic_ptwh_visited.png differ
diff --git a/src/assets/imgs/msg_ic_xttz.png b/src/assets/imgs/msg_ic_xttz.png
new file mode 100644
index 0000000000000000000000000000000000000000..7cad4ee2ce28ab77d3e74553e27d54ac5e3f9a7b
Binary files /dev/null and b/src/assets/imgs/msg_ic_xttz.png differ
diff --git a/src/assets/imgs/msg_ic_xttz_visited.png b/src/assets/imgs/msg_ic_xttz_visited.png
new file mode 100644
index 0000000000000000000000000000000000000000..686ba2b26b3f51032d2d7752de5415812b3a2f3e
Binary files /dev/null and b/src/assets/imgs/msg_ic_xttz_visited.png differ
diff --git a/src/assets/imgs/msg_icon_qkxx.png b/src/assets/imgs/msg_icon_qkxx.png
new file mode 100644
index 0000000000000000000000000000000000000000..2fb9f9063966845bb3f4453dfbb76cfeb1455730
Binary files /dev/null and b/src/assets/imgs/msg_icon_qkxx.png differ
diff --git a/src/assets/imgs/msg_icon_shanchu.png b/src/assets/imgs/msg_icon_shanchu.png
new file mode 100644
index 0000000000000000000000000000000000000000..c54fdc987088d88994fe7399bec1876a5357fd21
Binary files /dev/null and b/src/assets/imgs/msg_icon_shanchu.png differ
diff --git a/src/assets/imgs/msg_icon_szyd.png b/src/assets/imgs/msg_icon_szyd.png
new file mode 100644
index 0000000000000000000000000000000000000000..7f5eb8cba02ebd68d042e342a56e58fd712b1f33
Binary files /dev/null and b/src/assets/imgs/msg_icon_szyd.png differ
diff --git a/src/assets/imgs/msg_icon_xxsz.png b/src/assets/imgs/msg_icon_xxsz.png
new file mode 100644
index 0000000000000000000000000000000000000000..33499389b45860d82fa9c2c23bae3eedf62626d1
Binary files /dev/null and b/src/assets/imgs/msg_icon_xxsz.png differ
diff --git a/src/assets/imgs/msg_icon_yidu.png b/src/assets/imgs/msg_icon_yidu.png
new file mode 100644
index 0000000000000000000000000000000000000000..71bf56a97802a1fd4d78ff8e4fa8d09c9fd41c16
Binary files /dev/null and b/src/assets/imgs/msg_icon_yidu.png differ
diff --git a/src/pages/user/notice/notice.vue b/src/pages/user/notice/notice.vue
index 23fbb983efefcb1f92892ff639db3d7f5244c1e7..3f2802ea33ae92cd0dc0b582a4753b440be2fed4 100644
--- a/src/pages/user/notice/notice.vue
+++ b/src/pages/user/notice/notice.vue
@@ -8,16 +8,187 @@
         <el-breadcrumb-item>消息通知</el-breadcrumb-item>
       </el-breadcrumb>
     </div>
-    <div class="main_container"></div>
+    <div class="main_container">
+      <div class="notice_header">
+        <div class="notcie_filter">
+          <a :class="{ current: unread }" @click.prevent="filterAction(true)">
+            <span class="btn_text">未读消息</span>
+            <span class="width_num" v-text="unreadCount"></span>
+          </a>
+          <a :class="{ current: !unread }" @click.prevent="filterAction(false)">
+            <span class="btn_text">全部消息</span>
+          </a>
+        </div>
+        <div class="other_action">
+          <a @click.prevent="readAll">
+            <img :src="require('../../../assets/imgs/msg_icon_szyd.png')" />
+            <span class="btn_text">全部设置为已读</span>
+          </a>
+          <a @click.prevent="removeAll">
+            <img :src="require('../../../assets/imgs/msg_icon_qkxx.png')" />
+            <span class="btn_text">清空所有消息</span>
+          </a>
+          <a style="cursor: text;">
+            <span style="font-size: 12px;color: #d0d5e7;">|</span>
+          </a>
+          <a @click.prevent="setMessage">
+            <img :src="require('../../../assets/imgs/msg_icon_xxsz.png')" />
+            <span class="btn_text" style="color: #0f2683;">消息设置</span>
+          </a>
+        </div>
+      </div>
+      <ul class="notice_list">
+        <li
+          class="notice_item"
+          v-for="(item, index) in list"
+          :key="'item_' + index"
+        >
+          <div class="notice_icon">
+            <img :src="getIcon(item.msg_type, item.readed)" />
+          </div>
+          <div class="notice_detail">
+            <p class="notice_type" v-text="getType(item.msg_type)"></p>
+            <p class="notice_content" v-html="item.content"></p>
+            <p class="notice_time" v-text="getTime(item.create_time)"></p>
+          </div>
+          <div class="notice_action">
+            <a @click.prevent="readItem(item)">
+              <img :src="require('../../../assets/imgs/msg_icon_yidu.png')" />
+            </a>
+            <a @click.prevent="removeItem(item)">
+              <img
+                :src="require('../../../assets/imgs/msg_icon_shanchu.png')"
+              />
+            </a>
+          </div>
+        </li>
+      </ul>
+      <list-pagination
+        :total="listTotal"
+        :page-sizes="pageSizes"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        @size-change="changePageSize"
+        @current-change="changeCurrentPage"
+        style="margin-top: 20px;"
+      ></list-pagination>
+    </div>
   </div>
 </template>
 
 <script>
+import ListPagination from "@/components/comments-pagination";
+import helper from "@/services/helper.js";
+
 export default {
-  components: {},
-  data: () => ({}),
-  mounted() {},
-  methods: {},
+  components: {
+    ListPagination,
+  },
+  data: () => ({
+    unread: true,
+    list: [],
+    listTotal: 0,
+    pageSizes: [10, 20, 50],
+    pageSize: 10,
+    currentPage: 1,
+    unreadCount: 0,
+    initDisabled: false,
+  }),
+  methods: {
+    initList() {
+      let url = this.unread
+        ? "/apaas/service/v3/mymsg/unread"
+        : "/apaas/service/v3/mymsg/all";
+
+      this.initDisabled = true;
+
+      this.$http
+        .get(url, {
+          params: {
+            size: this.pageSize,
+            page: this.currentPage,
+          },
+        })
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.list = data.data.data || [];
+            this.listTotal = data.data.total || 0;
+
+            if (this.unread) {
+              this.unreadCount = data.data.total || 0;
+            }
+          } else {
+            console.log("消息列表请求失败");
+          }
+
+          this.initDisabled = false;
+        })
+        .catch((error) => {
+          console.log(error);
+          this.initDisabled = false;
+        });
+    },
+    getType(type = 0) {
+      return ["系统通知", "版本更新", "平台维护", "服务推送"][type];
+    },
+    getIcon(type = 0, readed = false) {
+      if (!readed) {
+        return [
+          require("@/assets/imgs/msg_ic_xttz.png"),
+          require("@/assets/imgs/msg_ic_bbgx.png"),
+          require("@/assets/imgs/msg_ic_ptwh.png"),
+          require("@/assets/imgs/msg_ic_fwts.png"),
+        ][type];
+      }
+
+      return [
+        require("@/assets/imgs/msg_ic_xttz_visited.png"),
+        require("@/assets/imgs/msg_ic_bbgx_visited.png"),
+        require("@/assets/imgs/msg_ic_ptwh_visited.png"),
+        require("@/assets/imgs/msg_ic_fwts_visited.png"),
+      ][type];
+    },
+    getTime(date) {
+      return helper.dateStringTransform(date || "");
+    },
+    filterAction(unread = true) {
+      if (this.initDisabled) {
+        return;
+      }
+
+      this.unread = unread;
+      this.pageSize = 10;
+      this.currentPage = 1;
+      this.initList();
+    },
+    changePageSize(value) {
+      this.pageSize = value;
+      this.currentPage = 1;
+      this.initList();
+    },
+    changeCurrentPage(value) {
+      this.currentPage = value;
+      this.initList();
+    },
+    readItem(item) {
+      console.log("readItem", item.id);
+    },
+    removeItem(item) {
+      console.log("removeItem", item.id);
+    },
+    readAll() {
+      console.log("readAll");
+    },
+    removeAll() {
+      console.log("removeAll");
+    },
+    setMessage() {
+      console.log("setMessage");
+    },
+  },
+  created() {
+    this.initList();
+  },
 };
 </script>
 
@@ -37,9 +208,134 @@ export default {
   flex-direction: column;
   justify-content: flex-start;
   align-items: stretch;
-  padding: 0 20px 15px;
+  padding: 25px 20px 20px;
   background-color: #fff;
   border-radius: 10px;
   margin-bottom: 40px;
 }
+.notice_header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 20px;
+}
+.notice_header a {
+  font-size: 14px;
+  line-height: 24px;
+  color: #8890a7;
+  cursor: pointer;
+}
+.notice_header a + a {
+  margin-left: 30px;
+}
+.notice_header a > * {
+  display: inline-block;
+  vertical-align: middle;
+}
+.notice_header a > *:not(:first-child) {
+  margin-left: 5px;
+}
+.notcie_filter a .btn_text {
+  position: relative;
+}
+.notcie_filter a .btn_text::after {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 3px;
+  border-radius: 2px;
+  background-color: #e56600;
+  left: 0;
+  bottom: -21px;
+  display: none;
+}
+.notcie_filter a .width_num {
+  min-width: 40px;
+  background-color: #8890a7;
+  font-size: 10px;
+  line-height: 16px;
+  color: #fff;
+  padding: 0 8px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  text-align: center;
+  overflow: hidden;
+}
+.notcie_filter a.current {
+  color: #e56600;
+}
+.notcie_filter a.current .btn_text::after {
+  display: block;
+}
+.notcie_filter a.current .width_num {
+  background-color: #e56600;
+}
+.notice_list {
+  flex-grow: 1;
+  border-top: 2px solid #f4f7fc;
+  border-bottom: 2px solid #f4f7fc;
+}
+.notice_item {
+  padding: 25px 200px 25px 40px;
+  border-radius: 10px;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.notice_item:not(:first-child)::before {
+  position: absolute;
+  top: 0;
+  right: 40px;
+  left: 40px;
+  content: "";
+  border-top: 2px solid #f4f7fc;
+}
+.notice_item > .notice_icon {
+  margin: 5px 20px 0 0;
+  font-size: 0;
+}
+.notice_item > .notice_detail p {
+  font-size: 16px;
+  line-height: 28px;
+  color: #242c43;
+}
+.notice_item > .notice_detail .notice_type {
+  color: #58617a;
+  margin-bottom: 10px;
+}
+.notice_item > .notice_detail .notice_time {
+  color: #8890a7;
+}
+.notice_item:last-child {
+  border-bottom: none;
+}
+.notice_item:hover {
+  background-color: #f8f9fd;
+}
+.notice_action {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 190px;
+  height: 100%;
+  display: none;
+  justify-content: center;
+  align-items: center;
+}
+.notice_action a {
+  font-size: 0;
+  cursor: pointer;
+}
+.notice_action a + a {
+  margin-left: 50px;
+}
+.notice_item:hover::before,
+.notice_item:hover + .notice_item::before {
+  display: none;
+}
+.notice_item:hover .notice_action {
+  display: flex;
+}
 </style>