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

@@ -2,7 +2,7 @@
 
 
 
 
 <view class="fellow-bar">
 <view class="fellow-bar">
-  <view class="title">关注有货公众号“潮流有货”，开奖后查看中奖结果</view>
+  <view class="title">关注公众号"潮流有货"，发送开奖后查看中奖结果</view>
   <view class="btn" bindtap="onClick">去关注</view>
   <view class="btn" bindtap="onClick">去关注</view>
 </view>
 </view>
 
 

@@ -2,5 +2,5 @@
 
 
 <view class="help" bindtap="_onTap"> 
 <view class="help" bindtap="_onTap"> 
 <image class="helpe-img" src="../images/que_ic@2x.png"></image>
 <image class="helpe-img" src="../images/que_ic@2x.png"></image>
-<text>活动说明 </text>
+<text>查看活动说明 </text>
 </view>
 </view>

@@ -18,6 +18,9 @@
 
 
   </view>
   </view>
   <view class="product_name" >{{product.name}}</view>
   <view class="product_name" >{{product.name}}</view>
+  <view class="product_lucky_bg">
+    <view class="product_lucky"><text>抽奖价 ¥ <text class="lucky">0</text></text></view>
     <view class="product_price" >{{product.price}}</view>
     <view class="product_price" >{{product.price}}</view>
+  </view>
   <view wx:if="{{product.status !== 2}}" class="product_time">{{helper.formatTime(product.start_time, product.end_time)}}</view>
   <view wx:if="{{product.status !== 2}}" class="product_time">{{helper.formatTime(product.start_time, product.end_time)}}</view>
   <view class="product_margin"></view>
   <view class="product_margin"></view>

@@ -8,18 +8,29 @@
 .product_name {
 .product_name {
   display: inline-block;
   display: inline-block;
   margin-top: 30rpx;
   margin-top: 30rpx;
-  width: 570rpx;
-  font-size: 36rpx;
+  letter-spacing: -0.34px;
+  width: 686rpx;
+  font-size: 28rpx;
   font-weight: bold;
   font-weight: bold;
   word-break:break-all;
   word-break:break-all;
   color: #444444;
   color: #444444;
+  text-align: left;
+}
+
+.product_lucky_bg {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-left: 32rpx;
+  margin-right: 32rpx;
 }
 }
 
 
 .product_price {
 .product_price {
-  color: #D0021B;
+  color: #B0B0B0;
   font-size: 36rpx;
   font-size: 36rpx;
   font-weight: bold;
   font-weight: bold;
-  margin-top: 26rpx;
+  margin-left: 30rpx;
 }
 }
 
 
 .product_time {
 .product_time {
@@ -90,3 +101,16 @@
 .avatarcontainer {
 .avatarcontainer {
   position: relative;
   position: relative;
 }
 }
+
+.product_lucky {
+  color: #D0021B;
+  font-size: 24rpx;
+  font-family: PingFangSC-Semibold;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+}
+
+.lucky {
+  font-size: 52rpx;
+}

@@ -3,6 +3,9 @@
   <time-countdown class="product_countdown" wx:if="{{product.status === 2}}" endTime="{{product.end_time}}"></time-countdown>
   <time-countdown class="product_countdown" wx:if="{{product.status === 2}}" endTime="{{product.end_time}}"></time-countdown>
   <image class="product_image" src="{{product.cover_img}}"></image>
   <image class="product_image" src="{{product.cover_img}}"></image>
   <view class="product_name" >{{product.name}}</view>
   <view class="product_name" >{{product.name}}</view>
+  <view class="product_lucky_bg">
+    <view class="product_lucky"><text>抽奖价 ¥ <text class="lucky">0</text></text></view>
     <view class="product_price" >{{product.price}}</view>
     <view class="product_price" >{{product.price}}</view>
+  </view>
   <view wx:if="{{product.status !== 2}}" class="product_time">{{helper.formatTime(product.start_time, product.end_time)}}</view>
   <view wx:if="{{product.status !== 2}}" class="product_time">{{helper.formatTime(product.start_time, product.end_time)}}</view>
   <view class="product_margin"></view>
   <view class="product_margin"></view>

@@ -12,6 +12,7 @@
   word-break:break-all;
   word-break:break-all;
   color: #444444;
   color: #444444;
   margin-left: 30rpx;
   margin-left: 30rpx;
+  margin-right: 60rpx;
   text-align: left;
   text-align: left;
 }
 }
 
 
@@ -19,9 +20,16 @@
   color: #B0B0B0;
   color: #B0B0B0;
   font-size: 36rpx;
   font-size: 36rpx;
   font-weight: bold;
   font-weight: bold;
-  margin-top: 26rpx;
   margin-left: 30rpx;
   margin-left: 30rpx;
-  text-align: left;
+}
+
+.product_lucky_bg {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-left: 30rpx;
+  margin-right: 60rpx;
 }
 }
 
 
 .product_time {
 .product_time {
@@ -51,7 +59,7 @@
 }
 }
 
 
 .product_margin {
 .product_margin {
-    margin-bottom: 40rpx;
+    margin-bottom: 48rpx;
 }
 }
 
 
 .product_countdown {
 .product_countdown {
@@ -60,3 +68,16 @@
   padding-top: 40rpx;
   padding-top: 40rpx;
   margin-bottom: 40rpx;
   margin-bottom: 40rpx;
 }
 }
+
+.product_lucky {
+  color: #D0021B;
+  font-size: 24rpx;
+  font-family: PingFangSC-Semibold;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+}
+
+.lucky {
+  font-size: 52rpx;
+}

@@ -6,10 +6,10 @@
   <product-header product="{{product}}" avatars="{{avatars}}"></product-header>
   <product-header product="{{product}}" avatars="{{avatars}}"></product-header>
   <view style="height: 20rpx;"></view>
   <view style="height: 20rpx;"></view>
 </view>
 </view>
-
+<block wx:if="{{false}}">
 <counter count="{{participantCount}}" num="{{product.limit}}" status="{{product.status}}"></counter>
 <counter count="{{participantCount}}" num="{{product.limit}}" status="{{product.status}}"></counter>
-
 <prize-progress step="{{step}}"></prize-progress>
 <prize-progress step="{{step}}"></prize-progress>
+</block>
   <view class="help">
   <view class="help">
     <help></help>
     <help></help>
   </view>
   </view>