精选动态

src/project/fengdu/AppNewFarmerBank/AppNewFarmerBank.vue

@@ -38,8 +38,8 @@
           <u-icon name="arrow-right" color="#687DA6" size="28"></u-icon>
         </div>
       </div>
-      <div class="list" @click="toPages('内容建设中...')" v-if="list.length">
+      <div class="list" v-if="list.length">
-        <div v-for="(item,index) in list" :key="index">
+        <div class="card" v-for="(item,index) in list" :key="index" @click="toPages(`./handpick?id=${item.id}`)">
           <div class="top">
             <div class="left">百年征和波澜壮阔，百年初心历争议弥坚。7月1日上午，庆祝中国共产党成立100周年…</div>
             <div class="right">
@@ -52,7 +52,6 @@
             <img src="https://cdn.cunwuyun.cn/fengdu/img-jifenlist.png" alt="">
           </div>
         </div>
-        
       </div>
       <!-- <AiEmpty :description="`暂无数据`" class="emptyWrap" v-else/> -->
     </div>
@@ -134,7 +133,8 @@ export default {
 
 <style lang="scss" scoped>
 .AppNewFarmerBank {
-  
+  padding-bottom: 20px;
+  box-sizing: border-box;
   .swiper-content {
     width: 100%;
     height: 332px;
@@ -251,40 +251,42 @@ export default {
     }
 
     .list {
-      padding: 32px 24px;
+      .card {
-      box-sizing: border-box;
+        margin-bottom: 24px;
-      background: #FFF;
+        padding: 32px 24px;
-      border-radius: 12px;
+        box-sizing: border-box;
-      // margin-bottom: 24px;
+        background: #FFF;
-      .top {
+        border-radius: 12px;
-        display: flex;
+        .top {
-        justify-content: space-between;
+          display: flex;
-        .left {
+          justify-content: space-between;
-          width: 562px;
+          .left {
-          overflow:hidden; 
+            width: 562px;
-          text-overflow: ellipsis;
+            overflow:hidden; 
-          display: -webkit-box;
+            text-overflow: ellipsis;
-          -webkit-box-orient: vertical;
+            display: -webkit-box;
-          -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+          }
+          .right {
+            width: 52px;
+            text-align: center;
+            img {
+              width: 40px;
+              height: 40px;
+            }
+            span {
+              font-size: 28px;
+              font-weight: 400;
+              color: #687DA6;
+            }
+          }
         }
-        .right {
+        .bottom {
-          width: 52px;
-          text-align: center;
           img {
-            width: 40px;
+            width: 100%;
-            height: 40px;
+            height: 202px;
           }
-          span {
-            font-size: 28px;
-            font-weight: 400;
-            color: #687DA6;
-          }
-        }
-      }
-      .bottom {
-        img {
-          width: 100%;
-          height: 202px;
         }
       }
     }