CSS対応

src/views/fcbi/sales/sumSettings.vue

@@ -3,31 +3,35 @@
   <div class="app-container">
     <div class="form-container">
       <div class="section-container">
-        <div class="form-section">対象</div>
-          <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">
-                月指定
-                </el-radio>
-                <div class="annual-row">
-                  <div class="date-group">
-                    <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>
-                    <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 class="form-section">
+          対象
+        </div>
+        <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">
+              月指定
+              </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">
+                    <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>
                 </div>
               </div>
+            </div>
               <!-- 年度指定行 -->
-              <div class="radio-item">
+              <div class="radio-item  annual-group">
                 <el-radio class="common-radio" :label="TARGET_PERIOD_TYPE.ANNUAL" v-model="queryParams.targetPeriodType">
                   年度指定
                 </el-radio>
@@ -456,16 +460,12 @@ const resetRegionTreeCheck = (nodes) => {
   padding: 2px 0; /* 减少内边距，节省空间 */
 }
 
-/* 日期选择器组样式 - 年/月下拉框和按钮容器 */
-.date-group {
-  display: flex;
-  align-items: center;
-  gap: 6px; /* 缩小元素间距 */
-  width: 100%; /* 占满下拉框容器宽度 */
-  min-width: 0;
-  white-space: nowrap; /* 防止内部元素换行 */
-  overflow: hidden; /* 极端情况隐藏溢出内容（配合省略号） */
-  text-overflow: ellipsis; /* 极端情况显示省略号 */
+/* 日期项容器 - 每个整体作为独立项 */
+.date-group-item {
+  display: inline-flex; /* 内部元素横向排列 */
+  align-items: center; /* 垂直居中对齐 */
+  gap: 6px; /* 下拉框与标签的间距 */
+  margin-right: 12px; /* 两个整体之间的间距 */
 }
 
 /* 日期选择器样式 - 年下拉框（强制适配宽度） */
@@ -623,17 +623,28 @@ const resetRegionTreeCheck = (nodes) => {
       margin-bottom: 4px !important;
     }
     
-    .annual-row {
-      width: 100%;
-      padding-left: 25px; /* 与单选框圆圈对齐，保持视觉关联 */
-    }
-
-    /* 核心：年下拉框区域不折行，月下拉框折行后左对齐 */
-    .date-group {
-      /* 年下拉框+年标签作为一个整体不折行 */
-      /* 月下拉框+月标签自动折行，并与年下拉框左对齐 */
-    }
+.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; /* 恢复月下拉框基础宽度 */
@@ -646,4 +657,52 @@ const resetRegionTreeCheck = (nodes) => {
   text-align: left !important;  /* 强制左对齐 */
   padding-left: 20px;           /* 左侧内边距 */
 }
+
+/* 年度指定整体容器样式 - 核心不折行控制 */
+.annual-group {
+  display: inline-flex; /* 保持内部元素在同一行，不自动折行 */
+  align-items: center;  /* 垂直居中对齐，确保视觉关联性 */
+  gap: 8px;             /* 单选框与下拉框之间的间距 */
+  width: auto;          /* 宽度随内容自适应，不强制占满一行 */
+  flex-wrap: nowrap !important; /* 强制不换行，覆盖可能的换行样式 */
+}
+
+/* 单选框样式调整 - 保持与下拉框的视觉关联 */
+.annual-group .common-radio {
+  width: auto !important; /* 取消强制宽度，按内容自适应 */
+  min-width: 80px;       /* 确保"年度指定"文字完整显示 */
+  flex-shrink: 0;        /* 不压缩，保持自身尺寸 */
+}
+
+/* 年度下拉框容器样式 - 与单选框保持紧凑关联 */
+.annual-group .annual-row {
+  flex: 0 0 auto;        /* 不拉伸，不压缩，保持内容所需宽度 */
+  padding: 0 !important; /* 清除可能的额外内边距 */
+  margin: 0 !important;  /* 清除可能的额外外边距 */
+}
+
+/* 日期组合容器不折行 - 确保下拉框与标签作为整体存在 */
+.annual-group .date-group {
+  display: inline-flex;  /* 内部元素（下拉框+标签）不折行 */
+  align-items: center;
+  gap: 6px;              /* 下拉框与"年度"标签的间距 */
+}
+
+/* 响应式优化 - 确保在窄屏仍保持关联性 */
+@media (max-width: 480px) {
+  .annual-group {
+    /* 极端窄屏允许整体换行，但保持内部元素关联性 */
+    flex-wrap: wrap;
+    gap: 8px;
+    justify-content: flex-start;
+    width: 100%;
+  }
+  
+  /* 下拉框区域与单选框保持视觉关联（通过左缩进与单选框对齐） */
+  .annual-group .annual-row {
+    padding-left: 25px !important;
+    width: 100%;
+  }
+}
+
 </style>