feat; 质检样式调整

src/views/order/factoryOrderFlowConfig/index.vue

 <template>
 <template>
-  <div class="page card h-100 flex-gap-10 overflow-hidden flex flex-column">
+  <div class="page-wrap">
+    <div class="page card h-100 overflow-hidden">
       <div class="flow-config-container">
       <div class="flow-config-container">
         <div class="flow-steps">
         <div class="flow-steps">
           <div
           <div
@@ -10,12 +11,13 @@
             {{ item.name }}
             {{ item.name }}
           </div>
           </div>
         </div>
         </div>
-      <div class="step-button flex-1 mt-10">
+        <div class="step-button mt-10">
           <el-checkbox v-model="draftSkipInspect">
           <el-checkbox v-model="draftSkipInspect">
             跳过质检流程 (跳过后生产完成到待配货状态)
             跳过质检流程 (跳过后生产完成到待配货状态)
           </el-checkbox>
           </el-checkbox>
         </div>
         </div>
       </div>
       </div>
+    </div>
     <div class="footer-actions">
     <div class="footer-actions">
       <el-button type="primary" @click="updateConfig"> 保存 </el-button>
       <el-button type="primary" @click="updateConfig"> 保存 </el-button>
     </div>
     </div>
@@ -39,12 +41,19 @@ const factoryOrderFlowConfig = ref<FactoryOrderFlowConfig>()
 /** 勾选草稿，仅保存后同步到已生效配置 */
 /** 勾选草稿，仅保存后同步到已生效配置 */
 const draftSkipInspect = ref(false)
 const draftSkipInspect = ref(false)
 
 
+const STEP_WIDTH = 150
+
 const showFlowConfigList = computed(() =>
 const showFlowConfigList = computed(() =>
   draftSkipInspect.value
   draftSkipInspect.value
     ? flowConfigList.value.filter((item) => item.code !== 'INSPECTION')
     ? flowConfigList.value.filter((item) => item.code !== 'INSPECTION')
     : flowConfigList.value,
     : flowConfigList.value,
 )
 )
 
 
+/** 按完整步骤数预留宽度，勾选后容器不收缩，避免居中抖动 */
+const fullStepsWidth = computed(
+  () => `${flowConfigList.value.length * STEP_WIDTH}px`,
+)
+
 // 获取质检状态
 // 获取质检状态
 const getConfig = async () => {
 const getConfig = async () => {
   const res = await getFactoryOrderFlowConfigApi()
   const res = await getFactoryOrderFlowConfigApi()
@@ -108,21 +117,35 @@ onMounted(async () => {
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
+.page-wrap {
+  position: relative;
+  height: 100%;
+}
+
+.page {
+  width: 1200px;
+  margin: 0 auto;
+}
+
 .flow-config-container {
 .flow-config-container {
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
   align-items: flex-start;
   align-items: flex-start;
-  flex: 1;
-  min-height: 0;
-  width: fit-content;
-  margin-left: 25%;
-  margin-top: 50px;
+  width: max-content;
+  min-width: v-bind(fullStepsWidth);
+  margin: 50px auto 0;
 }
 }
 
 
 .footer-actions {
 .footer-actions {
+  position: absolute;
+  bottom: -10px;
+  left: -10px;
+  right: -50px;
+  z-index: 1;
   display: flex;
   display: flex;
   justify-content: center;
   justify-content: center;
-  flex-shrink: 0;
+  padding: 16px 0;
+  background: rgba(144, 147, 153, 0.2);
 }
 }
 
 
 .flow-steps {
 .flow-steps {

src/views/order/factoryOrderNew/component/QualityFailDialog.vue

@@ -8,8 +8,11 @@
     @close="handleClose"
     @close="handleClose"
   >
   >
     <ElForm ref="formRef" :model="form" :rules="rules">
     <ElForm ref="formRef" :model="form" :rules="rules">
-      <div class="mb-10">
-        {{ qualityPassed ? '确定质检通过吗？' : '确定质检不通过吗？' }}
+      <div v-if="qualityPassed">
+        <div style="margin: 5px 0 20px 0">确定质检通过吗？</div>
+      </div>
+      <div v-else style="margin: 0 0 10px 0">
+        <div>确定质检不通过吗？</div>
       </div>
       </div>
       <ElFormItem
       <ElFormItem
         v-if="!qualityPassed"
         v-if="!qualityPassed"