Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
f6d9b39e 1 parent fc958151

style(ui): 优化首页头部背景图片和过渡效果

Inline Side-by-side
Showing 1 changed file with 3 additions and 1 deletions
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
6 <image 6 <image
7 v-if="!headerImageError" 7 v-if="!headerImageError"
8 class="w-full h-full" 8 class="w-full h-full"
9 - src="https://picsum.photos/seed/header/750/544" 9 + src="https://cdn.ipadbiz.cn/manulife/images/iwEeAqNwbmcDAQTRBGUF0QMwBrBn6x1ac5y9nAllf7fKAXkAB9IHbb6MCAAJomltCgAL0gAYx7U.png"
10 mode="aspectFill" 10 mode="aspectFill"
11 @error="handleHeaderImageError" 11 @error="handleHeaderImageError"
12 /> 12 />
...@@ -21,6 +21,8 @@ ...@@ -21,6 +21,8 @@
21 </view> 21 </view>
22 <!-- 渐变遮罩始终显示 --> 22 <!-- 渐变遮罩始终显示 -->
23 <view class="absolute inset-0 bg-gradient-to-b from-blue-600/80 to-transparent"></view> 23 <view class="absolute inset-0 bg-gradient-to-b from-blue-600/80 to-transparent"></view>
24 + <!-- 底部过渡效果: 让图片底部平滑融入背景，增加模糊感 -->
25 + <view class="absolute bottom-0 left-0 w-full h-[240rpx] bg-gradient-to-t from-[#F9FAFB] via-[#F9FAFB]/80 to-transparent backdrop-blur-[2px] pointer-events-none"></view>
24 </view> 26 </view>
25 27
26 <view class="relative z-10 px-[32rpx] pt-[180rpx]"> 28 <view class="relative z-10 px-[32rpx] pt-[180rpx]">
......