Browse Source

优化数量和成本价格输入框布局,确保在同一行同一水平线上显示

Boss
Default User 4 weeks ago
parent
commit
bcabf5ff66
  1. 34
      supply.html

34
supply.html

@ -1231,7 +1231,7 @@
/* 调整手机端规格-件数-价格对的布局 */ /* 调整手机端规格-件数-价格对的布局 */
.spec-quantity-pair { .spec-quantity-pair {
flex-direction: column; flex-wrap: wrap;
align-items: stretch; align-items: stretch;
} }
@ -1243,6 +1243,7 @@
/* 件数和采购价在手机端显示为一行 */ /* 件数和采购价在手机端显示为一行 */
.quantity-input, .quantity-input,
.costprice-input { .costprice-input {
flex: 1;
width: calc(50% - 5px); width: calc(50% - 5px);
margin-bottom: 0; margin-bottom: 0;
} }
@ -1331,7 +1332,7 @@
.spec-quantity-pair { .spec-quantity-pair {
display: flex; display: flex;
align-items: center; flex-wrap: wrap;
gap: 10px; gap: 10px;
background-color: #fafafa; background-color: #fafafa;
padding: 10px; padding: 10px;
@ -1339,22 +1340,22 @@
border: 1px solid #f0f0f0; border: 1px solid #f0f0f0;
} }
/* 调整件数和采购价的排列,让它们在所有设备上都能在一行显示 */
.spec-quantity-pair {
flex-wrap: wrap;
}
.spec-value { .spec-value {
flex: 1; flex: 1;
min-width: 100%; min-width: 100%;
} }
/* 件数和采购价的容器 */
.quantity-cost-container {
display: flex;
gap: 10px;
width: 100%;
}
.quantity-input, .quantity-input,
.costprice-input { .costprice-input {
flex: 1; flex: 1;
min-width: calc(50% - 5px); width: 50%;
width: calc(50% - 5px);
display: inline-block;
} }
.spec-value { .spec-value {
@ -1368,9 +1369,12 @@
cursor: pointer; cursor: pointer;
} }
.quantity-input { .quantity-input,
width: 120px; .costprice-input {
width: calc(50% - 5px);
background-color: white; background-color: white;
height: 40px;
box-sizing: border-box;
} }
.add-spec-quantity-btn { .add-spec-quantity-btn {
@ -3393,8 +3397,10 @@
pair.className = 'spec-quantity-pair'; pair.className = 'spec-quantity-pair';
pair.innerHTML = ` pair.innerHTML = `
<input type="text" class="spec-value" placeholder="请选择规格" readonly onclick="showSpecSelectModalForPair(this, 'pair')"> <input type="text" class="spec-value" placeholder="请选择规格" readonly onclick="showSpecSelectModalForPair(this, 'pair')">
<input type="text" class="form-input quantity-input" placeholder="请输入件数" onwheel="this.blur()"> <div class="quantity-cost-container">
<input type="text" class="form-input costprice-input" placeholder="请输入采购价" onwheel="this.blur()"> <input type="text" class="form-input quantity-input" placeholder="请输入件数" onwheel="this.blur()">
<input type="text" class="form-input costprice-input" placeholder="请输入采购价" onwheel="this.blur()">
</div>
<input type="text" class="form-input spec-status-input" placeholder="规格状态" value="0" onwheel="this.blur()" style="width: 120px; display: none;" readonly> <input type="text" class="form-input spec-status-input" placeholder="规格状态" value="0" onwheel="this.blur()" style="width: 120px; display: none;" readonly>
<button type="button" class="remove-quantity-btn" onclick="removeSpecQuantityPair(this)">×</button> <button type="button" class="remove-quantity-btn" onclick="removeSpecQuantityPair(this)">×</button>
`; `;

Loading…
Cancel
Save