Showing
1 changed file
with
79 additions
and
8 deletions
| @@ -488,7 +488,14 @@ class HTMLRenderer: | @@ -488,7 +488,14 @@ class HTMLRenderer: | ||
| 488 | </div> | 488 | </div> |
| 489 | <div class="header-actions"> | 489 | <div class="header-actions"> |
| 490 | <theme-button value="light" id="theme-toggle" size="1.5"></theme-button> | 490 | <theme-button value="light" id="theme-toggle" size="1.5"></theme-button> |
| 491 | - <button id="print-btn" class="action-btn" type="button">打印页面</button> | 491 | + <button id="print-btn" class="action-btn print-btn" type="button"> |
| 492 | + <svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | ||
| 493 | + <polyline points="6 9 6 2 18 2 18 9"></polyline> | ||
| 494 | + <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path> | ||
| 495 | + <rect x="6" y="14" width="12" height="8"></rect> | ||
| 496 | + </svg> | ||
| 497 | + <span>打印页面</span> | ||
| 498 | + </button> | ||
| 492 | <button id="export-btn" class="action-btn" type="button" style="display: none;">⬇️ 导出PDF</button> | 499 | <button id="export-btn" class="action-btn" type="button" style="display: none;">⬇️ 导出PDF</button> |
| 493 | </div> | 500 | </div> |
| 494 | </header> | 501 | </header> |
| @@ -3235,22 +3242,72 @@ theme-button {{ | @@ -3235,22 +3242,72 @@ theme-button {{ | ||
| 3235 | margin: 0; | 3242 | margin: 0; |
| 3236 | }} | 3243 | }} |
| 3237 | .action-btn {{ | 3244 | .action-btn {{ |
| 3245 | + --mouse-x: 50%; | ||
| 3246 | + --mouse-y: 50%; | ||
| 3238 | border: none; | 3247 | border: none; |
| 3239 | - border-radius: 6px; | ||
| 3240 | - background: var(--primary-color); | 3248 | + border-radius: 10px; |
| 3249 | + background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); | ||
| 3241 | color: #fff; | 3250 | color: #fff; |
| 3242 | - padding: 10px 16px; | 3251 | + padding: 11px 22px; |
| 3243 | cursor: pointer; | 3252 | cursor: pointer; |
| 3244 | - font-size: 0.95rem; | ||
| 3245 | - transition: transform 0.2s ease; | ||
| 3246 | - min-width: 160px; | 3253 | + font-size: 0.92rem; |
| 3254 | + font-weight: 600; | ||
| 3255 | + letter-spacing: 0.025em; | ||
| 3256 | + transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); | ||
| 3257 | + min-width: 140px; | ||
| 3247 | white-space: nowrap; | 3258 | white-space: nowrap; |
| 3248 | display: inline-flex; | 3259 | display: inline-flex; |
| 3249 | align-items: center; | 3260 | align-items: center; |
| 3250 | justify-content: center; | 3261 | justify-content: center; |
| 3262 | + gap: 10px; | ||
| 3263 | + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08); | ||
| 3264 | + position: relative; | ||
| 3265 | + overflow: hidden; | ||
| 3266 | +}} | ||
| 3267 | +.action-btn::before {{ | ||
| 3268 | + content: ''; | ||
| 3269 | + position: absolute; | ||
| 3270 | + top: 0; | ||
| 3271 | + left: 0; | ||
| 3272 | + width: 100%; | ||
| 3273 | + height: 100%; | ||
| 3274 | + background: linear-gradient(to bottom, rgba(255,255,255,0.12), transparent); | ||
| 3275 | + opacity: 0; | ||
| 3276 | + transition: opacity 0.35s ease; | ||
| 3277 | +}} | ||
| 3278 | +.action-btn::after {{ | ||
| 3279 | + content: ''; | ||
| 3280 | + position: absolute; | ||
| 3281 | + top: var(--mouse-y); | ||
| 3282 | + left: var(--mouse-x); | ||
| 3283 | + width: 0; | ||
| 3284 | + height: 0; | ||
| 3285 | + background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%); | ||
| 3286 | + border-radius: 50%; | ||
| 3287 | + transform: translate(-50%, -50%); | ||
| 3288 | + transition: width 0.45s ease-out, height 0.45s ease-out; | ||
| 3289 | + pointer-events: none; | ||
| 3251 | }} | 3290 | }} |
| 3252 | .action-btn:hover {{ | 3291 | .action-btn:hover {{ |
| 3253 | - transform: translateY(-1px); | 3292 | + transform: translateY(-2px); |
| 3293 | + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.1); | ||
| 3294 | +}} | ||
| 3295 | +.action-btn:hover::before {{ | ||
| 3296 | + opacity: 1; | ||
| 3297 | +}} | ||
| 3298 | +.action-btn:hover::after {{ | ||
| 3299 | + width: 280%; | ||
| 3300 | + height: 280%; | ||
| 3301 | +}} | ||
| 3302 | +.action-btn:active {{ | ||
| 3303 | + transform: translateY(0) scale(0.98); | ||
| 3304 | + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); | ||
| 3305 | +}} | ||
| 3306 | +.action-btn .btn-icon {{ | ||
| 3307 | + width: 18px; | ||
| 3308 | + height: 18px; | ||
| 3309 | + flex-shrink: 0; | ||
| 3310 | + filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15)); | ||
| 3254 | }} | 3311 | }} |
| 3255 | body.exporting {{ | 3312 | body.exporting {{ |
| 3256 | cursor: progress; | 3313 | cursor: progress; |
| @@ -6015,6 +6072,20 @@ document.addEventListener('DOMContentLoaded', () => { | @@ -6015,6 +6072,20 @@ document.addEventListener('DOMContentLoaded', () => { | ||
| 6015 | if (printBtn) { | 6072 | if (printBtn) { |
| 6016 | printBtn.addEventListener('click', () => window.print()); | 6073 | printBtn.addEventListener('click', () => window.print()); |
| 6017 | } | 6074 | } |
| 6075 | + // 为所有 action-btn 添加鼠标追踪光晕效果 | ||
| 6076 | + document.querySelectorAll('.action-btn').forEach(btn => { | ||
| 6077 | + btn.addEventListener('mousemove', (e) => { | ||
| 6078 | + const rect = btn.getBoundingClientRect(); | ||
| 6079 | + const x = ((e.clientX - rect.left) / rect.width) * 100; | ||
| 6080 | + const y = ((e.clientY - rect.top) / rect.height) * 100; | ||
| 6081 | + btn.style.setProperty('--mouse-x', x + '%'); | ||
| 6082 | + btn.style.setProperty('--mouse-y', y + '%'); | ||
| 6083 | + }); | ||
| 6084 | + btn.addEventListener('mouseleave', () => { | ||
| 6085 | + btn.style.setProperty('--mouse-x', '50%'); | ||
| 6086 | + btn.style.setProperty('--mouse-y', '50%'); | ||
| 6087 | + }); | ||
| 6088 | + }); | ||
| 6018 | const exportBtn = document.getElementById('export-btn'); | 6089 | const exportBtn = document.getElementById('export-btn'); |
| 6019 | if (exportBtn) { | 6090 | if (exportBtn) { |
| 6020 | exportBtn.addEventListener('click', exportPdf); | 6091 | exportBtn.addEventListener('click', exportPdf); |
-
Please register or login to post a comment