diff --git a/src/apps/AppPageBasic/AppPageBasic.vue b/src/apps/AppPageBasic/AppPageBasic.vue
new file mode 100644
index 00000000..2622d1ae
--- /dev/null
+++ b/src/apps/AppPageBasic/AppPageBasic.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="AppPageBasic">
+    <AppListPage :label="label" :appList="appList" />
+  </div>
+</template>
+
+<script>
+import AppListPage from '@/components/AppListPage/AppListPage'
+export default {
+  name: 'AppPageBasic',
+  appName: '工作台(基层办公)',
+  components: { AppListPage },
+  data() {
+    return {
+      label: '基层办公',
+      appList: [
+        {
+          name: '会议通知',
+          icon: require('./img/hytz.png'),
+          url: '../AppMeetingNotice/AppMeetingNotice'
+        },
+        {
+          name: '三务公开',
+          icon: require('./img/shgk.png'),
+          url: '../AppServicePublic/AppServicePublic?moduleId=b03d1ea68c8449ecb00685644e3f0192'
+        }
+      ]
+    }
+  },
+
+  methods: {
+
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+uni-page-body{
+  height: 100%;
+}
+.AppPageBasic{
+  height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/apps/AppPageBasic/img/hytz.png b/src/apps/AppPageBasic/img/hytz.png
new file mode 100644
index 00000000..9ff0bd96
Binary files /dev/null and b/src/apps/AppPageBasic/img/hytz.png differ
diff --git a/src/apps/AppPageBasic/img/shgk.png b/src/apps/AppPageBasic/img/shgk.png
new file mode 100644
index 00000000..4d01adcd
Binary files /dev/null and b/src/apps/AppPageBasic/img/shgk.png differ
diff --git a/src/apps/AppPageCivilization/AppPageCivilization.vue b/src/apps/AppPageCivilization/AppPageCivilization.vue
new file mode 100644
index 00000000..1919961a
--- /dev/null
+++ b/src/apps/AppPageCivilization/AppPageCivilization.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="AppPageCivilization">
+    <AppListPage :label="label" :appList="appList" />
+  </div>
+</template>
+
+<script>
+import AppListPage from '@/components/AppListPage/AppListPage'
+export default {
+  name: 'AppPageCivilization',
+  appName: '工作台(文明乡风)',
+  components: { AppListPage },
+  data() {
+    return {
+      label: '文明乡风',
+      appList: [
+        {
+          name: '婚丧嫁娶',
+          icon: require('./img/hjsq.png'),
+          url: '../AppMarryAndDie/AppMarryAndDie'
+        },
+        {
+          name: '好人好事',
+          icon: require('./img/hrhs.png'),
+          url: '../AppServicePublic/AppServicePublic?moduleId=5da220f3182047aba92d64ac08b93b55'
+        },
+        {
+          name: '五好家庭',
+          icon: require('./img/whjt.png'),
+          url: '../AppServicePublic/AppServicePublic?moduleId=6afadf4cd44f4b73be29390b30ca88bb'
+        }
+      ]
+    }
+  },
+
+  methods: {
+
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+uni-page-body{
+  height: 100%;
+}
+.AppPageCivilization{
+  height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/apps/AppPageCivilization/img/hjsq.png b/src/apps/AppPageCivilization/img/hjsq.png
new file mode 100644
index 00000000..d59fc156
Binary files /dev/null and b/src/apps/AppPageCivilization/img/hjsq.png differ
diff --git a/src/apps/AppPageCivilization/img/hrhs.png b/src/apps/AppPageCivilization/img/hrhs.png
new file mode 100644
index 00000000..8dfc999d
Binary files /dev/null and b/src/apps/AppPageCivilization/img/hrhs.png differ
diff --git a/src/apps/AppPageCivilization/img/whjt.png b/src/apps/AppPageCivilization/img/whjt.png
new file mode 100644
index 00000000..c86a300e
Binary files /dev/null and b/src/apps/AppPageCivilization/img/whjt.png differ
diff --git a/src/apps/AppPageInteraction/AppPageInteraction.vue b/src/apps/AppPageInteraction/AppPageInteraction.vue
new file mode 100644
index 00000000..cf387040
--- /dev/null
+++ b/src/apps/AppPageInteraction/AppPageInteraction.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="AppPageInteraction">
+    <AppListPage :label="label" :appList="appList" />
+  </div>
+</template>
+
+<script>
+import AppListPage from '@/components/AppListPage/AppListPage'
+export default {
+  name: 'AppPageInteraction',
+  appName: '工作台(居民互动)',
+  components: { AppListPage },
+  data() {
+    return {
+      label: '居民互动',
+      appList: [
+        {
+          name: '居民活动',
+          icon: require('./img/jmhd.png'),
+          url: '../AppResidentActivitie/AppResidentActivities'
+        },
+        {
+          name: '小程序公告',
+          icon: require('./img/xcxgg.png'),
+          url: '../AppUniMsg/AppUniMsg'
+        },
+        {
+          name: '问卷表单',
+          icon: require('./img/wjbd.png'),
+          url: '../AppAskForm/AppForm'
+        }
+      ]
+    }
+  },
+
+  methods: {
+
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+uni-page-body{
+  height: 100%;
+}
+.AppPageInteraction{
+  height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/apps/AppPageInteraction/img/jmhd.png b/src/apps/AppPageInteraction/img/jmhd.png
new file mode 100644
index 00000000..0c4a652e
Binary files /dev/null and b/src/apps/AppPageInteraction/img/jmhd.png differ
diff --git a/src/apps/AppPageInteraction/img/wjbd.png b/src/apps/AppPageInteraction/img/wjbd.png
new file mode 100644
index 00000000..a228945e
Binary files /dev/null and b/src/apps/AppPageInteraction/img/wjbd.png differ
diff --git a/src/apps/AppPageInteraction/img/xcxgg.png b/src/apps/AppPageInteraction/img/xcxgg.png
new file mode 100644
index 00000000..e1e01771
Binary files /dev/null and b/src/apps/AppPageInteraction/img/xcxgg.png differ
diff --git a/src/apps/AppPageParty/AppPageParty.vue b/src/apps/AppPageParty/AppPageParty.vue
new file mode 100644
index 00000000..5820e38f
--- /dev/null
+++ b/src/apps/AppPageParty/AppPageParty.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="AppPageParty">
+    <AppListPage :label="label" :appList="appList" />
+  </div>
+</template>
+
+<script>
+import AppListPage from '@/components/AppListPage/AppListPage'
+export default {
+  name: 'AppPageParty',
+  appName: '工作台(基层党建)',
+  components: { AppListPage },
+  data() {
+    return {
+      label: '基层党建',
+      appList: [
+        {
+          name: '三会一课',
+          icon: require('./img/shyk.png'),
+          url: '../party/AppThreeSessions/AppThreeSessions'
+        },
+        {
+          name: '党建要闻',
+          icon: require('./img/djyw.png'),
+          url: '../AppServicePublic/AppServicePublic?moduleId=95f0f1c509e44d528069bc9f9dc19e53'
+        },
+        {
+          name: '党员学习',
+          icon: require('./img/dyxx.png'),
+          url: '../party/AppPartyStudy/AppPartyStudy'
+        },
+         {
+          name: '在线答题',
+          icon: require('./img/zxdt.png'),
+          url: '../party/AppOnlineAnswer/AppOnlineAnswer'
+        }
+      ]
+    }
+  },
+
+  methods: {
+
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+uni-page-body{
+  height: 100%;
+}
+.AppPageParty{
+  height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/apps/AppPageParty/img/djyw.png b/src/apps/AppPageParty/img/djyw.png
new file mode 100644
index 00000000..a4b41b3b
Binary files /dev/null and b/src/apps/AppPageParty/img/djyw.png differ
diff --git a/src/apps/AppPageParty/img/dyxx.png b/src/apps/AppPageParty/img/dyxx.png
new file mode 100644
index 00000000..ae254959
Binary files /dev/null and b/src/apps/AppPageParty/img/dyxx.png differ
diff --git a/src/apps/AppPageParty/img/shyk.png b/src/apps/AppPageParty/img/shyk.png
new file mode 100644
index 00000000..f878a333
Binary files /dev/null and b/src/apps/AppPageParty/img/shyk.png differ
diff --git a/src/apps/AppPageParty/img/zxdt.png b/src/apps/AppPageParty/img/zxdt.png
new file mode 100644
index 00000000..26e3e037
Binary files /dev/null and b/src/apps/AppPageParty/img/zxdt.png differ
diff --git a/src/apps/AppPageResident/AppPageResident.vue b/src/apps/AppPageResident/AppPageResident.vue
new file mode 100644
index 00000000..71a69a3b
--- /dev/null
+++ b/src/apps/AppPageResident/AppPageResident.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="AppPageResident">
+    <AppListPage :label="label" :appList="appList" />
+  </div>
+</template>
+
+<script>
+import AppListPage from '@/components/AppListPage/AppListPage'
+export default {
+  name: 'AppPageResident',
+  appName: '工作台(居民)',
+  components: { AppListPage },
+  data() {
+    return {
+      label: '居民管理',
+      appList: [
+        {
+          name: '居民信息管理',
+          icon: require('./img/jmxxgl.png'),
+          url: '../AppResidentFile/AppResidentFile?tabIndex=1'
+        },
+        {
+          name: '居民群管理',
+          icon: require('./img/jmqgl.png'),
+          url: '../AppResidentFile/AppResidentFile?tabIndex=2'
+        },
+        {
+          name: '居民档案',
+          icon: require('./img/jmda.png'),
+          url: '../AppResidentFile/AppResidentFile'
+        }
+      ]
+    }
+  },
+
+  methods: {
+
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+uni-page-body{
+  height: 100%;
+}
+.AppPageResident{
+  height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/apps/AppPageResident/img/jmda.png b/src/apps/AppPageResident/img/jmda.png
new file mode 100644
index 00000000..3949aa22
Binary files /dev/null and b/src/apps/AppPageResident/img/jmda.png differ
diff --git a/src/apps/AppPageResident/img/jmqgl.png b/src/apps/AppPageResident/img/jmqgl.png
new file mode 100644
index 00000000..ed21342c
Binary files /dev/null and b/src/apps/AppPageResident/img/jmqgl.png differ
diff --git a/src/apps/AppPageResident/img/jmxxgl.png b/src/apps/AppPageResident/img/jmxxgl.png
new file mode 100644
index 00000000..ace102f3
Binary files /dev/null and b/src/apps/AppPageResident/img/jmxxgl.png differ
diff --git a/src/apps/AppResidentActivitie/Add.vue b/src/apps/AppResidentActivitie/Add.vue
index 996f5226..07467382 100644
--- a/src/apps/AppResidentActivitie/Add.vue
+++ b/src/apps/AppResidentActivitie/Add.vue
@@ -13,7 +13,7 @@
         <div class="line"></div>
 
         <u-form-item label="活动封面图" prop="fileIds" required :border-bottom="false" class="avatars" label-position="top">
-          <AiUploader :def.sync="forms.fileIds" multiple placeholder="上传图片" :limit="9"></AiUploader>
+          <AiUploader :def.sync="forms.fileIds" multiple placeholder="上传图片" :limit="1"></AiUploader>
         </u-form-item>
 
         <div class="line"></div>
@@ -25,9 +25,7 @@
         </u-form-item>
 
         <u-form-item label="报名范围" prop="fanwe" required :border-bottom="false" right-icon="arrow-right">
-          <u-input v-model="forms.fanwe" disabled placeholder="请选择报名范围" @click="showStstus = true" />
-
-          <u-select v-model="showStstus" :list="$dict.getDict('realityStatus')" value-name="dictValue" label-name="dictName" @confirm="selectStatus"></u-select>
+          <AiAreaPicker v-model="forms.areaId" :areaId="areaIdProps" @select="areaSelect" style="color: #333"></AiAreaPicker>
         </u-form-item>
 
         <u-form-item label="活动名额" prop="nums" required :border-bottom="false">
@@ -194,11 +192,11 @@ export default {
 
           this.flag = true
           this.$http
-            .post(`/app/appvisitvondolence/addOrUpdate`, {
+            .post(`/app/appvillageactivityinfo/addOrUpdate`, {
               title: this.forms.title,
               content: this.forms.content,
-              // images: JSON.stringify(imgs) || [],
-              images: imgs || [],
+              images: JSON.stringify(imgs) || [],
+              // images: imgs || [],
 
               status: this.forms.statusValue ? this.forms.statusValue : this.forms.status,
               fanwe: this.forms.fanwe,
@@ -217,7 +215,7 @@ export default {
               if (res.code == 0) {
                 this.$u.toast('发布成功')
                 this.flag = false
-                uni.navigateTo({ url: `./AppActive` })
+                uni.navigateTo({ url: `./AppResidentActivities` })
               }
             })
         } else {
@@ -255,6 +253,7 @@ export default {
   padding-bottom: 112px;
 
   .header-description {
+    padding-bottom: 112px;
     ::v-deep .u-form {
       .u-form-item {
         padding: 0 45px !important;
diff --git a/src/apps/AppResidentActivitie/AppResidentActivities.vue b/src/apps/AppResidentActivitie/AppResidentActivities.vue
index 8f9d2e0e..c8ad98fa 100644
--- a/src/apps/AppResidentActivitie/AppResidentActivities.vue
+++ b/src/apps/AppResidentActivitie/AppResidentActivities.vue
@@ -7,32 +7,32 @@
 
       <div class="dataRight">
         <span>共</span>
-        <span class="specialColor">12</span>
+        <span class="specialColor">{{ total }}</span>
         <span>个活动</span>
       </div>
     </div>
 
     <template v-if="datas.length > 0">
-      <AiCard v-for="(item, i) in 6" :key="i" @click.native="toDetail(item, 1)">
+      <AiCard v-for="(item, i) in datas" :key="i" @click.native="toDetail(item, 1)">
         <template #custom>
           <div class="left">
-            <div class="titles">【敬老爱幼】带你在洞庭湖兜兜风 寻觅江豚的身影</div>
+            <div class="titles">{{ item.title }}</div>
 
             <div class="nums">
-              <span class="specialColor">6人</span>
+              <span class="specialColor">{{ item.realNum }}人</span>
               <span>已报名</span>
             </div>
 
             <div class="times">
-              <span class="timesCont">2021-12-16</span>
+              <span class="timesCont">{{ item.beginTime }}</span>
 
               <span>| 2天</span>
             </div>
 
-            <div class="areaNmae">湖南省岳阳市岳阳县荣家湾镇六…湖南省岳阳市岳阳县荣家湾镇六…</div>
+            <div class="areaNmae">{{ item.areaName }}</div>
           </div>
 
-          <img src="./yan.jpg" alt="" />
+          <img :src="item.url[0].url" alt="" />
         </template>
       </AiCard>
     </template>
@@ -44,6 +44,8 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   name: 'AppResidentActivities',
   appName: '居民活动',
@@ -62,16 +64,45 @@ export default {
       ],
       currentTabs: 0,
       current: 1,
+      size: 6,
+      total: '',
     }
   },
-  computed: {},
+  computed: {
+    ...mapState(['user']),
+  },
   watch: {},
   onLoad() {
     this.getList()
   },
   mounted() {},
   methods: {
-    getList() {},
+    getList() {
+      this.$http
+        .post('/app/appvillageactivityinfo/list', null, {
+          params: {
+            size: this.size,
+            current: this.current,
+            createUserId: this.currentTabs == 1 ? this.user.id : '',
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
+            this.total = res.data.total
+            this.pages = res.data.pages
+
+            if (this.datas) {
+              this.datas.map((item) => {
+                if (item.url) {
+                  item.url = JSON.parse(item.url || '[]')
+                }
+                return item
+              })
+            }
+          }
+        })
+    },
 
     change(index) {
       this.currentTabs = index
@@ -83,8 +114,7 @@ export default {
     },
 
     toDetail(item) {
-      uni.navigateTo({ url: `./Detail` })
-      // uni.navigateTo({ url: `./Detail?id=${item.id}` })
+      uni.navigateTo({ url: `./Detail?id=${item.id}` })
     },
   },
   onReachBottom() {
@@ -149,16 +179,19 @@ uni-page-body {
             overflow: hidden;
           }
           .nums {
+            margin-top: 8px;
             .specialColor {
               color: #4181ff;
             }
           }
           .times {
+            margin-top: 8px;
             .timesCont {
               margin-right: 10px;
             }
           }
           .areaNmae {
+            margin-top: 8px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
diff --git a/src/apps/AppResidentActivitie/Detail.vue b/src/apps/AppResidentActivitie/Detail.vue
index 3821fff2..765ba0fd 100644
--- a/src/apps/AppResidentActivitie/Detail.vue
+++ b/src/apps/AppResidentActivitie/Detail.vue
@@ -103,7 +103,7 @@
       </div>
     </div>
 
-    <div class="addicon" @click="toPublicPage()">
+    <!-- <div class="addicon" @click="toPublicPage()">
       <u-icon name="plus" color="#1365DD" size="50"></u-icon>
     </div>
 
@@ -129,21 +129,21 @@
 
     <div class="btn" v-if="detail.realNum == detail.total && detail.status == 1 && detail.status == 1 && detail.total != 0">
       <div class="max">已满员</div>
-    </div>
+    </div> -->
 
-    <div class="btn" v-if="detail.myReport == 1 && detail.status == 2">
+    <!-- <div class="btn" v-if="detail.myReport == 1 && detail.status == 2">
       <div class="edit" @click="callPhone(detail.contactPhone)">联系负责人</div>
       <div class="public" style="background: #ffd8df; color: #ff4466" v-if="detail.allow1 == 0">未签到</div>
       <div class="public" style="background: #3671ee; color: #ffffff" v-if="detail.allow1 == 1" @click="sign(0)">签到</div>
       <div class="public" style="background: #cbead9; color: #20bc65" v-if="detail.allow1 == 2">已签到</div>
-    </div>
+    </div> -->
 
-    <div class="btn" v-if="detail.status == 5">
+    <!-- <div class="btn" v-if="detail.status == 5">
       <div class="edit" @click="callPhone(detail.contactPhone)">联系负责人</div>
       <div class="public" style="background: #cbead9; color: #20bc65" v-if="detail.allow2 == 1" @click="sign(1)">离场签到</div>
       <div class="public" style="background: #cbead9; color: #20bc65" v-if="detail.allow2 == 2">已离场签到</div>
       <div class="public" style="background: #ffd8df; color: #ff4466" v-if="detail.allow2 == 0">未离场签到</div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -180,7 +180,7 @@ export default {
   },
   methods: {
     getDetail() {
-      this.$instance.post(`/app/appactivityinfo/queryDetailById?id=${this.id}&partyId=${this.user.partyId}`).then((res) => {
+      this.$http.post(`/app/appactivityinfo/queryDetailById?id=${this.id}&partyId=${this.user.partyId}`).then((res) => {
         if (res?.data) {
           res.data.beginTime = res.data.beginTime.substring(0, 16)
           res.data.endTime = res.data.endTime.substring(0, 16)
@@ -191,7 +191,7 @@ export default {
     },
 
     getActiveList() {
-      this.$instance.post(`/app/apppostinfo/list?activityId=${this.id}`).then((res) => {
+      this.$http.post(`/app/apppostinfo/list?activityId=${this.id}`).then((res) => {
         if (res?.data) {
           this.activeList = res.data.records
 
diff --git a/src/apps/AppResidentFile/AppResidentFile.vue b/src/apps/AppResidentFile/AppResidentFile.vue
index 67d29206..d7203b1f 100644
--- a/src/apps/AppResidentFile/AppResidentFile.vue
+++ b/src/apps/AppResidentFile/AppResidentFile.vue
@@ -136,6 +136,7 @@ export default {
   props: {},
   data() {
     return {
+      indexBar: '',
       lists: [
         {
           iconPath: 'home',
@@ -198,9 +199,16 @@ export default {
     ...mapState(['user', 'global']),
   },
   watch: {},
-  onLoad() {
+  onLoad(o) {
+    if (o.index) {
+      this.indexBar = o.index
+    }
     this.getEchart1()
     this.getEchart2()
+    this.getList()
+    this.getList2()
+
+    this.currentTabBar = this.indexBar
     this.areaId = this.user.areaId
   },
   mounted() {
diff --git a/src/apps/AppServicePublic/Add.vue b/src/apps/AppServicePublic/Add.vue
index 435233c9..0916aad4 100644
--- a/src/apps/AppServicePublic/Add.vue
+++ b/src/apps/AppServicePublic/Add.vue
@@ -57,12 +57,14 @@ export default {
       showStstus: false,
       flag: false,
       areaIdProps: '',
+      moduleId: ''
     }
   },
   computed: { ...mapState(['user']) },
   onLoad(o) {
     console.log(o)
     this.id = o.id
+    this.moduleId = o.moduleId
     this.areaIdProps = this.user.areaId
     this.$dict.load('realityStatus').then(() => {
       this.getDetail()
@@ -113,6 +115,7 @@ export default {
               // images: JSON.stringify(imgs) || [],
               images: imgs || [],
               id: this.id,
+              moduleId: this.moduleId
             })
             .then((res) => {
               if (res.code == 0) {
diff --git a/src/apps/AppServicePublic/AppServicePublic.vue b/src/apps/AppServicePublic/AppServicePublic.vue
index 40c347f9..e774b5f5 100644
--- a/src/apps/AppServicePublic/AppServicePublic.vue
+++ b/src/apps/AppServicePublic/AppServicePublic.vue
@@ -66,6 +66,7 @@ export default {
       pages: 0,
       deletShow: false,
       deletId: '',
+      moduleId: ''
     }
   },
   computed: {
@@ -76,8 +77,9 @@ export default {
     },
   },
   watch: {},
-  onLoad() {
+  onLoad(o) {
     this.areaId = this.user.areaId
+    this.moduleId = o.moduleId
     this.getList()
   },
   mounted() {},
@@ -90,6 +92,7 @@ export default {
             current: this.current,
             areaId: this.areaId,
             title: this.keyword,
+            moduleId: this.moduleId
           },
         })
         .then((res) => {
@@ -116,7 +119,7 @@ export default {
       }
       if (type == null) {
         console.log('添加')
-        uni.navigateTo({ url: `./Add` })
+        uni.navigateTo({ url: `./Add?moduleId=${this.moduleId}` })
       }
     },
 
diff --git a/src/apps/AppWorkonline/AppWorkonline.vue b/src/apps/AppWorkonline/AppWorkonline.vue
index 2963b02f..d40efcbe 100644
--- a/src/apps/AppWorkonline/AppWorkonline.vue
+++ b/src/apps/AppWorkonline/AppWorkonline.vue
@@ -17,13 +17,7 @@
             <div class="plan">
               <span>审批进度：</span>
 
-              <span class="business_status" v-if="item.approvalStatus == 0"> {{ $dict.getLabel('listApprovalStatusHb', item.approvalStatus) }}</span>
-
-              <span class="business_status_blue" v-if="item.approvalStatus == 1"> {{ $dict.getLabel('listApprovalStatusHb', item.approvalStatus) }}</span>
-
-              <span class="business_status_gray" v-if="item.approvalStatus == 2">
-                {{ $dict.getLabel('listApprovalStatusHb', item.approvalStatus) }}
-              </span>
+              <span class="business_status" :style="{ color: item.approvalStatus == 0 ? '#FF9B2B' : item.approvalStatus == 1 ? '#3078E1' : '#666666' }"> {{ $dict.getLabel('listApprovalStatusHb', item.approvalStatus) }}</span>
             </div>
           </view>
 
@@ -111,7 +105,7 @@ export default {
     },
 
     goDetail(item) {
-      uni.navigateTo({ url: `./detail?id=${item.id}&listType=${this.listType}` })
+      uni.navigateTo({ url: `./Detail?id=${item.id}&listType=${this.listType}` })
     },
 
     change(index) {
diff --git a/src/apps/AppWorkonline/Detail.vue b/src/apps/AppWorkonline/Detail.vue
new file mode 100644
index 00000000..3d57176c
--- /dev/null
+++ b/src/apps/AppWorkonline/Detail.vue
@@ -0,0 +1,1388 @@
+<template>
+  <div class="detail" v-if="pageShow">
+    <div :class="list.approvalStatus == 1 ? 'detail_content' : 'detail_content1'">
+      <!-- 顶部文件预览和查看 -->
+      <div class="top" v-if="list.approvalStatus == 1">
+        <p>审批通过:</p>
+        <div class="save">
+          <div style="display: inline">[{{ this.list.tableInfo.tableName }}]已签署完成,</div>
+          <AiImage preview :file="list.pdfFile" style="display: inline-block; margin-left: 4px"><span class="clicksave">点击查看和保存</span> </AiImage>
+        </div>
+      </div>
+
+      <div class="form">
+        <!-- 审批表单名称 -->
+        <text class="text">{{ list.processDefName }}</text>
+
+        <div class="people">
+          <!-- 左 -->
+          <div class="people_msg">
+            <!-- 圆形头像 -->
+            <div class="avatar">
+              <span v-if="list.createUserAvatar"><img :src="list.createUserAvatar" alt="" style="width: 100%; height: 100%; border-radius: 50%" /></span>
+              <span v-else> {{ $formatName(list.createUserName) }}</span>
+            </div>
+
+            <text class="name">
+              <!-- 姓名 -->
+              <p class="name_con">{{ list.createUserName }}</p>
+              <!-- 日期 -->
+              <p class="name_createtime">{{ list.createTime }}</p>
+            </text>
+          </div>
+
+          <!-- 右 -->
+          <!-- 审批状态 -->
+          <!-- 审批中 -->
+          <div class="people_status_ing" v-if="list.approvalStatus == 0">
+            {{ $dict.getLabel('listApprovalStatusHb', list.approvalStatus) }}
+          </div>
+
+          <!-- 已通过 -->
+          <div class="people_status_agree" v-if="list.approvalStatus == 1">
+            <img src="./components/people_status_agree.png" alt="" />
+          </div>
+
+          <!-- 被驳回 -->
+          <div class="people_status_reject" v-if="list.approvalStatus == 2">
+            {{ $dict.getLabel('listApprovalStatusHb', list.approvalStatus) }}
+          </div>
+        </div>
+
+        <!-- 表头内容 -->
+        <div class="content">
+          <div class="item">
+            <span class="item_info">所属类型：</span>
+            <span class="zhuf"> {{ list.classificationName }}</span>
+          </div>
+
+          <div class="item">
+            <span class="item_info">所属部门：</span>
+            <span class="liangzhu">
+              {{ $dict.getLabel('hbDepartment', list.department) }}
+            </span>
+          </div>
+
+          <div class="item">
+            <span class="item_info">审批编号：</span>
+            <span class="liangzhu">{{ list.serialNumber }}</span>
+          </div>
+
+          <div class="item">
+            <div class="item_info">
+              <span class="annexs">附件资料：</span>
+              <div class="img_text" v-for="(item, indexs) in list.annexs" :key="indexs">
+                <AiImage :src="item.annexFile.url" preview />
+                <span class="text">{{ item.annexName }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- tabs栏 -->
+      <u-tabs class="tabs" :list="list_tabs" height="96" active-color="#1365dd" inactive-color="#999" bar-width="374" font-size="30" :is-scroll="false" :current="current" @change="change"></u-tabs>
+
+      <!-- 表单申请的折叠窗 -->
+      <div style="background-color: #fff" v-if="current == 0">
+        <div class="collapse">
+          <u-collapse event-type="close" :arrow="true" :accordion="true">
+            <u-collapse-item v-if="item.length > 0" v-for="(item, index) in inforlist" :title="item[0].groupName" :key="index">
+              <div v-for="(items, indexs) in item" :key="indexs">
+                <div class="item_msg">
+                  <!-- 左 -->
+                  <span class="msg_lef">{{ items.fieldName }}</span>
+                  <!-- 右 -->
+                  <!-- 字典值 items.dictionaryCode -->
+                  <span class="msg_lright" v-if="items.fieldDataType != 5">{{ $dict.getLabel(items.dictionaryCode, items.fieldValue) }}</span>
+                  <span class="msg_lright" v-else>
+                    <span v-for="(itemL, indexL) in items.fieldValue" :key="indexL"
+                      >{{ $dict.getLabel(items.dictionaryCode, itemL) }}
+                      <span v-if="indexL < items.fieldValue.length - 1">,</span>
+                    </span>
+                  </span>
+                </div>
+              </div>
+            </u-collapse-item>
+          </u-collapse>
+        </div>
+      </div>
+
+      <!-- 流程信息 -->
+      <div v-if="current == 1" class="workflow">
+        <div class="step-list">
+          <div class="step-item" v-for="(item, index) in stepList" :key="index">
+            <div class="item-left">
+              <div class="item-left-ava-icon">
+                <div class="avatar" v-if="item.userName">
+                  <span v-if="item.stepAvatar"><img :src="item.stepAvatar" alt="" style="width: 100%; height: 100%; border-radius: 50%" /></span>
+                  <span v-else> {{ $formatName(item.userName) }}</span>
+                </div>
+
+                <div class="avatar" v-else-if="item.title == '抄送'">
+                  <img src="./components/Profile_Picture.png" alt="" />
+                </div>
+
+                <div class="avatar" v-else>
+                  <div v-for="(item3, indexs) in item.candidates" :key="indexs">{{ $formatName(item3.name) }}</div>
+                </div>
+
+                <div class="icon-yes" v-if="item.stepType == 1 || item.stepType == 0 || item.stepType == 3">
+                  <img src="./components/agree.png" alt="" />
+                </div>
+
+                <div class="" v-else-if="item.stepType == 2"></div>
+
+                <div class="icon-no" v-else>
+                  <img src="./components/clearn.png" />
+                </div>
+              </div>
+
+              <div :class="item.stepType == 1 || item.stepType == 0 || item.stepType == 3 ? 'solid' : 'dashed'"></div>
+            </div>
+
+            <div class="item-right">
+              <div class="time-info">
+                <div>{{ item.title }}</div>
+                <span>{{ item.approvalTime }}</span>
+              </div>
+              <div class="item-right-flex">
+                <span class="title2">{{ item.title2 }}</span>
+
+                <span class="title2Desc-ing" v-if="item.stepType == 9">{{ item.title2Desc }}</span>
+
+                <span class="title2Desc-false" v-else-if="item.stepType == 2">{{ item.title2Desc }}</span>
+
+                <span class="title2Desc" v-else>{{ item.title2Desc }}</span>
+
+                <div class="user-list">
+                  <div class="item-right-flex-left-name" v-for="(items, i) in item.candidates" :key="i">
+                    <span class="avatar" v-if="items.name">{{ $formatName(items.name) }}</span>
+                    <span class="avatar-name" v-if="items.name">{{ items.name }}</span>
+                  </div>
+                </div>
+
+                <!-- <div v-if="item.candidateFieldInfos" v-for="(item2, inde2) in item.candidateFieldInfos" :key="inde2">
+                  <span>{{ item2.fieldName }}&nbsp;:&nbsp;</span>
+                  <span>{{ item2.fieldValue }}</span>
+                </div> -->
+
+                <div v-for="(item4, indexsss) in stepList" :key="indexsss">
+                  <span>{{ item4.fieldName }}&nbsp;:&nbsp;</span>
+                  <span>{{ item4.fieldValue }}</span>
+                </div>
+
+                <span v-if="item.stepType == 2">审批意见:{{ item.opinion }}</span>
+
+                <div class="examine" v-if="item.stepType == 2">
+                  <div class="examine_docx1">
+                    <div class="examine_img" v-if="item.pictureFiles && item.pictureFiles.length > 0" style="">
+                      <AiImage preview :src="pic.url" v-for="pic in item.pictureFiles" :key="pic.id" style="width: 65px; height: 75px; float: left; margin-left: 6px; margin-bottom: 4px; overflow: hidden" />
+                    </div>
+
+                    <div v-if="item.annexFiles && item.annexFiles.length > 0">
+                      <div v-for="annex in item.annexFiles" :key="annex.id" class="docx">
+                        <AiImage :file="annex" preview>
+                          <u-row justify="space-between">
+                            <span class="docx-name">{{ annex.name }}</span>
+                            <span>{{ annex.fileSizeStr }}</span>
+                          </u-row>
+                        </AiImage>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="examine" v-if="item.stepType == 1 || item.stepType == 0 || item.stepType == 3">
+                  <div class="examine_docx1">
+                    <div class="examine_img" v-if="item.pictureFiles && item.pictureFiles.length > 0" style="">
+                      <AiImage preview :src="pic.url" v-for="pic in item.pictureFiles" :key="pic.id" style="width: 69px; height: 75px; float: left; margin-left: 4px; margin-bottom: 4px; overflow: hidden" />
+                    </div>
+
+                    <div v-if="item.annexFiles && item.annexFiles.length > 0">
+                      <div v-for="annex in item.annexFiles" :key="annex.id" class="docx">
+                        <AiImage :file="annex" preview>
+                          <u-row justify="space-between">
+                            <span class="docx-name">{{ annex.name }}</span>
+                            <span>{{ annex.fileSizeStr }}</span>
+                          </u-row>
+                        </AiImage>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="reject_agree" v-if="canApproval && list.approvalStatus == 0">
+      <div class="reject" @click="agree(0)">拒绝</div>
+      <div class="agree" @click="agree(1)">同意</div>
+    </div>
+
+    <AiBack></AiBack>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Detail',
+  components: {},
+  computed: {
+    canApproval() {
+      return this.listType == 0
+    },
+  },
+  onLoad(options) {
+    this.objid = options.id
+    this.listType = options.listType
+    this.getDetail()
+  },
+  data() {
+    return {
+      objid: '',
+      list: [],
+      list_tabs: [
+        {
+          name: '申请表单',
+        },
+        {
+          name: '流程信息',
+        },
+      ],
+      current: 0,
+      inforlist: [],
+      stepList: [],
+      dictList: ['hbDepartment'],
+      pageShow: false,
+      listType: 0,
+      eventChannel: null,
+    }
+  },
+  // 方法
+  methods: {
+    getDetail() {
+      this.$http.post(`/app/approv-alapply-info/info-id-table?id=${this.objid}`).then((res) => {
+        if (res.code == 0) {
+          if (res.data) {
+            this.list = res.data
+
+            // if (res.data.createUserAvatar) {
+            //   console.log(res.data.createUserAvatar)
+            // }
+
+            this.inforlist = [[], [], [], [], [], [], [], [], [], []]
+            res.data.tableInfo.tableFieldInfos.map((item) => {
+              if (item.groupIndex) {
+                this.inforlist[item.groupIndex - 1].push(item)
+              }
+
+              if (item.dictionaryCode) {
+                this.dictList.push(item.dictionaryCode)
+              }
+              if (item.fieldDataType == 5) {
+                // item.fieldValue = item.fieldValue.split(',')
+              }
+            })
+
+            this.$dict.load(this.dictList).then(() => {
+              this.pageShow = true
+            })
+          }
+        }
+      })
+
+      this.$http.post(`/app/approv-alapply-info/processinfo-id2?id=${this.objid}`).then((res) => {
+        if (res.code == 0) {
+          if (res.data) {
+            this.stepList = res.data
+            // this.getDetail()
+            // console.log(this.stepList)
+            // res.data.map((item) => {
+            //   if (item.candidateFieldInfos) {
+            //     item.candidateFieldInfos.map((items) => {
+            //       console.log(items.fieldName)
+            //       console.log(items.fieldValue)
+            //     })
+            //   }
+            // })
+          }
+        }
+      })
+    },
+
+    change(i) {
+      this.current = i
+    },
+
+    agree(type) {
+      this.$http
+        .post(`/app/approv-alapply-info/approval-popup?type=${type}&id=${this.objid}`)
+        .then((res) => {
+          if (res.code == 0) {
+            uni.navigateTo({
+              url: `./Opinion?id=${this.objid}&type=${type}`,
+            })
+          }
+        })
+        .catch((e) => {
+          uni.showToast({
+            title: e,
+            icon: 'none',
+          })
+        })
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.detail {
+  .detail_content1 {
+    background-color: #fff;
+    padding-bottom: 348px;
+
+    .top {
+      background-color: #eff4ff;
+      height: 144px;
+      padding: 32px 0 0 32px;
+      color: #3a7ee2;
+      font-size: 28px;
+
+      .save {
+        margin-top: 8px;
+
+        .clicksave {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .form {
+      padding: 32px;
+      background-color: #fff;
+
+      .text {
+        font-size: 40px;
+        font-weight: 800;
+      }
+
+      .people {
+        display: flex;
+        // align-items: center;
+        justify-content: space-between;
+        // margin-top: 20px;
+        height: 122px;
+        line-height: 122px;
+        border-bottom: 1px solid #eee;
+        padding-bottom: 15px;
+
+        .people_msg {
+          .avatar {
+            display: inline-block;
+            width: 84px;
+            height: 84px;
+            line-height: 84px;
+            border-radius: 50%;
+            background-color: #2266ff;
+            color: #fff;
+            font-size: 28px;
+            vertical-align: middle;
+            text-align: center;
+            margin-right: 10px;
+          }
+
+          .name {
+            display: inline-block;
+            width: 145px;
+            vertical-align: middle;
+
+            .name_con {
+              font-size: 30px;
+              height: 40px;
+            }
+
+            .name_createtime {
+              color: #999;
+              font-size: 24px;
+              height: 120px;
+              width: 400px;
+            }
+          }
+        }
+
+        .people_status_ing {
+          color: #ff8822;
+          text-align: center;
+        }
+
+        .people_status_agree {
+          width: 192px;
+          height: 192px;
+
+          img {
+            width: 192px;
+            height: 192px;
+            margin-top: -60px;
+          }
+        }
+
+        .people_status_reject {
+          color: #f14242;
+          text-align: center;
+        }
+      }
+
+      .content {
+        margin-top: 16px;
+
+        .item {
+          margin-top: 16px;
+
+          .item_info {
+            display: inline;
+            font-size: 30px;
+            font-weight: 400;
+            color: #999999;
+
+            .annexs {
+              vertical-align: top;
+            }
+
+            .img_text {
+              display: inline-block;
+              position: relative;
+              width: 180px;
+              height: 175px;
+
+              img {
+                width: 180px;
+                height: 100%;
+              }
+
+              .text {
+                position: absolute;
+                bottom: 14px;
+                // text-align: center;
+                left: 0;
+                width: 160px;
+                font-size: 12px;
+                height: 40px;
+                line-height: 40px;
+                text-align: center;
+                color: #fff;
+                background-color: #000;
+                opacity: 0.4;
+              }
+            }
+          }
+
+          .zhuf {
+            font-size: 30px;
+            font-weight: 400;
+            color: #1365dd;
+          }
+
+          .liangzhu {
+            font-size: 30px;
+            font-weight: 400;
+            color: #343d65;
+          }
+        }
+      }
+    }
+
+    .tabs {
+      // margin-top: 16px;
+    }
+
+    .info {
+      height: 16px;
+      width: 100%;
+      background-color: #eee;
+    }
+
+    // 表单申请
+    .collapse {
+      // margin: 0 32px;
+      // padding: 0 32px;
+      ::v-deep .u-collapse {
+        // background-color: #fff;
+      }
+
+      ::v-deep .u-collapse-head {
+        background-color: #fff;
+        padding: 0 32px;
+        height: 96px;
+      }
+
+      ::v-deep .u-collapse-body {
+        padding: 0 32px;
+        background-color: #fafafa;
+
+        .u-collapse-content {
+          .item_msg {
+            display: flex;
+            // align-items: center;
+            justify-content: space-between;
+            padding: 10px 0;
+
+            .msg_lef {
+              width: 350px;
+              font-size: 30px;
+              font-weight: 400;
+              color: #999999;
+            }
+
+            .msg_lright {
+              max-width: 420px;
+              word-break: break-all;
+              // word-wrap: break-word;
+              margin-right: 0;
+              font-size: 30px;
+              font-weight: 400;
+              color: #333333;
+            }
+          }
+
+          .account {
+            // .account_leave {
+            // }
+            .account_house {
+              margin: 10px 0;
+              color: #333;
+              font-size: 30px;
+            }
+          }
+        }
+      }
+    }
+
+    // 流程信息
+    .workflow {
+      background-color: #fff;
+      padding: 24px 32px 40px 32px;
+
+      // 发起申请步骤
+
+      .step-list {
+        .step-item {
+          display: flex;
+          position: relative;
+          justify-content: space-between;
+          // align-items: center;
+          padding-bottom: 40px;
+
+          .item-left {
+            height: 100%;
+            // position: relative;
+            .item-left-ava-icon {
+              position: relative;
+
+              .avatar {
+                display: inline-block;
+                width: 80px;
+                height: 80px;
+                line-height: 80px;
+                border-radius: 50%;
+                background-color: #2266ff;
+                color: #fff;
+                font-size: 28px;
+                // vertical-align: middle;
+                text-align: center;
+                z-index: 999;
+
+                img {
+                  // margin: 16px 0 0 8px;
+                  width: 48px;
+                  height: 48px;
+                }
+              }
+
+              .icon-yes {
+                position: absolute;
+                top: 50px;
+                left: 50px;
+                width: 36px;
+                height: 36px;
+                // background: #fff;
+                border-radius: 50%;
+                text-align: center;
+                vertical-align: middle;
+
+                img {
+                  width: 36px;
+                  height: 36px;
+                }
+              }
+
+              .icon-no {
+                position: absolute;
+                top: 50px;
+                left: 50px;
+                width: 36px;
+                height: 36px;
+                background: #ff8822;
+                border-radius: 50%;
+                text-align: center;
+                vertical-align: middle;
+
+                img {
+                  width: 36px;
+                  height: 36px;
+                }
+              }
+            }
+
+            .solid {
+              // height: 100%;
+              height: calc(100%);
+              border-left: 4px solid #eee;
+              position: absolute;
+              top: 80px;
+              left: 40px;
+            }
+
+            .dashed {
+              // height: 100%;
+              height: calc(100%);
+              border-left: 4px dashed #eee;
+              position: absolute;
+              top: 80px;
+              left: 40px;
+            }
+          }
+
+          .item-right {
+            width: 590px;
+
+            .item-right-flex {
+              // display: flex;
+              // justify-content: space-between;
+              // align-items: center;
+              .block {
+                display: block;
+                // margin-top: 124px;
+              }
+
+              .title2 {
+                display: inline-block;
+              }
+
+              .title2Desc {
+                display: inline-block;
+                color: #2ea222;
+                margin-left: 10px;
+              }
+
+              .title2Desc-ing {
+                display: inline-block;
+                color: #ff8822;
+                margin-left: 10px;
+              }
+
+              .title2Desc-false {
+                color: #f14242;
+                display: inline-block;
+                margin-left: 10px;
+              }
+
+              .user-list {
+                overflow: hidden;
+              }
+
+              .item-right-flex-left-name {
+                margin-top: 20px;
+                float: left;
+                margin-right: 16px;
+                text-align: center;
+
+                .avatar {
+                  display: inline-block;
+                  width: 64px;
+                  height: 64px;
+                  line-height: 64px;
+                  border-radius: 50%;
+                  background-color: #2266ff;
+                  color: #fff;
+                  font-size: 28px;
+                  vertical-align: middle;
+                  text-align: center;
+                  // margin-left: 8px;
+                }
+
+                .avatar-name {
+                  display: block;
+                }
+              }
+
+              .examine {
+                p {
+                  margin: 6px 0;
+                  font-size: 12px;
+                }
+
+                .examine_img {
+                  //  float: left;
+                  // display: flex;
+                  // flex-wrap: wrap;
+                  // justify-content: space-between;
+                  // img {
+                  //   width: 134px;
+                  //   height: 136px;
+                  //   margin-right: 8px;
+                  // }
+                  // ::v-deep.AiImage {
+                  //   ::v-deep.u-image__image {
+                  //     width: 60px !important;
+                  //     height: 60px;
+                  //   }
+                  // }
+                }
+              }
+
+              .examine_docx1 {
+                .docx {
+                  display: flex;
+                  align-items: center;
+                  justify-content: space-between;
+                  width: 556px;
+                  padding: 16px;
+                  background-color: #ddd;
+                  margin: 6px 0;
+
+                  .docx-name {
+                    width: 440px;
+                    margin: 0 8px;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                  }
+                }
+              }
+            }
+
+            .time-info {
+              display: flex;
+              justify-content: space-between;
+
+              span {
+                color: #999;
+                font-size: 28px;
+              }
+            }
+          }
+        }
+
+        .step-item:first-child {
+          .item-right {
+            .item-right-flex {
+              .block {
+                margin-top: 0 !important;
+              }
+            }
+          }
+        }
+
+        .step-item:last-child {
+          .dashed {
+            border-left: 0 !important;
+          }
+
+          .solid {
+            border-left: 0 !important;
+          }
+        }
+      }
+    }
+
+    // 抄送人头像
+    .recipients {
+      // display: flex;
+      // justify-content: space-between;
+      // align-items: center;
+      margin: 16px 0 0 120px;
+
+      .recipients_content {
+        // display: inline-block;
+        // width: 64px;
+        // height: 150px;
+        margin-left: 32px;
+
+        .name_ava {
+          display: inline-block;
+          width: 120px;
+          // text-align: center;
+          margin-top: 5px;
+
+          .avatar {
+            display: inline-block;
+            width: 64px;
+            height: 64px;
+            line-height: 64px;
+            border-radius: 50%;
+            background-color: #2266ff;
+            color: #fff;
+            font-size: 28px;
+            vertical-align: middle;
+            text-align: center;
+            // margin-left: 8px;
+          }
+
+          .recipients_name {
+            // display: inline;
+            width: 100px;
+            height: 34px;
+            line-height: 34px;
+            // text-align: center;
+            // background-color: pink;
+            margin-top: 8px;
+          }
+        }
+      }
+
+      // .recipients_content:first-child {
+      //   margin-left: 0;
+      // }
+    }
+  }
+
+  .detail_content {
+    background-color: #fff;
+    padding-bottom: 170px;
+    // padding-bottom: 320px;
+    .top {
+      background-color: #eff4ff;
+      height: 144px;
+      padding: 32px 0 0 32px;
+      color: #3a7ee2;
+      font-size: 28px;
+
+      .save {
+        margin-top: 8px;
+
+        .clicksave {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .form {
+      padding: 32px;
+      background-color: #fff;
+
+      .text {
+        font-size: 40px;
+        font-weight: 800;
+      }
+
+      .people {
+        display: flex;
+        // align-items: center;
+        justify-content: space-between;
+        // margin-top: 20px;
+        height: 122px;
+        line-height: 122px;
+        border-bottom: 1px solid #eee;
+        padding-bottom: 15px;
+
+        .people_msg {
+          .avatar {
+            display: inline-block;
+            width: 84px;
+            height: 84px;
+            line-height: 84px;
+            border-radius: 50%;
+            background-color: #2266ff;
+            color: #fff;
+            font-size: 28px;
+            vertical-align: middle;
+            text-align: center;
+            margin-right: 10px;
+          }
+
+          .name {
+            display: inline-block;
+            width: 145px;
+            vertical-align: middle;
+
+            .name_con {
+              font-size: 30px;
+              height: 40px;
+            }
+
+            .name_createtime {
+              color: #999;
+              font-size: 24px;
+              height: 120px;
+              width: 400px;
+            }
+          }
+        }
+
+        .people_status_ing {
+          color: #ff8822;
+          text-align: center;
+        }
+
+        .people_status_agree {
+          width: 192px;
+          height: 192px;
+
+          img {
+            width: 192px;
+            height: 192px;
+            margin-top: -60px;
+          }
+        }
+
+        .people_status_reject {
+          color: #f14242;
+          text-align: center;
+        }
+      }
+
+      .content {
+        margin-top: 16px;
+
+        .item {
+          margin-top: 16px;
+
+          .item_info {
+            display: inline;
+            font-size: 30px;
+            font-weight: 400;
+            color: #999999;
+
+            .annexs {
+              // display: inline;
+              vertical-align: top;
+            }
+
+            .img_text {
+              display: inline-block;
+              position: relative;
+              width: 180px;
+              height: 175px;
+
+              img {
+                width: 180px;
+                height: 100%;
+              }
+
+              .text {
+                position: absolute;
+                bottom: 14px;
+                left: -12px;
+                font-size: 12px;
+                width: 160px;
+                height: 40px;
+                line-height: 40px;
+                text-align: center;
+                color: #fff;
+                background-color: #000;
+                opacity: 0.4;
+                margin-left: 12px;
+              }
+            }
+          }
+
+          .zhuf {
+            font-size: 30px;
+            font-weight: 400;
+            color: #1365dd;
+          }
+
+          .liangzhu {
+            font-size: 30px;
+            font-weight: 400;
+            color: #343d65;
+          }
+        }
+      }
+    }
+
+    .tabs {
+      // margin-top: 16px;
+    }
+
+    .info {
+      height: 16px;
+      width: 100%;
+      background-color: #eee;
+    }
+
+    // 表单申请
+    .collapse {
+      // margin: 0 32px;
+      // padding: 0 32px;
+      ::v-deep .u-collapse {
+        // background-color: #fff;
+      }
+
+      ::v-deep .u-collapse-head {
+        background-color: #fff;
+        padding: 0 32px;
+        height: 96px;
+      }
+
+      ::v-deep .u-collapse-body {
+        padding: 0 32px;
+        background-color: #fafafa;
+
+        .u-collapse-content {
+          .item_msg {
+            display: flex;
+            // align-items: center;
+            justify-content: space-between;
+            padding: 10px 0;
+
+            .msg_lef {
+              width: 350px;
+              font-size: 30px;
+              font-weight: 400;
+              color: #999999;
+            }
+
+            .msg_lright {
+              max-width: 420px;
+              word-break: break-all;
+              // word-wrap: break-word;
+              margin-right: 0;
+              font-size: 30px;
+              font-weight: 400;
+              color: #333333;
+            }
+          }
+
+          .account {
+            // .account_leave {
+            // }
+            .account_house {
+              margin: 10px 0;
+              color: #333;
+              font-size: 30px;
+            }
+          }
+        }
+      }
+    }
+
+    // 流程信息
+    .workflow {
+      background-color: #fff;
+      padding: 24px 32px 40px 32px;
+
+      // 发起申请步骤
+
+      .step-list {
+        .step-item {
+          display: flex;
+          position: relative;
+          justify-content: space-between;
+          // align-items: center;
+          padding-bottom: 40px;
+
+          .item-left {
+            height: 100%;
+            // position: relative;
+            .item-left-ava-icon {
+              position: relative;
+
+              .avatar {
+                display: inline-block;
+                width: 80px;
+                height: 80px;
+                line-height: 80px;
+                border-radius: 50%;
+                background-color: #2266ff;
+                color: #fff;
+                font-size: 28px;
+                // vertical-align: middle;
+                text-align: center;
+                z-index: 999;
+
+                img {
+                  // margin: 16px 0 0 8px;
+                  width: 48px;
+                  height: 48px;
+                }
+              }
+
+              .icon-yes {
+                position: absolute;
+                top: 50px;
+                left: 50px;
+                width: 36px;
+                height: 36px;
+                // background: #fff;
+                border-radius: 50%;
+                text-align: center;
+                vertical-align: middle;
+
+                img {
+                  width: 36px;
+                  height: 36px;
+                }
+              }
+
+              .icon-no {
+                position: absolute;
+                top: 50px;
+                left: 50px;
+                width: 36px;
+                height: 36px;
+                background: #ff8822;
+                border-radius: 50%;
+                text-align: center;
+                vertical-align: middle;
+
+                img {
+                  width: 36px;
+                  height: 36px;
+                }
+              }
+            }
+
+            .solid {
+              // height: 100%;
+              height: calc(100%);
+              border-left: 4px solid #eee;
+              position: absolute;
+              top: 80px;
+              left: 40px;
+            }
+
+            .dashed {
+              // height: 100%;
+              height: calc(100%);
+              border-left: 4px dashed #eee;
+              position: absolute;
+              top: 80px;
+              left: 40px;
+            }
+          }
+
+          .item-right {
+            width: 590px;
+
+            .item-right-flex {
+              // display: flex;
+              // justify-content: space-between;
+              // align-items: center;
+              .block {
+                display: block;
+                // margin-top: 124px;
+              }
+
+              .title2 {
+                display: inline-block;
+              }
+
+              .title2Desc {
+                display: inline-block;
+                color: #2ea222;
+                margin-left: 10px;
+              }
+
+              .title2Desc-ing {
+                display: inline-block;
+                color: #ff8822;
+                margin-left: 10px;
+              }
+
+              .title2Desc-false {
+                color: #f14242;
+                display: inline-block;
+                margin-left: 10px;
+              }
+
+              .user-list {
+                overflow: hidden;
+              }
+
+              .item-right-flex-left-name {
+                margin-top: 20px;
+                float: left;
+                margin-right: 16px;
+                text-align: center;
+
+                .avatar {
+                  display: inline-block;
+                  width: 64px;
+                  height: 64px;
+                  line-height: 64px;
+                  border-radius: 50%;
+                  background-color: #2266ff;
+                  color: #fff;
+                  font-size: 28px;
+                  vertical-align: middle;
+                  text-align: center;
+                  // margin-left: 8px;
+                }
+
+                .avatar-name {
+                  display: block;
+                }
+              }
+
+              .examine {
+                p {
+                  margin: 6px 0;
+                  font-size: 12px;
+                }
+
+                .examine_img {
+                  // display: flex;
+                  // flex-wrap: wrap;
+                  // justify-content: space-between;
+                  // float: left;
+                  // img {
+                  //   width: 134px;
+                  //   height: 136px;
+                  //   margin-right: 8px;
+                  // }
+                  // ::v-deep.AiImage {
+                  //   ::v-deep.u-image__image {
+                  //     width: 60px !important;
+                  //     height: 60px;
+                  //   }
+                  // }
+                }
+              }
+
+              .examine_docx1 {
+                .docx {
+                  display: flex;
+                  justify-content: space-between;
+                  width: 556px;
+                  padding: 16px;
+                  background-color: #ddd;
+                  margin: 6px 0;
+
+                  .docx-name {
+                    width: 440px;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                  }
+                }
+              }
+            }
+
+            .time-info {
+              display: flex;
+              justify-content: space-between;
+
+              span {
+                color: #999;
+                font-size: 28px;
+              }
+            }
+          }
+        }
+
+        .step-item:first-child {
+          .item-right {
+            .item-right-flex {
+              .block {
+                margin-top: 0 !important;
+              }
+            }
+          }
+        }
+
+        .step-item:last-child {
+          .dashed {
+            border-left: 0 !important;
+          }
+
+          .solid {
+            border-left: 0 !important;
+          }
+        }
+      }
+    }
+
+    // 抄送人头像
+    .recipients {
+      // display: flex;
+      // justify-content: space-between;
+      // align-items: center;
+      margin: 16px 0 0 120px;
+
+      .recipients_content {
+        // display: inline-block;
+        // width: 64px;
+        // height: 150px;
+        margin-left: 32px;
+
+        .name_ava {
+          display: inline-block;
+          width: 120px;
+          // text-align: center;
+          margin-top: 5px;
+
+          .avatar {
+            display: inline-block;
+            width: 64px;
+            height: 64px;
+            line-height: 64px;
+            border-radius: 50%;
+            background-color: #2266ff;
+            color: #fff;
+            font-size: 28px;
+            vertical-align: middle;
+            text-align: center;
+            // margin-left: 8px;
+          }
+
+          .recipients_name {
+            // display: inline;
+            width: 100px;
+            height: 34px;
+            line-height: 34px;
+            // text-align: center;
+            // background-color: pink;
+            margin-top: 8px;
+          }
+        }
+      }
+
+      // .recipients_content:first-child {
+      //   margin-left: 0;
+      // }
+    }
+  }
+}
+
+.reject_agree {
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  line-height: 112px;
+  text-align: center;
+  border-top: 1px solid #ddd;
+  z-index: 999;
+  background: #fff;
+
+  .reject {
+    background-color: #fff;
+    width: 50%;
+    color: red;
+  }
+
+  .agree {
+    height: 112px;
+    width: 50%;
+    background-color: #1365dd;
+    color: #fff;
+  }
+}
+</style>
diff --git a/src/components/AppListPage/AppListPage.vue b/src/components/AppListPage/AppListPage.vue
new file mode 100644
index 00000000..d0ecd654
--- /dev/null
+++ b/src/components/AppListPage/AppListPage.vue
@@ -0,0 +1,86 @@
+<template>
+  <section class="AppListPage">
+    <div class="content">
+      <div class="title">{{label}}</div>
+      <div class="app-list">
+        <div class="item" v-for="(item, index) in appList" :key="index" @click="linkTo(item.url)">
+          <div class="icon" :style="`backgroundImage: url(${item.icon});`"></div>
+          <p>{{item.name}}</p>
+        </div>
+      </div>
+    </div>  
+    
+  </section>
+</template>
+
+<script>
+
+export default {
+  name: "AppListPage",
+  props: {
+    label: String,
+    appList: Array,
+  },
+  methods: {
+    linkTo(url) {
+      console.log(url)
+      uni.navigateTo({url})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AppListPage {
+  padding-top: 20px;
+  .content{
+    margin: 0 20px 20px;
+    width: calc(100% - 40px);
+    background: #FFF;
+    border-radius: 16px;
+    .title{
+      line-height: 70px;
+      border-bottom: 1px solid #eee;
+      padding-left: 20px;
+      font-size: 26px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #999;
+    }
+    .app-list{
+      overflow: hidden;
+      .item{
+        text-align: center;
+        padding-bottom: 38px;
+        border-right: 1px solid #eee;
+        border-top: 1px solid #eee;
+        width: calc(33% - 1px);
+        float: left;
+        .icon{
+          display: inline-block;
+          width: 58px;
+          height: 58px;
+          margin: 40px 0 18px 0;
+          background-size: 100% 100%;
+          text-align: center;
+        }
+        p{
+          font-size: 28px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #3D434A;
+          line-height: 40px;
+        }
+      }
+      .item:nth-of-type(3n) {
+        border-right: 0;
+      }
+      .item:nth-child(1), 
+      .item:nth-child(2),
+      .item:nth-child(3) {
+        border-top: 0;
+      }
+    }
+  }
+}
+</style>