hookehuyr

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

- 调整商品信息区域布局,使标题和商家名称独占一行
- 修改兑换按钮样式,增加渐变和阴影效果
- 优化间距和字体样式,提升整体视觉效果
......@@ -65,15 +65,27 @@
<!-- 商品列表 -->
<template v-else>
<view v-for="reward in sortedRewardItems" :key="reward.id"
class="bg-white rounded-xl p-4 flex items-center shadow-[0_2px_8px_rgba(0,0,0,0.08)]">
<image :src="reward.thumbnail" class="w-16 h-16 rounded-lg mr-4 flex-shrink-0" mode="aspectFill" />
<view class="flex-1 min-w-0">
<view class="font-medium text-base">{{ reward.title }}</view>
<view class="text-gray-500 text-sm mt-1">{{ reward.merchant_name }}</view>
class="bg-white rounded-xl p-4 shadow-[0_2px_8px_rgba(0,0,0,0.08)]">
<!-- 商品信息区域 -->
<view class="flex items-start mb-4">
<image :src="reward.thumbnail" class="w-20 h-20 rounded-lg mr-4 flex-shrink-0" mode="aspectFill" />
<view class="flex-1 min-w-0">
<!-- 标题独占一行 -->
<view class="font-medium text-base leading-5 mb-2 text-gray-900">{{ reward.title }}</view>
<!-- 商家名称独占一行 -->
<view class="text-gray-500 text-sm leading-4">{{ reward.merchant_name }}</view>
</view>
</view>
<view class="ml-4 px-4 py-2 bg-blue-500 text-white rounded-lg text-sm flex-shrink-0"
@click="goToRewardDetail(reward)">
{{ reward.points_cost + '分兑换' }}
<!-- 兑换按钮区域 -->
<view class="flex items-center justify-between pt-3 border-t border-gray-100">
<view class="text-orange-500 font-semibold text-lg">
{{ reward.points_cost }}积分
</view>
<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"
@click="goToRewardDetail(reward)">
立即兑换
</view>
</view>
</view>
......