style(about): 调整移动端悬浮按钮定位及交互布局
- 修改 `.mobile-fab` 定位方式,将 `bottom` 值从固定像素改为视口高度百分比 - 更新兴趣项容器 `.interest-item` 的弹性布局方向为纵向排列 - 调整 `.i-text` 内部元素间距和对齐方式以优化文本显示效果 - 修正头像区域的内边距和间隙设置以提升视觉一致性 - 更改 JavaScript 中获取悬浮按钮的选择器以提高兼容性
This commit is contained in:
@@ -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); }
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user