diff --git a/index.html b/index.html index 7a52170..f5caa83 100755 --- a/index.html +++ b/index.html @@ -69,10 +69,12 @@ box-shadow: 2px 0 5px rgba(0, 0, 0, 0.04); z-index: 10; height: 100%; + left: 0px; } .sidebar.collapsed { - width: 0; + left: -260px; + /* width: 0; */ overflow: hidden; } @@ -159,15 +161,18 @@ /* 收起按钮(独立漂浮在左边) */ .toggle-btn { + display: flex; + justify-content: center; + align-items: center; position: absolute; - top: 10px; + top: 7px; left: 190px; background: #0057ff; color: #fff; border: none; border-radius: 50%; - width: 40px; - height: 40px; + width: 28px; + height: 28px; font-size: 18px; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); @@ -565,6 +570,11 @@ .sidebar.sidebar.collapsed>.toggle-btn { position: fixed; right: 10px !important; + width: 28px; + height: 28px; + display: flex; + justify-content: center; + align-items: center; } .chat-container { @@ -1909,9 +1919,17 @@ } document.addEventListener('click', (e) => { + console.log(toggleButton.contains(e.target), panel.contains(e.target)) if (!toggleButton.contains(e.target) && !panel.contains(e.target)) { panel.classList.remove('show'); } + if (!sidebar.contains(e.target)) { + if (!sidebar.classList.contains("collapsed")) { + sidebar.classList.add("collapsed"); + toggleBtn.style.left = "10px"; // 收起后 + + } + } }); // 阻止点击面板本身关闭