fe / yoho-luck · Commits

Go to a project

Authored by QC-L
Commit 79d1bb4efdb407746fdd2f8dcf5f47b3189ecb28 1 parent c0890d65

首页及商品详情页 UI 优化 review by 黄敬囿

Inline Side-by-side
Showing 7 changed files with 64 additions and 13 deletions
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 2
3 3
4 <view class="fellow-bar"> 4 <view class="fellow-bar">
5 - <view class="title">关注有货公众号“潮流有货”，开奖后查看中奖结果</view> 5 + <view class="title">关注公众号"潮流有货"，发送开奖后查看中奖结果</view>
6 <view class="btn" bindtap="onClick">去关注</view> 6 <view class="btn" bindtap="onClick">去关注</view>
7 </view> 7 </view>
8 8
@@ -2,5 +2,5 @@ @@ -2,5 +2,5 @@
2 2
3 <view class="help" bindtap="_onTap"> 3 <view class="help" bindtap="_onTap">
4 <image class="helpe-img" src="../images/que_ic@2x.png"></image> 4 <image class="helpe-img" src="../images/que_ic@2x.png"></image>
5 -<text>活动说明 </text> 5 +<text>查看活动说明 </text>
6 </view> 6 </view>
@@ -18,6 +18,9 @@ @@ -18,6 +18,9 @@
18 18
19 </view> 19 </view>
20 <view class="product_name" >{{product.name}}</view> 20 <view class="product_name" >{{product.name}}</view>
21 - <view class="product_price" >{{product.price}}</view> 21 + <view class="product_lucky_bg">
  22 + <view class="product_lucky"><text>抽奖价 ¥ <text class="lucky">0</text></text></view>
  23 + <view class="product_price" >{{product.price}}</view>
  24 + </view>
22 <view wx:if="{{product.status !== 2}}" class="product_time">{{helper.formatTime(product.start_time, product.end_time)}}</view> 25 <view wx:if="{{product.status !== 2}}" class="product_time">{{helper.formatTime(product.start_time, product.end_time)}}</view>
23 <view class="product_margin"></view> 26 <view class="product_margin"></view>
@@ -8,18 +8,29 @@ @@ -8,18 +8,29 @@
8 .product_name { 8 .product_name {
9 display: inline-block; 9 display: inline-block;
10 margin-top: 30rpx; 10 margin-top: 30rpx;
11 - width: 570rpx;  
12 - font-size: 36rpx; 11 + letter-spacing: -0.34px;
  12 + width: 686rpx;
  13 + font-size: 28rpx;
13 font-weight: bold; 14 font-weight: bold;
14 word-break:break-all; 15 word-break:break-all;
15 color: #444444; 16 color: #444444;
  17 + text-align: left;
  18 +}
  19 +
  20 +.product_lucky_bg {
  21 + display: flex;
  22 + flex-direction: row;
  23 + align-items: baseline;
  24 + justify-content: space-between;
  25 + margin-left: 32rpx;
  26 + margin-right: 32rpx;
16 } 27 }
17 28
18 .product_price { 29 .product_price {
19 - color: #D0021B; 30 + color: #B0B0B0;
20 font-size: 36rpx; 31 font-size: 36rpx;
21 font-weight: bold; 32 font-weight: bold;
22 - margin-top: 26rpx; 33 + margin-left: 30rpx;
23 } 34 }
24 35
25 .product_time { 36 .product_time {
@@ -89,4 +100,17 @@ @@ -89,4 +100,17 @@
89 100
90 .avatarcontainer { 101 .avatarcontainer {
91 position: relative; 102 position: relative;
  103 +}
  104 +
  105 +.product_lucky {
  106 + color: #D0021B;
  107 + font-size: 24rpx;
  108 + font-family: PingFangSC-Semibold;
  109 + display: flex;
  110 + flex-direction: row;
  111 + align-items: baseline;
  112 +}
  113 +
  114 +.lucky {
  115 + font-size: 52rpx;
92 } 116 }
@@ -3,6 +3,9 @@ @@ -3,6 +3,9 @@
3 <time-countdown class="product_countdown" wx:if="{{product.status === 2}}" endTime="{{product.end_time}}"></time-countdown> 3 <time-countdown class="product_countdown" wx:if="{{product.status === 2}}" endTime="{{product.end_time}}"></time-countdown>
4 <image class="product_image" src="{{product.cover_img}}"></image> 4 <image class="product_image" src="{{product.cover_img}}"></image>
5 <view class="product_name" >{{product.name}}</view> 5 <view class="product_name" >{{product.name}}</view>
6 - <view class="product_price" >{{product.price}}</view> 6 + <view class="product_lucky_bg">
  7 + <view class="product_lucky"><text>抽奖价 ¥ <text class="lucky">0</text></text></view>
  8 + <view class="product_price" >{{product.price}}</view>
  9 + </view>
7 <view wx:if="{{product.status !== 2}}" class="product_time">{{helper.formatTime(product.start_time, product.end_time)}}</view> 10 <view wx:if="{{product.status !== 2}}" class="product_time">{{helper.formatTime(product.start_time, product.end_time)}}</view>
8 <view class="product_margin"></view> 11 <view class="product_margin"></view>
@@ -12,6 +12,7 @@ @@ -12,6 +12,7 @@
12 word-break:break-all; 12 word-break:break-all;
13 color: #444444; 13 color: #444444;
14 margin-left: 30rpx; 14 margin-left: 30rpx;
  15 + margin-right: 60rpx;
15 text-align: left; 16 text-align: left;
16 } 17 }
17 18
@@ -19,9 +20,16 @@ @@ -19,9 +20,16 @@
19 color: #B0B0B0; 20 color: #B0B0B0;
20 font-size: 36rpx; 21 font-size: 36rpx;
21 font-weight: bold; 22 font-weight: bold;
22 - margin-top: 26rpx;  
23 margin-left: 30rpx; 23 margin-left: 30rpx;
24 - text-align: left; 24 +}
  25 +
  26 +.product_lucky_bg {
  27 + display: flex;
  28 + flex-direction: row;
  29 + align-items: baseline;
  30 + justify-content: space-between;
  31 + margin-left: 30rpx;
  32 + margin-right: 60rpx;
25 } 33 }
26 34
27 .product_time { 35 .product_time {
@@ -51,7 +59,7 @@ @@ -51,7 +59,7 @@
51 } 59 }
52 60
53 .product_margin { 61 .product_margin {
54 - margin-bottom: 40rpx; 62 + margin-bottom: 48rpx;
55 } 63 }
56 64
57 .product_countdown { 65 .product_countdown {
@@ -59,4 +67,17 @@ @@ -59,4 +67,17 @@
59 height: 92rpx; 67 height: 92rpx;
60 padding-top: 40rpx; 68 padding-top: 40rpx;
61 margin-bottom: 40rpx; 69 margin-bottom: 40rpx;
  70 +}
  71 +
  72 +.product_lucky {
  73 + color: #D0021B;
  74 + font-size: 24rpx;
  75 + font-family: PingFangSC-Semibold;
  76 + display: flex;
  77 + flex-direction: row;
  78 + align-items: baseline;
  79 +}
  80 +
  81 +.lucky {
  82 + font-size: 52rpx;
62 } 83 }
@@ -6,10 +6,10 @@ @@ -6,10 +6,10 @@
6 <product-header product="{{product}}" avatars="{{avatars}}"></product-header> 6 <product-header product="{{product}}" avatars="{{avatars}}"></product-header>
7 <view style="height: 20rpx;"></view> 7 <view style="height: 20rpx;"></view>
8 </view> 8 </view>
9 - 9 +<block wx:if="{{false}}">
10 <counter count="{{participantCount}}" num="{{product.limit}}" status="{{product.status}}"></counter> 10 <counter count="{{participantCount}}" num="{{product.limit}}" status="{{product.status}}"></counter>
11 -  
12 <prize-progress step="{{step}}"></prize-progress> 11 <prize-progress step="{{step}}"></prize-progress>
  12 +</block>
13 <view class="help"> 13 <view class="help">
14 <help></help> 14 <help></help>
15 </view> 15 </view>