hookehuyr

feat(PointsCollector): 优化项目样式和字体大小计算

增大基础尺寸和最大额外尺寸,改进动态字体大小计算逻辑
添加字体大小变量确保文本可读性和布局一致性
...@@ -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 {
......