优化布局

src/render/components/ScrollBoardTable.vue

@@ -11,7 +11,7 @@
       />
     </div>
 
-    <div class="table-body flex-grow">
+    <div class="table-body flex-grow overflow-y-auto">
       <div
         class="row-item flex"
         v-for="(row, ri) in data.satellites"
@@ -43,7 +43,18 @@ const evenRowBGC = '#0A2732'
 
 const header = ['卫星编号', '仰角', '方位角', '载噪比']
 const data = reactive({
-  satellites: []
+  satellites: [
+    // {id: 0, svid: 1, cn: 2, sd: 3},
+    // {id: 0, svid: 1, cn: 2, sd: 3},
+    // {id: 0, svid: 1, cn: 2, sd: 3},
+    // {id: 0, svid: 1, cn: 2, sd: 3},
+    // {id: 0, svid: 1, cn: 2, sd: 3},
+    // {id: 0, svid: 1, cn: 2, sd: 3},
+    // {id: 0, svid: 1, cn: 2, sd: 3},
+    // {id: 0, svid: 1, cn: 2, sd: 3},
+    // {id: 0, svid: 1, cn: 2, sd: 3},
+    // {id: 0, svid: 1, cn: 2, sd: 3},
+  ]
 })
 
 const update = (GSVArr: Array<any>) => {
@@ -65,6 +76,29 @@ defineExpose({ update })
   background-color: rgb(25, 129, 246);
 }
 
+.table-body {
+  height: 342px;
+}
+
+.table-body::-webkit-scrollbar {
+  width: 0;
+}
+
+.table-body:hover::-webkit-scrollbar {
+  width: 12px;
+}
+
+.table-body:hover::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
+    background-color: rgb(25, 129, 246);
+}
+
+.table-body:hover::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
+    background-color: #111827;
+}
+
 .row-item {
   line-height: 38px;
 }