CSS対応

src/views/fcbi/sales/sumSettings.vue

@@ -8,7 +8,7 @@
             <div class="radio-group-vertical">
               <!-- 月指定行 -->
               <div class="radio-item">
-                <el-radio class="vertical-radio" :label="TARGET_PERIOD_TYPE.MONTHLY"
+                <el-radio class="common-radio" :label="TARGET_PERIOD_TYPE.MONTHLY"
                   v-model="queryParams.targetPeriodType">月指定
                 </el-radio>
                 <div class="annual-row">
@@ -28,8 +28,9 @@
               </div>
               <!-- 年度指定行 -->
               <div class="radio-item">
-                <el-radio class="annual-radio" :label="TARGET_PERIOD_TYPE.ANNUAL"
-                        v-model="queryParams.targetPeriodType">年度指定</el-radio>
+                <el-radio class="common-radio" :label="TARGET_PERIOD_TYPE.ANNUAL" v-model="queryParams.targetPeriodType">
+                  年度指定
+                </el-radio>
                 <div class="annual-row">
                   <div class="date-group">
                     <el-select v-model="queryParams.annual" placeholder="" class="date-select"
@@ -45,14 +46,17 @@
       </div>
       <!-- 集計種別区域：使用相同的section-container结构 -->
       <div class="section-container">
-        <el-form-item label="集計種別" style="margin-left: 50px;margin-top: -15px">
-          <el-radio-group v-model="queryParams.aggregationType" class="custom-radio-group">
-            <el-radio :label="AGGREGATION_TYPE.FC">FC別集計</el-radio>
-            <el-radio :label="AGGREGATION_TYPE.AREA">エリア別集計</el-radio>
-            <el-radio :label="AGGREGATION_TYPE.STORE">店舗別集計</el-radio>
+        <!-- 与“対象”区域保持一致：使用form-section作为标题容器 -->
+        <div class="form-section">集計種別</div>
+        <el-form-item class="content-group"> <!-- 复用content-group，确保内容区域基准一致 -->
+          <el-radio-group v-model="queryParams.aggregationType" class="radio-group-horizontal">
+            <!-- 为每个radio添加common-radio类，与“対象”区域的单选框样式统一 -->
+            <el-radio class="common-radio" :label="AGGREGATION_TYPE.FC">FC別集計</el-radio>
+            <el-radio class="common-radio" :label="AGGREGATION_TYPE.AREA">エリア別集計</el-radio>
+            <el-radio class="common-radio" :label="AGGREGATION_TYPE.STORE">店舗別集計</el-radio>
           </el-radio-group>
         </el-form-item>
-      </div>  
+      </div> 
       <div class="divider"></div>
       <PublicRange
           v-model="queryParams"
@@ -379,14 +383,16 @@ const resetRegionTreeCheck = (nodes) => {
   gap: 20px; /* 集計種別选项之间的水平间距 */
   align-items: center;
   flex-wrap: wrap; /* 确保小屏幕下不溢出 */
+  margin: 0 !important; /* 清除可能的默认margin */
 }
 
 /* 6. 所有单选框统一样式（核心：确保左侧对齐） */
 .common-radio {
-  width: 100px; /* 固定宽度，适配所有选项文字长度 */
-  flex-shrink: 0; /* 不压缩，保持宽度一致 */
+  width: 100px !important; /* 固定宽度，确保文字左侧起点对齐 */
+  flex-shrink: 0 !important; /* 禁止压缩，保持宽度稳定 */
   margin: 0 !important; /* 清除默认margin */
-  text-align: left; /* 文字左对齐，确保起始点一致 */
+  padding: 0 !important; /* 清除默认padding */
+  text-align: left !important; /* 文字左对齐，确保起始点一致 */
 }
 
 /* 7. 单选按钮与下拉框的组合容器 - 强制单行显示 */
@@ -415,14 +421,20 @@ const resetRegionTreeCheck = (nodes) => {
   text-overflow: ellipsis; /* 极端情况显示省略号 */
 }
 
-/* 日期选择器样式 - 年下拉框 */
+/* 日期选择器样式 - 年下拉框（强制适配9999宽度） */
 .date-select {
-  width: 90px;  /* 固定宽度 */
+  width: 100px !important;  /* 使用!important强制覆盖默认样式 */
+  min-width: 100px !important; /* 确保最小宽度不被拉伸 */
+  padding-left: 8px !important;
+  padding-right: 8px !important;
 }
 
 /* 日期选择器样式 - 月下拉框 */
 .date-select-small {
-  width: 70px;  /* 固定宽度 */
+width: 80px !important;  /* 使用!important强制覆盖默 */
+min-width: 80px !important; /* 确保最小宽度不被拉伸 */
+padding-left: 8px !important;
+padding-right: 8px !important;
 }
 
 /* 日期标签样式 - "年"和"月"文字 */