Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
140f6f1e 1 parent 45a80e89

refactor(ui): 优化视觉柔和度和统一性 

- ProductCard 组件：降低对比度，更加柔和
  - 边框颜色调整为 border-gray-200，增强可见性
  - 阴影优化：更细腻的阴影参数
  - 装饰背景从蓝色改为中性灰色光晕
  - 按钮样式调整为浅色背景（浅蓝 + 浅灰）
- 首页"查看更多"按钮：移除背景色，改为透明样式
- 金额输入弹窗：调整弹窗位置为 top: 40%，更符合视觉中心

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Inline Side-by-side
Showing 3 changed files with 17 additions and 18 deletions
1 <template> 1 <template>
2 <view 2 <view
3 - class="relative bg-white rounded-[24rpx] p-[32rpx] border border-gray-100 product-card overflow-hidden transition-all duration-300 active:scale-[0.99]" 3 + class="relative bg-white rounded-[24rpx] p-[32rpx] border border-gray-200 product-card overflow-hidden transition-all duration-300 active:scale-[0.99]"
4 - style="box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.04);" 4 + style="box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);"
5 > 5 >
6 - <!-- 装饰背景: 右上角淡蓝色光晕 --> 6 + <!-- 装饰背景: 右上角灰色光晕 -->
7 - <view class="absolute -right-[40rpx] -top-[40rpx] w-[160rpx] h-[160rpx] bg-blue-50 rounded-full opacity-60 blur-[30rpx] pointer-events-none"></view> 7 + <view class="absolute -right-[40rpx] -top-[40rpx] w-[160rpx] h-[160rpx] bg-gray-100 rounded-full opacity-60 blur-[30rpx] pointer-events-none"></view>
8 8
9 <!-- 内容区域 --> 9 <!-- 内容区域 -->
10 <view class="relative z-10"> 10 <view class="relative z-10">
...@@ -33,21 +33,21 @@ ...@@ -33,21 +33,21 @@
33 </view> 33 </view>
34 34
35 <!-- 操作按钮组 --> 35 <!-- 操作按钮组 -->
36 - <view class="flex justify-between gap-[24rpx]"> 36 + <view class="flex justify-between gap-[20rpx]">
37 - <!-- 详情按钮: 次级样式 --> 37 + <!-- 详情按钮: 柔和的灰色背景 -->
38 <view 38 <view
39 - class="flex-1 h-[80rpx] flex items-center justify-center rounded-[16rpx] bg-gray-50 active:bg-gray-100 transition-colors border border-gray-100" 39 + class="flex-1 h-[76rpx] flex items-center justify-center rounded-[16rpx] bg-[#F3F4F6] active:bg-[#E5E7EB] transition-colors"
40 @tap.stop="handleDetail" 40 @tap.stop="handleDetail"
41 > 41 >
42 <text class="text-[28rpx] text-gray-600 font-medium">产品详情</text> 42 <text class="text-[28rpx] text-gray-600 font-medium">产品详情</text>
43 </view> 43 </view>
44 44
45 - <!-- 计划书按钮: 主要样式 --> 45 + <!-- 计划书按钮: 柔和的蓝色背景，降低对比度 -->
46 <view 46 <view
47 - class="flex-1 h-[80rpx] flex items-center justify-center rounded-[16rpx] bg-blue-600 active:bg-blue-700 transition-all shadow-md shadow-blue-100" 47 + class="flex-1 h-[76rpx] flex items-center justify-center rounded-[16rpx] bg-[#EFF6FF] active:bg-[#DBEAFE] transition-colors"
48 @tap.stop="handlePlan" 48 @tap.stop="handlePlan"
49 > 49 >
50 - <text class="text-[28rpx] text-white font-medium">制作计划书</text> 50 + <text class="text-[28rpx] text-blue-600 font-medium">制作计划书</text>
51 </view> 51 </view>
52 </view> 52 </view>
53 </view> 53 </view>
......
...@@ -42,8 +42,7 @@ ...@@ -42,8 +42,7 @@
42 <!-- 金额显示弹窗 --> 42 <!-- 金额显示弹窗 -->
43 <nut-popup 43 <nut-popup
44 v-model:visible="showAmountModal" 44 v-model:visible="showAmountModal"
45 - position="center" 45 + :style="{ padding: '0', borderRadius: '24rpx', overflow: 'hidden', top: '40%' }"
46 - :style="{ padding: '0', borderRadius: '24rpx', overflow: 'hidden' }"
47 :overlay-style="{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }" 46 :overlay-style="{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }"
48 :close-on-click-overlay="false" 47 :close-on-click-overlay="false"
49 > 48 >
......
...@@ -58,11 +58,11 @@ ...@@ -58,11 +58,11 @@
58 58
59 <!-- 查看更多按钮优化 --> 59 <!-- 查看更多按钮优化 -->
60 <view 60 <view
61 - class="flex items-center bg-gray-50 hover:bg-gray-100 active:bg-gray-200 px-[20rpx] py-[10rpx] rounded-full transition-colors" 61 + class="flex items-center px-[12rpx] py-[6rpx] rounded-full active:bg-gray-50 transition-colors"
62 @tap="go('/pages/product-center/index')" 62 @tap="go('/pages/product-center/index')"
63 > 63 >
64 - <text class="text-[24rpx] text-gray-600 mr-[4rpx] font-medium">全部</text> 64 + <text class="text-[26rpx] text-gray-500 mr-[2rpx]">全部</text>
65 - <IconFont name="rectRight" size="10" class="text-gray-400" /> 65 + <IconFont name="rectRight" size="12" color="#9CA3AF" />
66 </view> 66 </view>
67 </view> 67 </view>
68 68
...@@ -95,11 +95,11 @@ ...@@ -95,11 +95,11 @@
95 95
96 <!-- 查看更多按钮优化 --> 96 <!-- 查看更多按钮优化 -->
97 <view 97 <view
98 - class="flex items-center bg-gray-50 hover:bg-gray-100 active:bg-gray-200 px-[20rpx] py-[10rpx] rounded-full transition-colors" 98 + class="flex items-center px-[12rpx] py-[6rpx] rounded-full active:bg-gray-50 transition-colors"
99 @tap="go('/pages/week-hot-material/index')" 99 @tap="go('/pages/week-hot-material/index')"
100 > 100 >
101 - <text class="text-[24rpx] text-gray-600 mr-[4rpx] font-medium">全部</text> 101 + <text class="text-[26rpx] text-gray-500 mr-[2rpx]">全部</text>
102 - <IconFont name="rectRight" size="10" class="text-gray-400" /> 102 + <IconFont name="rectRight" size="12" color="#9CA3AF" />
103 </view> 103 </view>
104 </view> 104 </view>
105 105
......