style(Rewards): 优化商品列表的布局和样式
- 调整商品信息区域布局,使标题和商家名称独占一行 - 修改兑换按钮样式,增加渐变和阴影效果 - 优化间距和字体样式,提升整体视觉效果
Showing
1 changed file
with
20 additions
and
8 deletions
| ... | @@ -65,15 +65,27 @@ | ... | @@ -65,15 +65,27 @@ |
| 65 | <!-- 商品列表 --> | 65 | <!-- 商品列表 --> |
| 66 | <template v-else> | 66 | <template v-else> |
| 67 | <view v-for="reward in sortedRewardItems" :key="reward.id" | 67 | <view v-for="reward in sortedRewardItems" :key="reward.id" |
| 68 | - class="bg-white rounded-xl p-4 flex items-center shadow-[0_2px_8px_rgba(0,0,0,0.08)]"> | 68 | + class="bg-white rounded-xl p-4 shadow-[0_2px_8px_rgba(0,0,0,0.08)]"> |
| 69 | - <image :src="reward.thumbnail" class="w-16 h-16 rounded-lg mr-4 flex-shrink-0" mode="aspectFill" /> | 69 | + <!-- 商品信息区域 --> |
| 70 | - <view class="flex-1 min-w-0"> | 70 | + <view class="flex items-start mb-4"> |
| 71 | - <view class="font-medium text-base">{{ reward.title }}</view> | 71 | + <image :src="reward.thumbnail" class="w-20 h-20 rounded-lg mr-4 flex-shrink-0" mode="aspectFill" /> |
| 72 | - <view class="text-gray-500 text-sm mt-1">{{ reward.merchant_name }}</view> | 72 | + <view class="flex-1 min-w-0"> |
| 73 | + <!-- 标题独占一行 --> | ||
| 74 | + <view class="font-medium text-base leading-5 mb-2 text-gray-900">{{ reward.title }}</view> | ||
| 75 | + <!-- 商家名称独占一行 --> | ||
| 76 | + <view class="text-gray-500 text-sm leading-4">{{ reward.merchant_name }}</view> | ||
| 77 | + </view> | ||
| 73 | </view> | 78 | </view> |
| 74 | - <view class="ml-4 px-4 py-2 bg-blue-500 text-white rounded-lg text-sm flex-shrink-0" | 79 | + |
| 75 | - @click="goToRewardDetail(reward)"> | 80 | + <!-- 兑换按钮区域 --> |
| 76 | - {{ reward.points_cost + '分兑换' }} | 81 | + <view class="flex items-center justify-between pt-3 border-t border-gray-100"> |
| 82 | + <view class="text-orange-500 font-semibold text-lg"> | ||
| 83 | + {{ reward.points_cost }}积分 | ||
| 84 | + </view> | ||
| 85 | + <view class="px-6 py-2 bg-gradient-to-r bg-blue-500 text-white rounded-full text-sm font-medium shadow-md active:shadow-sm transition-all duration-200" | ||
| 86 | + @click="goToRewardDetail(reward)"> | ||
| 87 | + 立即兑换 | ||
| 88 | + </view> | ||
| 77 | </view> | 89 | </view> |
| 78 | </view> | 90 | </view> |
| 79 | 91 | ... | ... |
-
Please register or login to post a comment