feat(PointsCollector): 优化项目样式和字体大小计算
增大基础尺寸和最大额外尺寸,改进动态字体大小计算逻辑 添加字体大小变量确保文本可读性和布局一致性
Showing
1 changed file
with
43 additions
and
7 deletions
| ... | @@ -185,10 +185,36 @@ const generatePointsData = () => { | ... | @@ -185,10 +185,36 @@ const generatePointsData = () => { |
| 185 | * 获取项目样式(位置、大小和动画) | 185 | * 获取项目样式(位置、大小和动画) |
| 186 | */ | 186 | */ |
| 187 | const getItemStyle = (item) => { | 187 | const getItemStyle = (item) => { |
| 188 | - const baseSize = 80; | 188 | + const baseSize = 90; // 增大基础尺寸从80到90 |
| 189 | const maxValue = Math.max(...(floatingItems.value.map(i => i.points).length > 0 ? floatingItems.value.map(i => i.points) : [1])); | 189 | const maxValue = Math.max(...(floatingItems.value.map(i => i.points).length > 0 ? floatingItems.value.map(i => i.points) : [1])); |
| 190 | const sizeRatio = item.points / maxValue; | 190 | const sizeRatio = item.points / maxValue; |
| 191 | - const size = baseSize + (sizeRatio * 40); | 191 | + const size = baseSize + (sizeRatio * 50); // 增大最大额外尺寸从40到50 |
| 192 | + | ||
| 193 | + // 计算动态字体大小 | ||
| 194 | + const baseFontSize = 20; // 基础字体大小 rpx | ||
| 195 | + const maxFontSize = 24; // 最大字体大小 rpx | ||
| 196 | + const minFontSize = 18; // 最小字体大小 rpx,提高最小值确保可读性 | ||
| 197 | + | ||
| 198 | + // 根据圆圈大小和文字长度计算合适的字体大小 | ||
| 199 | + const labelLength = item.sourceLabel?.length || 0; | ||
| 200 | + const pointsLength = (item.points + '分').length; | ||
| 201 | + | ||
| 202 | + // 优化字体计算:根据圆圈大小和文字长度动态调整 | ||
| 203 | + let dynamicFontSize = Math.max( | ||
| 204 | + minFontSize, | ||
| 205 | + Math.min( | ||
| 206 | + maxFontSize, | ||
| 207 | + baseFontSize * (size / 100) * (8 / Math.max(8, labelLength)) // 根据文字长度调整 | ||
| 208 | + ) | ||
| 209 | + ); | ||
| 210 | + | ||
| 211 | + // 确保长文字能在一行显示 | ||
| 212 | + if (labelLength > 4) { | ||
| 213 | + dynamicFontSize = Math.max(minFontSize, dynamicFontSize * (4 / labelLength)); | ||
| 214 | + } | ||
| 215 | + | ||
| 216 | + // 确保字体大小为整数 | ||
| 217 | + dynamicFontSize = Math.round(dynamicFontSize); | ||
| 192 | 218 | ||
| 193 | const style = { | 219 | const style = { |
| 194 | position: 'absolute', | 220 | position: 'absolute', |
| ... | @@ -199,6 +225,8 @@ const getItemStyle = (item) => { | ... | @@ -199,6 +225,8 @@ const getItemStyle = (item) => { |
| 199 | transform: 'translate(-50%, -50%) scale(1)', | 225 | transform: 'translate(-50%, -50%) scale(1)', |
| 200 | transition: 'all 0.8s cubic-bezier(0.5, -0.5, 0.5, 1.5)', | 226 | transition: 'all 0.8s cubic-bezier(0.5, -0.5, 0.5, 1.5)', |
| 201 | zIndex: 15, | 227 | zIndex: 15, |
| 228 | + '--dynamic-font-size-label': `${Math.max(16, dynamicFontSize - 1)}rpx`, | ||
| 229 | + '--dynamic-font-size-points': `${dynamicFontSize}rpx`, | ||
| 202 | }; | 230 | }; |
| 203 | 231 | ||
| 204 | if (item.collecting) { | 232 | if (item.collecting) { |
| ... | @@ -442,16 +470,24 @@ const handleGoToRewards = () => { | ... | @@ -442,16 +470,24 @@ const handleGoToRewards = () => { |
| 442 | 470 | ||
| 443 | .item-value { | 471 | .item-value { |
| 444 | display: block; | 472 | display: block; |
| 445 | - font-size: 20rpx; | 473 | + font-size: var(--dynamic-font-size-label, 20rpx); |
| 446 | - // font-weight: bold; | ||
| 447 | line-height: 1; | 474 | line-height: 1; |
| 475 | + text-align: center; | ||
| 476 | + max-width: 95%; | ||
| 477 | + white-space: nowrap; | ||
| 478 | + overflow: visible; | ||
| 479 | + margin: 0 auto; | ||
| 480 | + transform: scale(1); | ||
| 481 | + padding: 0 2rpx; | ||
| 448 | } | 482 | } |
| 449 | 483 | ||
| 450 | .item-type { | 484 | .item-type { |
| 451 | display: block; | 485 | display: block; |
| 452 | - font-size: 23rpx; | 486 | + font-size: var(--dynamic-font-size-points, 23rpx); |
| 453 | - margin-top: 4rpx; | 487 | + margin-top: 2rpx; |
| 454 | - // opacity: 0.7; | 488 | + line-height: 1.2; |
| 489 | + text-align: center; | ||
| 490 | + font-weight: 500; | ||
| 455 | } | 491 | } |
| 456 | 492 | ||
| 457 | .stack-count { | 493 | .stack-count { | ... | ... |
-
Please register or login to post a comment