随手拍

src/apps/AppHandSnapshot/List.vue

@@ -1,14 +1,20 @@
 <template>
   <div class="list">
-    <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
+    <AiTopFixed>
+      <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">
+        <div class="tab-item">
+          <span class="color-666">所属网格</span>
+          <img src="./components/img/down-icon.png" alt="">
+        </div>
+        <div class="tab-item">
+          <span class="color-666">办件状态</span>
+          <img src="./components/img/down-icon.png" alt="">
+        </div>
+      </div>
+    </AiTopFixed>
 
-    <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">
+    <template>
       <AiCard v-for="(item, i) in datas" :key="i" @click.native="goDetail(item, 1)">
         <template #custom>
           <div class="card-top">
@@ -31,9 +37,9 @@
           </div>
         </template>
       </AiCard>
+      <AiEmpty v-if="!datas.length"></AiEmpty>
     </template>
 
-    <AiEmpty v-else></AiEmpty>
     <div class="pad-b120" v-if="datas.length"></div>
   </div>
 </template>
@@ -128,10 +134,27 @@ uni-page-body {
   .select-top {
     background: #fff;
     display: flex;
-    justify-content: space-around;
-    .AiSelect {
-      margin: 30px 0;
+    padding: 24px 0;
+    .tab-item{
+      flex: 1;
+      text-align: center;
+      line-height: 48px;
+      font-size: 26px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #666;
+      img{
+        width: 32px;
+        height: 32px;
+        margin-left: 8px;
+        vertical-align: middle;
+      }
     }
+    .tab-item:nth-of-type(1) {
+      border-right: 1px solid #eee;
+    }
+  }
+  ::v-deep .AiTopFixed .content{
+    padding: 0;
   }
   ::v-deep .AiCard {
     background: #f3f6f9;