|
|
@@ -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;
|
