fix(PointsCollector): 调整积分收集动画中心点位置并优化点击区域
将动画中心点从50%调整为75%以优化视觉效果 统一积分显示区域的点击事件处理 限制随机点生成在视图顶部60%范围内
Showing
1 changed file
with
6 additions
and
6 deletions
| ... | @@ -2,9 +2,9 @@ | ... | @@ -2,9 +2,9 @@ |
| 2 | <view class="points-collector" :style="{ height: height }"> | 2 | <view class="points-collector" :style="{ height: height }"> |
| 3 | <!-- 中心圆形显示总积分 --> | 3 | <!-- 中心圆形显示总积分 --> |
| 4 | <view class="center-circle"> | 4 | <view class="center-circle"> |
| 5 | - <view class="total-points"> | 5 | + <view class="total-points" @tap="handleGoToRewards"> |
| 6 | <text class="points-number">{{ animatedTotalPoints }}分</text> | 6 | <text class="points-number">{{ animatedTotalPoints }}分</text> |
| 7 | - <text class="points-label" @tap="handleGoToRewards">去兑换</text> | 7 | + <text class="points-label">去兑换</text> |
| 8 | </view> | 8 | </view> |
| 9 | </view> | 9 | </view> |
| 10 | 10 | ||
| ... | @@ -93,7 +93,7 @@ const generateMockData = () => { | ... | @@ -93,7 +93,7 @@ const generateMockData = () => { |
| 93 | const minX = radiusXPercent; | 93 | const minX = radiusXPercent; |
| 94 | const maxX = 100 - radiusXPercent; | 94 | const maxX = 100 - radiusXPercent; |
| 95 | const minY = radiusXPercent + 5; | 95 | const minY = radiusXPercent + 5; |
| 96 | - const maxY = 100 - radiusXPercent - 15; | 96 | + const maxY = 60; // 限制在视图的顶部60% |
| 97 | 97 | ||
| 98 | do { | 98 | do { |
| 99 | attempts++; | 99 | attempts++; |
| ... | @@ -108,7 +108,7 @@ const generateMockData = () => { | ... | @@ -108,7 +108,7 @@ const generateMockData = () => { |
| 108 | 108 | ||
| 109 | // 检查与中心禁飞区的距离 | 109 | // 检查与中心禁飞区的距离 |
| 110 | const dxCenter = x - 50; | 110 | const dxCenter = x - 50; |
| 111 | - const dyCenter = y - 50; | 111 | + const dyCenter = y - 75; // 中心点在75% |
| 112 | const distanceFromCenter = Math.sqrt(dxCenter * dxCenter + dyCenter * dyCenter); | 112 | const distanceFromCenter = Math.sqrt(dxCenter * dxCenter + dyCenter * dyCenter); |
| 113 | if (distanceFromCenter < centerNoFlyZone) { | 113 | if (distanceFromCenter < centerNoFlyZone) { |
| 114 | hasCollision = true; | 114 | hasCollision = true; |
| ... | @@ -157,7 +157,7 @@ const getItemStyle = (item) => { | ... | @@ -157,7 +157,7 @@ const getItemStyle = (item) => { |
| 157 | 157 | ||
| 158 | if (item.collecting) { | 158 | if (item.collecting) { |
| 159 | style.left = '50%'; | 159 | style.left = '50%'; |
| 160 | - style.top = '50%'; | 160 | + style.top = '75%'; |
| 161 | style.transform = 'translate(-50%, -50%) scale(0)'; | 161 | style.transform = 'translate(-50%, -50%) scale(0)'; |
| 162 | style.opacity = 0; | 162 | style.opacity = 0; |
| 163 | style.zIndex = 20; // 飞向中心时置于顶层 | 163 | style.zIndex = 20; // 飞向中心时置于顶层 |
| ... | @@ -268,7 +268,7 @@ const handleGoToRewards = () => { | ... | @@ -268,7 +268,7 @@ const handleGoToRewards = () => { |
| 268 | .center-circle { | 268 | .center-circle { |
| 269 | position: absolute; | 269 | position: absolute; |
| 270 | left: 50%; | 270 | left: 50%; |
| 271 | - top: 50%; | 271 | + top: 75%; |
| 272 | transform: translate(-50%, -50%); | 272 | transform: translate(-50%, -50%); |
| 273 | width: 200rpx; | 273 | width: 200rpx; |
| 274 | height: 200rpx; | 274 | height: 200rpx; | ... | ... |
-
Please register or login to post a comment