效果预览修改

src/views/codeRule/PreviewResult.vue

@@ -12,13 +12,15 @@
       <!-- 样品信息区域 -->
         
       <div class="sample-info">
-        <div class="info-row">
+       <div class="info-grid">
+         <div class="info-row" v-for="(item,index) in list" :key="index">
           <el-select v-model="sampleValue" placeholder="样品品种" class="info-select">
             <el-option label="硅酸盐水泥" value="1"></el-option>
           </el-select>
         </div>
+       </div>
 
-        <div class="info-row">
+        <!-- <div class="info-row">
           <el-select v-model="codeValue" placeholder="代号" class="info-select">
             <el-option label="P.I" value="1"></el-option>
           </el-select>
@@ -28,7 +30,7 @@
           <el-select v-model="strengthValue" placeholder="强度等级" class="info-select">
             <el-option label="42.5" value="1"></el-option>
           </el-select>
-        </div>
+        </div> -->
       </div>
 
       <!-- 技术指标区域 -->
@@ -72,7 +74,14 @@ export default {
       strengthValue: '',
       techValue1: '',
       techValue2: '',
-      techValue3: ''
+      techValue3: '',
+      list: [
+        { label: '样品品种', value: 'sample' },
+        { label: '代号', value: 'code' },
+        { label: '强度等级', value: 'strength' },
+        { label: '强度等级', value: 'strength' },
+        { label: '强度等级', value: 'strength' }
+      ]
     }
   },
   methods: {
@@ -101,13 +110,25 @@ export default {
  
 
   .sample-info {
-    margin-bottom: 10px;
-    display: flex;
-    justify-content: space-between;
+    padding: 20px;
     
+    .info-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr); // 每行3列
+      gap: 20px; // 设置间距
+      width: 100%;
+    }
 
-  }
+    .info-row {
+      display: flex;
+      align-items: center;
 
+      .info-select {
+        width: 100%; // 让select填满容器
+        max-width: 300px; // 限制最大宽度
+      }
+    }
+  }
   .info-row {
     display: flex;
     align-items: center;