疫情防控

src/apps/AppEpidemicSituation/ErrorDetail.vue

@@ -1,19 +1,57 @@
 <template>
-  <div class="ErrorDetail">ErrorDetail</div>
+  <div class="ErrorDetail">
+    <div class="header">
+      <div class="name">李维民<span>15220171897</span><img :src="$cdn + 'common/phone.png'" alt="" @click="callPhone('112')" class="phone-icon" ></div>
+      <p>身份证号：</p>
+      <p class="mar-b8" style="color:#333;">4223241900****0014</p>
+      <p>异常情况：</p>
+      <p style="color:#FF4466;">体温38℃有咳嗽 , 未去高风险区域</p>
+    </div>
+    <div class="info">
+      <div class="title">异常情况记录</div>
+      <div class="error-list">
+        <div class="item">
+          <p>于2022年1月7日早上10:00自测体温38℃，家人也有咳嗽情况，初步诊断为上呼吸道感染</p>
+          <div>2021-12-06 13:23<span>网格员: 李依云</span></div>
+        </div>
+        <div class="item">
+          <p>于2022年1月7日早上10:00自测体温38℃，家人也有咳嗽情况，初步诊断为上呼吸道感染</p>
+          <div>2021-12-06 13:23<span>网格员: 李依云</span></div>
+        </div>
+        <div class="item">
+          <p>于2022年1月7日早上10:00自测体温38℃，家人也有咳嗽情况，初步诊断为上呼吸道感染</p>
+          <div>2021-12-06 13:23<span>网格员: 李依云</span></div>
+        </div>
+      </div>
+    </div>
+    <div class="bg-line"></div>
+    <div class="footer">
+      <div class="add" @click="show=true">新增记录</div>
+      <div class="confirm">解除异常</div>
+    </div>
+    <u-popup v-model="show" mode="bottom">
+      <div class="textarea">
+        <u-input v-model="value" type="textarea" :height="120" :auto-height="true" placeholder="异常情况记录" :clearable="false" />
+        <p>字数0/1000</p>
+      </div>
+      <div class="btn">
+        <span>清空内容</span>
+        <span class="confirm">保存</span>
+      </div>
+    </u-popup>
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'ErrorDetail',
   components: {},
   props: {},
   data() {
-    return {}
+    return {
+      show: false,
+      value: ''
+    }
   },
-  computed: {},
-  watch: {},
-  onLoad() {},
-  onShow() {},
   methods: {},
 }
 </script>
@@ -21,5 +59,146 @@ export default {
 <style scoped lang="scss">
 .ErrorDetail {
   height: 100%;
+  .header{
+    padding: 32px 48px;
+    box-sizing: border-box;
+    background-color: #fff;
+    margin-bottom: 24px;
+    .name{
+      font-size: 36px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333;
+      line-height: 50px;
+      margin-bottom: 16px;
+      span{
+        font-size: 32px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #4181FF;
+        line-height: 44px;
+        margin: 0 20px 0 32px;
+      }
+      img{
+        width: 32px;
+        height: 32px;
+        vertical-align: middle;
+      }
+    }
+    p{
+      font-size: 30px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #999;
+      line-height: 42px;
+      color: #999;
+    }
+    .mar-b8{
+      margin-bottom: 8px;
+    }
+  }
+  .info{
+    padding: 0 32px 32px;
+    background-color: #fff;
+    .title{
+      font-size: 38px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #333;
+      line-height: 116px;
+    }
+    .error-list{
+      .item{
+        width: 100%;
+        background: #F4F7FE;
+        border-radius: 8px;
+        padding: 24px 24px 18px 24px;
+        box-sizing: border-box;
+        margin-bottom: 16px;
+        p{
+          font-size: 28px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #343D65;
+          line-height: 40px;
+          word-break: break-all;
+          margin-bottom: 12px;
+        }
+        div{
+          font-size: 24px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #666;
+          line-height: 34px;
+          span{
+            display: inline-block;
+            margin-left: 32px;
+          }
+        }
+      }
+    }
+  }
+  .footer{
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    background: #fff;
+    display: flex;
+    font-size: 36px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    .add{
+      flex: 1;
+      color: #333;
+    }
+    .confirm{
+      flex: 2;
+      color: #fff;
+      background: #1365DD;
+    }
+    div{
+      text-align: center;
+    }
+  }
+  .bg-line{
+    width: 100%;
+    height: 130px;
+  }
+  .textarea{
+    margin: 32px 32px 24px;
+    width: calc(100% - 64px);
+    padding: 16px;
+    box-sizing: border-box;
+    background: #F7F7F7;
+    border-radius: 8px;
+    p{
+      font-size: 26px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #999;
+      line-height: 36px;
+      text-align: right;
+    }
+  }
+  .btn{
+    padding: 0 32px 24px;
+    height: 64px;
+    display: flex;
+    justify-content: space-between;
+    span{
+      display: inline-block;
+      line-height: 64px;
+      font-size: 26px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #666;
+    }
+    .confirm{
+      width: 144px;
+      text-align: center;
+      background: #1365DD;
+      border-radius: 32px;
+      font-size: 28px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #FFF;
+    }
+  }
 }
 </style>