From 8d9c99bda2ba47f3e391b0f672f0448690cf510f Mon Sep 17 00:00:00 2001
From: yinpeng <2291314224@qq.com>
Date: Thu, 13 Feb 2025 00:49:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=AF=86=E9=92=A5?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E9=A1=B5=E9=9D=A2=E6=BB=9A=E5=8A=A8=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C=EF=BC=8C=E6=B7=BB=E5=8A=A0=E5=AE=B9=E5=99=A8=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E5=92=8C=E6=B8=90=E5=8F=98=E6=8C=89=E9=92=AE=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/templates/keys_status.html | 34 ++++++++++++++++++++++++----------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/app/templates/keys_status.html b/app/templates/keys_status.html
index bca5ea6..619cbdd 100644
--- a/app/templates/keys_status.html
+++ b/app/templates/keys_status.html
@@ -31,6 +31,14 @@
             backdrop-filter: blur(10px);
             position: relative;
             margin: 20px auto;
+            overflow-y: auto;
+            max-height: calc(100vh - 40px);
+            scrollbar-width: none; /* Firefox */
+            -ms-overflow-style: none; /* IE and Edge */
+        }
+        
+        .container::-webkit-scrollbar {
+            display: none; /* Chrome, Safari, Opera */
         }
 
         @media (max-width: 768px) {
@@ -154,13 +162,17 @@
         }
         
         .key-list .key-content {
-            transition: max-height 0.3s ease-out;
+            transition: all 0.3s ease-out;
             overflow: hidden;
-            max-height: 2000px;
+            height: auto;
+            opacity: 1;
         }
         
         .key-list .key-content.collapsed {
-            max-height: 0;
+            height: 0;
+            opacity: 0;
+            padding-top: 0;
+            padding-bottom: 0;
         }
         ul {
             list-style-type: none;
@@ -288,13 +300,13 @@
             position: fixed;
             right: 20px;
             bottom: 20px;
-            display: flex;
+            display: none;
             flex-direction: column;
             gap: 10px;
             z-index: 1000;
         }
         .scroll-btn {
-            background: rgba(118, 75, 162, 0.9);
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;
             width: 40px;
             height: 40px;
@@ -310,7 +322,7 @@
             box-shadow: 0 2px 10px rgba(0,0,0,0.2);
         }
         .scroll-btn:hover {
-            background: rgba(102, 126, 234, 0.9);
+            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
             transform: scale(1.1);
         }
         .scroll-btn:active {
@@ -525,15 +537,17 @@
         }
 
         function scrollToTop() {
-            window.scrollTo({
+            const container = document.querySelector('.container');
+            container.scrollTo({
                 top: 0,
                 behavior: 'smooth'
             });
         }
-
+        
         function scrollToBottom() {
-            window.scrollTo({
-                top: document.documentElement.scrollHeight,
+            const container = document.querySelector('.container');
+            container.scrollTo({
+                top: container.scrollHeight,
                 behavior: 'smooth'
             });
         }