Showing
7 changed files
with
35 additions
and
50 deletions
@@ -36,7 +36,8 @@ | @@ -36,7 +36,8 @@ | ||
36 | "window": { | 36 | "window": { |
37 | "backgroundTextStyle": "light", | 37 | "backgroundTextStyle": "light", |
38 | "navigationBarBackgroundColor": "#fff", | 38 | "navigationBarBackgroundColor": "#fff", |
39 | - "navigationBarTextStyle": "black" | 39 | + "navigationBarTextStyle": "black", |
40 | + "backgroundColor": "#f0f0f0" | ||
40 | }, | 41 | }, |
41 | "tabBar": { | 42 | "tabBar": { |
42 | "borderStyle": "#e0e0e0", | 43 | "borderStyle": "#e0e0e0", |
1 | -/**app.wxss**/ | ||
2 | -/*.container { | ||
3 | - height: 100%; | ||
4 | - display: flex; | ||
5 | - flex-direction: column; | ||
6 | - align-items: flex-start; | ||
7 | - justify-content: space-between; | ||
8 | - padding: 200rpx 0; | ||
9 | - box-sizing: border-box; | ||
10 | -} */ | ||
11 | - | ||
12 | .clearfix:after { | 1 | .clearfix:after { |
13 | content: ''; | 2 | content: ''; |
14 | display: block; | 3 | display: block; |
1 | <wxs src="../../wxs/helper.wxs" module="helper" /> | 1 | <wxs src="../../wxs/helper.wxs" module="helper" /> |
2 | <view class="product-item"> | 2 | <view class="product-item"> |
3 | <image class="item-image" mode="aspectFit" src="{{helper.image(item.default_images, 860, 644)}}"></image> | 3 | <image class="item-image" mode="aspectFit" src="{{helper.image(item.default_images, 860, 644)}}"></image> |
4 | + <view class="item-detail"> | ||
4 | <text class="item-title">{{item.product_name}}</text> | 5 | <text class="item-title">{{item.product_name}}</text> |
5 | <view class="item-price"> | 6 | <view class="item-price"> |
6 | <text class="price1" style="color:{{item.showOriginPrice ? '#d0021b' : '#444444'}}">¥{{item.salePriceStr}}</text> | 7 | <text class="price1" style="color:{{item.showOriginPrice ? '#d0021b' : '#444444'}}">¥{{item.salePriceStr}}</text> |
7 | - <!--<text class="price2">¥{{item.showOriginPrice ? item.originPriceStr : ''}}</text>--> | 8 | + <text class="price2" wx:if="{{item.showOriginPrice}}">¥{{item.originPriceStr}}</text> |
9 | + </view> | ||
8 | </view> | 10 | </view> |
9 | </view> | 11 | </view> |
@@ -4,10 +4,30 @@ | @@ -4,10 +4,30 @@ | ||
4 | margin-top: 65rpx; | 4 | margin-top: 65rpx; |
5 | } | 5 | } |
6 | 6 | ||
7 | +.product-item .item-detail { | ||
8 | + position: relative; | ||
9 | + height: 128rpx; | ||
10 | +} | ||
11 | + | ||
12 | +.product-item .item-price { | ||
13 | + position: absolute; | ||
14 | + bottom: 0; | ||
15 | + font-family: PingFang-SC-Regular; | ||
16 | + font-size: 24rpx; | ||
17 | + color: #444; | ||
18 | + width: 322rpx; | ||
19 | + max-width: 322rpx; | ||
20 | + letter-spacing: 0.28px; | ||
21 | +} | ||
22 | + | ||
23 | +.product-item .item-price .price2 { | ||
24 | + color: #444; | ||
25 | + text-decoration: line-through; | ||
26 | +} | ||
27 | + | ||
7 | .product-item .item-image { | 28 | .product-item .item-image { |
8 | width: 322rpx; | 29 | width: 322rpx; |
9 | height: 430rpx; | 30 | height: 430rpx; |
10 | - | ||
11 | } | 31 | } |
12 | 32 | ||
13 | .product-item .item-title { | 33 | .product-item .item-title { |
@@ -16,7 +36,7 @@ | @@ -16,7 +36,7 @@ | ||
16 | color: #444; | 36 | color: #444; |
17 | width: 322rpx; | 37 | width: 322rpx; |
18 | max-width: 322rpx; | 38 | max-width: 322rpx; |
19 | - line-height: 1.5; | 39 | + line-height: 1.3; |
20 | letter-spacing: 0.28px; | 40 | letter-spacing: 0.28px; |
21 | display: -webkit-box; | 41 | display: -webkit-box; |
22 | overflow: hidden; | 42 | overflow: hidden; |
@@ -24,38 +44,6 @@ | @@ -24,38 +44,6 @@ | ||
24 | white-space: pre-wrap; | 44 | white-space: pre-wrap; |
25 | -webkit-box-orient: vertical; | 45 | -webkit-box-orient: vertical; |
26 | -webkit-line-clamp: 2; | 46 | -webkit-line-clamp: 2; |
27 | - margin: 24rpx 0; | ||
28 | -} | ||
29 | - | ||
30 | -.product-item .item-price { | ||
31 | - font-family: PingFang-SC-Regular; | ||
32 | - font-size: 24rpx; | ||
33 | - color: #444; | ||
34 | - width: 322rpx; | ||
35 | - max-width: 322rpx; | ||
36 | - letter-spacing: 0.28px; | 47 | + margin: 20rpx 0; |
37 | } | 48 | } |
38 | 49 | ||
39 | -.product-item .item-image { | ||
40 | - | ||
41 | -} | ||
42 | - | ||
43 | - | ||
44 | -.product-item .item-image { | ||
45 | - | ||
46 | -} | ||
47 | - | ||
48 | - | ||
49 | -.product-item .item-image { | ||
50 | - | ||
51 | -} | ||
52 | - | ||
53 | - | ||
54 | -.product-item .item-image { | ||
55 | - | ||
56 | -} | ||
57 | - | ||
58 | - | ||
59 | -.product-item .item-image { | ||
60 | - | ||
61 | -} |
@@ -9,7 +9,7 @@ Component({ | @@ -9,7 +9,7 @@ Component({ | ||
9 | product_name: '测试商品名称有点长你懂得地方大幅度的测试商品名称有点长你懂得地方大幅度的测试商品名称有点长你懂得地方大幅度的', | 9 | product_name: '测试商品名称有点长你懂得地方大幅度的测试商品名称有点长你懂得地方大幅度的测试商品名称有点长你懂得地方大幅度的', |
10 | salePriceStr: '3', | 10 | salePriceStr: '3', |
11 | originPriceStr: '3', | 11 | originPriceStr: '3', |
12 | - showOriginPrice: false | 12 | + showOriginPrice: true |
13 | }, | 13 | }, |
14 | { | 14 | { |
15 | 15 |
@@ -13,7 +13,7 @@ | @@ -13,7 +13,7 @@ | ||
13 | <view class="filter"> | 13 | <view class="filter"> |
14 | <product-list-filter></product-list-filter> | 14 | <product-list-filter></product-list-filter> |
15 | </view> | 15 | </view> |
16 | - <product-list></product-list> | 16 | + <view class="list"><product-list></product-list></view> |
17 | </view> | 17 | </view> |
18 | <view> | 18 | <view> |
19 | <copyright></copyright> | 19 | <copyright></copyright> |
@@ -70,6 +70,7 @@ | @@ -70,6 +70,7 @@ | ||
70 | background-color: #eee; | 70 | background-color: #eee; |
71 | transform: scaleY(0.5); | 71 | transform: scaleY(0.5); |
72 | } | 72 | } |
73 | + | ||
73 | .recommend-product .filter:after { | 74 | .recommend-product .filter:after { |
74 | display: inline-block; | 75 | display: inline-block; |
75 | content: ''; | 76 | content: ''; |
@@ -82,3 +83,7 @@ | @@ -82,3 +83,7 @@ | ||
82 | transform: scaleY(0.5); | 83 | transform: scaleY(0.5); |
83 | } | 84 | } |
84 | 85 | ||
86 | +.recommend-product .list { | ||
87 | + padding-bottom: 90rpx; | ||
88 | +} | ||
89 | + |
-
Please register or login to post a comment