diff --git a/src/apps/AppEpidemicSituation/ErrorDetail.vue b/src/apps/AppEpidemicSituation/ErrorDetail.vue
new file mode 100644
index 00000000..6fea9aba
--- /dev/null
+++ b/src/apps/AppEpidemicSituation/ErrorDetail.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="ErrorDetail">ErrorDetail</div>
+</template>
+
+<script>
+export default {
+  name: 'ErrorDetail',
+  components: {},
+  props: {},
+  data() {
+    return {}
+  },
+  computed: {},
+  watch: {},
+  onLoad() {},
+  onShow() {},
+  methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+.ErrorDetail {
+  height: 100%;
+}
+</style>
diff --git a/src/apps/AppEpidemicSituation/HealthDetail.vue b/src/apps/AppEpidemicSituation/HealthDetail.vue
index 60be8926..46e5bdc1 100644
--- a/src/apps/AppEpidemicSituation/HealthDetail.vue
+++ b/src/apps/AppEpidemicSituation/HealthDetail.vue
@@ -1,5 +1,59 @@
 <template>
-  <div class="HealthDetail">HealthDetail</div>
+  <div class="HealthDetail">
+    <div class="top" @click="toUserDetail">
+      <div class="templates">
+        <!-- <img :src="" alt=""  v-if='item.avatar'/> -->
+        <img src="./components/img/user-img.png" alt="" />
+
+        <div class="rightCont">
+          <div class="rightContLeft">
+            <div class="nameLeft">
+              <div class="nameTop">
+                <div class="names">李轶</div>
+                <div class="types">异常</div>
+                <div class="nucleate">核酸到期</div>
+              </div>
+
+              <div class="nameBottom">
+                <span>上报第</span>
+                <span class="num">3</span>
+                <span>天</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="rightContRight">
+            <img src="./components/img/phone2@.png" alt="" />
+            <span class="call">拨打电话</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="middle">
+      <div class="record">异常情况记录</div>
+
+      <template>
+        <!-- v-if="data.length" -->
+        <div class="templatess" v-for="(item, i) in 12" :key="i" @click="goHealthDetail()">
+          <div class="left">
+            <div class="recordType recordType1">正常</div>
+            <!-- <div class="recordType recordType2">异常</div> -->
+            <div class="tag">核酸到期</div>
+          </div>
+
+          <div class="right">
+            <div class="times">2022-01-10</div>
+            <u-icon name="arrow-right" color="#CCCCCC"></u-icon>
+          </div>
+        </div>
+      </template>
+
+      <!-- <AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty> -->
+    </div>
+
+    <div class="fixedBtn" @click="toErr">异常情况处理</div>
+  </div>
 </template>
 
 <script>
@@ -8,18 +62,164 @@ export default {
   components: {},
   props: {},
   data() {
-    return {}
+    return {
+      data: [],
+    }
   },
   computed: {},
   watch: {},
   onLoad() {},
   onShow() {},
-  methods: {},
+  methods: {
+    toUserDetail() {
+      uni.navigateTo({
+        url: `./ErrorDetail`,
+      })
+    },
+
+    toErr() {
+      uni.navigateTo({
+        url: `./ErrorDetail`,
+      })
+    },
+  },
 }
 </script>
 
 <style scoped lang="scss">
 .HealthDetail {
-  height: 100%;
+  padding-bottom: 120px;
+  background: #f5f5f5;
+  .top {
+    .templates {
+      display: flex;
+      align-items: center;
+      padding: 32px;
+      box-shadow: inset 0px -1px 0px 0px #dddddd;
+      background: #fff;
+      img {
+        width: 128px;
+        height: 128px;
+        // border-radius: 50%;
+        // border: 1px solid #cccccc;
+      }
+      .rightCont {
+        display: flex;
+        justify-content: space-between;
+        margin-left: 32px;
+        width: 100%;
+        .rightContLeft {
+          // display: flex;
+          // justify-content: space-between;
+          // align-items: center;
+          // width: 100%;
+          .nameLeft {
+            .nameTop {
+              display: flex;
+              .names {
+                font-size: 32px;
+                font-weight: 500;
+                color: #333333;
+              }
+              .types {
+                margin-left: 16px;
+                padding: 4px 16px 8px 16px;
+                background: #faeceb;
+                border-radius: 20px;
+                font-size: 24px;
+                color: #cd413a;
+              }
+              .nucleate {
+                margin-left: 8px;
+                padding: 4px 16px 8px 16px;
+                background: #fef5e8;
+                border-radius: 20px;
+                font-size: 24px;
+                color: #f5a319;
+              }
+            }
+            .nameBottom {
+              margin-top: 12px;
+              font-size: 28px;
+              color: #999999;
+              .num {
+                color: #135ab8;
+              }
+            }
+          }
+        }
+
+        .rightContRight {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          width: 25%;
+          img {
+            width: 64px;
+            height: 64px;
+          }
+          .call {
+            font-size: 24px;
+            color: #3d94fb;
+          }
+        }
+      }
+    }
+  }
+
+  .middle {
+    margin-top: 16px;
+    background: #fff;
+    .record {
+      padding: 26px 0 26px 32px;
+      box-shadow: inset 0px -1px 0px 0px #dddddd;
+    }
+    .templatess {
+      display: flex;
+      justify-content: space-between;
+      padding: 28px 32px;
+      box-shadow: inset 0px -1px 0px 0px #dddddd;
+      .left,
+      .right {
+        display: flex;
+        .recordType {
+          font-size: 28px;
+          font-weight: 500;
+        }
+        .recordType1 {
+          color: #5aad6a;
+        }
+        .recordType2 {
+          color: #cd413a;
+        }
+        .tag {
+          margin-left: 16px;
+          background: #fef5e8;
+          border-radius: 20px;
+
+          font-size: 24px;
+          color: #f5a319;
+          padding: 4px 16px 2px 16px;
+        }
+      }
+    }
+    .emptyWrap {
+      background: #f5f5f5;
+      margin-top: 0 !important;
+    }
+  }
+
+  .fixedBtn {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    padding: 34px 0;
+    text-align: center;
+    background: #1365dd;
+    box-sizing: border-box;
+    font-size: 32px;
+    font-weight: 500;
+    color: #ffffff;
+  }
 }
 </style>
diff --git a/src/apps/AppEpidemicSituation/UserDetail.vue b/src/apps/AppEpidemicSituation/UserDetail.vue
new file mode 100644
index 00000000..b08a6598
--- /dev/null
+++ b/src/apps/AppEpidemicSituation/UserDetail.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="UserDetail">UserDetail</div>
+</template>
+
+<script>
+export default {
+  name: 'UserDetail',
+  components: {},
+  props: {},
+  data() {
+    return {}
+  },
+  computed: {},
+  watch: {},
+  onLoad() {},
+  onShow() {},
+  methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+.UserDetail {
+  height: 100%;
+}
+</style>
diff --git a/src/apps/AppEpidemicSituation/components/img/phone2@.png b/src/apps/AppEpidemicSituation/components/img/phone2@.png
new file mode 100644
index 00000000..0cc0c1ca
Binary files /dev/null and b/src/apps/AppEpidemicSituation/components/img/phone2@.png differ