css対応

src/components/PublicRange.vue

@@ -20,7 +20,7 @@
 
     <!-- 業種区域 - 原有可插拔控制 -->
     <div class="form-section" v-if="showBusinessType">
-      <div class="section-title">業種</div>
+      <div class="section-title fc-title">業種</div>
       <div class="section-content">
         <el-checkbox-group v-model="modelValue.businessTypeCode">
           <el-checkbox
@@ -37,7 +37,7 @@
 
     <!-- エリア区域 - 支持可插拔控制 -->
     <div class="form-section" v-if="showArea">
-      <div class="section-title">エリア</div>
+      <div class="section-title area-title">エリア</div>
       <div class="area-header-row">
         <RegionTree
             class="region-tree-container"
@@ -142,6 +142,11 @@ watch(
   margin-right: 30px; /* 比默认增加10px间距 */
 }
 
+/* エリア区域特殊样式 - 加宽标题与内容间距 */
+.area-title {
+  margin-right: 25px; /* 比默认增加10px间距 */
+}
+
 /* 内容区域 - 占剩余宽度 */
 .section-content {
   flex: 1; /* 内容区域自适应剩余宽度 */

src/views/fcbi/sales/sumSettings.vue

@@ -8,8 +8,8 @@
             <div class="radio-group-vertical">
               <!-- 月指定行 -->
               <div class="radio-item">
-                <el-radio class="common-radio" :label="TARGET_PERIOD_TYPE.MONTHLY"
-                  v-model="queryParams.targetPeriodType">月指定
+                <el-radio class="common-radio" :label="TARGET_PERIOD_TYPE.MONTHLY" v-model="queryParams.targetPeriodType">
+                月指定
                 </el-radio>
                 <div class="annual-row">
                   <div class="date-group">
@@ -42,7 +42,7 @@
                 </div>
               </div> 
             </div>
-        </el-form-item>
+          </el-form-item>
       </div>
       <!-- 集計種別区域：使用相同的section-container结构 -->
       <div class="section-container">
@@ -65,6 +65,7 @@
           :yamada-business-type="yamadaBusinessType"
           @check-change="handleCheckChange"
           :show-fc="true"
+          :show-business-type="true"
       />
       <div class="btn-section">
         <el-button class="btn-aggregation" @click="handleAggregate" v-hasPermi="['fcbi:sales:sum']">集計</el-button>
@@ -441,42 +442,46 @@ const resetRegionTreeCheck = (nodes) => {
 .radio-item {
   display: flex; /* 单选框和下拉框在同一行 */
   align-items: center; /* 垂直居中对齐 */
-  gap: 10px; /* 单选框和下拉框的间距 */
+  gap: 8px; /* 缩小间距，为小屏幕预留空间 */
   width: 100%; /* 占满父容器宽度 */
+  min-width: 0; /* 允许容器缩小 */
+  flex-wrap: nowrap; /* 默认不换行，强制保持同行 */
 }
 
 /* 下拉框容器 - 自适应剩余宽度，与单选框同行 */
 .annual-row {
   flex: 1; /* 占据剩余宽度 */
-  min-width: 0; /* 允许缩小 */
+  min-width: 0; /* 允许收缩 */
   margin: 0; /* 清除默认边距 */
+  padding: 2px 0; /* 减少内边距，节省空间 */
 }
 
 /* 日期选择器组样式 - 年/月下拉框和按钮容器 */
 .date-group {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px; /* 缩小元素间距 */
   width: 100%; /* 占满下拉框容器宽度 */
-  white-space: nowrap; /* 强制内容不折行 */
-  overflow: hidden; /* 避免溢出容器 */
+  min-width: 0;
+  white-space: nowrap; /* 防止内部元素换行 */
+  overflow: hidden; /* 极端情况隐藏溢出内容（配合省略号） */
   text-overflow: ellipsis; /* 极端情况显示省略号 */
 }
 
-/* 日期选择器样式 - 年下拉框（强制适配9999宽度） */
+/* 日期选择器样式 - 年下拉框（强制适配宽度） */
 .date-select {
-  width: 100px !important;  /* 使用!important强制覆盖默认样式 */
-  min-width: 100px !important; /* 确保最小宽度不被拉伸 */
-  padding-left: 8px !important;
-  padding-right: 8px !important;
+  width: 100px !important; /* 取消固定宽度，改为自适应内容 */
+  min-width: 80px !important; /* 最小宽度，避免过度压缩 */
+  max-width: 120px !important; /* 最大宽度，防止过宽 */
+  padding: 0 8px !important; /* 减少内边距 */
 }
 
 /* 日期选择器样式 - 月下拉框 */
 .date-select-small {
-  width: 80px !important;  /* 使用!important强制覆盖默认 */
-  min-width: 80px !important; /* 确保最小宽度不被拉伸 */
-  padding-left: 8px !important;
-  padding-right: 8px !important;
+  width: 80px !important; /* 取消固定宽度，改为自适应内容 */
+  min-width: 60px !important; /* 月下拉框最小宽度 */
+  max-width: 90px !important;
+  padding: 0 8px !important; /* 减少内边距 */
 }
 
 /* 日期标签样式 - "年"和"月"文字 */
@@ -529,6 +534,37 @@ const resetRegionTreeCheck = (nodes) => {
   height: 32px; /* 统一高度 */
 }
 
+/* 响应式样式 - 平板端 (768px-1023px) */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .btn-section {
+    padding-left: 90px; /* 与标题对齐 */
+  }
+
+  /* 保持与移动端相同的宽度 */
+  .btn-aggregation, .btn-reset {
+    width: 120px; /* 统一宽度 */
+  }
+
+  /* 平板设备（768px以下）适配 */
+  .radio-item {
+    gap: 5px; /* 进一步缩小间距 */
+  }
+  
+  .date-group {
+    gap: 4px;
+  }
+  
+  .form-section {
+    margin-left: 15px !important; /* 左对齐标题，节省空间 */
+    width: 70px !important; /* 缩短标题宽度，为内容区让空间 */
+  }
+  
+  /* 标题文字微调，确保“対象”完整显示 */
+  .form-section {
+    font-size: 13px !important;
+  }
+}
+
 /* 响应式样式 - 移动端 (<768px) */
 @media (max-width: 767px) {
   .btn-section {
@@ -552,24 +588,56 @@ const resetRegionTreeCheck = (nodes) => {
     padding-left: 20px; /* 左侧内边距 */
   }
 
-  .date-group {
-    flex-wrap: wrap;    /* 允许折行 */
+ .date-group {
+    flex-wrap: wrap; /* 保留折行能力，但控制折行位置 */
+    align-items: center; /* 确保对齐 */
+  }
+  
+  /* 年下拉框区域固定宽度，防止被挤压 */
+  .date-group > .date-select:first-child {
+    width: 100px !important; /* 固定年下拉框宽度 */
+    flex-shrink: 0; /* 禁止压缩 */
+  }
+  
+  /* 年标签与年下拉框绑定，不单独折行 */
+  .date-group > .date-label:nth-child(2) {
+    margin-right: 8px; /* 与月下拉框保持间距 */
+    flex-shrink: 0; /* 禁止压缩 */
   }
 
   .radio-group-horizontal {
     gap: 10px; /* 缩小水平间距 */
   }
-}
 
-/* 响应式样式 - 平板端 (768px-1023px) */
-@media (min-width: 768px) and (max-width: 1023px) {
-  .btn-section {
-    padding-left: 90px; /* 与标题对齐 */
-  }
+  /* 手机设备（480px以下）适配 */
+  @media (max-width: 480px) {
+    .radio-item {
+      flex-wrap: wrap; /* 极端窄屏允许换行，但保持关联性 */
+      justify-content: flex-start;
+      gap: 10px 5px; /* 换行后上下间距10px，左右5px */
+    }
+    
+    /* 单选框单独占一行，下拉框占一行，确保内容完整 */
+    .common-radio {
+      width: 100% !important;
+      margin-bottom: 4px !important;
+    }
+    
+    .annual-row {
+      width: 100%;
+      padding-left: 25px; /* 与单选框圆圈对齐，保持视觉关联 */
+    }
 
-  /* 保持与移动端相同的宽度 */
-  .btn-aggregation, .btn-reset {
-    width: 120px; /* 统一宽度 */
+    /* 核心：年下拉框区域不折行，月下拉框折行后左对齐 */
+    .date-group {
+      /* 年下拉框+年标签作为一个整体不折行 */
+      /* 月下拉框+月标签自动折行，并与年下拉框左对齐 */
+    }
+  
+    /* 月下拉框折行后与年下拉框左对齐（通过父容器padding控制） */
+    .date-group > .date-select-small {
+      min-width: 80px !important; /* 恢复月下拉框基础宽度 */
+    }
   }
 }
 
@@ -578,5 +646,4 @@ const resetRegionTreeCheck = (nodes) => {
   text-align: left !important;  /* 强制左对齐 */
   padding-left: 20px;           /* 左侧内边距 */
 }
-
 </style>