style(about): 调整移动端悬浮按钮定位及交互布局

- 修改 `.mobile-fab` 定位方式,将 `bottom` 值从固定像素改为视口高度百分比
- 更新兴趣项容器 `.interest-item` 的弹性布局方向为纵向排列
- 调整 `.i-text` 内部元素间距和对齐方式以优化文本显示效果
- 修正头像区域的内边距和间隙设置以提升视觉一致性
- 更改 JavaScript 中获取悬浮按钮的选择器以提高兼容性
This commit is contained in:
hehh
2025-11-24 01:45:20 +08:00
parent f4aa81bfa5
commit e484f3e23a
2 changed files with 18 additions and 8 deletions

View File

@@ -2429,8 +2429,9 @@ body {
padding: 15px;
border-radius: 12px;
display: flex;
align-items: center;
gap: 15px;
align-items: flex-start;
flex-direction: column;
gap: 10px;
transition: background 0.3s;
}
@@ -2442,13 +2443,14 @@ body {
font-size: 2rem;
color: var(--text-primary);
-webkit-text-fill-color: initial;
margin-bottom: 6px;
}
.i-text {
display: flex;
flex-direction: column;
min-width: 0;
gap: 5px;
gap: 6px;
}
/* 添加 min-width: 0 防止溢出 */
@@ -2732,11 +2734,19 @@ body {
max-height: 150px; /* 限制高度 */
overflow: hidden;
}
.interest-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.i-emoji { margin-bottom: 6px; }
.i-text {
flex-direction: row;
align-items: center;
gap: 8px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.i-text strong, .i-text span {
@@ -3203,7 +3213,7 @@ body {
}
.social-dock .s-icon { color: var(--text-primary); }
.social-dock .s-icon i { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: initial !important; color: currentColor !important; text-shadow: none !important; }
.mobile-fab { position: fixed; right: 16px; bottom: 88px; z-index: 1100; cursor: move; user-select: none; display: block !important; }
.mobile-fab { position: fixed; right: 16px; bottom: 33vh; z-index: 1100; cursor: move; user-select: none; display: block !important; }
.fab-main { display: flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; border: none; border-radius: 22px; padding: 10px 14px; box-shadow: 0 8px 18px rgba(0,0,0,0.25); opacity: 0.9; transition: all 0.3s ease; }
.fab-main:hover { opacity: 1; transform: scale(1.05); }
.fab-main:active { transform: scale(0.95); }

View File

@@ -663,7 +663,7 @@ class UIManager {
// 初始化拖拽功能
initDraggableFab() {
const fab = document.getElementById('fab-main');
const fab = document.querySelector('.mobile-fab');
if (!fab) return;
let isDragging = false;