1 机械臂调整

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

 <template>
   <div class="robotic-arm-panel">
+    <!-- 左上角标题 -->
+
+    <!-- 标题区域 -->
+      <div class="panel-title">
+        <div class="title-text">机械臂</div>
+        <div class="title-line"></div>
+        <div class="board-header"></div>
+    </div>
+
     <!-- 状态指示灯 -->
     <div class="status-indicator">
       <div class="status-light" :class="statusClass"></div>
@@ -145,6 +154,38 @@ export default {
 </script>
 
 <style scoped>
+/* 左上角标题样式 */
+.panel-title {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  right: 20px;
+  z-index: 20; /* 确保在其他元素上方 */
+}
+
+/* 标题区域横线样式 - 放在title-line下方 */
+.board-header {
+  border-bottom: 1px solid rgba(64, 158, 255, 0.3);
+  padding-right: 20px;
+  width: 100%; /* 横线全屏宽度 */
+}
+
+.title-text {
+  font-size: 22px;
+  font-weight: bold;
+  color: #ffffff;
+  letter-spacing: 1px;
+  text-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
+}
+
+.title-line {
+  height: 3px;
+  width: 100px;
+  background: linear-gradient(to right, #409EFF, transparent);
+  margin-top: 8px;
+  border-radius: 2px;
+}
+
 /* 外层容器：强制填满父元素高度 */
 .robotic-arm-panel {
   width: 100%;
@@ -157,11 +198,12 @@ export default {
   flex-direction: column;
   border: 1px solid rgba(64, 158, 255, 0.3);
   box-shadow: 0 0 20px rgba(0, 50, 120, 0.3);
-  box-sizing: border-box; /* 关键：包含padding在高度计算内 */
+  box-sizing: border-box;
   overflow: hidden;
+  position: relative; /* 为标题绝对定位提供参考 */
 }
 
-/* 状态指示灯区域 */
+/* 状态指示灯区域 - 调整位置避免与标题重叠 */
 .status-indicator {
   display: flex;
   align-items: center;
@@ -170,6 +212,7 @@ export default {
   background: rgba(0, 30, 60, 0.4);
   border-radius: 8px;
   width: fit-content;
+  margin-top: 60px; /* 增加顶部间距避开标题 */
 }
 
 .status-light {
@@ -217,9 +260,9 @@ export default {
 /* 主内容区：填充剩余高度 */
 .main-content {
   display: flex;
-  flex: 1; /* 关键：占据剩余全部高度 */
+  flex: 1;
   gap: 15px;
-  min-height: 0; /* 允许flex容器收缩 */
+  min-height: 0;
   overflow: hidden;
 }
 
@@ -239,7 +282,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 300px; /* 确保机械臂有最小显示空间 */
+  min-height: 300px;
 }
 
 .robotic-arm {
@@ -259,8 +302,8 @@ export default {
   border: 1px solid rgba(64, 158, 255, 0.3);
   display: flex;
   flex-direction: column;
-  height: 100%; /* 关键：填满父容器高度 */
-  box-sizing: border-box; /* 包含padding在高度内 */
+  height: 100%;
+  box-sizing: border-box;
 }
 
 .command-title {
@@ -274,9 +317,9 @@ export default {
 
 /* 指令列表：自动扩展，超出滚动 */
 .command-list {
-  flex: 1; /* 关键：占据剩余高度 */
-  overflow-y: auto; /* 内容超出时显示滚动条 */
-  min-height: 0; /* 修复flex子元素高度限制 */
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
 }
 
 .command-list::-webkit-scrollbar {
@@ -433,6 +476,7 @@ export default {
   border-radius: 5px;
 }
 
+
 .gripper-left {
   transform: rotate(-15deg);
 }
@@ -492,6 +536,15 @@ export default {
     height: auto;
     min-height: 200px;
   }
+
+  /* 响应式标题调整 */
+  .title-text {
+    font-size: 20px;
+  }
+
+  .status-indicator {
+    margin-top: 50px;
+  }
 }
 
 @media (max-width: 500px) {
@@ -506,6 +559,14 @@ export default {
   .cmd-info {
     font-size: 12px;
   }
+
+  .title-text {
+    font-size: 18px;
+  }
+
+  .title-line {
+    width: 80px;
+  }
 }
 
 @media (max-width: 300px) {