功德银行

src/project/fengdu/AppNewFarmerBank/AppNewFarmerBank.vue

@@ -1,25 +1,72 @@
 <template>
   <div class="AppNewFarmerBank">
-    <AiEmpty img='https://cdn.cunwuyun.cn/fengdu/mdpi_img-jianshezhong.png' :description="`丰收号 内容建设中…`" class="emptyWrap"></AiEmpty>
+    <div class="swiper-content">
+      <img src="https://cdn.cunwuyun.cn/fengdu/img-gongdeyinhang.png" alt="">
+    </div>
+    <div class="welcome">
+      <div class="welcome-user">
+        <span class="name">汪周文</span>，欢迎进入新华街社区！
+      </div>
+      <div class="signin">签到</div>
+    </div>
+    <div class="card-list">
+      <div class="jfsq">
+        <p>积分申请</p>
+        <h4>好事自荐得积分</h4>
+      </div>
+      <div class="jsrw">
+        <p>积分任务</p>
+        <h4>完成任务得积分</h4>
+      </div>
+      <div class="jfph">
+        <p>积分排行</p>
+        <h4>社区荣誉榜</h4>
+      </div>
+      <div class="jfsc">
+        <p>积分商城</p>
+        <h4>兑换得好物</h4>
+      </div>
+    </div>
+    <div class="handpick">
+      <div class="title">精选动态</div>
+      <div class="list">
+        <div class="top">
+          <div class="left">百年征和波澜壮阔，百年初心历争议弥坚。7月1日上午，庆祝中国共产党成立100周年…</div>
+          <div class="right">
+            <img src="https://cdn.cunwuyun.cn/wxmp/fengdu/zan-active.png" alt="">
+            <span>99+</span>
+          </div>
+        </div>
+        <div class="bottom">
+          <img src="https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png" alt="">
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   name: "AppNewFarmerBank",
-  appName: "丰收银行",
+  appName: "功德银行",
   data() { 
     return {
-      
+
     }
   },
   methods: {
+    getList(e) {
+      // console.log(e);
+    },
+    handleBannerClick() {
 
+    }
   },
   onShow() {
     uni.setNavigationBarTitle({
-      title: '建设中'
+      title: '功德银行'
     });
+    this.getList()
   },
 }
 </script>
@@ -27,11 +74,138 @@ export default {
 <style lang="scss" scoped>
 .AppNewFarmerBank {
   
-  ::v-deep .emptyWrap .emptyImg {
-    width: 442px;
-    height: 312px;
+  .swiper-content {
+    width: 100%;
+    height: 300px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
   }
 
+  .welcome {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 120px;
+    padding: 0 32px;
+    box-sizing: border-box;
+    background: #FFF;
+    .signin {
+      width: 104px;
+      height: 52px;
+      line-height: 52px;
+      border: 2px solid #2D7DFF;
+      border-radius: 40px;
+      color: #2D7DFF;
+      text-align: center;
+      font-size: 22px;
+      font-weight: 400;
+    }
+    .welcome-user {
+      width: calc(100% - 60px);
+      font-size: 30px;
+      font-weight: 400;
+      font-family: "PingFang SC";
+      .name {
+        color: #2D7DFF;
+        font-weight: 500;
+      }
+    }
+  }
+
+  .card-list {
+    background: #FFF;
+    padding: 0 32px;
+    display: flex;
+    flex-wrap: wrap;
+    .jfsq,
+    .jsrw,
+    .jfph,
+    .jfsc {
+      width: 328px;
+      height: 144px;
+      margin-bottom: 32px;
+      padding: 28px 32px;
+      box-sizing: border-box;
+      p {
+        font-size: 30px;
+        font-weight: 600;
+      }
+      h4 {
+        font-size: 20px;
+        font-weight: 400;
+        margin-top: 8px;
+      }
+    }
+    
+    .jfsq {
+      background: url('https://cdn.cunwuyun.cn/fengdu/img-jifenshenqing.png') no-repeat;
+      background-size: 100% 100%;
+      color: #DF863E;
+    }
+    .jsrw {
+      background: url('https://cdn.cunwuyun.cn/fengdu/img-jifenrenwu.png') no-repeat;
+      background-size: 100% 100%;
+      color: #2D7DFF;
+    }
+    .jfph {
+      background: url('https://cdn.cunwuyun.cn/fengdu/img-jifenpaihang.png') no-repeat;
+      background-size: 100% 100%;
+      color: #338A77;
+    }
+    .jfsc {
+      background: url('https://cdn.cunwuyun.cn/fengdu/img-jifenshangcheng.png') no-repeat;
+      background-size: 100% 100%;
+      color: #D9606E;
+    }
+    & > div:nth-child(2n+1) {
+      margin-right: 30px;
+    } 
+  }
+
+  .handpick {
+    padding: 0 32px;
+    box-sizing: border-box;
+    .title {
+      font-size: 34px;
+      font-weight: 500;
+      margin: 32px 0;
+    }
+
+    .list {
+      padding: 32px 24px;
+      box-sizing: border-box;
+      background: #FFF;
+      border-radius: 12px;
+      // margin-bottom: 24px;
+      .top {
+        display: flex;
+        justify-content: space-between;
+        .left {
+          width: 562px;
+          overflow:hidden; 
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+        }
+        .right {
+          width: 52px;
+          img {
+            width: 40px;
+            height: 40px;
+          }
+        }
+      }
+      .bottom {
+        img {
+          width: 100%;
+          height: 202px;
+        }
+      }
+    }
+  }
 }
 
 </style>