css

src/views/fcbi/sales/sumSettings.vue

@@ -37,14 +37,12 @@
               <el-radio class="common-radio" :value="TARGET_PERIOD_TYPE.ANNUAL" v-model="queryParams.targetPeriodType">
                 年度指定
               </el-radio>
-              <div class="annual-row">
                 <div class="date-group">
                   <el-select class="date-select-year" v-model="queryParams.annual" placeholder=""
                              :disabled="queryParams.targetPeriodType !== TARGET_PERIOD_TYPE.ANNUAL">
                     <el-option v-for="year in years" :key="year" :label="year" :value="year"></el-option>
                   </el-select>
                   <el-text class="date-label">年度</el-text>
-                </div>
               </div>
             </div>
           </div>
@@ -571,16 +569,12 @@ const resetForm = () => {
   flex-shrink: 0; /* 禁止压缩，保持宽度稳定 */
 }
 
-/* 年度下拉框容器样式 - 优化宽度分配 */
-.annual-group .annual-row {
-  flex: 1; /* 占据剩余空间，自适应宽度 */
-  min-width: 0; /* 允许收缩 */
-  padding: 0 !important; /* 清除默认内边距 */
-  margin: 0 !important; /* 清除默认外边距 */
-}
-
 /* 年度日期组合容器样式 - 控制内部间距 */
 .annual-group .date-group {
+  flex: 1; /* 继承原annual-row的flex:1属性 */
+  min-width: 0; /* 继承原annual-row的收缩特性 */
+  margin: 0;
+  padding: 2px 0; /* 继承原annual-row的内边距 */
   display: flex; /* 使用Flex布局 */
   align-items: center; /* 垂直居中对齐子元素 */
   gap: 0 !important; /* 强制Flex容器内间距为0 */
@@ -597,6 +591,11 @@ const resetForm = () => {
   margin-left: 4px !important; /* 微调间距，与"年"标签对齐 */
 }
 
+/* 公共区域容器 - FC/区域选择部分的布局 */
+.section-fc-area {
+  margin-left: 16px; /* 与其他内容区保持左对齐，统一页面缩进 */
+}
+
 /* 按钮区域样式 - 集計和リセット按钮容器 */
 .btn-section {
   padding-left: calc(15px + 100px + 10px); /* 与标题对齐：15px偏移+100px标题宽度+10px间距 */
@@ -628,11 +627,6 @@ const resetForm = () => {
   height: 32px; /* 统一高度，保持视觉一致性 */
 }
 
-/* 公共区域容器 - FC/区域选择部分的布局 */
-.section-fc-area {
-  margin-left: 16px; /* 与其他内容区保持左对齐，统一页面缩进 */
-}
-
 /* 媒体查询 - 大屏幕（≥1024px） */
 @media (min-width: 1024px) {
   .section-container {
@@ -649,12 +643,6 @@ const resetForm = () => {
     align-items: center !important; /* 确保垂直居中对齐 */
   }
 
-  /* 消除年度下拉框容器偏移 */
-  .annual-group .annual-row {
-    margin-left: 0 !important; /* 清除左偏移 */
-    padding-left: 0 !important; /* 清除左内边距 */
-  }
-
   /* 年度下拉框位置调整 */
   .annual-group .date-select-year {
     vertical-align: middle; /* 垂直居中对齐 */
@@ -678,15 +666,6 @@ const resetForm = () => {
 
 /* 媒体查询 - 平板端（768px-1023px） */
 @media (min-width: 768px) and (max-width: 1023px) {
-  .btn-section {
-    padding-left: calc(15px + 100px + 10px); /* 与标题对齐，动态计算左侧内边距 */
-  }
-
-  /* 保持按钮宽度一致 */
-  .btn-aggregation, .btn-reset {
-    width: 120px; /* 统一宽度 */
-  }
-
   .date-group {
     gap: 4px; /* 缩小间距，适应中等屏幕 */
   }
@@ -706,27 +685,19 @@ const resetForm = () => {
     width: 100px !important; /* 与月指定的年下拉框宽度完全一致 */
     margin-left: 0 !important; /* 清除默认左外边距 */
   }
-}
 
-/* 响应式样式 - 移动端（<768px） */
-@media (max-width: 767px) {
   .btn-section {
-    padding-left: 20px; /* 调整左侧内边距，避免溢出 */
-    justify-content: flex-start; /* 左对齐避免溢出 */
+    padding-left: calc(15px + 100px + 10px); /* 与标题对齐，动态计算左侧内边距 */
   }
 
   /* 保持按钮宽度一致 */
   .btn-aggregation, .btn-reset {
-    width: 120px; /* 保持按钮宽度 */
-    flex-shrink: 0; /* 禁止按钮宽度被压缩 */
-  }
-
-  /* 仅修改年度指定行的对齐样式 */
-  .annual-row {
-    margin-left: 0 !important; /* 移除左偏移，与月指定对齐 */
-    width: auto !important; /* 取消强制宽度计算 */
+    width: 120px; /* 统一宽度 */
   }
+}
 
+/* 响应式样式 - 移动端（<768px） */
+@media (max-width: 767px) {
   /* 标题样式调整 */
   :deep(.el-form-item__label) {
     width: 80px !important; /* 保持宽度为80px */
@@ -826,5 +797,17 @@ const resetForm = () => {
     margin-left: 80px !important; /* 匹配"月指定"单选框宽度，确保左对齐 */
     margin-top: 8px; /* 添加微小间距，避免拥挤 */
   }
+
+  .btn-section {
+    padding-left: 20px; /* 调整左侧内边距，避免溢出 */
+    justify-content: flex-start; /* 左对齐避免溢出 */
+  }
+
+  /* 保持按钮宽度一致 */
+  .btn-aggregation, .btn-reset {
+    width: 120px; /* 保持按钮宽度 */
+    flex-shrink: 0; /* 禁止按钮宽度被压缩 */
+  }
+
 }
 </style>