1 托盘绑定界面样式调整实现 扫码可以实时看到设备矩阵界面的数据。

zhmes-agecal-web/src/views/screen/components/TrayBinding.vue

@@ -182,13 +182,8 @@ export default {
     }
   },
   mounted() {
-    // 初始化时聚焦到输入框
     this.$nextTick(() => {
       this.$refs.deviceInput.focus();
-      // 获取容器宽度
-      if (this.$refs.container) {
-        this.floatingWidth = `${this.$refs.container.clientWidth - 60}px`; // 减去内边距
-      }
       // 添加滚动监听
       if (this.$refs.devicesContent) {
         this.$refs.devicesContent.addEventListener('scroll', this.handleScrollEvent);
@@ -702,7 +697,6 @@ export default {
 .tray-binding-container {
   width: 100%;
   height: 100%;
-  max-width: 1400px;
   background: rgba(10, 20, 40, 0.85);
   border-radius: 20px;
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
@@ -716,26 +710,27 @@ export default {
 
 /* 添加悬浮包装器样式 */
 .tray-id-section-wrapper {
+  width: calc(100% - 20px); /* 减去左右 margin */
+  margin-left: 10px;
+  margin-right: 10px;
   transition: all 0.3s ease;
   z-index: 10;
-  position: sticky; /* 使用sticky定位 */
-  top: 0;
-  left: 0;
-  right: 0;
-  margin: 0 auto;
-  width: 100%;
-  max-width: 1340px; /* 容器宽度减去padding */
-  flex-shrink: 0; /* 防止收缩 */
+  position: sticky;
+  flex-shrink: 0;
+  box-sizing: border-box;
 }
 
 .tray-id-section-wrapper.floating {
   z-index: 1000;
+  width: calc(100% - 20px); /* 悬浮状态保持相同宽度 */
   background: rgba(10, 20, 40, 0.95);
   border-radius: 0 0 15px 15px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
   border: 1px solid rgba(64, 158, 255, 0.4);
   border-top: none;
   padding: 15px;
+  margin-left: 10px;
+  margin-right: 10px; /* 悬浮状态也要保持对称边距 */
 }
 
 /* 设备矩阵包装器 - 包含设备矩阵和操作按钮 */
@@ -746,6 +741,9 @@ export default {
   margin-top: 15px;
   position: relative;
   overflow: hidden; /* 隐藏超出部分 */
+  margin-left: 10px;
+  margin-right: 10px; /* 添加右边距，与左边距对称 */
+  box-sizing: border-box; /* 确保内边距包含在宽度内 */
 }
 
 /* 设备内容区域 - 可滚动 */
@@ -758,6 +756,33 @@ export default {
   background: rgba(0, 40, 80, 0.3);
   border: 1px solid rgba(64, 158, 255, 0.4);
   margin-bottom: 95px; /* 为操作按钮区域留出空间 */
+  box-sizing: border-box; /* 确保内边距包含在宽度内 */
+
+  /* 自定义滚动条样式 */
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: rgba(64, 158, 255, 0.6) rgba(0, 40, 80, 0.3); /* Firefox */
+}
+
+/* Chrome, Edge, Safari 滚动条样式 */
+.devices-content::-webkit-scrollbar {
+  width: 10px; /* 滚动条宽度 */
+}
+
+.devices-content::-webkit-scrollbar-track {
+  background: rgba(0, 40, 80, 0.3); /* 轨道背景色 - 与设备矩阵背景一致 */
+  border-radius: 10px; /* 轨道圆角 */
+  margin: 5px 0; /* 轨道上下边距 */
+}
+
+.devices-content::-webkit-scrollbar-thumb {
+  background: rgba(64, 158, 255, 0.6); /* 滑块背景色 */
+  border-radius: 10px; /* 滑块圆角 */
+  border: 2px solid rgba(0, 40, 80, 0.3); /* 滑块边框，与轨道背景融合 */
+  background-clip: padding-box; /* 背景延伸到边框内边距 */
+}
+
+.devices-content::-webkit-scrollbar-thumb:hover {
+  background: rgba(64, 158, 255, 0.8); /* 鼠标悬停时滑块颜色 */
 }
 
 /* 操作按钮包装器 */
@@ -770,6 +795,7 @@ export default {
   background: linear-gradient(to bottom, transparent, rgba(10, 20, 40, 0.9) 30%);
   padding: 5px 0;
   pointer-events: none; /* 让点击穿透到下面的内容 */
+  box-sizing: border-box; /* 确保内边距包含在宽度内 */
 }
 
 /* 操作按钮区域 */
@@ -778,12 +804,12 @@ export default {
   justify-content: center;
   gap: 30px;
   pointer-events: auto; /* 恢复按钮的点击事件 */
-  padding: 5px 5px;
+  padding: 5px 15px;
   background: rgba(0, 40, 80, 0.8);
   border-radius: 15px;
   border: 1px solid rgba(64, 158, 255, 0.4);
-  margin: 0 5px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  box-sizing: border-box; /* 确保内边距包含在宽度内 */
 }
 
 /* 调整托盘信息区域间距 */
@@ -818,6 +844,7 @@ export default {
   text-align: right;
   position: relative;
   flex-shrink: 0; /* 防止收缩 */
+  padding: 0 10px; /* 对齐内边距 */
 }
 
 .back-button {
@@ -852,6 +879,7 @@ export default {
   border: 1px solid rgba(64, 158, 255, 0.4);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
   transition: all 0.3s ease;
+  box-sizing: border-box; /* 确保内边距包含在宽度内 */
 }
 
 .tray-display {