diff --git a/src/core/apis.js b/src/core/apis.js
index 34c31f2..101cbcc 100644
--- a/src/core/apis.js
+++ b/src/core/apis.js
@@ -24,7 +24,8 @@ const apis = {
                 showLoading: true,
             },
             detail: {
-                url: ""
+                url: "/wxapp/index/newinfobyid",
+                showLoading: true,
             }
         }
     },
diff --git a/src/pages.json b/src/pages.json
index 2c70ba7..a6285f8 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -85,6 +85,12 @@
 			"style": {
 				"navigationBarTitleText": "订单详情"
 			}
+		},
+		{
+			"path": "pages/detail/detail",
+			"style": {
+				"navigationBarTitleText": "详情"
+			}
 		}
 	],
 	"globalStyle": {
diff --git a/src/pages/detail/detail.vue b/src/pages/detail/detail.vue
new file mode 100644
index 0000000..3150623
--- /dev/null
+++ b/src/pages/detail/detail.vue
@@ -0,0 +1,89 @@
+<template>
+    <app-layout :title="pageTitle">
+        <div class="message-container">
+            <view class="head">
+                <text class="title limit-line clamp-1">{{ info.title }}</text>
+                <text class="date">{{ info.date }}</text>
+            </view>
+            <view class="body">
+                <rich-text :nodes="info.content"></rich-text>
+            </view>
+        </div>
+    </app-layout>
+</template>
+
+<script>
+import AppLayout from "@/components/layout/layout";
+export default {
+    name: "detail-detail",
+    data() {
+        return {
+            pageTitle: "",
+            info: {
+                title: "",
+                date: "",
+                content: "",
+            },
+        };
+    },
+    components: {
+        AppLayout,
+    },
+    onLoad(e) {
+        if (!e.id || !e.type) {
+            return this.$utils.toast("参数错误").then(() => {
+                this.$utilst.toPage("", {}, "back");
+            });
+        }
+        if (e.type == "message") {
+            this.$request({
+                api: "system.notify.detail",
+                data: {
+                    id: e.id,
+                },
+            }).then((response) => {
+                if (response.code == 1) {
+                    this.info = {
+                        title: response.data.title,
+                        date: response.data.times,
+                        content: response.data.message,
+                    };
+                } else {
+                    this.$utils.toast(response.msg);
+                }
+            });
+        }
+    },
+    onShow() {},
+    onReady() {},
+    onHide() {},
+    onReachBottom() {},
+    onPullDownRefresh() {},
+    methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.message-container {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 40rpx;
+    .head {
+        width: 100%;
+        font-size: 30rpx;
+        font-weight: bold;
+        line-height: 30rpx;
+        .title {
+            color: #333333;
+        }
+        .date {
+            display: inline-block;
+            color: #999999;
+            margin-top: 24rpx;
+        }
+    }
+    .body {
+        margin-top: 40rpx;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/message/message.vue b/src/pages/message/message.vue
index 8bf55cb..7894213 100644
--- a/src/pages/message/message.vue
+++ b/src/pages/message/message.vue
@@ -19,25 +19,19 @@
             >
                 <swiper-item v-for="(item, index) in tabList" :key="index">
                     <view :class="['tab' + index]">
-                        <view class="message-item" v-for="(v, k) in item.list" :key="k" @click="toDetail(v)">
-                            <text class="title limit-line clamp-1">{{ v.title }}</text>
+                        <view class="message-item" v-for="(v, k) in item.list" :key="k" @click="toDetail(k, v)">
+                            <text class="title limit-line clamp-1" :class="{ active: v.read == 0 }">{{ v.title }}</text>
                             <text class="date">{{ v.date }}</text>
                         </view>
                     </view>
                 </swiper-item>
             </swiper>
         </view>
-        <widget-modal v-show="showDetail" :title="detail.title" @close="showDetail = false">
-            <view class="message-box">
-                <rich-text :nodes="detail.content"></rich-text>
-            </view>
-        </widget-modal>
     </app-layout>
 </template>
 
 <script>
 import AppLayout from "@/components/layout/layout";
-import WidgetModal from "@/components/widgets/modal";
 import { mapState } from "vuex";
 export default {
     name: "message",
@@ -49,16 +43,10 @@ export default {
             tabIndex: 0,
             tabHeight: 0,
             tabList: [],
-            showDetail: false,
-            detail: {
-                title: "",
-                content: "",
-            },
         };
     },
     components: {
         AppLayout,
-        WidgetModal,
     },
     computed: {
         ...mapState({
@@ -124,13 +112,13 @@ export default {
          */
         loadList() {
             let currentTab = this.tabList[this.tabIndex];
-            console.log(currentTab);
             this.$models.system.notifyList(currentTab.id, currentTab.page).then((list) => {
                 if (list.length > 0) {
                     list.forEach((item) => {
                         currentTab.list.push({
                             id: item.id,
                             title: item.title,
+                            read: item.see,
                             date: item.times,
                             content: item.message,
                         });
@@ -147,10 +135,10 @@ export default {
         /**
          * 详情
          */
-        toDetail(detail) {
-            this.showDetail = true;
-            this.detail.title = detail.title;
-            this.detail.content = detail.content;
+        toDetail(index, detail) {
+            let currentTab = this.tabList[this.tabIndex];
+            currentTab.list[index].read = 1;
+            this.$utils.toPage("/pages/detail/detail?type=message&id=" + detail.id);
         },
     },
 };