生产履历 左边的订单展示显示的信息右边内容展示高度一致

src/views/pro/traceability/index.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="mainContentBox flex">
     <div>
-      <el-aside
-        width="600px"
-        style="min-height: 800px; max-height: calc(100vh - 200px)"
-      >
+      <el-aside width="600px" style="height: calc(100vh - 200px)">
         <avue-crud
           ref="crudRef"
           v-model:search="search"
@@ -28,7 +25,7 @@
         </avue-crud>
       </el-aside>
     </div>
-    <div style="width: calc(100% - 600px)">
+    <div style="width: calc(100% - 600px); height: calc(100vh - 160px)">
       <el-header style="height: 20%">
         <el-descriptions title="产品信息一览" border>
           <el-descriptions-item label="产品名称">{{
@@ -60,13 +57,17 @@
           >
         </el-descriptions>
       </el-header>
-      <el-main>
+      <el-main style="height: 80%">
         <el-tabs
           type="border-card"
           @tab-click="tabsEvent"
           v-model="defaultTabName"
         >
-          <el-tab-pane name="traceabilityComRef" label="生产履历">
+          <el-tab-pane
+            name="traceabilityComRef"
+            label="生产履历"
+            class="tabpaneBox"
+          >
             <template #label>
               <span
                 >生产履历
@@ -79,7 +80,11 @@
             </template>
             <TraceabilityCom ref="traceabilityComRef" />
           </el-tab-pane>
-          <el-tab-pane name="materialsComRef" label="已采物料">
+          <el-tab-pane
+            name="materialsComRef"
+            label="已采物料"
+            class="tabpaneBox"
+          >
             <template #label>
               <span
                 >已采物料
@@ -92,7 +97,7 @@
             </template>
             <MaterialsCom ref="materialsComRef" />
           </el-tab-pane>
-          <el-tab-pane name="recordComRef" label="记录项">
+          <el-tab-pane name="recordComRef" label="记录项" class="tabpaneBox">
             <template #label>
               <span
                 >记录项
@@ -105,7 +110,7 @@
             </template>
             <RecordCom ref="recordComRef"
           /></el-tab-pane>
-          <el-tab-pane name="checkComRef" label="点检判定">
+          <el-tab-pane name="checkComRef" label="点检判定" class="tabpaneBox">
             <template #label>
               <span
                 >点检判定
@@ -118,7 +123,7 @@
             </template>
             <CheckCom ref="checkComRef" />
           </el-tab-pane>
-          <el-tab-pane name="equitComRef" label="设备使用">
+          <el-tab-pane name="equitComRef" label="设备使用" class="tabpaneBox">
             <template #label>
               <span
                 >设备使用
@@ -127,7 +132,7 @@
             </template>
             <EquitCom ref="equitComRef"
           /></el-tab-pane>
-          <el-tab-pane name="faultComRef" label="报故记录">
+          <el-tab-pane name="faultComRef" label="报故记录" class="tabpaneBox">
             <template #label>
               <span
                 >报故记录
@@ -137,7 +142,7 @@
             <FaultCom ref="faultComRef" />
           </el-tab-pane>
           <!--            <el-tab-pane name="bugComRef" label="缺陷项">缺陷项</el-tab-pane>-->
-          <el-tab-pane name="mediaComRef" label="图片采集"
+          <el-tab-pane name="mediaComRef" label="图片采集" class="tabpaneBox"
             ><template #label>
               <span
                 >图片采集
@@ -151,7 +156,7 @@
             <media-com ref="mediaComRef"
           /></el-tab-pane>
 
-          <el-tab-pane name="excelComRef" label="表格数据"
+          <el-tab-pane name="excelComRef" label="表格数据" class="tabpaneBox"
             ><template #label>
               <span
                 >表格数据
@@ -160,7 +165,7 @@
             </template>
             <ExcelCom ref="excelComRef"
           /></el-tab-pane>
-          <el-tab-pane name="cssjComRef" label="设备数据"
+          <el-tab-pane name="cssjComRef" label="设备数据" class="tabpaneBox"
             ><template #label>
               <span
                 >设备数据
@@ -173,7 +178,7 @@
             </template>
             <TestData ref="cssjComRef"
           /></el-tab-pane>
-          <el-tab-pane name="fileComRef" label="工序文件">
+          <el-tab-pane name="fileComRef" label="工序文件" class="tabpaneBox">
             <template #label>
               <span
                 >工序文件
@@ -386,3 +391,9 @@ onMounted(() => {
   dataList();
 });
 </script>
+
+<style lang="scss" scoped>
+.tabpaneBox {
+  height: calc(100vh - 520px);
+}
+</style>