diff --git a/supply.html b/supply.html index 1aed1fc..fb8a437 100644 --- a/supply.html +++ b/supply.html @@ -28,51 +28,49 @@ .title-bar { background-color: #1677ff; color: white; - padding: 12px 15px; - display: flex; - justify-content: space-between; - align-items: center; + padding: 15px; position: sticky; top: 0; z-index: 100; - flex-wrap: nowrap; + display: flex; + flex-direction: column; gap: 10px; } + .title-bar-top { + display: flex; + justify-content: center; + align-items: center; + } + .title-bar h1 { margin: 0; font-size: 18px; font-weight: 500; - flex: 1; - text-align: center; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; } - .title-bar-actions { + .title-bar-bottom { display: flex; - gap: 8px; + justify-content: space-between; align-items: center; - flex-shrink: 0; + flex-wrap: nowrap; + gap: 10px; } - .title-bar-actions button { - background-color: rgba(255, 255, 255, 0.2); - color: white; - border: 1px solid rgba(255, 255, 255, 0.3); - padding: 8px 16px; - border-radius: 20px; - font-size: 14px; - cursor: pointer; - transition: all 0.3s ease; - white-space: nowrap; - backdrop-filter: blur(10px); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - flex-shrink: 0; + .title-bar-left { + display: flex; + align-items: center; + gap: 10px; } - .title-bar-actions button:hover { + .title-bar-right { + display: flex; + align-items: center; + gap: 10px; + } + + /* 按钮悬停效果 */ + .title-bar button:hover { background-color: rgba(255, 255, 255, 0.3); } @@ -1299,16 +1297,24 @@