feat:列表

src/views/goodsList/index.less

@@ -22,6 +22,7 @@
   &-bottom {
     padding-left: 12px;
     padding-right: 12px;
+    padding-bottom: 12px;
     .group-list {
       background-color: @white;
       border-radius: 10px;
@@ -66,16 +67,44 @@
         color: #333333;
       }
     }
+    .cr-list {
+      padding-left: 8px;
+      padding-right: 8px;
+    }
 
-    @{deep} .cr-card {
-      .cr-card__header__thumb {
+    .group-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 12px 0;
+      border-bottom: #d8d8d8 solid 1px;
+      position: relative;
+      &:last-of-type {
+        border-bottom: none;
+      }
+      &-thumb {
+        box-sizing: border-box;
         width: 108px;
         height: 108px;
         background-color: #f7f8f9;
         border-radius: 6px;
         overflow: hidden;
+        position: relative;
+        padding: 3px;
+        margin-right: 8px;
+        .cr-image {
+          width: 100%;
+          height: 100%;
+        }
       }
-      .cr-card__header__tag {
+      &-content {
+        flex: 1;
+        height: 100%;
+      }
+      &-tag {
+        position: absolute;
+        top: 0;
+        left: 0;
         font-size: @font-size-12;
         color: @white;
         width: 45px;
@@ -85,16 +114,62 @@
         background-image: linear-gradient(269deg, #ff5d00 12%, #ff1900 86%);
         border-radius: 6px 0 6px 0;
       }
-      .cr-card__header__content__title {
-        line-height: 22px;
-      }
-      .cr-card__header__content__desc {
-        margin-top: 4px;
+      &-title {
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        line-height: 18px;
       }
-      .group-progress {
+      &-progress {
         width: 163px;
         overflow: hidden;
         border-radius: 5px;
+        margin-top: 4px;
+      }
+      &-already {
+        font-size: @font-size-12;
+        color: #999999;
+        margin-top: 4px;
+        margin-bottom: 7px;
+      }
+      &-price {
+        font-size: @font-size-14;
+        color: #f70d0d;
+        margin-bottom: 4px;
+      }
+      &-delprice {
+        color: #999999;
+        font-size: @font-size-12;
+      }
+      .cr-button {
+        width: 90px;
+        height: 28px;
+        line-height: 28px;
+        border-radius: 15px;
+        position: absolute;
+        bottom: 12px;
+        right: 0;
+      }
+    }
+
+    @{deep} .cr-card {
+      background-color: @white;
+      padding: 12px 0;
+      .cr-card__header__thumb {
+        width: 108px !important;
+        height: 108px !important;
+        overflow: hidden;
+      }
+      .cr-card__header__tag {
+      }
+      .cr-card__header__content__title {
+        line-height: 18px;
+      }
+      .cr-card__header__content__desc {
+        margin-top: 4px;
       }
 
       .group-price-top {

src/views/goodsList/index.vue

@@ -36,14 +36,39 @@
           </div>
         </div>
         <cr-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+          <dl
+            v-for="(item, index) in goodsList"
+            :key="index"
+            :thumb="item.thumbImageUrl || item.imageUrl"
+            class="group-item"
+          >
+            <dt class="group-item-thumb">
+              <cr-image :src="item.thumbImageUrl" />
+              <span class="group-item-tag">3人团</span>
+            </dt>
+            <dd class="group-item-content">
+              <div class="group-item-title">{{ item.goodsName }}</div>
+              <cr-progress
+                class="group-item-progress"
+                stroke-width="5"
+                color="#EC1500"
+                track-color="#F7F8F9"
+                :show-pivot="false"
+                :percentage="handleProgressByStatus(item)"
+              />
+              <div class="group-item-already">已拼2333团</div>
+              <div class="group-item-price">拼团价 ¥ 0</div>
+              <del class="group-item-delprice"> ￥{{ item.activityPrice }} </del>
+              <cr-button shape="circle" type="primary">主要按钮</cr-button>
+            </dd>
+          </dl>
+          <!-- 
           <cr-card
             v-for="(item, index) in goodsList"
             :key="index"
             :thumb="item.thumbImageUrl || item.imageUrl"
             class="group-item"
-            img-height="108"
           >
-            <!-- @click="handleBtnClick(item)" -->
             <template #tag>3人团</template>
             <template #title>{{ item.goodsName }}</template>
             <template #desc>
@@ -57,6 +82,9 @@
               />
             </template>
 
+            <template #priceTop>
+              <div class="group-price-top">已拼2333团</div>
+            </template>
             <template #priceTop>
               <div class="group-price-top">已拼2333团</div>
             </template>
@@ -73,9 +101,7 @@
                 马上参团
               </cr-button>
             </template>
-          </cr-card>
-
-          <!-- <cr-cell v-for="item in list" :key="item" :title="item" /> -->
+          </cr-card> -->
         </cr-list>
       </div>
       <!-- 下方列表展示信息 end -->