feat: 移动端首页推荐卡片

jydocs-mobile/src/views/Home.vue

@@ -46,17 +46,24 @@
         <span></span>
         <h5>精选推荐</h5>
       </div>
-      <div class="list-group flex-c-c">
-        <div class="list-item flex-r-c" v-for="item in pageData.new" :key="item.id" @click="goContent(item)">
-          <div class="flex flex-r-c center left">
+      <div class="list-group card-group flex-c-c">
+        <div class="card-item flex-r-c"  v-for="item in pageData.new" :key="item.id" @click="goContent(item)">
+          <div class="mini-img-group">
+            <img :src="item.img" alt="">
             <van-icon :name="'diy-' + item.type" />
+          </div>
+          <div class="flex-c-c">
             <div class="flex">
-              <div class="van-ellipsis">{{item.title}}</div>
+              <div class="title-text van-multi-ellipsis--l2">{{item.title}}</div>
+            </div>
+            <div class="flex-c-c info-text">
+              <span>贡献者: dshasjhd</span>
+              <span>贡献者: dshasjhd | dshasjhd | 200k</span>
+            </div>
+            <div class="money-group flex-r-c center left">
+              <van-icon class="s20" name="diy-iconJianYu" />
+              <span class="red-text">{{item.money}}</span>
             </div>
-          </div>
-          <div class="right-info flex-r-c center right">
-            <van-icon name="diy-iconJianYu" />
-            <span>{{item.money}}</span>
           </div>
         </div>
       </div>
@@ -96,6 +103,7 @@ export default class extends Vue {
       this.pageData = {
         new: [
           {
+            img: require('@/assets/images/bgApp.png'),
             type: 'pdf',
             id: '1',
             title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
@@ -103,24 +111,28 @@ export default class extends Vue {
           },
           {
             type: 'excel',
+            img: require('@/assets/images/bgApp.png'),
             id: '2',
             title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
             money: 200
           },
           {
             type: 'word',
+            img: require('@/assets/images/bgApp.png'),
             id: '3',
             title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
             money: 200
           },
           {
             type: 'ppt',
+            img: require('@/assets/images/bgApp.png'),
             id: '4',
             title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
             money: 200
           },
           {
             type: 'other',
+            img: require('@/assets/images/bgApp.png'),
             id: '5',
             title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
             money: 200
@@ -140,7 +152,12 @@ export default class extends Vue {
   padding-bottom: 40px;
   box-sizing: border-box;
 
-  @include diy-icon('iconJianYu', 24);
+  @include diy-icon('iconJianYu', 16, 16);
+
+  .van-icon-diy-iconJianYu.s20 {
+    width: 20px;
+    height: 20px;
+  }
 
   @include diy-icon('pdf', 24);
   @include diy-icon('word', 24);
@@ -158,8 +175,11 @@ export default class extends Vue {
     .list-group {
       border-radius: 8px;
       background: #FFFFFF;
-      padding: 8px 0;
       box-sizing: border-box;
+      padding: 8px 0;
+      &.card-group {
+        padding-left: 12px;
+      }
       .list-item {
         padding: 6px 12px;
         box-sizing: border-box;
@@ -175,6 +195,62 @@ export default class extends Vue {
           flex-shrink: 0;
         }
       }
+      .card-item {
+        padding: 8px 16px 12px 0;
+        box-sizing: border-box;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        &:nth-last-child(1) {
+          border-bottom-color: transparent;
+          padding-bottom: 8px;
+        }
+        .money-group {
+          margin-top: 8px;
+        }
+        .mini-img-group {
+          flex-shrink: 0;
+          position: relative;
+          border-radius: 4px;
+          border: 1px solid rgba(0, 0, 0, 0.1);
+          width: 100px;
+          height: 124px;
+          margin-right: 12px;
+          overflow: hidden;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+          i {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+          }
+        }
+        .info-text {
+          color: #9B9CA3;
+          font-family: PingFang SC;
+          font-size: 12px;
+          line-height: 18px;
+          letter-spacing: 0px;
+          text-align: left;
+        }
+        .red-text {
+          color: #FB483D;
+          font-family: PingFang SC;
+          font-size: 14px;
+          line-height: 20px;
+          letter-spacing: 0px;
+          text-align: left;
+        }
+        .title-text {
+          color: #171826;
+          font-family: PingFang SC;
+          font-weight: bold;
+          font-size: 14px;
+          line-height: 20px;
+          letter-spacing: 0px;
+          text-align: left;
+        }
+      }
     }
 
     .title-group {