From 20ef5d0bca345980456f921eb95e3eca20a4c65d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=9B=9B=E6=9C=88=E9=BB=8E=E6=98=8E?= <zmqpersonal@163.com>
Date: Fri, 3 Nov 2023 11:09:05 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=A6=96=E9=A1=B5=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE=E4=BF=A1=E6=81=AF=E6=BB=9A=E5=8A=A8=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lyear_main.html | 42 ++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 40 insertions(+), 2 deletions(-)
diff --git a/lyear_main.html b/lyear_main.html
index c56f94a..d4da809 100644
--- a/lyear_main.html
+++ b/lyear_main.html
@@ -14,6 +14,22 @@
 <link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="css/style.min.css">
+
+<style type="text/css">
+  .table-container {
+    max-height: 300px; /* 设置表格容器的最大高度 */
+    overflow-y: auto; /* 允许垂直滚动 */
+  }
+  
+  /* 使表单头部保持在顶部，不随内容滚动 */
+  #tableHead {
+	  position: sticky; 
+	  width: 100%;
+	  top: 0;
+	  background-color: white;
+  }
+</style>
+
 </head>
   
 <body>
@@ -113,9 +129,9 @@
   	      <div class="card-title">项目信息</div>
   	    </header>
   		<div class="card-body">
-  		  <div class="table-responsive">
+  		  <div id="tableContainer" class="table-responsive table-container">
   		    <table class="table table-hover">
-  		      <thead>
+  		      <thead id="tableHead">
   		        <tr>
   		          <th>#</th>
   		          <th>项目名称</th>
@@ -284,5 +300,27 @@ $(document).ready(function(e) {
 	});
 });
 </script>
+<!-- 项目信息滚动显示效果 -->
+<script type="text/javascript">
+  let isMouseOver = false;
+  const tableContainer = document.getElementById('tableContainer');
+
+  function autoScroll() {
+    if (!isMouseOver) {
+      tableContainer.scrollTop += 1; // 每次滚动一像素
+    }
+    setTimeout(autoScroll, 50); // 设置滚动速度
+  }
+
+  autoScroll();
+
+  tableContainer.addEventListener('mouseenter', () => {
+    isMouseOver = true;
+  });
+
+  tableContainer.addEventListener('mouseleave', () => {
+    isMouseOver = false;
+  });
+</script>
 </body>
 </html>
\ No newline at end of file
-- 
Gitee

