css対応

src/components/PublicRange.vue

@@ -1,48 +1,41 @@
 <template>
   <div class="public-range-container">
-    <!-- FC选择 -->
-    <el-form-item
-        label="FC"
-        prop="brandCode"
-        class="fc-form-item"
-    >
-      <div class="el-form-item__label" style="flex-shrink: 0; margin-right: 20px;"></div>
-      <el-checkbox-group v-model="modelValue.brandCode">
-        <el-checkbox
-            v-for="dict in yamadaFcBrand"
-            :key="dict.value"
-            :label="dict.value"
-            style="margin-right: 60px;"
-        >
-          {{ dict.label }}
-        </el-checkbox>
-      </el-checkbox-group>
-    </el-form-item>
+    <!-- 统一使用带标题容器的结构，确保标题对齐 -->
+    <div class="form-section">
+      <div class="section-title">FC</div>
+      <div class="section-content">
+        <el-checkbox-group v-model="modelValue.brandCode">
+          <el-checkbox
+              v-for="dict in yamadaFcBrand"
+              :key="dict.value"
+              :label="dict.value"
+              style="margin-right: 60px;"
+          >
+            {{ dict.label }}
+          </el-checkbox>
+        </el-checkbox-group>
+      </div>
+    </div>
 
-    <!-- 業種选择 -->
-    <el-form-item
-        v-if="showBusinessType"
-        label="業種"
-        prop="businessTypeCode"
-        class="business-type-form-item"
-    >
-      <div class="el-form-item__label" style="flex-shrink: 0; margin-right: 14px;"></div>
-      <el-checkbox-group v-model="modelValue.businessTypeCode">
-        <el-checkbox
-            v-for="dict in yamadaBusinessType"
-            :key="dict.value"
-            :label="dict.value"
-            style="margin-right: 32px;"
-        >
-          {{ dict.label }}
-        </el-checkbox>
-      </el-checkbox-group>
-    </el-form-item>
+    <div class="form-section" v-if="showBusinessType">
+      <div class="section-title">業種</div>
+      <div class="section-content">
+        <el-checkbox-group v-model="modelValue.businessTypeCode">
+          <el-checkbox
+              v-for="dict in yamadaBusinessType"
+              :key="dict.value"
+              :label="dict.value"
+              style="margin-right: 32px;"
+          >
+            {{ dict.label }}
+          </el-checkbox>
+        </el-checkbox-group>
+      </div>
+    </div>
 
-    <!-- エリア选择 -->
-    <div class="area-container">
+    <div class="form-section">
+      <div class="section-title">エリア</div>
       <div class="area-header-row">
-        <h1 class="area-title">エリア</h1>
         <RegionTree
             class="region-tree-container"
             :treeData="regionTree"
@@ -55,7 +48,7 @@
 
 <script setup>
 import { defineProps, defineEmits, watch } from 'vue';
-import RegionTree from  './RegionTree.vue';
+import RegionTree from './RegionTree.vue';
 
 const props = defineProps({
   modelValue: {
@@ -98,35 +91,42 @@ const handleCheckChange = (regionId, isChecked) => {
 };
 
 watch(
-    () => props.modelValue,
-    (newValue) => {
-      emits('update:modelValue', newValue);
-    },
-    { deep: true }
+  () => props.modelValue,
+  (newValue) => {
+    emits('update:modelValue', newValue);
+  },
+  { deep: true }
 );
 </script>
 
 <style scoped>
 .public-range-container {
   margin-top: 10px;
+  padding-left: 60px; /* 统一左侧内边距，确保整体左对齐 */
 }
 
-.fc-form-item {
-  margin-left: 60px;
+/* 统一的区块样式，标题和内容横向排列 */
+.form-section {
   display: flex;
-  align-items: center;
-  margin-top: 10px;
+  align-items: flex-start; /* 标题和内容顶部对齐 */
+  margin-top: 15px;
 }
 
-.business-type-form-item {
-  margin-left: 55px;
-  display: flex;
-  align-items: center;
-  margin-top: -15px;
+/* 标题容器 - 固定宽度确保垂直对齐 */
+.section-title {
+  width: 60px; /* 固定宽度，确保三个标题垂直对齐 */
+  margin-right: 20px; /* 标题与内容的间距 */
+  font-size: 14px;
+  color: #606266;
+  font-weight: 700;
+  text-align: left; /* 首字母对齐关键：左对齐 */
+  padding-top: 4px; /* 与复选框组件基线对齐 */
 }
 
-.area-container {
-  margin-top: 10px;
+/* 内容区域 - 占剩余宽度 */
+.section-content {
+  flex: 1; /* 内容区域自适应剩余宽度 */
+  align-items: flex-start;
 }
 
 .area-header-row {
@@ -134,27 +134,20 @@ watch(
   align-items: flex-start;
 }
 
-.area-title {
-  font-size: 14px;
-  margin-left: 57px !important;
-  margin-right: 20px;
-  margin-top: 0;
-  color: #606266;
-  font-weight: 700;
-}
-
+/* 区域树特殊样式调整 */
 .region-tree-container {
-  margin-top: -12px;
-  margin-left: -2px;
+  margin-top: -4px; /* 微调与标题的垂直对齐 */
 }
 
+/* 响应式调整 */
 @media (max-width: 768px) {
-  .business-type-form-item {
-    margin-left: 13%;
+  .public-range-container {
+    padding-left: 13%; /* 移动端左侧百分比对齐 */
   }
-
-  .area-title {
-    margin-left: 13% !important;
+  
+  .section-title {
+    width: 50px; /* 移动端标题宽度微调 */
+    margin-right: 15px;
   }
 }
 </style>

src/views/fcbi/sales/sumSettings.vue

@@ -64,7 +64,7 @@
           :yamada-fc-brand="yamadaFcBrand"
           :yamada-business-type="yamadaBusinessType"
           @check-change="handleCheckChange"
-          :show-business-type="false"
+          :show-business-type="true"
       />
       <div class="btn-section">
         <el-button class="btn-aggregation" @click="handleAggregate" v-hasPermi="['fcbi:sales:sum']">集計</el-button>
@@ -373,37 +373,6 @@ const resetRegionTreeCheck = (nodes) => {
   margin-left: 0 !important; /* 首个字符（対、集）左侧无额外间距 */
 }
 
-/* 2. FC、業種所在容器的左侧偏移 */
-.public-range-container {
-  margin-top: 10px;
-  /* 核心：左侧偏移量 = 分隔线左侧margin（27px） */
-  padding-left: 27px !important; 
-  box-sizing: border-box;
-}
-
-/* 3. FC、業種的标签占位元素（与.form-section对齐） */
-.el-form-item__label {
-  width: 80px !important; /* 与.form-section宽度一致 */
-  flex-shrink: 0 !important;
-  padding: 0 !important;
-  margin: 0 !important;
-  text-align: left !important;
-}
-
-/* 4. エリア标题样式 */
-.area-title {
-  font-size: 14px;
-  color: #606266;
-  font-weight: 700;
-  width: 80px !important; /* 与其他标题宽度一致 */
-  flex-shrink: 0 !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  /* 与.form-section的垂直位置一致 */
-  margin-top: 5px !important; 
-}
-
-/* 3. 内容区域容器（统一偏移量） */
 .content-group {
   flex: 1; /* 占满剩余宽度 */
   margin: 0 !important; /* 清除element-ui默认margin */