refactor: fullscreen iframe layout - 3D model as background with overlay panels

src/views/DaLuJiaTV1.vue

@@ -21,9 +21,11 @@
     <div class="leftLine"></div>
     <div class="rightLine"></div>
 
-    <main class="qa-dashboard">
+    <div class="main-content">
-      <section class="qa-main-grid">
+      <iframe v-if="iframeAddress" allowtransparency="true" class="model-bg-frame" :src="iframeAddress" title="三维模型"></iframe>
-        <div class="qa-column qa-column-left">
+      <div v-else class="model-placeholder">等待配置三维模型地址</div>
+
+      <div class="left-box qa-scroll">
         <section class="qa-panel qa-panel--combined">
           <div class="left-title-header">
             <span class="left-title-text">线体联动监控</span>
@@ -65,12 +67,7 @@
         </section>
       </div>
 
-        <section class="qa-model-panel">
+      <div class="right-box qa-scroll">
-          <iframe v-if="iframeAddress" allowtransparency="true" class="model-frame" :src="iframeAddress" title="三维模型"></iframe>
-          <div v-else class="model-placeholder">等待配置三维模型地址</div>
-        </section>
-
-        <div class="qa-column qa-column-right">
         <section class="qa-panel">
           <div class="right-title-header">
             <span class="right-title-text">加工设备状态</span>
@@ -122,9 +119,8 @@
           </div>
         </section>
       </div>
-      </section>
 
-      <section class="qa-bottom-grid">
+      <div class="bottom-box">
         <section class="qa-panel">
           <div class="center-title-header">
             <span>物料库位矩阵</span>
@@ -171,8 +167,8 @@
             </div>
           </div>
         </section>
-      </section>
+      </div>
-    </main>
+    </div>
   </div>
 </template>
 
@@ -463,41 +459,89 @@ body,
   background-image: url("/png/右边条.png");
 }
 
-.qa-dashboard {
+.main-content {
   position: absolute;
   z-index: 2;
   left: 64px;
   right: 64px;
   top: 100px;
   bottom: 26px;
-  display: grid;
+}
-  grid-template-rows: minmax(0, 1fr) 248px;
+
+.model-bg-frame {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: transparent;
+  z-index: 1;
+}
+
+.model-placeholder {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #77d9ff;
+  font-size: 24px;
+  background: radial-gradient(circle at center, rgba(37, 111, 184, 0.24), rgba(4, 12, 28, 0.92));
+}
+
+.left-box {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 360px;
+  bottom: 260px;
+  z-index: 10;
+  overflow-y: auto;
+}
+
+.right-box {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 360px;
+  bottom: 260px;
+  z-index: 10;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
   gap: 12px;
 }
 
-.qa-main-grid {
+.bottom-box {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 248px;
+  z-index: 10;
   display: grid;
-  grid-template-columns: 360px minmax(0, 1fr) 360px;
+  grid-template-columns: 1.2fr 1fr 1fr;
   gap: 12px;
+}
+
+.left-box .qa-panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.right-box .qa-panel:first-child {
+  flex: 1;
   min-height: 0;
 }
 
-.qa-column {
+.right-box .qa-panel:last-child {
-  min-height: 0;
+  flex-shrink: 0;
-  display: grid;
+  height: 236px;
-  gap: 12px;
 }
 
-.qa-column-left {
+.qa-panel {
-  grid-template-rows: minmax(0, 1fr);
-}
-
-.qa-column-right {
-  grid-template-rows: minmax(0, 1fr) 236px;
-}
-
-.qa-panel,
-.qa-model-panel {
   min-height: 0;
   overflow: hidden;
   border: 1px solid rgba(91, 180, 255, 0.36);
@@ -611,32 +655,6 @@ body,
   background: rgba(255, 255, 255, 0.06);
 }
 
-.qa-model-panel {
-  position: relative;
-  background: rgba(8, 18, 32, 0.22);
-}
-
-.model-frame,
-.model-placeholder {
-  position: absolute;
-  inset: 0;
-}
-
-.model-frame {
-  width: 100%;
-  height: 100%;
-  border: 0;
-  background: transparent;
-}
-
-.model-placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #77d9ff;
-  font-size: 24px;
-  background: radial-gradient(circle at center, rgba(37, 111, 184, 0.24), rgba(4, 12, 28, 0.92));
-}
 
 .monitor-card,
 .equipment-row,
@@ -842,13 +860,6 @@ body,
   margin-bottom: 10px;
 }
 
-.qa-bottom-grid {
-  display: grid;
-  grid-template-columns: 1.2fr 1fr 1fr;
-  gap: 12px;
-  min-height: 0;
-}
-
 .storage-groups {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));