diff --git a/www/index.html b/www/index.html index e9cd3ad..3cd8b4b 100644 --- a/www/index.html +++ b/www/index.html @@ -8,12 +8,12 @@ AI助手 - +
- - + + \ No newline at end of file diff --git a/www/style.css b/www/style.css index c1a716a..8a65a91 100644 --- a/www/style.css +++ b/www/style.css @@ -72,27 +72,50 @@ body { overflow-y: auto; } -/* Header 中的新建对话按钮 */ +/* Header 中的新建对话按钮 - 美化版 */ .new-chat-btn-header { display: flex; align-items: center; justify-content: center; - width: 40px; - height: 40px; - background: rgba(255,255,255,0.2); + width: 44px; + height: 44px; + background: rgba(255,255,255,0.95); border: none; - border-radius: 10px; - color: white; + border-radius: 50%; + color: var(--primary); cursor: pointer; - transition: all 0.2s; + transition: all 0.25s ease; + box-shadow: 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.5); + position: relative; + overflow: hidden; +} + +.new-chat-btn-header::before { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 100%); + opacity: 0; + transition: opacity 0.25s; } .new-chat-btn-header:hover { - background: rgba(255,255,255,0.3); + transform: scale(1.08); + box-shadow: 0 4px 16px rgba(102,126,234,0.4), 0 2px 8px rgba(0,0,0,0.2); + color: #5a67d8; +} + +.new-chat-btn-header:hover::before { + opacity: 1; } .new-chat-btn-header:active { transform: scale(0.95); + box-shadow: 0 1px 4px rgba(0,0,0,0.2); +} + +.new-chat-btn-header svg { + filter: drop-shadow(0 1px 2px rgba(102,126,234,0.3)); } /* 原样式保留（备用） */