优化展示

src/components/inventory/StockAdjustmentDialog.vue

@@ -27,21 +27,20 @@
         </el-select>
       </el-form-item>
       <el-form-item label="变动数量" prop="change_amount">
-        <el-input-group class="stock-adjustment-input-group">
+        <div class="amount-unit-wrapper">
           <el-input-number
             v-model="displayAmount"
             :min="computedMin"
             :precision="computedPrecision"
             :step="computedStep"
             controls-position="right"
+            class="amount-input"
           ></el-input-number>
-          <template #append>
+          <el-select v-model="unit" placeholder="单位" class="unit-select">
-            <el-select v-model="unit" placeholder="单位" style="width: 80px;">
             <el-option label="g" value="g"></el-option>
             <el-option label="kg" value="kg"></el-option>
           </el-select>
-          </template>
+        </div>
-        </el-input-group>
       </el-form-item>
       <el-form-item label="备注" prop="remarks">
         <el-input v-model="form.remarks" type="textarea" :rows="2"></el-input>
@@ -242,27 +241,18 @@ export default {
 </script>
 
 <style scoped>
-/* 确保 el-input-group 的 append 部分正确显示 */
+.amount-unit-wrapper {
-.stock-adjustment-input-group {
   display: flex;
-  width: 100%; /* 确保 input-group 占据可用宽度 */
+  align-items: center;
+  width: 100%;
 }
 
-/* 针对 el-input-number 内部的输入框 */
+.amount-input {
-.stock-adjustment-input-group :deep(.el-input-number) {
+  flex: 1; /* 让输入框占据剩余空间 */
-  flex: 1; /* 让 el-input-number 占据剩余空间 */
+  margin-right: 10px; /* 输入框和选择器之间的间距 */
 }
 
-/* 针对 el-input-group__append 内部的 el-select */
+.unit-select {
-.stock-adjustment-input-group :deep(.el-input-group__append) {
+  width: 80px; /* 固定单位选择器的宽度 */
-  background-color: var(--el-fill-color-blank);
-  padding: 0;
-  /* 确保 select 宽度固定 */
-  width: 80px;
-}
-
-.stock-adjustment-input-group :deep(.el-input-group__append .el-select) {
-  margin: 0;
-  width: 100%; /* 让 select 填充 append 区域 */
 }
 </style>