ソース対応

src/views/fcbi/sales/sumSettings.vue

@@ -4,56 +4,39 @@
     <div class="form-container">
       <div class="section-container">
         <div class="form-section">対象</div>
-        <el-form-item class="radio-group-vertical">
-          <div class="radio-container">
-            <el-radio
-                :label="TARGET_PERIOD_TYPE.MONTHLY"
-                v-model="queryParams.targetPeriodType"
-                class="vertical-radio"
-            >月指定
-            </el-radio>
-            <div class="annual-row">
-              <div class="date-group">
-                <el-select v-model="queryParams.startYear" placeholder="" class="date-select"
+          <el-form-item class="radio-group-vertical">
+            <div class="radio-item">
+                <el-radio class="vertical-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
-                    v-model="queryParams.startMonth"
-                    placeholder=""
-                    class="date-select-small"
-                    :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>
+                      <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>
             </div>
-            <el-radio
-                :label="TARGET_PERIOD_TYPE.ANNUAL"
-                v-model="queryParams.targetPeriodType"
-                class="annual-radio"
-            >年度指定
-            </el-radio>
-            <div class="annual-row">
-              <div class="date-group">
-                <el-select v-model="queryParams.annual" placeholder="" class="date-select"
+            <div class="radio-item">
+              <el-radio class="annual-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>
+                    <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>
+            </div> 
         </el-form-item>
       </div>
       <el-form-item label="集計種別" style="margin-left: 50px;margin-top: -15px">
@@ -358,42 +341,45 @@ const resetRegionTreeCheck = (nodes) => {
   gap: 15px;                    /* 元素间距 */
 }
 
-/* 单选按钮容器样式 - 月指定和年度指定的父容器 */
+/* 单选按钮容器 - 垂直排列，确保月指定和年度指定上下分布 */
 .radio-container {
-  display: flex;                /* 使用flex布局 */
-  flex-direction: column;       /* 垂直排列 */
-  gap: 30px;                    /* 月/年度选项间距 */
-  margin-bottom: 15px;          /* 底部外边距 */
-  position: relative;           /* 相对定位，用于子元素定位 */
+  display: flex;
+  flex-direction: column; /* 垂直排列 */
+  gap: 20px; /* 月指定和年度指定之间的垂直间距 */
+  margin-bottom: 15px;
+  padding-left: 0;
 }
-
-/* 单选按钮样式 - 月指定和年度指定选项 */
-.vertical-radio, .annual-radio {
-  display: flex;                /* 使用flex布局 */
-  align-items: center;          /* 垂直居中对齐 */
-  margin-bottom: 5px;           /* 底部外边距 */
-  position: relative;           /* 相对定位 */
-  z-index: 1;                   /* 堆叠顺序 */
+/* 单选按钮与下拉框的组合容器 - 强制单行显示 */
+.radio-item {
+  display: flex; /* 单选框和下拉框在同一行 */
+  align-items: center; /* 垂直居中对齐 */
+  gap: 10px; /* 单选框和下拉框的间距 */
+  width: 100%; /* 占满父容器宽度 */
 }
 
-/* 月指定选项的下拉列表容器定位 */
-.vertical-radio + .annual-row {
-  margin-top: -28px;  /* 负边距向上移动，与单选按钮同一行 */
-  margin-left: 80px;  /* 左侧缩进，与单选按钮对齐 */
+/* 单选按钮样式 - 固定宽度，确保垂直对齐 */
+.vertical-radio, .annual-radio {
+  width: 70px; /* 固定宽度（匹配“月指定”“年度指定”文字长度） */
+  flex-shrink: 0; /* 不压缩 */
+  margin: 0;
 }
 
-/* 年度指定选项的下拉列表容器定位 */
-.annual-radio + .annual-row {
-  margin-top: -28px;  /* 负边距向上移动，与单选按钮同一行 */
-  margin-left: 80px;  /* 左侧缩进，与单选按钮对齐 */
+/* 下拉框容器 - 自适应剩余宽度，与单选框同行 */
+.annual-row {
+  flex: 1; /* 占据剩余宽度 */
+  min-width: 0; /* 允许缩小 */
+  margin: 0; /* 清除默认边距 */
 }
 
 /* 日期选择器组样式 - 年/月下拉框和按钮容器 */
 .date-group {
-  display: flex;                /* 使用flex布局 */
-  align-items: center;          /* 垂直居中对齐 */
-  flex-wrap: nowrap;            /* 禁止折行 */
-  gap: 8px;                     /* 元素间距 */
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%; /* 占满下拉框容器宽度 */
+  white-space: nowrap; /* 强制内容不折行 */
+  overflow: hidden; /* 避免溢出容器 */
+  text-overflow: ellipsis; /* 极端情况显示省略号 */
 }
 
 /* 日期选择器样式 - 年下拉框 */