小程序：收藏商品

htmldev/wxMini/components/goods-item/index.wxml

@@ -21,7 +21,7 @@
   </view>
   <view class="key-words-list">
     <view
-      class="list"
+      class="key-words"
       wx:for="{{3}}"
       wx:key="item">
       <image class="label" src=""></image>

htmldev/wxMini/components/goods-item/index.wxss

@@ -101,20 +101,20 @@
   border-top: 2rpx solid rgba(248, 248, 249, 1);
 }
 
-.key-words-list .list {
+.key-words-list .key-words {
   display: flex;
   align-items: center;
   margin-top: 10rpx;
   margin-left: 12rpx;
 }
 
-.key-words-list .list:nth-of-type(2n + 1) {
+.key-words-list .key-words:nth-of-type(2n + 1) {
   margin-left: 0;
 }
 
 .key-words-list .label {
   width: 12rpx;
-  height: 16rpx;
+  height: 22rpx;
   background-color: pink;
 }
 
@@ -122,6 +122,7 @@
   width: 125rpx;
   margin-left: 2rpx;
   font-size: 16rpx;
+  line-height: 24rpx;
   color: rgba(128, 128, 128, 1);
   white-space: nowrap;
   overflow: hidden;

htmldev/wxMini/pages/collection/collection.scss

@@ -0,0 +1,155 @@
+.wrapper {
+  padding-top: 20rpx;
+}
+
+.margin-bottom-20 {
+  margin-bottom: 20rpx;
+}
+
+.main {
+  padding: 58rpx 0 220rpx;
+}
+
+.list {
+  display: flex;
+  align-items: center;
+  width: 690rpx;
+  min-height: 278rpx;
+  padding: 20rpx 22rpx 34rpx 28rpx;
+  margin: 0 auto 20rpx;
+  border-radius: 24rpx;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1);
+}
+
+.goods-cover-wrap {
+  width: 224rpx;
+  height: 224rpx;
+  border-radius: 16rpx;
+  overflow: hidden;
+
+  .goods-cover {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: pink;
+  }
+}
+
+.goods-describe {
+  width: calc(100% - 224rpx);
+  padding-left: 24rpx;
+}
+
+.name-wrap {
+  display: flex;
+
+  &.has-tag {
+    .name {
+      max-width: calc(100% - 46rpx);
+    }
+  }
+
+  .name {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    font-size: 32rpx;
+    line-height: 46rpx;
+    color: rgba(31, 51, 73, 1);
+    word-break: break-all;
+    word-wrap: break-word;
+    overflow: hidden;
+  }
+
+  .tag {
+    width: 46rpx;
+    height: 26rpx;
+    margin-top: 10rpx;
+    margin-left: 6rpx;
+    border-radius: 12rpx;
+    background: rgba(255, 76, 44, 1);
+    font-size: 16rpx;
+    line-height: 26rpx;
+    color: rgba(255, 255, 255, 1);
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.price-wrap {
+  display: flex;
+  align-items: flex-end;
+  margin-top: 16rpx;
+
+  .now {
+    display: flex;
+    align-items: center;
+
+    view {
+      font-size: 28rpx;
+      line-height: 32rpx;
+      color: rgba(31, 51, 73, 1);
+    }
+  }
+
+  .old {
+    margin-left: 26rpx;
+    font-size: 20rpx;
+    line-height: 28rpx;
+    color: rgba(31, 51, 73, 0.6);
+    text-decoration: line-through;
+  }
+}
+
+.star-words {
+  display: flex;
+  flex-flow: row wrap;
+  margin-top: 16rpx;
+
+  text {
+    margin-left: 6rpx;
+    font-size: 24rpx;
+    line-height: 32rpx;
+    color: rgba(183, 191, 206, 1);
+  }
+}
+
+.key-words-list {
+  display: flex;
+  flex-flow: row wrap;
+  width: 100%;
+  padding-top: 14rpx;
+  margin-top: 14rpx;
+  border-top: 1rpx solid rgba(183, 191, 206, 1);
+
+  .key-words {
+    display: flex;
+    align-items: center;
+    margin-left: 12rpx;
+    margin-top: 14rpx;
+  }
+
+  .key-words:nth-of-type(2n + 1) {
+    margin-left: 0;
+  }
+
+  .label {
+    width: 12rpx;
+    height: 22rpx;
+    background-color: pink;
+  }
+
+  .value {
+    width: 125rpx;
+    margin-left: 2rpx;
+    font-size: 16rpx;
+    line-height: 24rpx;
+    color: rgba(128, 128, 128, 1);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

htmldev/wxMini/pages/collection/collection.wxml

@@ -1,4 +1,54 @@
-<customer-tab
-  nav="{{nav}}"
-  active="{{active}}"
-  bind:change="handleNav"/>
+<view class="wrapper">
+  <view class="app_page-header-search margin-bottom-20">
+    <view class="app_page-header-search-warp app_width-690">
+      <label for="header-search">
+        <image src=""></image>
+      </label>
+      <input
+        placeholder-class="app_header-search-placeholder"
+        value=""
+        placeholder="搜索信息"></input>
+    </view>
+  </view>
+  <customer-tab
+    nav="{{nav}}"
+    active="{{active}}"
+    bind:change="handleNav"/>
+  <view class="main">
+    <view class="list">
+      <view class="goods-cover-wrap">
+        <image
+          class="goods-cover"
+          mode="widthFix" src=""></image>
+      </view>
+      <view class="goods-describe">
+        <view class="name-wrap has-tag">
+          <view class="name">名字名字名字</view>
+          <view class="tag">预售</view>
+        </view>
+        <view class="price-wrap">
+          <view class="now">
+            <view class="unit">￥</view>
+            <view class="yuan">99999</view>
+            <view class="jiao">.50</view>
+          </view>
+          <view class="old">￥99999.00</view>
+        </view>
+        <view class="star-words">
+          <text
+            wx:for="{{['8斤打底', '9成熟', '货车运输三天内到达']}}"
+            wx:key="index">{{item}}</text>
+        </view>
+        <view class="key-words-list">
+          <view
+            class="key-words"
+            wx:for="{{2}}"
+            wx:key="item">
+            <image class="label" src=""></image>
+            <text class="value">销量高销量高销量高销量高</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>