|
|
@@ -3,8 +3,8 @@
|
|
|
<!-- 统一使用带标题容器的结构，确保标题对齐 -->
|
|
|
<!-- FC区域 - 支持可插拔控制 -->
|
|
|
<div class="form-section" v-if="showFc">
|
|
|
- <div class="section-title">FC</div>
|
|
|
- <div class="section-content">
|
|
|
+ <div class="section-title fc-title">FC</div>
|
|
|
+ <div class="section-content fc-content">
|
|
|
<el-checkbox-group v-model="modelValue.brandCode">
|
|
|
<el-checkbox
|
|
|
v-for="dict in yamadaFcBrand"
|
|
|
@@ -137,12 +137,28 @@ watch(
|
|
|
padding-top: 4px; /* 与复选框组件基线对齐 */
|
|
|
}
|
|
|
|
|
|
+/* FC区域特殊样式 - 加宽标题与内容间距 */
|
|
|
+.fc-title {
|
|
|
+ margin-right: 30px; /* 比默认增加10px间距 */
|
|
|
+}
|
|
|
+
|
|
|
/* 内容区域 - 占剩余宽度 */
|
|
|
.section-content {
|
|
|
flex: 1; /* 内容区域自适应剩余宽度 */
|
|
|
align-items: flex-start;
|
|
|
}
|
|
|
|
|
|
+/* 确保复选框与单选框垂直对齐 */
|
|
|
+::v-deep .el-checkbox {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 8px; /* 增加垂直方向间距 */
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-checkbox__input {
|
|
|
+ margin-top: -2px; /* 微调复选框位置，与单选框对齐 */
|
|
|
+}
|
|
|
+
|
|
|
.area-header-row {
|
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
|
@@ -163,5 +179,9 @@ watch(
|
|
|
width: 50px; /* 移动端标题宽度微调 */
|
|
|
margin-right: 15px;
|
|
|
}
|
|
|
+
|
|
|
+ .fc-title {
|
|
|
+ margin-right: 15px; /* 移动端恢复默认间距 */
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
liuxf