diff --git a/src/apps/AppNotification/AppNotification.vue b/src/apps/AppNotification/AppNotification.vue
index 453c1360..731e3b9d 100644
--- a/src/apps/AppNotification/AppNotification.vue
+++ b/src/apps/AppNotification/AppNotification.vue
@@ -1,60 +1,67 @@
 <template>
   <div class="notification">
-    <AiTopFixed>
-      <u-tabs :list="tabs" :is-scroll="false" height="96" bar-width="192" @click="change"></u-tabs>
-    </AiTopFixed>
-    <div class="body" v-if="dataList.length">
-      <div class="card" v-for="(item,idx) in dataList" :key="idx" @click="handeClick(item)">
-        <template v-if="!item.imgUrl">
-          <label>
-            <b v-if="index==0 && item.readStatus==0"></b>
-            <div class="tag" v-if="index==1" :style="color(item.status)">{{$dict.getLabel("announcementStatus",item.status)}}</div>
-            {{item.title}}
-          </label>
-          <u-gap height="16"></u-gap>
-          <span class="info">
+    <template v-if="showList">
+      <AiTopFixed>
+        <u-tabs :list="tabs" :is-scroll="false" height="96" bar-width="192" @click="change"></u-tabs>
+      </AiTopFixed>
+      <div class="body" v-if="dataList.length">
+        <div class="card" v-for="(item,idx) in dataList" :key="idx" @click="handeClick(item)">
+          <template v-if="!item.imgUrl">
+            <label>
+              <b v-if="index==0 && item.readStatus==0"></b>
+              <div class="tag" v-if="index==1" :style="color(item.status)">
+                {{$dict.getLabel("announcementStatus",item.status)}}
+              </div>
+              {{item.title}}
+            </label>
+            <u-gap height="16"></u-gap>
+            <span class="info">
             <text>{{item.releaseUserName}}</text>
             <text>{{item.releaseTime}}</text>
           </span>
-        </template>
-        <template v-else>
-          <div class="has-pic">
-            <div class="left">
-              <label>
-                <b v-if="index==0 && item.readStatus==0"></b>
-                <div class="tag" v-if="index==1" :style="color(item.status)">{{$dict.getLabel("announcementStatus",item.status)}}</div>
-                {{item.title}}
-              </label>
-              <u-gap height="16"></u-gap>
-              <span class="info">
+          </template>
+          <template v-else>
+            <div class="has-pic">
+              <div class="left">
+                <label>
+                  <b v-if="index==0 && item.readStatus==0"></b>
+                  <div class="tag" v-if="index==1" :style="color(item.status)">
+                    {{$dict.getLabel("announcementStatus",item.status)}}
+                  </div>
+                  {{item.title}}
+                </label>
+                <u-gap height="16"></u-gap>
+                <span class="info">
                 <text>{{item.releaseUserName}}</text>
                 <text>{{item.releaseTime}}</text>
               </span>
+              </div>
+              <img :src="item.imgUrl" alt="">
             </div>
-            <img :src="item.imgUrl" alt="">
-          </div>
-        </template>
+          </template>
+        </div>
       </div>
-    </div>
 
-    <AiEmpty v-else/>
-    <u-loadmore :status="status" v-if="dataList.length"/>
-    <AiAdd @add="add"/>
-    <u-popup :show="show" mode="bottom">
-      <div class="popup-wrap">
-        <u-row justify="between">
-          <div class="colum" v-for="(item,index) in optList" :key="index" @click="handleOpt(item)">
-            <u-icon :name="item.icon" size="100" :custom-style="{backgroundColor:'#fff',borderRadius:'16px'}"></u-icon>
-            <u-gap height="16"></u-gap>
-            {{item.name}}
-          </div>
-        </u-row>
-        <div class="btn" @click="show=false">关闭</div>
-      </div>
-    </u-popup>
-    <u-modal v-model="modal" :content="'是否确定' + content + '该公告？'" title="" show-confirm-button
-             show-cancel-button confirm-text="确定" cancel-text="取消"
-             @confirm="confirm"></u-modal>
+      <AiEmpty v-else/>
+      <u-loadmore :status="status" v-if="dataList.length"/>
+      <AiAdd @add="add"/>
+      <u-popup :show="show" mode="bottom" closeOnClickOverlay>
+        <div class="popup-wrap">
+          <u-row justify="between">
+            <div class="colum" v-for="(item,index) in optList" :key="index" @click="handleOpt(item)">
+              <u-icon :name="item.icon" size="50" :custom-style="{backgroundColor:'#fff',borderRadius:'8px'}"></u-icon>
+              <u-gap height="16"></u-gap>
+              {{item.name}}
+            </div>
+          </u-row>
+          <div class="btn" @click="show=false">关闭</div>
+        </div>
+      </u-popup>
+      <u-modal v-model="modal" :content="'是否确定' + content + '该公告？'" title="" show-confirm-button
+               show-cancel-button confirm-text="确定" cancel-text="取消"
+               @confirm="confirm"></u-modal>
+    </template>
+    <component :is="comp" v-else :params="params"></component>
   </div>
 </template>
 
@@ -62,11 +69,12 @@
   import AiAdd from "../../components/AiAdd";
   import AiEmpty from "../../components/AiEmpty/AiEmpty";
   import AiTopFixed from "../../components/AiTopFixed";
+  import {add, detail, read} from "./components"
 
   export default {
     name: "notification",
     appName: "通知公告",
-    components: {AiAdd, AiEmpty,AiTopFixed},
+    components: {AiAdd, AiEmpty, AiTopFixed, add, detail, read},
     data() {
       return {
         index: 0,
@@ -76,19 +84,22 @@
         current: 1,
         dataList: [],
         detail: {},
+        showList: true,
+        comp: "",
+        params: null,
         status: "加载更多",
       }
     },
 
-    onLoad(){
+    onLoad() {
       this.$dict.load("announcementStatus");
     },
 
     computed: {
       tabs() {
-        return [{name: "最新公告"},{name: "公告管理"}];
+        return [{name: "最新公告"}, {name: "公告管理"}];
       },
-      optList(){
+      optList() {
         return [
           {
             name: "详情",
@@ -119,28 +130,28 @@
             val: 4,
             show: true,
           }
-        ].filter(e=>e.show)
+        ].filter(e => e.show)
       }
     },
 
     methods: {
-      changeState(){
-        this.$http.post(this.content =='删除' ? '/app/appannouncement/delete' : "/app/appannouncement/update-status",null,{
+      changeState() {
+        this.$http.post(this.content == '删除' ? '/app/appannouncement/delete' : "/app/appannouncement/update-status", null, {
           params: {
-            [this.content =='删除' ? 'ids' : 'id']:this.detail.id
+            [this.content == '删除' ? 'ids' : 'id']: this.detail.id
           }
-        }).then(res=>{
-          if(res.code==0){
+        }).then(res => {
+          if (res.code == 0) {
             this.$u.toast(this.content + "成功");
             this.getList();
           }
         })
       },
-      confirm(){
+      confirm() {
         this.show = false;
         this.changeState();
       },
-      handleOpt(item){
+      handleOpt(item) {
         this.content = {
           1: "撤回",
           2: "发布",
@@ -154,39 +165,41 @@
           });
         }
 
-        if ([1,2,4].includes(item.val)) {
+        if ([1, 2, 4].includes(item.val)) {
           return this.modal = true;
         }
 
-        if(item.val==3){
+        if (item.val == 3) {
           this.show = false;
           return uni.navigateTo({
-            url:"/pages/notification/components/add?id=" + this.detail.id + "&flag=" + false
+            url: "/pages/notification/components/add?id=" + this.detail.id + "&flag=" + false
           });
         }
       },
-      color(status){
+      color(status) {
         return [
-          {backgroundColor:"rgba(255,136,34,0.1)",color:"#FF8822"},
-          {backgroundColor:"rgba(34,102,255,0.1)",color:"#2266FF"},
-          {backgroundColor:"rgba(102,102,102,0.1)",color:"#666666"},
-          {backgroundColor:"rgba(255,136,34,0.1)",color:"#FF8822"}
+          {backgroundColor: "rgba(255,136,34,0.1)", color: "#FF8822"},
+          {backgroundColor: "rgba(34,102,255,0.1)", color: "#2266FF"},
+          {backgroundColor: "rgba(102,102,102,0.1)", color: "#666666"},
+          {backgroundColor: "rgba(255,136,34,0.1)", color: "#FF8822"}
         ][status];
       },
       handeClick(item) {
         this.detail = item;
         if (this.index == 1) {
           this.show = true;
-        }else {
-          uni.navigateTo({
-            url: "/pages/notification/components/detail?id=" + this.detail.id + "&flag=" + true
-          })
+        } else {
+          this.comp = "detail";
+          this.params = {
+            id: this.detail.id,
+            flag: true
+          };
+          this.showList = false;
         }
       },
-      add(){
-        uni.navigateTo({
-          url: "/pages/notification/components/add"
-        })
+      add() {
+        this.comp = "add";
+        this.showList = false;
       },
       change(val) {
         this.index = val.index;
@@ -194,7 +207,7 @@
         this.getList()
       },
       getList() {
-        this.$http.post(this.index ==0 ? "/app/appannouncement/list-latest" : "/app/appannouncement/list-mgr", null, {
+        this.$http.post(this.index == 0 ? "/app/appannouncement/list-latest" : "/app/appannouncement/list-mgr", null, {
           params: {
             size: 10,
             current: this.current
@@ -228,7 +241,7 @@
     background-color: #F5F5F5;
     padding-bottom: 32px;
 
-    ::v-deep .content{
+    ::v-deep .content {
       padding: 0 !important;
     }
 
@@ -247,7 +260,7 @@
         background-color: #ffffff;
         margin-bottom: 32px;
 
-        &:last-child{
+        &:last-child {
           margin-bottom: 0;
         }
 
@@ -272,7 +285,7 @@
           margin-right: 8px;
         }
 
-        .tag{
+        .tag {
           width: 96px;
           height: 44px;
           display: inline-block;
@@ -311,7 +324,8 @@
               -webkit-line-clamp: 2;
             }
           }
-          & > img{
+
+          & > img {
             width: 192px;
             height: 144px;
             flex-shrink: 0;
@@ -325,7 +339,7 @@
       height: 368px;
       background-color: #F7F7F7;
 
-      .btn{
+      .btn {
         height: 96px;
         display: flex;
         align-items: center;
diff --git a/src/apps/AppNotification/components/detail.vue b/src/apps/AppNotification/components/detail.vue
index 29dca161..4fdf2921 100644
--- a/src/apps/AppNotification/components/detail.vue
+++ b/src/apps/AppNotification/components/detail.vue
@@ -63,16 +63,15 @@
   export default {
     name: "detail",
     components:{AiBack,AiEmpty},
+    props:{
+      params:Object
+    },
     data() {
       return {
-        detailObj: null,
-        id: null,
-        flag: null,
+        detailObj: {},
       }
     },
-    onLoad(opt){
-      this.id = opt.id;
-      this.flag = opt.flag;
+    created() {
       this.getDetail();
     },
     methods: {
@@ -90,8 +89,8 @@
       getDetail() {
         this.$http.post("/app/appannouncement/detail", null, {
           params: {
-            id: this.id,
-            detail: this.flag
+            id: this.params?.id,
+            detail: this.params?.flag
           }
         }).then(res=>{
           if(res && res.data){
@@ -100,9 +99,9 @@
         })
       },
       handleClick() {
-        uni.navigateTo({
-          url:"/pages/notification/components/read?id=" + this.id,
-        })
+        this.$parent.params = this.params.id;
+        this.$parent.comp = "read";
+        this.$parent.showList = false;
       }
     },
   }
diff --git a/src/apps/AppNotification/components/index.js b/src/apps/AppNotification/components/index.js
new file mode 100644
index 00000000..752962d4
--- /dev/null
+++ b/src/apps/AppNotification/components/index.js
@@ -0,0 +1,3 @@
+export {default as add} from "./add"
+export {default as detail} from "./detail"
+export {default as read} from "./read"
diff --git a/src/apps/AppNotification/components/read.vue b/src/apps/AppNotification/components/read.vue
index 0dd891e4..9c73864c 100644
--- a/src/apps/AppNotification/components/read.vue
+++ b/src/apps/AppNotification/components/read.vue
@@ -5,7 +5,7 @@
     </AiTopFixed>
     <div class="body">
       <div class="item" v-for="(item,index) in (current==0 ? list.read : list.unRead)" :key="index">
-        <u-avatar :src="item.avatar" mode="square" size="76"></u-avatar>
+        <u-avatar :src="item.avatar" mode="square" size="38"></u-avatar>
         <span class="name">{{item.name}}</span>
       </div>
     </div>
@@ -20,22 +20,23 @@
   export default {
     name: "read",
     components: {AiBack, AiTopFixed},
+    props:{
+      params:[String,Number]
+    },
     data() {
       return {
         current: 0,
-        id: null,
         list: [],
       }
     },
-    onLoad(opt) {
-      this.id = opt.id;
+    created() {
       this.getList();
     },
     methods: {
       getList() {
         this.$http.post("/app/appannouncementreader/list-unread",null,{
           params:{
-            id:this.id
+            id:this.params
           }
         }).then(res => {
           if (res && res.data) {