Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
lls_program
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2025-09-04 20:47:28 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
9f66abff5ce04df032f6830ac32a6db8d32da577
9f66abff
1 parent
c1e91767
feat(PointsCollector): 优化项目样式和字体大小计算
增大基础尺寸和最大额外尺寸,改进动态字体大小计算逻辑 添加字体大小变量确保文本可读性和布局一致性
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
43 additions
and
7 deletions
src/components/PointsCollector.vue
src/components/PointsCollector.vue
View file @
9f66abf
...
...
@@ -185,10 +185,36 @@ const generatePointsData = () => {
* 获取项目样式(位置、大小和动画)
*/
const getItemStyle = (item) => {
const baseSize =
80;
const baseSize =
90; // 增大基础尺寸从80到90
const maxValue = Math.max(...(floatingItems.value.map(i => i.points).length > 0 ? floatingItems.value.map(i => i.points) : [1]));
const sizeRatio = item.points / maxValue;
const size = baseSize + (sizeRatio * 40);
const size = baseSize + (sizeRatio * 50); // 增大最大额外尺寸从40到50
// 计算动态字体大小
const baseFontSize = 20; // 基础字体大小 rpx
const maxFontSize = 24; // 最大字体大小 rpx
const minFontSize = 18; // 最小字体大小 rpx,提高最小值确保可读性
// 根据圆圈大小和文字长度计算合适的字体大小
const labelLength = item.sourceLabel?.length || 0;
const pointsLength = (item.points + '分').length;
// 优化字体计算:根据圆圈大小和文字长度动态调整
let dynamicFontSize = Math.max(
minFontSize,
Math.min(
maxFontSize,
baseFontSize * (size / 100) * (8 / Math.max(8, labelLength)) // 根据文字长度调整
)
);
// 确保长文字能在一行显示
if (labelLength > 4) {
dynamicFontSize = Math.max(minFontSize, dynamicFontSize * (4 / labelLength));
}
// 确保字体大小为整数
dynamicFontSize = Math.round(dynamicFontSize);
const style = {
position: 'absolute',
...
...
@@ -199,6 +225,8 @@ const getItemStyle = (item) => {
transform: 'translate(-50%, -50%) scale(1)',
transition: 'all 0.8s cubic-bezier(0.5, -0.5, 0.5, 1.5)',
zIndex: 15,
'--dynamic-font-size-label': `${Math.max(16, dynamicFontSize - 1)}rpx`,
'--dynamic-font-size-points': `${dynamicFontSize}rpx`,
};
if (item.collecting) {
...
...
@@ -442,16 +470,24 @@ const handleGoToRewards = () => {
.item-value {
display: block;
font-size: 20rpx;
// font-weight: bold;
font-size: var(--dynamic-font-size-label, 20rpx);
line-height: 1;
text-align: center;
max-width: 95%;
white-space: nowrap;
overflow: visible;
margin: 0 auto;
transform: scale(1);
padding: 0 2rpx;
}
.item-type {
display: block;
font-size: 23rpx;
margin-top: 4rpx;
// opacity: 0.7;
font-size: var(--dynamic-font-size-points, 23rpx);
margin-top: 2rpx;
line-height: 1.2;
text-align: center;
font-weight: 500;
}
.stack-count {
...
...
Please
register
or
login
to post a comment