四邻信息

project/sanjianxi/AppNeighborLinkage/AppNeighborLinkage.vue

@@ -5,10 +5,39 @@
         <u-search placeholder="请输入需要搜索的内容" v-model="keyword" :show-action="false"></u-search>
       </div>
       <div class="select">
-        <div>全部状态</div>
-        <div>时间选择</div>
+        <div class="item" @click="typeSelect">
+          <span>全部状态</span>
+          <u-icon name="arrow-down-fill" color="#666666" size="28"></u-icon>
+          <!-- <AiSelect class="down" v-model="type" dict="yesOrNo"/> -->
+        </div>
+        
+        <div class="item" @click="timeSelect">
+          <span>时间选择</span>
+          <u-icon name="arrow-down-fill" color="#666666" size="28"></u-icon>
+        </div>
+        <u-picker v-model="show" mode="time"></u-picker>
       </div>
     </div>
+    
+    <div class="section">
+      <div class="card" @click="$linkTo('./neighborDetail')">
+        <div class="info">
+          <p>帮助赵顺伟咨询户口迁移问题帮助赵顺伟咨询</p>
+          <div><span>事件日期</span><span>2022-04-15</span></div>
+          <div><span>四邻对象</span><span>李白</span></div>
+        </div>
+        <div class="status">
+          <span></span><span>待审核</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- <AiEmpty description="暂无数据" class="emptyWrap" v-else /> -->
+
+    <div class="btn">
+      <div class="myInfo" @click="$linkTo('./myNeighborInfo')">我的四邻信息</div>
+      <div class="addBtn" @click="addRecord">添加联动记录</div>
+    </div>
   </div>
 </template>
 
@@ -19,12 +48,20 @@ export default {
   data() {
     return {
       keyword:'',
+      type: '',
+      time: '',
+      show: false,
     }
   },
-  onShow() {},
+  onShow() {
+    this.$dict.load('yesOrNo')
+  },
   methods: {
-    tabClick(index) {
-      this.tabIndex = index
+    typeSelect() {
+     
+    },
+    timeSelect() {
+      this.show = true;
     },
   }
 }
@@ -33,6 +70,10 @@ export default {
 <style lang="scss" scoped>
 .AppNeighborLinkage {
   .header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
     .search {
       box-sizing: border-box;
       padding: 24px 32px;
@@ -40,7 +81,66 @@ export default {
       height: 112px;
     }
     .select {
+      display: flex;
       height: 112px;
+      line-height: 112px;
+      background: #FFF;
+      
+      .item {
+        flex: 1;
+        text-align: center;
+      }
+    }
+  }
+  .section {
+    padding: 244px 32px 140px 32px;
+    box-sizing: border-box;
+    .card {
+      background: #FFF;
+      box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.04);
+      border-radius: 16px;
+      .info {
+        padding: 20px 30px 30px;
+        box-sizing: border-box;
+        border-bottom: 1px solid #DDDDDD;
+      }
+      .status {
+        padding: 32px 32px;
+        span:first-child {
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background: #FF883C;
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+  .btn {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 120px;
+    padding: 16px 32px;
+    box-sizing: border-box;
+    display: flex;
+    .myInfo,
+    .addBtn {
+      flex: 1;
+      height: 88px;
+      line-height: 88px;
+      text-align: center;
+      color: #FFF;
+      background: #4181FF;
+      border-radius: 16px;
+    }
+    .myInfo {
+      margin-right: 20px;
+      color: #A0C0FF;
+      background: #FFF;
+      border: 1px solid #A0C0FF;
     }
   }
 }