Hooke / lls_program

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
3bcd6107 1 parent 17bb6ee5

refactor(ui): 优化头像显示模式和积分组件布局 

调整头像显示模式为aspectFill以更好展示
移除积分规则提示图标并调整组件样式
更新积分显示组件高度和布局位置
Inline Side-by-side
Showing 3 changed files with 14 additions and 15 deletions
...@@ -7,12 +7,6 @@ ...@@ -7,12 +7,6 @@
7 7
8 <!-- 积分显示器主体 --> 8 <!-- 积分显示器主体 -->
9 <view class="total-points-display" :style="{ height: height }"> 9 <view class="total-points-display" :style="{ height: height }">
10 - <!-- 积分规则提示 -->
11 - <view class="points-rule-tip" @tap="handleGoToPointsRule">
12 - <view class="tip-icon">💡</view>
13 - <text class="tip-text">积分规则</text>
14 - </view>
15 -
16 <!-- 中心圆形显示总积分 --> 10 <!-- 中心圆形显示总积分 -->
17 <view class="center-circle1"> 11 <view class="center-circle1">
18 <view class="total-points" @tap="handleGoToRewards"> 12 <view class="total-points" @tap="handleGoToRewards">
...@@ -142,12 +136,12 @@ const handleGoToPointsRule = () => { ...@@ -142,12 +136,12 @@ const handleGoToPointsRule = () => {
142 overflow: hidden; 136 overflow: hidden;
143 } 137 }
144 138
145 -.points-collector-header { 139 +.total-points-display-header {
146 padding: 40rpx; 140 padding: 40rpx;
147 padding-bottom: 20rpx; 141 padding-bottom: 20rpx;
148 } 142 }
149 143
150 -.points-collector-footer { 144 +.total-points-display-footer {
151 padding: 40rpx; 145 padding: 40rpx;
152 padding-top: 20rpx; 146 padding-top: 20rpx;
153 } 147 }
......
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
39 <span class="text-gray-500">今日</span> 39 <span class="text-gray-500">今日</span>
40 <!-- 积分规则提示 --> 40 <!-- 积分规则提示 -->
41 <view class="points-rule-tip" @tap="handleGoToPointsRule"> 41 <view class="points-rule-tip" @tap="handleGoToPointsRule">
42 - <view class="tip-icon">💡</view> 42 + <!-- <view class="tip-icon">💡</view> -->
43 <text class="tip-text">积分规则</text> 43 <text class="tip-text">积分规则</text>
44 </view> 44 </view>
45 </view> 45 </view>
...@@ -73,12 +73,17 @@ ...@@ -73,12 +73,17 @@
73 <TotalPointsDisplay 73 <TotalPointsDisplay
74 :total-points="finalTotalPoints" 74 :total-points="finalTotalPoints"
75 :is-owner="familyOwner" 75 :is-owner="familyOwner"
76 - height="13vh" 76 + height="15vh"
77 > 77 >
78 <!-- 头部：今日步数 --> 78 <!-- 头部：今日步数 -->
79 <template #header> 79 <template #header>
80 - <view class="flex justify-between items-center mb-1"> 80 + <view class="flex justify-between items-center mb-1 relative">
81 <span class="text-gray-500">今日</span> 81 <span class="text-gray-500">今日</span>
82 + <!-- 积分规则提示 -->
83 + <view class="points-rule-tip" @tap="handleGoToPointsRule">
84 + <!-- <view class="tip-icon">💡</view> -->
85 + <text class="tip-text">积分规则</text>
86 + </view>
82 </view> 87 </view>
83 <view class="flex justify-between items-center"> 88 <view class="flex justify-between items-center">
84 <view class="flex items-baseline"> 89 <view class="flex items-baseline">
...@@ -455,8 +460,8 @@ useReady(async () => { ...@@ -455,8 +460,8 @@ useReady(async () => {
455 .points-rule-tip { 460 .points-rule-tip {
456 position: absolute; 461 position: absolute;
457 // background-color: white; 462 // background-color: white;
458 - top: -35rpx; 463 + top: 0rpx;
459 - right: -25rpx; 464 + right: 0rpx;
460 display: flex; 465 display: flex;
461 flex-direction: column; 466 flex-direction: column;
462 align-items: center; 467 align-items: 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-05 09:36:17 4 + * @LastEditTime: 2025-09-08 18:33:48
5 * @FilePath: /lls_program/src/pages/MyFamily/index.vue 5 * @FilePath: /lls_program/src/pages/MyFamily/index.vue
6 * @Description: 我的家庭页面 - 展示用户加入的家庭列表 6 * @Description: 我的家庭页面 - 展示用户加入的家庭列表
7 --> 7 -->
...@@ -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="aspectFit" 57 + mode="aspectFill"
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"
......