From d17bdf02ddf09182cb08cb114544c5f964b4b50d Mon Sep 17 00:00:00 2001
From: dj <1042039504@qq.com>
Date: Wed, 18 Jun 2025 10:26:32 +0800
Subject: [PATCH] =?UTF-8?q?style(tunnel):=20=E4=BC=98=E5=8C=96=E9=9A=A7?=
 =?UTF-8?q?=E9=81=93=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整管理员角色下的设备表格和分页样式
- 增加报警隧道的滚动条样式
- 修改分页按钮的样式，使用 min-width 以适应不同屏幕
---
 src/views/tunnel/index.vue | 36 ++++++++++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/views/tunnel/index.vue b/src/views/tunnel/index.vue
index 27f18e7..0b89e98 100644
--- a/src/views/tunnel/index.vue
+++ b/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%;