From e484f3e23a98ddeb46ec8ba3644413821260ff40 Mon Sep 17 00:00:00 2001
From: hehh <lingtinzhe@icloud.com>
Date: Mon, 24 Nov 2025 01:45:20 +0800
Subject: [PATCH] =?UTF-8?q?style(about):=20=E8=B0=83=E6=95=B4=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E6=82=AC=E6=B5=AE=E6=8C=89=E9=92=AE=E5=AE=9A?=
 =?UTF-8?q?=E4=BD=8D=E5=8F=8A=E4=BA=A4=E4=BA=92=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修改 `.mobile-fab` 定位方式，将 `bottom` 值从固定像素改为视口高度百分比
- 更新兴趣项容器 `.interest-item` 的弹性布局方向为纵向排列
- 调整 `.i-text` 内部元素间距和对齐方式以优化文本显示效果
- 修正头像区域的内边距和间隙设置以提升视觉一致性
- 更改 JavaScript 中获取悬浮按钮的选择器以提高兼容性
---
 css/about.css | 24 +++++++++++++++++-------
 js/about.js   |  2 +-
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/css/about.css b/css/about.css
index 5400a42..e5fc1b8 100644
--- a/css/about.css
+++ b/css/about.css
@@ -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); }
diff --git a/js/about.js b/js/about.js
index 1c0c49b..e1faaa4 100644
--- a/js/about.js
+++ b/js/about.js
@@ -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;