template

src/apps/AppEpidemicSituation/Health.vue

@@ -36,6 +36,8 @@
       </div>
     </div>
 
+    <div class="line1"></div>
+
     <div class="middle">
       <div class="left">
         <AiAreaPicker v-model="areaId" all :areaId="user.areaId" @select="areaSelect" :name.sync="areaName" style="color: #666">
@@ -49,8 +51,23 @@
       <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>
+
     <div class="bottom">
       <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#fff" inactive-color="#333 " active-color="#135AB8 " @change="change"></u-tabs>
+
+      <div class="line3"></div>
+
+      <template>
+        <!-- v-if="data.length" -->
+        <div v-for="(item, i) in 10" :key="i" @click.native="goDetail()" :ref="item.id">
+          <div>1</div>
+
+          <div>2</div>
+        </div>
+      </template>
+
+      <!-- <AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty> -->
     </div>
   </div>
 </template>
@@ -80,6 +97,8 @@ export default {
         },
       ],
       currentTabs: 0,
+
+      data: [],
     }
   },
   computed: {
@@ -92,6 +111,8 @@ export default {
   },
   onShow() {},
   methods: {
+    goDetail() {},
+
     change(index) {
       // this.data = []
       this.areaId = this.user.areaId
@@ -119,11 +140,11 @@ export default {
 <style scoped lang="scss">
 .Health {
   height: 100%;
-  background: #f5f5f5;
+  background: #fff;
   .top {
     display: flex;
     padding: 48px 32px;
-    background: #fff;
+    // background: #fff;
     .topCard {
       display: flex;
       .left {
@@ -159,12 +180,15 @@ export default {
     }
   }
 
+  .line1 {
+    height: 4px;
+    background: #f5f5f5;
+  }
+
   .middle {
     display: flex;
     align-items: center;
     padding: 24px 32px;
-    background: #fff;
-    margin-top: 4px;
     .left {
       width: 40%;
       display: flex;
@@ -177,9 +201,16 @@ export default {
     }
   }
 
+  .line2 {
+    height: 8px;
+    background: #f5f5f5;
+  }
+
   .bottom {
-    margin-top: 8px;
+    .line3 {
-    background: #fff;
+      height: 4px;
+      background: #f5f5f5;
+    }
   }
 }
 </style>