Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
9935fe34 1 parent f2d4ebcd

style(favorites): 调整收藏列表项布局 

## 更新

- 将 category 从信息行移到标题下方作为 tag 显示
  - 使用蓝色背景 (bg-blue-50) 和蓝色文字 (text-blue-600)
  - 圆角样式，更醒目
- 日期信息单独一行显示
- 优化布局层次，信息更清晰

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Inline Side-by-side
Showing 1 changed file with 6 additions and 6 deletions
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
21 class="bg-white rounded-[24rpx] p-[24rpx] mb-[24rpx] shadow-sm"> 21 class="bg-white rounded-[24rpx] p-[24rpx] mb-[24rpx] shadow-sm">
22 22
23 <!-- Header with Icon --> 23 <!-- Header with Icon -->
24 - <view class="flex gap-[24rpx] mb-[16rpx]"> 24 + <view class="flex gap-[24rpx] mb-[12rpx]">
25 <!-- Document Icon --> 25 <!-- Document Icon -->
26 <view class="w-[64rpx] h-[64rpx] flex-shrink-0 flex items-center justify-center"> 26 <view class="w-[64rpx] h-[64rpx] flex-shrink-0 flex items-center justify-center">
27 <image :src="getDocumentIcon(item.title)" class="w-[56rpx] h-[56rpx]" mode="aspectFit" /> 27 <image :src="getDocumentIcon(item.title)" class="w-[56rpx] h-[56rpx]" mode="aspectFit" />
...@@ -29,18 +29,18 @@ ...@@ -29,18 +29,18 @@
29 29
30 <!-- Title --> 30 <!-- Title -->
31 <view class="flex-1 min-w-0"> 31 <view class="flex-1 min-w-0">
32 - <view class="text-[30rpx] font-bold text-gray-900 leading-normal mb-[8rpx] line-clamp-2">{{ item.title }}</view> 32 + <view class="text-[30rpx] font-bold text-gray-900 leading-normal mb-1">{{ item.title }}</view>
33 + <view class="bg-blue-50 text-blue-600 text-[22rpx] px-[12rpx] py-[4rpx] rounded-[8rpx] inline-block">{{ item.category }}</view>
33 </view> 34 </view>
34 </view> 35 </view>
35 36
36 - <!-- Info --> 37 + <!-- Date -->
37 - <view class="flex justify-between items-center text-gray-500 text-[24rpx] mb-[24rpx]"> 38 + <view class="text-gray-500 text-[24rpx] mb-[20rpx]">
38 - <text>{{ item.category }}</text>
39 <text>{{ item.date }}</text> 39 <text>{{ item.date }}</text>
40 </view> 40 </view>
41 41
42 <!-- Divider --> 42 <!-- Divider -->
43 - <view class="h-[1rpx] bg-gray-100 my-[20rpx]"></view> 43 + <view class="h-[1rpx] bg-gray-100 mb-[20rpx]"></view>
44 44
45 <!-- Actions --> 45 <!-- Actions -->
46 <view class="flex justify-end gap-[24rpx]"> 46 <view class="flex justify-end gap-[24rpx]">
......