style(tunnel): 优化隧道页面样式

- 调整管理员角色下的设备表格和分页样式
- 增加报警隧道的滚动条样式
- 修改分页按钮的样式，使用 min-width 以适应不同屏幕

src/views/tunnel/index.vue

@@ -190,7 +190,7 @@
           <el-button @click="handleReset">重置</el-button>
         </el-form-item>
       </el-form>
-      <div class="device-table" :style="{ marginTop: roleKey === 'administrator' ? '40px' : '0' }">
+      <div class="device-table" :style="{ marginTop: roleKey === 'administrator' ? '10px' : '0' }">
         <el-table stripe v-loading="loading" :empty-text="tableEmptyText"
           style="background-color: #011c29;--el-table-border-color: none;"
           :header-cell-style="{ backgroundColor: '#064B66', color: '#fff', fontSize: '40px', borderBottom: 'none' }"
@@ -229,13 +229,13 @@
         </el-table>
         <div
           class="pagination"
-          :style="{ bottom: roleKey === 'administrator' ? '40px' : '0' }"
+          :style="{ bottom: roleKey === 'administrator' ? '-7px' : '0' }"
         >
           <el-pagination
             background
             v-model:current-page="pageInfo.pageNum"
             v-model:page-size="pageInfo.pageSize"
-            :total="total"
+            :total="total" :pager-count="8"
             prev-text="上一页"
             next-text="下一页"
             layout="prev, pager, next"
@@ -350,7 +350,7 @@ let send = {
 };
 const pageInfo = reactive({
   pageNum: 1,
-  pageSize: 10,
+  pageSize: 40,
 });
 const queryForm = ref();
 const total = ref(10);
@@ -739,6 +739,30 @@ const initWebSocket = () => {
 </script>
 
 <style lang="scss">
+.alarm-tunnel .device-table{
+
+  height: 1158px!important;
+  overflow-y: scroll;
+  .el-dialog__body{
+    height: 1158px!important;
+    overflow-y: scroll;
+  }
+  &::-webkit-scrollbar {
+    width: 16px;
+  }
+
+  // 滚动条轨道
+  &::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 2px;
+  }
+
+  // 小滑块
+  &::-webkit-scrollbar-thumb {
+    background: rgb(8, 183, 184);
+    border-radius: 10px;
+  }
+}
 .el-drawer__header {
   display: none;
 }
@@ -1095,7 +1119,7 @@ const initWebSocket = () => {
   }
 
   :deep(.el-pager li.is-active) {
-    width: 70px;
+    min-width: 70px;
     height: 70px;
     background: #60ddde;
     border-radius: 50%;
@@ -1109,7 +1133,7 @@ const initWebSocket = () => {
   }
 
   :deep(.el-pager li:not(.is-active)) {
-    width: 70px;
+    min-width: 70px;
     height: 70px;
     border: 1px solid #60ddde;
     border-radius: 50%;