From 004f0cd3df3a4591da24c21958968a36f0491ac6 Mon Sep 17 00:00:00 2001 From: qing <1776177662@qq.com> Date: Wed, 22 Jul 2026 12:46:50 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E5=89=8D=E7=AB=AF?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=95=B4=E4=BD=93UI=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E4=B8=8E=E4=BA=A4=E4=BA=92=E7=BB=86=E8=8A=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 调整了头部按钮、面包屑、搜索框、文件卡片等组件的内边距、圆角和间距，新增了hover交互效果，统一了卡片和加载空态的视觉样式，适配移动端布局细节 --- static/public/__view.html | 112 +++++++++++++++++++++++++++----------- 1 file changed, 79 insertions(+), 33 deletions(-) diff --git a/static/public/__view.html b/static/public/__view.html index f861606..e4bed51 100644 --- a/static/public/__view.html +++ b/static/public/__view.html @@ -67,36 +67,43 @@ .header-actions a { color: white; text-decoration: none; - padding: 4px 10px; + padding: 6px 14px; background: var(--accent-bg); - border-radius: 6px; + border-radius: 20px; font-size: 14px; transition: background 0.15s; } .header-actions a:active { background: var(--accent-bg-active); } .breadcrumb { - padding: 8px 16px; + padding: 10px 16px; background: var(--card); font-size: 13px; overflow-x: auto; white-space: nowrap; border-bottom: 1px solid var(--border); } - .breadcrumb a { color: var(--accent); text-decoration: none; padding: 2px 6px; } + .breadcrumb a { + color: var(--accent); + text-decoration: none; + padding: 3px 10px; + border-radius: 12px; + transition: background 0.15s; + } + .breadcrumb a:hover { background: var(--card-hover); } .breadcrumb .sep { color: var(--muted); margin: 0 4px; } - .breadcrumb .current { color: var(--fg); font-weight: 500; } + .breadcrumb .current { color: var(--fg); font-weight: 500; padding: 3px 10px; } .search-box { - padding: 8px 16px; + padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--border); } .search-box input { width: 100%; - padding: 8px 12px; + padding: 10px 16px; border: 1px solid var(--border-light); - border-radius: 6px; + border-radius: 24px; font-size: 14px; outline: none; background: var(--bg); @@ -105,22 +112,28 @@ } .search-box input:focus { border-color: var(--accent); - box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.2); + box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.2); } .stats { - padding: 6px 16px; + padding: 8px 16px; background: var(--bg); font-size: 12px; color: var(--subtle); border-bottom: 1px solid var(--border); display: flex; - gap: 12px; + gap: 10px; flex-wrap: wrap; } + .stats span { + padding: 3px 10px; + background: var(--card); + border-radius: 12px; + border: 1px solid var(--border-light); + } .container { - padding: 12px; + padding: 14px; max-width: 1200px; margin: 0 auto; } @@ -129,13 +142,13 @@ .file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); - gap: 12px; + gap: 14px; } .item { background: var(--card); - border-radius: 10px; - padding: 14px 10px; + border-radius: 20px; + padding: 16px 12px; cursor: pointer; border: 1px solid var(--border-light); box-shadow: var(--shadow); @@ -144,16 +157,20 @@ flex-direction: column; align-items: center; text-align: center; - gap: 6px; + gap: 8px; } .item:hover { background: var(--card-hover); box-shadow: var(--shadow-hover); } .item:active { transform: scale(0.97); } .item .icon { - font-size: 40px; - width: 100%; + font-size: 42px; + width: 64px; + height: 64px; + line-height: 64px; text-align: center; - line-height: 1; + background: var(--bg); + border-radius: 50%; + border: 1px solid var(--border-light); } .item .info { width: 100%; @@ -179,41 +196,70 @@ } .item .actions { display: flex; - gap: 4px; + gap: 6px; justify-content: center; - margin-top: 4px; + margin-top: 6px; } .item .actions button { - padding: 5px 10px; + padding: 6px 14px; font-size: 12px; border: none; - border-radius: 5px; + border-radius: 16px; cursor: pointer; color: white; - transition: opacity 0.15s; + transition: opacity 0.15s, transform 0.1s; } .item .actions button:hover { opacity: 0.85; } .item .actions button:active { transform: scale(0.92); } .btn-play { background: var(--play); } .btn-download { background: var(--accent); } - .loading { text-align: center; padding: 40px; color: var(--muted); } - .loading .spinner { display: inline-block; animation: spin 1s linear infinite; font-size: 28px; } + .loading { text-align: center; padding: 50px; color: var(--muted); } + .loading .spinner { + display: inline-block; + animation: spin 1s linear infinite; + font-size: 32px; + width: 56px; + height: 56px; + line-height: 56px; + background: var(--card); + border-radius: 50%; + box-shadow: var(--shadow); + margin-bottom: 8px; + } @keyframes spin { 100% { transform: rotate(360deg); } } - .empty { text-align: center; padding: 60px 20px; color: var(--muted); } - .empty .icon { font-size: 48px; display: block; margin-bottom: 12px; } + .empty { text-align: center; padding: 70px 20px; color: var(--muted); } + .empty .icon { + font-size: 56px; + display: inline-block; + width: 80px; + height: 80px; + line-height: 80px; + background: var(--card); + border-radius: 50%; + box-shadow: var(--shadow); + margin-bottom: 16px; + } - .error { text-align: center; padding: 40px 20px; color: var(--error); } + .error { + text-align: center; + padding: 50px 20px; + color: var(--error); + background: var(--card); + border-radius: 20px; + margin: 20px 0; + } @media (max-width: 480px) { - .file-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; } - .item { padding: 10px 8px; } - .item .icon { font-size: 32px; } + .file-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; } + .item { padding: 12px 8px; border-radius: 16px; } + .item .icon { font-size: 32px; width: 52px; height: 52px; line-height: 52px; } .item .name { font-size: 13px; } .item .meta { font-size: 10px; gap: 4px; } - .item .actions button { padding: 4px 8px; font-size: 11px; } + .item .actions button { padding: 5px 10px; font-size: 11px; border-radius: 14px; } .header h1 { font-size: 16px; } + .search-box input { border-radius: 20px; } }