ソース対応

src/views/fcbi/sales/sumSettings.vue

@@ -9,44 +9,46 @@
         <el-form-item class="content-group">
           <div class="radio-group-vertical">
             <!-- 月指定行 -->
-            <div class="radio-item">
-              <el-radio class="common-radio" :label="TARGET_PERIOD_TYPE.MONTHLY" v-model="queryParams.targetPeriodType">
-              月指定
+            <div class="monthly-section">
+              <div class="monthly-header">
+                <div class="date-groups-wrapper">
+                  <div class="date-group">
+                    <el-radio class="common-radio" :label="TARGET_PERIOD_TYPE.MONTHLY" v-model="queryParams.targetPeriodType">
+                      月指定
+                    </el-radio>
+                    <el-select class="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="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>
+            <!-- 年度指定行 -->
+            <div class="radio-item annual-group">
+              <el-radio class="common-radio" :label="TARGET_PERIOD_TYPE.ANNUAL" v-model="queryParams.targetPeriodType">
+                年度指定
               </el-radio>
               <div class="annual-row">
-                <div class="date-group-item">
-                  <el-select class="date-select" v-model="queryParams.startYear" placeholder=""
-                         :disabled="queryParams.targetPeriodType !== TARGET_PERIOD_TYPE.MONTHLY">
+                <div class="date-group">
+                  <el-select v-model="queryParams.annual" placeholder="" class="date-select"
+                             :disabled="queryParams.targetPeriodType !== TARGET_PERIOD_TYPE.ANNUAL">
                     <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-item">
-                  <el-select class="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>
+                  <span class="date-label">年度</span>
                 </div>
               </div>
             </div>
-              <!-- 年度指定行 -->
-              <div class="radio-item  annual-group">
-                <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"
-                           :disabled="queryParams.targetPeriodType !== TARGET_PERIOD_TYPE.ANNUAL">
-                      <el-option v-for="year in years" :key="year" :label="year" :value="year"></el-option>
-                    </el-select>
-                    <span class="date-label">年度</span>
-                  </div>
-                </div>
-              </div> 
-            </div>
-          </el-form-item>
+          </div>
+        </el-form-item>
       </div>
       <!-- 集計種別区域：使用相同的section-container结构 -->
       <div class="section-container">
@@ -60,7 +62,7 @@
             <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"
@@ -370,7 +372,7 @@ const resetRegionTreeCheck = (nodes) => {
   text-align: left !important; /* 强制左对齐 */
   letter-spacing: normal !important; /* 清除可能的字间距差异 */
   display: inline-block !important; /* 确保宽度和高度计算准确 */
-  
+
   /* 修正对齐的核心属性 - 与分割线严格一致 */
   margin-left: 27px !important; /* 精确匹配分割线左侧偏移 */
   box-sizing: border-box !important; /* 确保宽度计算不包含padding */
@@ -442,6 +444,24 @@ const resetRegionTreeCheck = (nodes) => {
   margin: 0 !important;
 }
 
+.monthly-section {
+  width: 100%;
+}
+
+.monthly-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.date-groups-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px; /* 年和月下拉列表之间的间隔 */
+  flex-wrap: wrap; /* 允许在小屏幕上折行 */
+}
+
 /* 7. 单选按钮与下拉框的组合容器 - 强制单行显示 */
 .radio-item {
   display: flex; /* 单选框和下拉框在同一行 */
@@ -461,11 +481,11 @@ const resetRegionTreeCheck = (nodes) => {
 }
 
 /* 日期项容器 - 每个整体作为独立项 */
-.date-group-item {
-  display: inline-flex; /* 内部元素横向排列 */
-  align-items: center; /* 垂直居中对齐 */
+.date-group {
+  display: flex;  /* 内部元素（下拉框+标签）不折行 */
+  align-items: center;
   gap: 6px; /* 下拉框与标签的间距 */
-  margin-right: 12px; /* 两个整体之间的间距 */
+  white-space: nowrap; /* 防止内部元素折行 */
 }
 
 /* 日期选择器样式 - 年下拉框（强制适配宽度） */
@@ -546,19 +566,19 @@ const resetRegionTreeCheck = (nodes) => {
   }
 
   /* 平板设备（768px以下）适配 */
-  .radio-item {
+  .radio-item, .monthly-header {
     gap: 5px; /* 进一步缩小间距 */
   }
-  
+
   .date-group {
     gap: 4px;
   }
-  
+
   .form-section {
     margin-left: 15px !important; /* 左对齐标题，节省空间 */
     width: 70px !important; /* 缩短标题宽度，为内容区让空间 */
   }
-  
+
   /* 标题文字微调，确保“対象”完整显示 */
   .form-section {
     font-size: 13px !important;
@@ -588,17 +608,16 @@ const resetRegionTreeCheck = (nodes) => {
     padding-left: 20px; /* 左侧内边距 */
   }
 
- .date-group {
-    flex-wrap: wrap; /* 保留折行能力，但控制折行位置 */
+  .date-group {
     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; /* 与月下拉框保持间距 */
@@ -609,46 +628,11 @@ const resetRegionTreeCheck = (nodes) => {
     gap: 10px; /* 缩小水平间距 */
   }
 
-  /* 手机设备（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 {
-    display: flex;
-    flex-direction: column; /* 纵向排列 */
-    gap: 8px; /* 上下间距 */
-  }
-  
-  .date-group-item {
-    margin-right: 0; /* 取消右侧间距 */
-    width: 100%; /* 占满一行 */
-    justify-content: flex-start; /* 左对齐 */
-  }
-.annual-row {
-    display: flex;
-    flex-direction: column; /* 纵向排列 */
-    gap: 8px; /* 上下间距 */
-  }
-  
-  .date-group-item {
-    margin-right: 0; /* 取消右侧间距 */
-    width: 100%; /* 占满一行 */
-    justify-content: flex-start; /* 左对齐 */
-  }  
-    /* 月下拉框折行后与年下拉框左对齐（通过父容器padding控制） */
-    .date-group > .date-select-small {
-      min-width: 80px !important; /* 恢复月下拉框基础宽度 */
-    }
+  /* 在小屏幕上，让日期组垂直排列 */
+  .date-groups-wrapper {
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
   }
 }
 
@@ -660,48 +644,31 @@ const resetRegionTreeCheck = (nodes) => {
 
 /* 年度指定整体容器样式 - 核心不折行控制 */
 .annual-group {
-  display: inline-flex; /* 保持内部元素在同一行，不自动折行 */
-  align-items: center;  /* 垂直居中对齐，确保视觉关联性 */
-  gap: 8px;             /* 单选框与下拉框之间的间距 */
-  width: auto;          /* 宽度随内容自适应，不强制占满一行 */
-  flex-wrap: nowrap !important; /* 强制不换行，覆盖可能的换行样式 */
+  display: flex; /* 保持内部元素在同一行，不自动折行 */
+  align-items: center; /* 垂直居中对齐，确保视觉关联性 */
+  gap: 8px; /* 单选框与下拉框之间的间距 */
+  width: 100%; /* 宽度随内容自适应，不强制占满一行 */
 }
 
 /* 单选框样式调整 - 保持与下拉框的视觉关联 */
 .annual-group .common-radio {
   width: auto !important; /* 取消强制宽度，按内容自适应 */
-  min-width: 80px;       /* 确保"年度指定"文字完整显示 */
-  flex-shrink: 0;        /* 不压缩，保持自身尺寸 */
+  min-width: 80px; /* 确保"年度指定"文字完整显示 */
+  flex-shrink: 0; /* 不压缩，保持自身尺寸 */
 }
 
 /* 年度下拉框容器样式 - 与单选框保持紧凑关联 */
 .annual-group .annual-row {
-  flex: 0 0 auto;        /* 不拉伸，不压缩，保持内容所需宽度 */
+  flex: 0 0 auto; /* 不拉伸，不压缩，保持内容所需宽度 */
   padding: 0 !important; /* 清除可能的额外内边距 */
-  margin: 0 !important;  /* 清除可能的额外外边距 */
+  margin: 0 !important; /* 清除可能的额外外边距 */
 }
 
 /* 日期组合容器不折行 - 确保下拉框与标签作为整体存在 */
 .annual-group .date-group {
-  display: inline-flex;  /* 内部元素（下拉框+标签）不折行 */
+  display: flex; /* 内部元素（下拉框+标签）不折行 */
   align-items: center;
-  gap: 0px;              /* 下拉框与"年度"标签的间距 */
-}
-
-/* 响应式优化 - 确保在窄屏仍保持关联性 */
-@media (max-width: 480px) {
-  .annual-group {
-    /* 极端窄屏允许整体换行，但保持内部元素关联性 */
-    flex-wrap: wrap;
-    gap: 0px;
-    justify-content: flex-start;
-    width: 100%;
-  }
-  
-  /* 下拉框区域与单选框保持视觉关联（通过左缩进与单选框对齐） */
-  .annual-group .annual-row {
-    width: 100%;
-  }
+  gap: 6px; /* 下拉框与标签的间距 */
 }
 
-</style>
+</style>