diff --git a/src/apps/AppHandSnapshot/AppHandSnapshot.vue b/src/apps/AppHandSnapshot/AppHandSnapshot.vue
new file mode 100644
index 00000000..cb62a0ba
--- /dev/null
+++ b/src/apps/AppHandSnapshot/AppHandSnapshot.vue
@@ -0,0 +1,210 @@
+<template>
+  <div class="AppHandSnapshot">
+    <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
+
+    <div class="select-top">
+      <AiSelect @data="(v) => (list = v.map((e) => e.value))" :list="list" placeholder="所属网格"></AiSelect>
+
+      <AiSelect @data="(v) => (list = v.map((e) => e.value))" :list="list" placeholder="办件状态"></AiSelect>
+    </div>
+
+    <template v-if="datas.length > 0">
+      <AiCard v-for="(item, i) in datas" :key="i" @click.native="goDetail(item, 1)">
+        <template #custom>
+          <div class="card-top">
+            <div class="titles">世纪花园南区一号楼前面因没有排水渠道，多世纪花园南区一号楼前面因没有排水渠道，多世纪花园南区一号楼前面因没有排水渠道，多</div>
+
+            <div class="types">
+              <span>事件类型</span>
+              <span class="types-right">矛盾纠纷</span>
+            </div>
+
+            <div class="gards">
+              <span>所属网格</span>
+              <span class="gards-right">04号网格</span>
+            </div>
+          </div>
+
+          <div class="status status0">
+            <span class="icon"></span>
+            <span>待处理</span>
+          </div>
+        </template>
+      </AiCard>
+    </template>
+
+    <AiEmpty v-else></AiEmpty>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppHandSnapshot',
+  appName: '随手拍',
+  components: {},
+  props: {},
+  data() {
+    return {
+      datas: [],
+      tabList: [
+        {
+          name: '全部待办',
+        },
+        {
+          name: '办件历史',
+        },
+      ],
+      list: [
+        {
+          value: '1',
+          label: '江',
+        },
+        {
+          value: '2',
+          label: '湖',
+        },
+      ],
+      currentTabs: 0,
+      current: 0,
+      current: 1,
+      size: 10,
+      pages: 0,
+    }
+  },
+  computed: {
+    loadmore() {
+      return this.pages <= this.current ? 'loading ' : 'nomore'
+    },
+  },
+  watch: {},
+  onLoad() {
+    this.getList()
+  },
+  onShow() {},
+  methods: {
+    getList() {
+      this.$http
+        .post('/app/appvisitvondolence/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.pages = res.data.pages
+          }
+        })
+    },
+
+    goDetail(item) {
+      uni.navigateTo({ url: `./Detail?id=${item.id}` })
+    },
+
+    change(index) {
+      this.currentTabs = index
+      this.getList()
+    },
+  },
+  onReachBottom() {
+    this.current = this.current + 1
+    this.getList()
+  },
+}
+</script>
+
+<style scoped lang="scss">
+uni-page-body {
+  height: 100%;
+}
+.AppHandSnapshot {
+  height: 100%;
+  .select-top {
+    background: #fff;
+    display: flex;
+    justify-content: space-around;
+    .AiSelect {
+      margin: 30px 0;
+    }
+  }
+  ::v-deep .AiCard {
+    background: #f3f6f9;
+    padding: 24px 40px 0 32px;
+    .start {
+      background: #fff;
+      border-radius: 16px;
+      .card-top {
+        padding: 32px;
+        .titles {
+          margin-bottom: 34px;
+          font-size: 32px;
+          font-weight: 500;
+          color: #333333;
+          line-height: 1.4;
+          word-break: break-all;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+        .types,
+        .gards {
+          margin-top: 8px;
+          font-size: 26px;
+          .types-right,
+          .gards-right {
+            margin-left: 32px;
+            color: #333333;
+          }
+        }
+      }
+
+      .status {
+        padding: 32px;
+        border-top: 1px solid #dddddd;
+        .icon {
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          vertical-align: middle;
+          margin-right: 8px;
+        }
+      }
+
+      .status0 {
+        color: #ff883c;
+        .icon {
+          background: #ff883c;
+        }
+      }
+
+      .status1 {
+        color: #1aaaff;
+        .icon {
+          background: #1aaaff;
+        }
+      }
+
+      .status2 {
+        color: #42d784;
+        .icon {
+          background: #42d784;
+        }
+      }
+
+      .status3 {
+        color: #ff4466;
+        .icon {
+          background: #ff4466;
+        }
+      }
+    }
+  }
+  // ::v-deep .AiCard:last-child {
+  //   padding-bottom: 24px;
+  // }
+}
+</style>
diff --git a/src/apps/AppHandSnapshot/Detail.vue b/src/apps/AppHandSnapshot/Detail.vue
new file mode 100644
index 00000000..997db1d1
--- /dev/null
+++ b/src/apps/AppHandSnapshot/Detail.vue
@@ -0,0 +1,441 @@
+<template>
+  <div class="Detail">
+    <div class="header-top">
+      <div class="avatars" v-if="data.name">{{ data.name.substring(data.name.length, data.name.length - 2) }}</div>
+
+      <div class="right">
+        <div class="names">{{ data.name }}的上报</div>
+
+        <div class="times">2021-05-06 13:45</div>
+      </div>
+    </div>
+
+    <div class="header-middle">
+      <div class="titles">世纪花园南区一号楼前面因没有排水渠道，多世纪花园南区一号楼前面因没有排水渠道，多世纪花园南区一号楼前面因没有排水渠道，多</div>
+
+      <span class="status status0">待处理</span>
+
+      <div class="card">
+        <span class="card-left">事件类型</span>
+        <span class="card-right">聚众闹事</span>
+      </div>
+
+      <div class="card">
+        <span class="card-left">所属网格</span>
+        <span class="card-right">聚众闹事</span>
+      </div>
+
+      <div class="card">
+        <span class="card-left">联系方式</span>
+        <span class="card-right">聚众闹事</span>
+      </div>
+
+      <div class="card">
+        <span class="card-left">上报地址</span>
+        <span class="card-right">
+          <span>{{ data.corpId }}</span>
+          <u-icon name="phone-fill" color="#3D94FB"></u-icon>
+        </span>
+      </div>
+
+      <div class="card">
+        <span class="card-left">上报地址</span>
+        <span class="card-right">广东省中关村世纪花园北一组广东省中关村世纪花园北一组</span>
+      </div>
+
+      <div class="card">
+        <span class="card-left">上报来源</span>
+        <span class="card-right">三角湖居民社群 李毅 小程序填报三角湖居民社群 李毅 小程序填报三角湖居民社群 李毅 小程序填报</span>
+      </div>
+
+      <div class="card">
+        <span class="card-left">照片</span>
+      </div>
+
+      <img src="./components/yan.jpg" alt="" v-for="(item, i) in 4" :key="i" />
+    </div>
+
+    <div class="header-bottom">
+      <div class="line"></div>
+
+      <div class="plan">
+        <div class="nav">
+          <span>办理进度</span>
+          <span>(待受理)</span>
+        </div>
+
+        <div class="cards">
+          <div class="cardss">
+            <!-- v-for="(item, index) in data.processNodes" :key="index" -->
+            <div class="cardss-left">
+              <span v-if="data.name">
+                李伟民
+                <!-- {{ data.name.split(',')[0].substring(data.name.split(',')[0].length - 2, data.name.split(',')[0].length) }} -->
+              </span>
+
+              <img src="./components/1.png" class="avatarIcon" alt="" />
+            </div>
+
+            <div class="cardss-right">
+              <div class="cardsss-right-left">
+                <div class="cardssss-right-left-top">
+                  <span>李维民</span>
+                  <span style="margin-left: 26px">
+                    111
+                    <!-- {{ item.status == 0 ? '驳回' : '通过' }} -->
+                  </span>
+                </div>
+
+                <!-- <div class="cardssss-right-left-bottom" v-if="item.auditName.split(',').length > 3">
+                  <span v-for="(items, i) in item.auditName.split(',')" :key="i" v-if="i < 3" style="margin-left: 5px">
+                    <span> {{ items }} </span>
+                  </span>
+                  <span>...</span>
+                </div>
+                <div class="cardssss-right-left-bottom" v-else>{{ item.auditName }}</div> -->
+              </div>
+
+              <div class="cardees-right-right" v-if="">2021-12-17</div>
+            </div>
+
+            <div class="lines"></div>
+          </div>
+
+          <div class="cardes-msg-top">1111</div>
+
+          <div class="imgs">
+            <img src="./components/yan.jpg" alt="" v-for="(e, i) in 4" :key="i" />
+          </div>
+        </div>
+
+        <div class="cards">
+          <div class="cardss">
+            <!-- v-for="(item, index) in data.processNodes" :key="index" -->
+            <div class="cardss-left">
+              <span v-if="data.name">
+                李伟民
+                <!-- {{ data.name.split(',')[0].substring(data.name.split(',')[0].length - 2, data.name.split(',')[0].length) }} -->
+              </span>
+
+              <img src="./components/1.png" class="avatarIcon" alt="" />
+            </div>
+
+            <div class="cardss-right">
+              <div class="cardsss-right-left">
+                <div class="cardssss-right-left-top">
+                  <span>李维民</span>
+                  <span style="margin-left: 26px">
+                    111
+                    <!-- {{ item.status == 0 ? '驳回' : '通过' }} -->
+                  </span>
+                </div>
+
+                <!-- <div class="cardssss-right-left-bottom" v-if="item.auditName.split(',').length > 3">
+                  <span v-for="(items, i) in item.auditName.split(',')" :key="i" v-if="i < 3" style="margin-left: 5px">
+                    <span> {{ items }} </span>
+                  </span>
+                  <span>...</span>
+                </div>
+                <div class="cardssss-right-left-bottom" v-else>{{ item.auditName }}</div> -->
+              </div>
+
+              <div class="cardees-right-right" v-if="">2021-12-17</div>
+            </div>
+
+            <div class="lines"></div>
+          </div>
+
+          <div class="cardes-msg-top">1111</div>
+
+          <div class="imgs">
+            <img src="./components/yan.jpg" alt="" v-for="(e, i) in 4" :key="i" />
+          </div>
+        </div>
+
+        <div class="cards">
+          <div class="cardss">
+            <!-- v-for="(item, index) in data.processNodes" :key="index" -->
+            <div class="cardss-left">
+              <span v-if="data.name">
+                李伟民
+                <!-- {{ data.name.split(',')[0].substring(data.name.split(',')[0].length - 2, data.name.split(',')[0].length) }} -->
+              </span>
+
+              <img src="./components/1.png" class="avatarIcon" alt="" />
+            </div>
+
+            <div class="cardss-right">
+              <div class="cardsss-right-left">
+                <div class="cardssss-right-left-top">
+                  <span>李维民</span>
+                  <span style="margin-left: 26px">
+                    111
+                    <!-- {{ item.status == 0 ? '驳回' : '通过' }} -->
+                  </span>
+                </div>
+
+                <!-- <div class="cardssss-right-left-bottom" v-if="item.auditName.split(',').length > 3">
+                  <span v-for="(items, i) in item.auditName.split(',')" :key="i" v-if="i < 3" style="margin-left: 5px">
+                    <span> {{ items }} </span>
+                  </span>
+                  <span>...</span>
+                </div>
+                <div class="cardssss-right-left-bottom" v-else>{{ item.auditName }}</div> -->
+              </div>
+
+              <div class="cardees-right-right" v-if="">2021-12-17</div>
+            </div>
+
+            <div class="lines"></div>
+          </div>
+
+          <div class="cardes-msg-top">1111</div>
+
+          <div class="imgs">
+            <img src="./components/yan.jpg" alt="" v-for="(e, i) in 4" :key="i" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Detail',
+  components: {},
+  props: {},
+  data() {
+    return {
+      data: {},
+      id: '',
+    }
+  },
+  computed: {},
+  watch: {},
+  onLoad(o) {
+    this.id = o.id
+    this.getDetail()
+  },
+  onShow() {},
+  methods: {
+    getDetail() {
+      this.$http.post(`/app/appvisitvondolence/queryDetailById?id=${this.id}`).then((res) => {
+        if (res?.data) {
+          this.data = res.data
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+uni-page-body {
+  height: 100%;
+}
+.Detail {
+  height: 100%;
+  background: #fff;
+
+  .header-top {
+    display: flex;
+    margin: 26px 0 14px 0;
+    padding: 0 32px;
+    .avatars {
+      width: 80px;
+      height: 80px;
+      line-height: 80px;
+      background: #4e8eee;
+      border-radius: 50%;
+      color: #fff;
+      text-align: center;
+      font-size: 28px;
+      font-weight: 500;
+      margin-right: 16px;
+    }
+    .right {
+      .names {
+        font-size: 32px;
+        font-weight: 500;
+      }
+      .times {
+        margin-top: 10px;
+        font-size: 28px;
+        color: #999999;
+      }
+    }
+  }
+
+  .header-middle {
+    padding: 0 32px;
+    .titles {
+      margin: 32px 0;
+      line-height: 1.4;
+      word-break: break-all;
+      font-size: 40px;
+      font-weight: 600;
+    }
+    .status {
+      display: inline-block;
+      margin-bottom: 14px;
+      padding: 4px 8px;
+      font-size: 26px;
+      color: #ffffff;
+      border-radius: 8px;
+    }
+    .status0 {
+      background: #ff883c;
+    }
+
+    .status1 {
+      background: #1aaaff;
+    }
+
+    .status2 {
+      background: #42d784;
+    }
+
+    .status3 {
+      background: #ff4466;
+    }
+
+    .card {
+      display: flex;
+      justify-content: space-between;
+      padding: 34px 0;
+      border-bottom: 1px solid #ddd;
+      .card-left {
+        width: 46%;
+        font-size: 32px;
+        color: #999999;
+      }
+      .card-right {
+        font-size: 32px;
+        .u-icon {
+          margin-left: 8px;
+        }
+      }
+    }
+
+    .card:last-child {
+      border-bottom: none;
+    }
+
+    img {
+      width: 225px;
+      height: 226px;
+      margin-right: 8px;
+    }
+    img:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+
+  .header-bottom {
+    .line {
+      height: 16px;
+      background: #f3f6f9;
+    }
+
+    .plan {
+      padding: 0 32px;
+      .nav {
+        padding: 26px 0;
+      }
+
+      .cards {
+        position: relative;
+        padding-bottom: 80px;
+        .cardss {
+          display: flex;
+          justify-content: space-between;
+
+          .cardss-left {
+            position: relative;
+            width: 80px;
+            height: 80px;
+            text-align: center;
+            line-height: 80px;
+            color: #fff;
+            background: #197df0;
+            border: 1px solid #dddddd;
+            border-radius: 50%;
+            font-size: 28px;
+            z-index: 9;
+            // img {
+            //   width: 100%;
+            //   height: 100%;
+            //   border-radius: 50%;
+            // }
+            .avatarIcon {
+              position: absolute;
+              bottom: 0;
+              right: 0;
+              width: 38px;
+              height: 38px;
+            }
+          }
+          .cardss-right {
+            width: calc(100% - 110px);
+            display: flex;
+            justify-content: space-between;
+            .cardsss-right-left {
+              .cardssss-right-left-top {
+                width: 300px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                font-size: 32px;
+              }
+              .cardssss-right-left-bottom {
+                margin-top: 10px;
+                font-size: 28px;
+                color: #666666;
+              }
+            }
+            .cardees-right-right {
+              font-size: 28px;
+              color: #999999;
+            }
+          }
+          .lines {
+            position: absolute;
+            top: 0;
+            left: 40px;
+            width: 4px;
+            height: 100%;
+            background: #eeeeee;
+          }
+        }
+        .cardes-msg-top {
+          font-size: 28px;
+          color: #343d65;
+          margin-top: 10px;
+          margin-left: 110px;
+        }
+
+        .imgs {
+          margin-top: 10px;
+          margin-left: 110px;
+          img {
+            width: 136px;
+            height: 136px;
+            border-radius: 4px;
+            margin-right: 12px;
+          }
+          img:nth-child(4n) {
+            margin-right: 0;
+          }
+        }
+      }
+      .cards:last-child {
+        .lines {
+          width: 0;
+          height: 0;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/apps/AppHandSnapshot/components/1.png b/src/apps/AppHandSnapshot/components/1.png
new file mode 100644
index 00000000..663b9263
Binary files /dev/null and b/src/apps/AppHandSnapshot/components/1.png differ
diff --git a/src/apps/AppHandSnapshot/components/yan.jpg b/src/apps/AppHandSnapshot/components/yan.jpg
new file mode 100644
index 00000000..bf6a5a2c
Binary files /dev/null and b/src/apps/AppHandSnapshot/components/yan.jpg differ