From 2fadaa2e5b8ebc381f4eee6c83c004f469581543 Mon Sep 17 00:00:00 2001 From: hehh Date: Mon, 24 Nov 2025 01:11:40 +0800 Subject: [PATCH] =?UTF-8?q?style(css):=20=E4=BC=98=E5=8C=96=E5=85=B3?= =?UTF-8?q?=E4=BA=8E=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 调整卡片头部布局为弹性盒子模型 - 优化兴趣项在不同设备上的显示效果 - 增强移动端社交链接夜间模式下的视觉效果 - 改进可拖拽按钮的样式与交互逻辑 refactor(js): 重构拖拽功能实现 - 简化拖拽初始化逻辑 - 优化触摸和鼠标事件绑定方式 - 改进位置计算方法以提高性能 - 移除冗余代码提升可读性 --- css/about.css | 114 +++++++++++++++++++++++++------------------------- js/about.js | 112 +++++++++++++++++-------------------------------- 2 files changed, 96 insertions(+), 130 deletions(-) diff --git a/css/about.css b/css/about.css index 359bb87..5364ca4 100644 --- a/css/about.css +++ b/css/about.css @@ -729,17 +729,17 @@ body { overflow: hidden; } -.card-header { - padding: 20px 25px; - border-bottom: 1px solid rgba(128,128,128,0.1); +.card-header { + padding: 20px 25px; + border-bottom: 1px solid rgba(128,128,128,0.1); display: flex; justify-content: space-between; align-items: center; } -.card-header h3 { - font-size: 1.1rem; - color: var(--text-primary); - margin: 0; +.card-header h3 { + font-size: 1.1rem; + color: var(--text-primary); + margin: 0; } .card-subtitle { font-size: 0.8rem; @@ -910,7 +910,7 @@ body { gap: 12px; margin-top: 1rem; } - + .interest-item { background: rgba(128, 128, 128, 0.05); padding: 12px 16px; @@ -920,24 +920,24 @@ body { gap: 15px; transition: background 0.3s; } - + .interest-item:hover { background: rgba(128, 128, 128, 0.1); } - + .i-emoji { font-size: 2rem; color: var(--text-primary); -webkit-text-fill-color: initial; } - + .i-text { display: flex; flex-direction: column; min-width: 0; gap: 4px; } - + /* 添加 min-width: 0 防止溢出 */ .i-text strong { font-size: 1.1rem; @@ -950,7 +950,7 @@ body { -webkit-text-fill-color: transparent; white-space: nowrap; } - + .i-text span:not(.i-emoji) { font-size: 0.9rem; color: var(--text-tertiary); @@ -969,13 +969,13 @@ body { grid-template-columns: 1fr; max-height: none; } - + .i-text { flex-direction: column; align-items: flex-start; gap: 4px; } - + .i-text strong, .i-text span { white-space: normal; } @@ -1194,22 +1194,22 @@ body { gap: 12px; max-height: none; } - + .interest-item { padding: 12px 16px; border-radius: 12px; gap: 15px; } - + .i-emoji { font-size: 2rem; } - + .i-text { flex-direction: column; gap: 4px; } - + .i-text strong { font-size: 1.1rem; white-space: nowrap; @@ -1218,7 +1218,7 @@ body { background-clip: text; color: transparent; } - + .i-text span { font-size: 0.9rem; white-space: normal; @@ -1552,34 +1552,34 @@ body { } @media (max-width: 768px) { - .quote-box p.quote-collapsed { - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; + .quote-box p.quote-collapsed { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; } - + /* 增强移动端社交链接黑夜模式下的发光效果 */ [data-theme="night"] .ms-btn:nth-child(1) { box-shadow: 0 0 20px rgba(132, 250, 176, 0.8); } - + [data-theme="night"] .ms-btn:nth-child(2) { box-shadow: 0 0 20px rgba(246, 211, 101, 0.8); } - + [data-theme="night"] .ms-btn:nth-child(3) { box-shadow: 0 0 20px rgba(255, 154, 158, 0.8); } - + [data-theme="night"] .ms-btn:nth-child(4) { box-shadow: 0 0 20px rgba(168, 237, 234, 0.8); } - + [data-theme="night"] .ms-btn:nth-child(5) { box-shadow: 0 0 20px rgba(210, 153, 194, 0.8); } - + [data-theme="night"] .ms-btn:nth-child(6) { box-shadow: 0 0 20px rgba(161, 196, 253, 0.8); } @@ -1590,21 +1590,21 @@ body { .mobile-social { display: none !important; } - - .social-dock { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 12px; - justify-items: center; + + .social-dock { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 12px; + justify-items: center; } - - .s-icon { - width: 42px; - height: 42px; + + .s-icon { + width: 42px; + height: 42px; } - - .s-icon i { - font-size: 1.6rem; + + .s-icon i { + font-size: 1.6rem; } } @@ -2600,17 +2600,17 @@ body { overflow: hidden; } -.card-header { - padding: 20px 25px; - border-bottom: 1px solid rgba(128,128,128,0.1); +.card-header { + padding: 20px 25px; + border-bottom: 1px solid rgba(128,128,128,0.1); display: flex; justify-content: space-between; align-items: center; } -.card-header h3 { - font-size: 1.1rem; - color: var(--text-primary); - margin: 0; +.card-header h3 { + font-size: 1.1rem; + color: var(--text-primary); + margin: 0; } .card-subtitle { font-size: 0.8rem; @@ -2781,7 +2781,7 @@ body { gap: 15px; margin-top: 1rem; } - + .interest-item { background: rgba(128, 128, 128, 0.05); padding: 15px; @@ -2791,24 +2791,24 @@ body { gap: 15px; transition: background 0.3s; } - + .interest-item:hover { background: rgba(128, 128, 128, 0.1); } - + .i-emoji { font-size: 2rem; color: var(--text-primary); -webkit-text-fill-color: initial; } - + .i-text { display: flex; flex-direction: column; min-width: 0; gap: 5px; } - + /* 添加 min-width: 0 防止溢出 */ .i-text strong { font-size: 1.1rem; @@ -2821,7 +2821,7 @@ body { -webkit-text-fill-color: transparent; white-space: nowrap; } - + .i-text span:not(.i-emoji) { font-size: 0.9rem; color: var(--text-tertiary); diff --git a/js/about.js b/js/about.js index b5651c1..1c0c49b 100644 --- a/js/about.js +++ b/js/about.js @@ -661,57 +661,24 @@ class UIManager { updateLabels(); } - // 初始化可拖拽悬浮按钮 + // 初始化拖拽功能 initDraggableFab() { - const fab = document.querySelector('.mobile-fab'); + const fab = document.getElementById('fab-main'); if (!fab) return; - + let isDragging = false; - let currentX; - let currentY; - let initialX; - let initialY; - let xOffset = 0; - let yOffset = 0; - let fabWidth = fab.offsetWidth; - let fabHeight = fab.offsetHeight; - let windowWidth = window.innerWidth; - let windowHeight = window.innerHeight; - - // 设置初始位置为距离底部1/3处 - function setInitialPosition() { - windowWidth = window.innerWidth; - windowHeight = window.innerHeight; - fabWidth = fab.offsetWidth; - fabHeight = fab.offsetHeight; - - // 初始位置：右侧16px，距离底部1/3 - const initialYPos = windowHeight - (windowHeight / 3) - fabHeight / 2; - xOffset = windowWidth - 16 - fabWidth; // 距离右边16px - yOffset = initialYPos; - - setTranslate(xOffset, yOffset, fab); - } - - // 页面加载时设置初始位置 - setInitialPosition(); - - // 窗口大小改变时更新位置 - window.addEventListener('resize', setInitialPosition); - - // 触摸开始事件 - fab.addEventListener('touchstart', dragStart, false); - fab.addEventListener('mousedown', dragStart, false); - - // 拖拽移动事件 - document.addEventListener('touchmove', drag, { passive: false }); - document.addEventListener('mousemove', drag); - - // 拖拽结束事件 - document.addEventListener('touchend', dragEnd, false); - document.addEventListener('mouseup', dragEnd, false); - - function dragStart(e) { + let initialX, initialY, currentX, currentY, xOffset = 0, yOffset = 0; + const windowWidth = window.innerWidth; + const windowHeight = window.innerHeight; + const fabWidth = fab.offsetWidth; + const fabHeight = fab.offsetHeight; + + // 拖拽相关方法 + const setTranslate = (xPos, yPos, el) => { + el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`; + }; + + const dragStart = (e) => { if (e.type === 'touchstart') { initialX = e.touches[0].clientX - xOffset; initialY = e.touches[0].clientY - yOffset; @@ -719,16 +686,18 @@ class UIManager { initialX = e.clientX - xOffset; initialY = e.clientY - yOffset; } - - if (e.target === fab || fab.contains(e.target)) { - isDragging = true; - } - } - - function drag(e) { + isDragging = true; + }; + + const dragEnd = () => { + initialX = currentX; + initialY = currentY; + isDragging = false; + }; + + const drag = (e) => { if (isDragging) { e.preventDefault(); - if (e.type === 'touchmove') { currentX = e.touches[0].clientX - initialX; currentY = e.touches[0].clientY - initialY; @@ -736,27 +705,24 @@ class UIManager { currentX = e.clientX - initialX; currentY = e.clientY - initialY; } - - xOffset = currentX; - yOffset = currentY; - - // 限制在屏幕范围内 + + // 限制在屏幕内 currentX = Math.max(0, Math.min(currentX, windowWidth - fabWidth)); currentY = Math.max(0, Math.min(currentY, windowHeight - fabHeight)); - + + xOffset = currentX; + yOffset = currentY; setTranslate(currentX, currentY, fab); } - } - - function dragEnd() { - initialX = currentX; - initialY = currentY; - isDragging = false; - } - - function setTranslate(xPos, yPos, el) { - el.style.transform = 'translate3d(' + xPos + 'px, ' + yPos + 'px, 0)'; - } + }; + + // 绑定事件 + fab.addEventListener('touchstart', dragStart, false); + fab.addEventListener('touchend', dragEnd, false); + fab.addEventListener('touchmove', drag, false); + fab.addEventListener('mousedown', dragStart, false); + fab.addEventListener('mouseup', dragEnd, false); + fab.addEventListener('mousemove', drag, false); } initAudio() {