hookehuyr

style(Rewards): 优化商品列表的布局和样式

- 调整商品信息区域布局,使标题和商家名称独占一行
- 修改兑换按钮样式,增加渐变和阴影效果
- 优化间距和字体样式,提升整体视觉效果
...@@ -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
......