diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index b08c6f7..cf2e14a 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -46,7 +46,7 @@
@click="openTool(tool.url)"
>
- {{ tool.icon }}
+ {{ tool.icon }}
@@ -109,6 +109,16 @@ export default {
},
methods: {
+ // 根据图标文字长度返回字体大小class
+ getIconSizeClass(icon) {
+ if (!icon) return 'icon-size-default'
+ const length = icon.length
+ if (length === 1) return 'icon-size-1'
+ if (length === 2) return 'icon-size-2'
+ if (length === 3) return 'icon-size-3'
+ return 'icon-size-4' // 4个字或更多
+ },
+
// 辅助方法
getCategoriesInSuper(superCategoryId) {
return this.categories.filter(c => c.superCategoryId === superCategoryId)
@@ -716,12 +726,53 @@ export default {
flex-shrink: 0;
margin-right: 16px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+ overflow: hidden;
+ padding: 4px;
.icon-text {
- font-size: 24px;
font-weight: bold;
color: @white-color;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+ line-height: 1.3;
+ text-align: center;
+ word-wrap: break-word;
+ word-break: break-all;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ max-width: 100%;
+ padding: 0 2px;
+
+ // 1个字:大字体
+ &.icon-size-1 {
+ font-size: 28px;
+ line-height: 1;
+ }
+
+ // 2个字:中等字体
+ &.icon-size-2 {
+ font-size: 24px;
+ line-height: 1.2;
+ }
+
+ // 3个字:较小字体
+ &.icon-size-3 {
+ font-size: 20px;
+ line-height: 1.2;
+ }
+
+ // 4个字或更多:小字体,2行显示
+ &.icon-size-4 {
+ font-size: 18px;
+ line-height: 1.3;
+ }
+
+ // 默认大小
+ &.icon-size-default {
+ font-size: 22px;
+ line-height: 1.3;
+ }
}
}
diff --git a/src/views/ManagePage.vue b/src/views/ManagePage.vue
index 33400a8..ccfc0a6 100644
--- a/src/views/ManagePage.vue
+++ b/src/views/ManagePage.vue
@@ -227,7 +227,7 @@
:title="colorOption.name"
>
✓
- {{ toolForm.icon }}
+ {{ toolForm.icon }}
@@ -381,6 +381,16 @@ export default {
},
methods: {
+ // 根据图标文字长度返回字体大小class
+ getIconSizeClass(icon) {
+ if (!icon) return 'icon-size-default'
+ const length = icon.length
+ if (length === 1) return 'icon-size-1'
+ if (length === 2) return 'icon-size-2'
+ if (length === 3) return 'icon-size-3'
+ return 'icon-size-4' // 4个字或更多
+ },
+
// 消息提示
showMessage(text, type = 'success') {
this.message = { show: true, text, type }
@@ -1509,12 +1519,18 @@ export default {
display: flex;
align-items: center;
justify-content: center;
- font-size: 16px;
+ font-size: 14px;
color: white;
font-weight: bold;
flex-shrink: 0;
cursor: pointer;
transition: all 0.2s ease;
+ line-height: 1; // 设置行高为1,确保垂直居中
+
+ span {
+ display: block;
+ text-align: center;
+ }
&:hover {
transform: scale(1.1);
@@ -1738,13 +1754,53 @@ button {
font-size: 20px;
font-weight: bold;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+ line-height: 1;
}
.icon-preview {
color: white;
- font-size: 24px;
font-weight: bold;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+ line-height: 1.3;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-align: center;
+ word-wrap: break-word;
+ word-break: break-all;
+ max-width: 100%;
+ padding: 0 2px;
+
+ // 1个字:大字体
+ &.icon-size-1 {
+ font-size: 28px;
+ line-height: 1;
+ }
+
+ // 2个字:中等字体
+ &.icon-size-2 {
+ font-size: 24px;
+ line-height: 1.2;
+ }
+
+ // 3个字:较小字体
+ &.icon-size-3 {
+ font-size: 20px;
+ line-height: 1.3;
+ }
+
+ // 4个字或更多:最小字体,2行显示
+ &.icon-size-4 {
+ font-size: 18px;
+ line-height: 1.3;
+ }
+
+ // 默认
+ &.icon-size-default {
+ font-size: 22px;
+ line-height: 1.2;
+ }
}
}
}