Hooke / lls_program

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
a7f53771 1 parent ce42013c

fix: 统一图片显示模式为widthFix和aspectFit 

修复多个页面中图片显示模式不一致的问题，将大部分图片的mode从aspectFill改为widthFix以保持统一显示效果，部分头像图片改为aspectFit以更好适应圆形显示
Inline Side-by-side
Showing 13 changed files with 16 additions and 17 deletions
...@@ -15,7 +15,6 @@ declare module 'vue' { ...@@ -15,7 +15,6 @@ declare module 'vue' {
15 NutActionSheet: typeof import('@nutui/nutui-taro')['ActionSheet'] 15 NutActionSheet: typeof import('@nutui/nutui-taro')['ActionSheet']
16 NutButton: typeof import('@nutui/nutui-taro')['Button'] 16 NutButton: typeof import('@nutui/nutui-taro')['Button']
17 NutDatePicker: typeof import('@nutui/nutui-taro')['DatePicker'] 17 NutDatePicker: typeof import('@nutui/nutui-taro')['DatePicker']
18 - NutDialog: typeof import('@nutui/nutui-taro')['Dialog']
19 NutImagePreview: typeof import('@nutui/nutui-taro')['ImagePreview'] 18 NutImagePreview: typeof import('@nutui/nutui-taro')['ImagePreview']
20 NutInput: typeof import('@nutui/nutui-taro')['Input'] 19 NutInput: typeof import('@nutui/nutui-taro')['Input']
21 NutPicker: typeof import('@nutui/nutui-taro')['Picker'] 20 NutPicker: typeof import('@nutui/nutui-taro')['Picker']
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 <!-- Avatar --> 3 <!-- Avatar -->
4 <view class="flex flex-col items-center py-8" @click="changeAvatar"> 4 <view class="flex flex-col items-center py-8" @click="changeAvatar">
5 <view class="w-24 h-24 rounded-full bg-gray-100 flex items-center justify-center mb-2 overflow-hidden"> 5 <view class="w-24 h-24 rounded-full bg-gray-100 flex items-center justify-center mb-2 overflow-hidden">
6 - <image :src="formData.avatar_url || defaultAvatar" class="w-full h-full" mode="aspectFill" /> 6 + <image :src="formData.avatar_url || defaultAvatar" class="w-full h-full" mode="aspectFit" />
7 </view> 7 </view>
8 <text class="text-gray-500 text-sm">上传头像</text> 8 <text class="text-gray-500 text-sm">上传头像</text>
9 </view> 9 </view>
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
21 <image 21 <image
22 :src="item.type === 'video' ? item.thumbnail : item.url" 22 :src="item.type === 'video' ? item.thumbnail : item.url"
23 class="w-full h-full object-cover" 23 class="w-full h-full object-cover"
24 - mode="aspectFill" 24 + mode="widthFix"
25 /> 25 />
26 26
27 <!-- 视频播放标识 --> 27 <!-- 视频播放标识 -->
......
...@@ -108,7 +108,7 @@ ...@@ -108,7 +108,7 @@
108 <image 108 <image
109 :src="familyAvatar || defaultFamilyCover" 109 :src="familyAvatar || defaultFamilyCover"
110 class="w-full h-48 rounded-lg object-cover" 110 class="w-full h-48 rounded-lg object-cover"
111 - mode="aspectFill" 111 + mode="widthFix"
112 @tap="previewAvatar" 112 @tap="previewAvatar"
113 /> 113 />
114 <view 114 <view
......
...@@ -88,7 +88,7 @@ ...@@ -88,7 +88,7 @@
88 </view> 88 </view>
89 <view class="grid grid-cols-4 gap-2"> 89 <view class="grid grid-cols-4 gap-2">
90 <view v-for="member in familyMembers" :key="member.user_id" class="flex flex-col items-center"> 90 <view v-for="member in familyMembers" :key="member.user_id" class="flex flex-col items-center">
91 - <image :src="member.avatar_url || defaultAvatar" mode="aspectFill" :alt="member.role" class="w-16 h-16 rounded-full mb-1" /> 91 + <image :src="member.avatar_url || defaultAvatar" mode="aspectFit" :alt="member.role" class="w-16 h-16 rounded-full mb-1" />
92 <span class="text-sm text-gray-700"> 92 <span class="text-sm text-gray-700">
93 {{ member?.today_step?.toLocaleString() }}步 93 {{ member?.today_step?.toLocaleString() }}步
94 </span> 94 </span>
...@@ -401,7 +401,7 @@ useDidShow(async () => { ...@@ -401,7 +401,7 @@ useDidShow(async () => {
401 family_id.value = data[0].id; 401 family_id.value = data[0].id;
402 // 先初始化基础页面数据（不包含步数相关数据） 402 // 先初始化基础页面数据（不包含步数相关数据）
403 await initPageData(); 403 await initPageData();
404 - 404 +
405 // 检查是否应该显示手动更新按钮 405 // 检查是否应该显示手动更新按钮
406 if (stepsStore.shouldShowManualUpdate()) { 406 if (stepsStore.shouldShowManualUpdate()) {
407 // 如果之前有更新失败记录，直接显示手动更新按钮，不自动获取步数 407 // 如果之前有更新失败记录，直接显示手动更新按钮，不自动获取步数
......
...@@ -107,7 +107,7 @@ ...@@ -107,7 +107,7 @@
107 <image 107 <image
108 :src="familyAvatar || defaultFamilyCover" 108 :src="familyAvatar || defaultFamilyCover"
109 class="w-full h-48 rounded-lg object-cover" 109 class="w-full h-48 rounded-lg object-cover"
110 - mode="aspectFill" 110 + mode="widthFix"
111 @tap="previewAvatar" 111 @tap="previewAvatar"
112 /> 112 />
113 <view 113 <view
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 <!-- Avatar --> 3 <!-- Avatar -->
4 <view class="flex flex-col items-center py-8" @click="changeAvatar"> 4 <view class="flex flex-col items-center py-8" @click="changeAvatar">
5 <view class="w-24 h-24 rounded-full bg-gray-100 flex items-center justify-center mb-2 overflow-hidden"> 5 <view class="w-24 h-24 rounded-full bg-gray-100 flex items-center justify-center mb-2 overflow-hidden">
6 - <image :src="formData.avatar_url || defaultAvatar" class="w-full h-full" mode="aspectFill" /> 6 + <image :src="formData.avatar_url || defaultAvatar" class="w-full h-full" mode="aspectFit" />
7 </view> 7 </view>
8 <text class="text-gray-500 text-sm">上传头像</text> 8 <text class="text-gray-500 text-sm">上传头像</text>
9 </view> 9 </view>
......
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
28 <image 28 <image
29 :src="item.url" 29 :src="item.url"
30 class="w-24 h-24 rounded-lg object-cover" 30 class="w-24 h-24 rounded-lg object-cover"
31 - mode="aspectFill" 31 + mode="widthFix"
32 @tap="() => previewImage(index)" 32 @tap="() => previewImage(index)"
33 /> 33 />
34 <view 34 <view
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-09-04 10:35:11 4 + * @LastEditTime: 2025-09-05 09:36:17
5 * @FilePath: /lls_program/src/pages/MyFamily/index.vue 5 * @FilePath: /lls_program/src/pages/MyFamily/index.vue
6 * @Description: 我的家庭页面 - 展示用户加入的家庭列表 6 * @Description: 我的家庭页面 - 展示用户加入的家庭列表
7 --> 7 -->
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
36 <image 36 <image
37 :src="family.avatar_url || defaultFamilyCoverSvg" 37 :src="family.avatar_url || defaultFamilyCoverSvg"
38 class="w-full h-44 object-cover" 38 class="w-full h-44 object-cover"
39 - mode="aspectFill" 39 + mode="widthFix"
40 /> 40 />
41 41
42 <!-- 家庭名称和大家长信息覆盖层 --> 42 <!-- 家庭名称和大家长信息覆盖层 -->
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
54 <!-- 成员头像叠加效果 --> 54 <!-- 成员头像叠加效果 -->
55 <view class="avatar-overlap"> 55 <view class="avatar-overlap">
56 <image 56 <image
57 - mode="aspectFill" 57 + mode="aspectFit"
58 v-for="(member, index) in family?.users?.slice(0, 4) || []" 58 v-for="(member, index) in family?.users?.slice(0, 4) || []"
59 :key="member.id" 59 :key="member.id"
60 :src="member.avatar_url || defaultAvatar" 60 :src="member.avatar_url || defaultAvatar"
......
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
33 <view v-if="currentPoster.path" class="w-full h-full relative"> 33 <view v-if="currentPoster.path" class="w-full h-full relative">
34 <image 34 <image
35 :src="currentPoster.path" 35 :src="currentPoster.path"
36 - mode="aspectFit" 36 + mode="widthFix"
37 class="w-full h-full" 37 class="w-full h-full"
38 /> 38 />
39 <!-- 打卡点标题 --> 39 <!-- 打卡点标题 -->
......
1 <template> 1 <template>
2 <view class="min-h-screen bg-white pb-24"> 2 <view class="min-h-screen bg-white pb-24">
3 <!-- 分享按钮 --> 3 <!-- 分享按钮 -->
4 - <button id="share" data-name="shareBtn" open-type="share" style="font-size: 0.9rem; padding: 0; position: absolute; right: 40rpx; top: 40rpx; z-index: 1000;color: white; width: 70rpx; height: 70rpx; border-radius: 50%; background: rgba(0, 0, 0, 0.6);">分享</button> 4 + <button id="share" data-name="shareBtn" open-type="share" style="font-size: 0.83rem; line-height: 3; padding: 0; position: absolute; right: 40rpx; top: 40rpx; z-index: 1000;color: white; width: 70rpx; height: 70rpx; border-radius: 50%; background: rgba(0, 0, 0, 0.6);">分享</button>
5 <!-- Top Image --> 5 <!-- Top Image -->
6 <view class="w-full h-48"> 6 <view class="w-full h-48">
7 <image :src="reward.image" class="w-full h-full object-cover" /> 7 <image :src="reward.image" class="w-full h-full object-cover" />
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
25 <image 25 <image
26 :src="uploadedFile.url" 26 :src="uploadedFile.url"
27 class="w-full h-64 object-cover cursor-pointer" 27 class="w-full h-64 object-cover cursor-pointer"
28 - mode="aspectFit" 28 + mode="widthFix"
29 @tap="previewImage" 29 @tap="previewImage"
30 /> 30 />
31 <view 31 <view
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
46 v-if="uploadedFile.thumbnail" 46 v-if="uploadedFile.thumbnail"
47 :src="uploadedFile.thumbnail" 47 :src="uploadedFile.thumbnail"
48 class="w-full h-full object-cover" 48 class="w-full h-full object-cover"
49 - mode="aspectFit" 49 + mode="widthFix"
50 /> 50 />
51 <view class="absolute inset-0 flex items-center justify-center"> 51 <view class="absolute inset-0 flex items-center justify-center">
52 <view class="w-16 h-16 bg-black bg-opacity-60 rounded-full flex items-center justify-center"> 52 <view class="w-16 h-16 bg-black bg-opacity-60 rounded-full flex items-center justify-center">
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-09-04 09:20:14 4 + * @LastEditTime: 2025-09-05 09:38:36
5 * @FilePath: /lls_program/src/pages/auth/index.vue 5 * @FilePath: /lls_program/src/pages/auth/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
......