调整样式

yudao-ui-admin-vue3/src/views/pressure2/pipetaskorder/components/AddOrEditCheckItemForEquipment.vue

@@ -61,44 +61,48 @@
                 >
                   <!-- 循环渲染子项（模拟数据） -->
                   <div class="grid-item" v-for="(item, index) in checkItem.itemList" :key="index">
-<!--                    <el-checkbox-->
-<!--                      :disabled="selectedIds.includes(item.templateId) && item.reportType === 100"-->
-<!--                      v-model="item.use"-->
-<!--                      @change="(val) => handleCheckItemSelectedChange(item, val)"-->
-<!--                    />-->
-                    <el-checkbox
-                      :disabled="item.projectType === 'MAIN'|| item.name === '一览表'"
-                      v-model="item.use"
-                      @change="(val) => handleCheckItemSelectedChange(item, val)"
-                    />
-                    <div style="display: flex; align-items: center; gap: 4px;">
-                        <span v-if="item.projectType === 'MAIN'"
-                              style="display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background-color: #6cbcf5; color: #fff; font-size: 12px; border-radius: 2px; font-weight: bold;">主</span>
-                      <span>{{ item.name }}</span>
+                    <div class="grid-item-top">
+                      <el-checkbox
+                        :disabled="item.projectType === 'MAIN'|| item.name === '一览表'"
+                        v-model="item.use"
+                        @change="(val) => handleCheckItemSelectedChange(item, val)"
+                      />
+                      <div style="display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1;">
+                          <span v-if="item.projectType === 'MAIN'"
+                                style="display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 20px; height: 20px; background-color: #6cbcf5; color: #fff; font-size: 12px; border-radius: 2px; font-weight: bold;">主</span>
+                        <el-tooltip :content="item.name" placement="top" :show-after="500">
+                          <span style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; word-break: break-all;">{{ item.name }}</span>
+                        </el-tooltip>
+                      </div>
+                      <template v-if="!item.use && true">
+                        <span style="flex-shrink: 0; white-space: nowrap;">
+                        (
+                        <el-button link type="primary" @click="() => handleInputCalcField(item)"
+                        >费用：{{ getCheckItemFeeType(item) }}</el-button
+                        >
+                        )
+                        </span>
+                      </template>
                     </div>
-                    <el-input-number
-                      v-if="item.use"
-                      v-model="item.quantity"
-                      :min="1"
-                      :max="999"
-                      :precision="0"
-                      :step="1"
-                      size="small"
-                      style="width: 120px; margin-left: 8px;"
-                      controls-position="right"
-                      @change="calculateAmounts"
-                    />
-                    <template
-                      v-if="
-                        true
-                      "
-                    >
+                    <div class="grid-item-bottom" v-if="item.use">
+                      <el-input-number
+                        v-model="item.quantity"
+                        :min="1"
+                        :max="999"
+                        :precision="0"
+                        :step="1"
+                        size="small"
+                        style="width: 76px; flex-shrink: 0;"
+                        @change="calculateAmounts"
+                      />
+                      <span style="flex-shrink: 0; white-space: nowrap; margin-left: 8px;">
                       (
                       <el-button link type="primary" @click="() => handleInputCalcField(item)"
                       >费用：{{ getCheckItemFeeType(item) }}</el-button
                       >
                       )
-                    </template>
+                      </span>
+                    </div>
                   </div>
                 </div>
               </template>
@@ -946,22 +950,39 @@ const handleConfirm = async () => {
   display: grid;
   /* 5列等宽，列间距 12px，行间距 16px */
   grid-template-columns: repeat(5, 1fr);
-  align-items: center; /* 垂直居中 */
+  align-items: stretch; /* 同行等高 */
   grid-gap: 1px;
   background-color: var(--el-border-color-light);
   border: 1px solid var(--el-border-color-light);
 }
 
-/* 子项布局：复选框 + 文本 + 图标 */
+/* 子项布局 */
 .grid-item {
   display: flex;
-  align-items: center;
-  padding-left: 20px;
-  padding-right: 12px;
-  height: 52px;
+  flex-direction: column;
+  justify-content: center;
+  padding: 6px 12px 6px 20px;
+  min-height: 52px;
+  min-width: 0;
+  overflow: hidden;
   background-color: #fff;
+  gap: 4px;
+
+  .grid-item-top {
+    display: flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  .grid-item-bottom {
+    display: flex;
+    align-items: center;
+    margin-left: 22px;
+  }
+
   .el-checkbox {
     margin-right: 6px;
+    flex-shrink: 0;
   }
 }
 
@@ -996,6 +1017,12 @@ const handleConfirm = async () => {
   width: 100%;
   .el-input__inner {
     text-align: left;
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+  .el-input-number__decrease,
+  .el-input-number__increase {
+    width: 22px;
   }
 }