Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
5d2f4495 1 parent d734ec21

style(favorites): 优化收藏页面样式和交互设计 

重构操作区域布局，新增独立的查看按钮并优化删除按钮样式
为所有操作按钮添加文字说明以提升可访问性
使用颜色区分操作类型（蓝色查看，红色删除）
调整列表项标题显示，支持最多两行文本并优化行高
优化按钮点击热区和交互反馈效果
Inline Side-by-side
Showing 2 changed files with 32 additions and 6 deletions
1 +## [2026-01-31] - 我的收藏页面样式优化
2 +
3 +### 优化
4 +- 优化我的收藏页面 (`src/pages/favorites`) 的布局和样式
5 + - 重构操作区，新增"查看"按钮并优化"删除"按钮
6 + - 为所有操作按钮添加文字说明，提升可访问性
7 + - 使用颜色区分操作类型（查看为蓝色，删除为红色）
8 + - 调整列表项标题显示，支持最多两行文本 (`line-clamp-2`)
9 + - 优化按钮点击热区和反馈效果
10 +
11 +---
12 +
13 +**详细信息**：
14 +- **影响文件**: src/pages/favorites/index.vue
15 +- **技术栈**: Vue 3, Tailwind CSS
16 +- **测试状态**: 已通过
17 +- **备注**:
18 + - 响应用户关于新增查看按钮和图标文字说明的需求
19 +
1 ## [2026-01-31] - 知识库页面添加产品点击跳转 20 ## [2026-01-31] - 知识库页面添加产品点击跳转
2 21
3 ### 新增 22 ### 新增
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
21 <view class="w-[706rpx] mt-[32rpx] flex flex-col gap-[24rpx]"> 21 <view class="w-[706rpx] mt-[32rpx] flex flex-col gap-[24rpx]">
22 <view v-for="(item, index) in filteredList" :key="index" 22 <view v-for="(item, index) in filteredList" :key="index"
23 class="bg-white rounded-[24rpx] p-[32rpx] shadow-sm flex items-center justify-between"> 23 class="bg-white rounded-[24rpx] p-[32rpx] shadow-sm flex items-center justify-between">
24 - <view class="flex items-center flex-1 mr-[24rpx]" @tap="onView(item)"> 24 + <view class="flex items-center flex-1 mr-[24rpx]">
25 <!-- Icon (Text Type Icons as requested) --> 25 <!-- Icon (Text Type Icons as requested) -->
26 <view class="w-[80rpx] h-[80rpx] rounded-[16rpx] flex items-center justify-center mr-[24rpx]" 26 <view class="w-[80rpx] h-[80rpx] rounded-[16rpx] flex items-center justify-center mr-[24rpx]"
27 :class="item.iconBgClass"> 27 :class="item.iconBgClass">
...@@ -29,8 +29,8 @@ ...@@ -29,8 +29,8 @@
29 </view> 29 </view>
30 30
31 <!-- Text Content --> 31 <!-- Text Content -->
32 - <view class="flex flex-col flex-1"> 32 + <view class="flex flex-col flex-1 min-w-0">
33 - <view class="text-[32rpx] text-[#1F2937] font-bold mb-[8rpx] line-clamp-1">{{ item.title }}</view> 33 + <view class="text-[32rpx] text-[#1F2937] font-bold mb-[8rpx] line-clamp-2 leading-[1.4]">{{ item.title }}</view>
34 <view class="flex flex-col items-start gap-[8rpx]"> 34 <view class="flex flex-col items-start gap-[8rpx]">
35 <view class="bg-gray-100 px-[12rpx] py-[4rpx] rounded-[8rpx] text-[24rpx] text-[#9CA3AF] mt-1">{{ item.category 35 <view class="bg-gray-100 px-[12rpx] py-[4rpx] rounded-[8rpx] text-[24rpx] text-[#9CA3AF] mt-1">{{ item.category
36 }}</view> 36 }}</view>
...@@ -40,10 +40,17 @@ ...@@ -40,10 +40,17 @@
40 </view> 40 </view>
41 41
42 <!-- Action Buttons --> 42 <!-- Action Buttons -->
43 - <view class="flex items-center gap-[16rpx]"> 43 + <view class="flex flex-col items-end gap-[16rpx] ml-[16rpx] flex-shrink-0">
44 + <!-- View Button -->
45 + <view class="flex items-center justify-center px-[20rpx] py-[10rpx] bg-blue-50 rounded-full active:bg-blue-100 transition-colors" @tap.stop="onView(item)">
46 + <IconFont name="eye" size="14" color="#2563EB" class="mr-[6rpx]" />
47 + <text class="text-[24rpx] text-blue-600 font-medium leading-none">查看</text>
48 + </view>
49 +
44 <!-- Delete Button --> 50 <!-- Delete Button -->
45 - <view class="p-[10rpx]" @tap.stop="onDelete(item)"> 51 + <view class="flex items-center justify-center px-[20rpx] py-[10rpx] bg-red-50 rounded-full active:bg-red-100 transition-colors" @tap.stop="onDelete(item)">
46 - <IconFont name="del" size="18" color="#999" /> 52 + <IconFont name="del" size="14" color="#EF4444" class="mr-[6rpx]" />
53 + <text class="text-[24rpx] text-red-500 font-medium leading-none">删除</text>
47 </view> 54 </view>
48 </view> 55 </view>
49 </view> 56 </view>
......