style(ui): 优化家庭相册和设置页面的样式细节
- 为相册卡片添加阴影效果提升视觉层次 - 调整家庭设置按钮的图标大小和文字样式 - 统一家庭创建/编辑页面的图片显示模式为aspectFill
Showing
4 changed files
with
7 additions
and
9 deletions
| ... | @@ -23,7 +23,7 @@ | ... | @@ -23,7 +23,7 @@ |
| 23 | <view | 23 | <view |
| 24 | v-for="(item, index) in albumData" | 24 | v-for="(item, index) in albumData" |
| 25 | :key="item.id || index" | 25 | :key="item.id || index" |
| 26 | - class="rounded-lg overflow-hidden h-32 relative cursor-pointer" | 26 | + class="rounded-lg overflow-hidden h-32 relative cursor-pointer shadow-md" |
| 27 | @click="handleMediaClick(item, albumData)" | 27 | @click="handleMediaClick(item, albumData)" |
| 28 | > | 28 | > |
| 29 | <image | 29 | <image | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-08-27 17:44:53 | 2 | * @Date: 2025-08-27 17:44:53 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-09-11 19:55:19 | 4 | + * @LastEditTime: 2025-09-11 20:01:15 |
| 5 | * @FilePath: /lls_program/src/pages/CreateFamily/index.vue | 5 | * @FilePath: /lls_program/src/pages/CreateFamily/index.vue |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | --> | 7 | --> |
| ... | @@ -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="widthFix" | 111 | + mode="aspectFill" |
| 112 | @tap="previewAvatar" | 112 | @tap="previewAvatar" |
| 113 | /> | 113 | /> |
| 114 | <view | 114 | <view |
| ... | @@ -146,8 +146,6 @@ | ... | @@ -146,8 +146,6 @@ |
| 146 | </view> | 146 | </view> |
| 147 | </view> | 147 | </view> |
| 148 | 148 | ||
| 149 | - | ||
| 150 | - | ||
| 151 | <!-- 图片预览 --> | 149 | <!-- 图片预览 --> |
| 152 | <nut-image-preview | 150 | <nut-image-preview |
| 153 | v-model:show="previewVisible" | 151 | v-model:show="previewVisible" | ... | ... |
| ... | @@ -6,8 +6,8 @@ | ... | @@ -6,8 +6,8 @@ |
| 6 | <view class="absolute inset-0 flex flex-col justify-end rounded-xl bg-black bg-opacity-20"> | 6 | <view class="absolute inset-0 flex flex-col justify-end rounded-xl bg-black bg-opacity-20"> |
| 7 | <view class="m-5"> | 7 | <view class="m-5"> |
| 8 | <view v-if="familyOwner" class="absolute top-4 right-4 text-white flex items-center" @click="goToProfile"> | 8 | <view v-if="familyOwner" class="absolute top-4 right-4 text-white flex items-center" @click="goToProfile"> |
| 9 | - <Setting size="24" /> | 9 | + <Setting size="20" /> |
| 10 | - <text class="ml-2">家庭设置</text> | 10 | + <text class="ml-2 text-sm">家庭设置</text> |
| 11 | </view> | 11 | </view> |
| 12 | <h1 class="text-white text-2xl font-bold">{{ familyName }}</h1> | 12 | <h1 class="text-white text-2xl font-bold">{{ familyName }}</h1> |
| 13 | <p class="text-white opacity-90">{{ familySlogn }}</p> | 13 | <p class="text-white opacity-90">{{ familySlogn }}</p> | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-08-27 17:44:53 | 2 | * @Date: 2025-08-27 17:44:53 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-09-11 19:58:10 | 4 | + * @LastEditTime: 2025-09-11 20:03:53 |
| 5 | * @FilePath: /lls_program/src/pages/EditFamily/index.vue | 5 | * @FilePath: /lls_program/src/pages/EditFamily/index.vue |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | --> | 7 | --> |
| ... | @@ -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="widthFix" | 110 | + mode="aspectFill" |
| 111 | @tap="previewAvatar" | 111 | @tap="previewAvatar" |
| 112 | /> | 112 | /> |
| 113 | <view | 113 | <view | ... | ... |
-
Please register or login to post a comment