优化ui布局
This commit is contained in:
12
README.md
12
README.md
@@ -54,7 +54,7 @@
|
|||||||
|
|
||||||
**3. 移动端显示增强**
|
**3. 移动端显示增强**
|
||||||
- ✅ 优化了移动端卡片尺寸,一屏可显示更多网址
|
- ✅ 优化了移动端卡片尺寸,一屏可显示更多网址
|
||||||
- ✅ 图标大小自适应,在小屏幕上更加紧凑(从1.8rem减小到1.2-1.5rem)
|
- ✅ 图标大小自适应,在小屏幕上更加紧凑
|
||||||
- ✅ 为不同尺寸移动设备(768px、480px、400px)提供递进式UI优化
|
- ✅ 为不同尺寸移动设备(768px、480px、400px)提供递进式UI优化
|
||||||
- ✅ 减小卡片内边距和元素间距,增加屏幕利用率
|
- ✅ 减小卡片内边距和元素间距,增加屏幕利用率
|
||||||
|
|
||||||
@@ -391,10 +391,10 @@ categories:
|
|||||||
description: 网站描述
|
description: 网站描述
|
||||||
```
|
```
|
||||||
|
|
||||||
## 贡献
|
|
||||||
|
|
||||||
欢迎提交 Issue 和 Pull Request 来帮助改进这个项目。
|
|
||||||
|
|
||||||
## 许可证
|
## 许可证
|
||||||
|
|
||||||
MIT License
|
AGPL-3.0 License
|
||||||
|
|
||||||
|
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
|
||||||
|
|
||||||
|
This program requires that modified versions must also be made available under the same license when used over a network.
|
||||||
@@ -686,6 +686,8 @@ body.loaded .layout {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
max-height: 2.8em;
|
max-height: 2.8em;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 添加编辑按钮 */
|
/* 添加编辑按钮 */
|
||||||
@@ -1023,6 +1025,21 @@ body.loaded .layout {
|
|||||||
margin-bottom: 0.8rem;
|
margin-bottom: 0.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.site-card h3 {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-card p {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
line-height: 1.3;
|
||||||
|
max-height: 2.6em;
|
||||||
|
}
|
||||||
|
|
||||||
/* 在移动端的主题切换按钮 */
|
/* 在移动端的主题切换按钮 */
|
||||||
.theme-toggle {
|
.theme-toggle {
|
||||||
bottom: 1rem;
|
bottom: 1rem;
|
||||||
@@ -1067,12 +1084,17 @@ body.loaded .layout {
|
|||||||
.site-card h3 {
|
.site-card h3 {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
margin-bottom: 0.3rem;
|
margin-bottom: 0.3rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-card p {
|
.site-card p {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
max-height: 2.4em;
|
max-height: 2.4em;
|
||||||
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1100,12 +1122,17 @@ body.loaded .layout {
|
|||||||
.site-card h3 {
|
.site-card h3 {
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: 0.25rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-card p {
|
.site-card p {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
max-height: 2.2em;
|
max-height: 2.5em;
|
||||||
|
line-height: 1.15;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user