HealthDetail

src/apps/AppEpidemicSituation/Health.vue

@@ -48,7 +48,7 @@
         </AiAreaPicker>
       </div>
 
-      <u-search v-model="keyword" :clearabled="true" placeholder="请输入标题" :show-action="false" bg-color="#F5F5F5" search-icon-color="#999" color="#999" height="58" @search="handerSearch" @clear="handerClear"></u-search>
+      <u-search v-model="keyword" :clearabled="true" placeholder="请输入姓名" :show-action="false" bg-color="#F5F5F5" search-icon-color="#999" color="#999" height="58" @search="handerSearch" @clear="handerClear"></u-search>
     </div>
 
     <div class="line2"></div>
@@ -65,9 +65,26 @@
           <img src="./components/img/user-img.png" alt="" />
 
           <div class="rightCont">
-            <div class="rightContLeft">1</div>
+            <div class="rightContLeft">
+              <div class="nameLeft">
+                <div class="nameTop">
+                  <div class="names">李轶</div>
+                  <div class="types">异常</div>
+                  <div class="nucleate">核酸到期</div>
+                </div>
 
-            <u-icon name="arrow-right" color=""></u-icon>
+                <div class="nameBottom">
+                  <span>上报第</span>
+                  <span class="num">3</span>
+                  <span>天</span>
+                </div>
+              </div>
+
+              <!-- <div class="typeRight1">今日已上报</div> -->
+              <div class="typeRight2">今日未上报</div>
+            </div>
+
+            <u-icon name="arrow-right" color="#ccc"></u-icon>
           </div>
         </div>
       </template>
@@ -116,7 +133,11 @@ export default {
   },
   onShow() {},
   methods: {
-    goDetail() {},
+    goDetail() {
+      uni.navigateTo({
+        url: `./HealthDetail`,
+      })
+    },
 
     change(index) {
       // this.data = []
@@ -149,7 +170,6 @@ export default {
   .top {
     display: flex;
     padding: 48px 32px;
-    // background: #fff;
     .topCard {
       display: flex;
       .left {
@@ -179,7 +199,7 @@ export default {
       }
       .line {
         width: 1px;
-        background: black;
+        background: #dddddd;
         margin: 14px 0px;
       }
     }
@@ -220,7 +240,6 @@ export default {
     .templates {
       display: flex;
       align-items: center;
-
       padding: 32px;
       box-shadow: inset 0px -1px 0px 0px #dddddd;
       img {
@@ -230,7 +249,58 @@ export default {
         // 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;
+              }
+            }
+          }
+          .typeRight1 {
+            font-size: 28px;
+            color: #999999;
+          }
+          .typeRight2 {
+            font-size: 28px;
+            color: #f5a319;
+          }
+        }
       }
     }
   }

src/apps/AppEpidemicSituation/HealthDetail.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="HealthDetail">HealthDetail</div>
+</template>
+
+<script>
+export default {
+  name: 'HealthDetail',
+  components: {},
+  props: {},
+  data() {
+    return {}
+  },
+  computed: {},
+  watch: {},
+  onLoad() {},
+  onShow() {},
+  methods: {},
+}
+</script>
+
+<style scoped lang="scss">
+.HealthDetail {
+  height: 100%;
+}
+</style>