CSS（基準変更）

src/components/PublicRange.vue

@@ -128,7 +128,6 @@ watch(
 /* 标题容器 - 固定宽度确保垂直对齐 */
 .section-title {
   width: 100px; /* 固定宽度，确保三个标题垂直对齐 */
-  margin-right: 14px; /* 标题与内容的间距 */
   font-size: 14px;
   color: #606266;
   font-weight: 700;

src/views/fcbi/sales/sumSettings.vue

@@ -2,33 +2,35 @@
 <template>
   <div class="app-container">
     <div class="form-container">
-      <div class="section-container">
-        <div class="form-section">
-          対象
-        </div>
-        <el-form-item class="content-group">
+      <!-- 対象区域：使用el-form-item的label属性替代独立标题 -->
+      <el-form-item
+          label="対象"
+          class="section-container"
+          label-width="100px"
+      >
+        <div class="content-group">
           <div class="radio-group-vertical">
             <!-- 月指定行 -->
             <div class="monthly-section">
-                <div class="date-groups-wrapper">
-                  <div class="date-group">
-                    <el-radio class="common-radio" :value="TARGET_PERIOD_TYPE.MONTHLY" v-model="queryParams.targetPeriodType">
-                      月指定
-                    </el-radio>
-                    <el-select class="sales-sum-date-select" v-model="queryParams.startYear" placeholder=""
-                               :disabled="queryParams.targetPeriodType !== TARGET_PERIOD_TYPE.MONTHLY">
-                      <el-option v-for="year in years" :key="year" :label="year" :value="year"></el-option>
-                    </el-select>
-                    <span class="date-label">年</span>
-                  </div>
-                  <div class="date-group">
-                    <el-select class="sales-sum-date-select-small" v-model="queryParams.startMonth" placeholder=""
-                               :disabled="queryParams.targetPeriodType !== TARGET_PERIOD_TYPE.MONTHLY">
-                      <el-option v-for="month in months" :key="month" :label="month" :value="month"></el-option>
-                    </el-select>
-                    <span class="date-label">月</span>
-                  </div>
+              <div class="date-groups-wrapper">
+                <div class="date-group">
+                  <el-radio class="common-radio" :value="TARGET_PERIOD_TYPE.MONTHLY" v-model="queryParams.targetPeriodType">
+                    月指定
+                  </el-radio>
+                  <el-select class="sales-sum-date-select" v-model="queryParams.startYear" placeholder=""
+                             :disabled="queryParams.targetPeriodType !== TARGET_PERIOD_TYPE.MONTHLY">
+                    <el-option v-for="year in years" :key="year" :label="year" :value="year"></el-option>
+                  </el-select>
+                  <span class="date-label">年</span>
                 </div>
+                <div class="date-group">
+                  <el-select class="sales-sum-date-select-small" v-model="queryParams.startMonth" placeholder=""
+                             :disabled="queryParams.targetPeriodType !== TARGET_PERIOD_TYPE.MONTHLY">
+                    <el-option v-for="month in months" :key="month" :label="month" :value="month"></el-option>
+                  </el-select>
+                  <span class="date-label">月</span>
+                </div>
+              </div>
             </div>
             <!-- 年度指定行 -->
             <div class="radio-item annual-group">
@@ -46,22 +48,27 @@
               </div>
             </div>
           </div>
-        </el-form-item>
-      </div>
-      <!-- 集計種別区域：使用相同的section-container结构 -->
-      <div class="section-container">
-        <!-- 与“対象”区域保持一致：使用form-section作为标题容器 -->
-        <div class="form-section">集計種別</div>
-        <el-form-item class="content-group"> <!-- 复用content-group，确保内容区域基准一致 -->
+        </div>
+      </el-form-item>
+
+      <!-- 集計種別区域：同样使用el-form-item的label属性 -->
+      <el-form-item
+          label="集計種別"
+          class="section-container"
+          label-width="100px"
+      >
+        <div class="content-group"> <!-- 复用content-group，确保内容区域基准一致 -->
           <el-radio-group v-model="queryParams.aggregationType" class="radio-group-horizontal">
             <!-- 为每个radio添加common-radio类，与“対象”区域的单选框样式统一 -->
             <el-radio class="common-radio" :value="AGGREGATION_TYPE.FC">FC別集計</el-radio>
             <el-radio class="common-radio" :value="AGGREGATION_TYPE.AREA">エリア別集計</el-radio>
             <el-radio class="common-radio" :value="AGGREGATION_TYPE.STORE">店舗別集計</el-radio>
           </el-radio-group>
-        </el-form-item>
-      </div>
+        </div>
+      </el-form-item>
+
       <el-divider class="custom-divider"></el-divider>
+
       <div class="section-fc-area">
         <PublicRange
             v-model="queryParams"
@@ -73,6 +80,7 @@
             :show-business-type="true"
         />
       </div>
+
       <div class="btn-section">
         <el-button class="btn-aggregation" @click="handleAggregate" v-hasPermi="['fcbi:sales:sum']">集計</el-button>
         <el-button class="btn-reset" @click="resetForm" icon="Refresh">リセット</el-button>
@@ -378,14 +386,16 @@ const resetForm = () => {
   align-items: flex-start; /* 顶部对齐，确保各区域垂直基准一致 */
   margin-bottom: 12px; /* 区域间垂直间距，区分不同设置项 */
   gap: 10px; /* 标题与内容区的固定水平间距 */
+  margin-left: 0 !important; /* 清除el-form-item默认左间距 */
 }
 
-/* 标题样式 - 统一"対象"和"集計種別"的显示 */
-.form-section {
-  width: 80px !important; /* 固定宽度，确保标题左侧起点一致 */
+/* 通过深度选择器控制el-form-item的label样式，替代原.form-section */
+:deep(.el-form-item__label) {
+  width: 100px !important; /* 固定宽度，确保标题左侧起点一致 */
   font-size: 14px !important; /* 统一字体大小，保持视觉一致性 */
   line-height: 1.4 !important; /* 统一行高，确保文字基线对齐 */
-  padding-left: 0 !important; /* 清除额外左内边距，避免对齐偏差 */
+  padding-left: 15px !important; /* 左对齐标题，节省空间并统一缩进 */
+  padding-right: 0 !important; /* 清除右侧内边距 */
   margin: 0 !important; /* 清除默认外边距，避免布局偏移 */
   margin-top: 5px !important; /* 与单选框保持垂直居中对齐 */
   text-align: left !important; /* 强制左对齐，统一标题显示方式 */
@@ -394,8 +404,8 @@ const resetForm = () => {
   box-sizing: border-box !important; /* 宽度计算包含边框和内边距，避免尺寸偏差 */
   position: relative !important; /* 建立稳定定位基准，便于子元素定位 */
   top: 0 !important; /* 清除定位偏移，确保顶部对齐 */
-  color: #606266; /* 标题文字颜色，使用中性色调增强可读性 */
-  font-weight: 700; /* 标题文字加粗，突出显示设置项类别 */
+  color: #606266 !important; /* 标题文字颜色，使用中性色调增强可读性 */
+  font-weight: 700 !important; /* 标题文字加粗，突出显示设置项类别 */
 }
 
 /* 公共区域容器 - FC/区域选择部分的布局 */
@@ -412,7 +422,7 @@ const resetForm = () => {
 
 /* 按钮区域样式 - 集計和リセット按钮容器 */
 .btn-section {
-  padding-left: calc(27px + 80px + 10px); /* 与标题对齐：27px偏移+80px标题宽度+10px间距 */
+  padding-left: calc(15px + 100px + 10px); /* 与标题对齐：15px偏移+100px标题宽度+10px间距 */
   margin-top: 25px; /* 顶部外边距，与上方内容保持距离 */
   display: flex; /* 使用Flex布局 */
   gap: 10px; /* 按钮间距，区分不同按钮 */
@@ -421,15 +431,8 @@ const resetForm = () => {
   flex-wrap: wrap; /* 小屏幕下按钮换行，避免溢出 */
 }
 
-/* 标题补充样式 - 调整宽度和左对齐细节 */
-.form-section {
-  margin-left: 15px !important; /* 左对齐标题，节省空间并统一缩进 */
-  width: 100px !important; /* 调整宽度，为内容区预留足够空间 */
-  font-size: 14px !important; /* 微调字体大小保持一致性 */
-}
-
 /* 标题首字符样式 - 确保左侧无额外间距 */
-.form-section::first-letter {
+:deep(.el-form-item__label)::first-letter {
   margin-left: 0 !important; /* 清除首字符可能的默认左间距，确保对齐精确 */
 }
 
@@ -681,7 +684,7 @@ const resetForm = () => {
 /* 媒体查询 - 平板端（768px-1023px） */
 @media (min-width: 768px) and (max-width: 1023px) {
   .btn-section {
-    padding-left: calc(15px + 70px + 10px); /* 与标题对齐，动态计算左侧内边距 */
+    padding-left: calc(15px + 100px + 10px); /* 与标题对齐，动态计算左侧内边距 */
   }
 
   /* 保持按钮宽度一致 */
@@ -693,12 +696,6 @@ const resetForm = () => {
     gap: 4px; /* 缩小间距，适应中等屏幕 */
   }
 
-  .form-section {
-    margin-left: 15px !important; /* 左对齐标题，节省空间 */
-    width: 100px !important; /* 缩短标题宽度，为内容区让空间 */
-    font-size: 14px !important; /* 标题文字微调 */
-  }
-
   /* 仅调整年度指定行的布局，与月指定对齐 */
   .annual-group {
     gap: 5px !important; /* 与月指定的radio-item保持相同间距 */
@@ -735,7 +732,8 @@ const resetForm = () => {
     width: auto !important; /* 取消强制宽度计算 */
   }
 
-  .form-section {
+  /* 标题样式调整 */
+  :deep(.el-form-item__label) {
     width: 80px !important; /* 保持宽度为80px */
     white-space: nowrap !important; /* 禁止换行，确保标题完整显示 */
     margin-left: 0 !important; /* 清除左侧外边距干扰 */
@@ -840,5 +838,3 @@ const resetForm = () => {
   }
 }
 </style>
-
-