css

src/views/fcbi/sales/sumSettings.vue

@@ -371,254 +371,253 @@ const resetRegionTreeCheck = (nodes) => {
 <style scoped>
 /* 表单容器样式 - 控制整体布局结构 */
 .form-container {
-  margin-top: 0;  /* 清除顶部默认外边距 */
-  padding: 0 !important; /* 清除默认内边距，避免影响布局基准线 */
+  margin-top: 0;  /* 清除顶部默认外边距，避免与父容器产生额外间距 */
+  padding: 0 !important; /* 清除默认内边距，确保布局基准线一致 */
 }
 
 /* 1. 统一标题与内容的布局容器 */
 .section-container {
-  display: flex;
+  display: flex; /* 使用Flex布局，使标题与内容横向排列 */
   align-items: flex-start; /* 顶部对齐，确保各区域垂直基准一致 */
-  margin-bottom: 12px; /* 区域间垂直间距 */
+  margin-bottom: 12px; /* 区域间垂直间距，区分不同设置项 */
   gap: 10px; /* 标题与内容区的固定水平间距 */
 }
 
 /* 公共区域（FC/区域选择）容器样式 */
 .section-fc-area {
-  margin-left: 16px; /* 与其他内容区保持左对齐 */
+  margin-left: 16px; /* 与其他内容区保持左对齐，统一页面缩进 */
 }
 
 /* 2. 统一标题样式（确保"対象"和"集計種別"左对齐） */
 .form-section {
   width: 80px !important; /* 固定宽度，确保标题左侧起点一致 */
-  font-size: 14px !important; /* 统一字体大小 */
+  font-size: 14px !important; /* 统一字体大小，保持视觉一致性 */
   line-height: 1.4 !important; /* 统一行高，确保文字基线对齐 */
-  padding-left: 0 !important; /* 清除额外左内边距 */
-  margin: 0 !important; /* 清除默认外边距 */
+  padding-left: 0 !important; /* 清除额外左内边距，避免对齐偏差 */
+  margin: 0 !important; /* 清除默认外边距，避免布局偏移 */
   margin-top: 5px !important; /* 与单选框保持垂直居中对齐 */
-  text-align: left !important; /* 强制左对齐 */
-  letter-spacing: normal !important; /* 清除异常字间距 */
-  display: inline-block !important; /* 确保宽高计算准确 */
-  box-sizing: border-box !important; /* 宽度计算包含边框和内边距 */
-  position: relative !important; /* 建立稳定定位基准 */
-  left: 0 !important; /* 清除定位偏移 */
-  top: 0 !important;
-  color: #606266; /* 标题文字颜色 */
-  font-weight: 700; /* 标题文字加粗 */
+  text-align: left !important; /* 强制左对齐，统一标题显示方式 */
+  letter-spacing: normal !important; /* 清除异常字间距，确保文字排列均匀 */
+  display: inline-block !important; /* 确保宽高计算准确，不影响周围元素 */
+  box-sizing: border-box !important; /* 宽度计算包含边框和内边距，避免尺寸偏差 */
+  position: relative !important; /* 建立稳定定位基准，便于子元素定位 */
+  top: 0 !important; /* 清除定位偏移，确保顶部对齐 */
+  color: #606266; /* 标题文字颜色，使用中性色调增强可读性 */
+  font-weight: 700; /* 标题文字加粗，突出显示设置项类别 */
 }
+
 /* 标题补充样式 - 调整宽度和左对齐细节 */
 .form-section {
-  margin-left: 15px !important; /* 左对齐标题，节省空间 */
+  margin-left: 15px !important; /* 左对齐标题，节省空间并统一缩进 */
   width: 100px !important; /* 调整宽度，为内容区预留足够空间 */
   font-size: 14px !important; /* 微调字体大小保持一致性 */
 }
 
 /* 确保标题首字符（"対"、"集"）左侧无额外间距 */
 .form-section::first-letter {
-  margin-left: 0 !important;
+  margin-left: 0 !important; /* 清除首字符可能的默认左间距，确保对齐精确 */
 }
 
 /* 公共区域标题样式 - 控制子组件标题对齐 */
 :deep(.public-range-title) {
-  text-align: left !important;  /* 强制左对齐 */
+  text-align: left !important;  /* 强制左对齐，与其他标题保持一致 */
   padding-left: 20px; /* 左侧内边距，与其他标题保持对齐 */
 }
 
 /* 3. 内容区域容器样式 */
 .content-group {
-  flex: 1; /* 占满剩余宽度 */
-  margin: 0 !important; /* 清除element-ui默认外边距 */
-  padding-left: 0 !important; /* 统一内容区左侧缩进 */
+  flex: 1; /* 占满剩余宽度，自适应不同屏幕尺寸 */
+  margin: 0 !important; /* 清除element-ui默认外边距，避免布局偏差 */
+  padding-left: 0 !important; /* 统一内容区左侧缩进，确保对齐一致 */
 }
 
 /* 4. 垂直排列的单选组（月指定/年度指定） */
 .radio-group-vertical {
-  display: flex;
-  flex-direction: column;
-  gap: 15px; /* 月指定与年度指定选项的垂直间距 */
-  padding: 0 !important;
-  margin: 0 !important;
+  display: flex; /* 使用Flex布局 */
+  flex-direction: column; /* 垂直排列子元素 */
+  gap: 15px; /* 月指定与年度指定选项的垂直间距，区分不同选项 */
+  padding: 0 !important; /* 清除默认内边距 */
+  margin: 0 !important; /* 清除默认外边距 */
 }
 
 /* 5. 水平排列的单选组（集計種別） */
 .radio-group-horizontal {
-  display: flex;
-  gap: 20px; /* 集計種別选项间的水平间距 */
-  align-items: center;
+  display: flex; /* 使用Flex布局 */
+  gap: 20px; /* 集計種別选项间的水平间距，区分不同选项 */
+  align-items: center; /* 垂直居中对齐选项 */
   flex-wrap: wrap; /* 小屏幕下自动折行避免溢出 */
   margin: 0 !important; /* 清除默认外边距 */
-  padding: 0 !important;
+  padding: 0 !important; /* 清除默认内边距 */
 }
 
 /* 6. 所有单选框统一样式（确保左侧对齐） */
 .common-radio {
   width: 100px !important; /* 固定宽度，确保文字左侧起点对齐 */
   flex-shrink: 0 !important; /* 禁止压缩，保持宽度稳定 */
-  margin: 0 !important; /* 清除默认外边距 */
-  padding: 0 0 0 20px !important; /* 为单选框圆圈预留空间 */
-  text-align: left !important; /* 文字左对齐 */
-  position: relative !important; /* 建立定位基准 */
+  margin: 0 !important; /* 清除默认外边距，避免布局偏移 */
+  padding: 0 0 0 20px !important; /* 左侧预留空间放置单选框圆圈 */
+  text-align: left !important; /* 文字左对齐，统一显示方式 */
+  position: relative !important; /* 建立定位基准，便于单选框圆圈定位 */
 }
 
 /* 单选框圆圈（input）定位 - 核心对齐控制 */
 :deep(.common-radio .el-radio__input) {
   position: absolute !important; /* 脱离文档流，基于父元素定位 */
   left: 0 !important; /* 固定在左侧，所有单选框左对齐 */
-  top: 50% !important; /* 垂直居中 */
-  transform: translateY(-50%) !important; /* 精确垂直居中 */
-  margin: 0 !important; /* 清除默认外边距 */
+  top: 50% !important; /* 垂直方向居中定位 */
+  transform: translateY(-50%) !important; /* 精确垂直居中对齐 */
+  margin: 0 !important; /* 清除默认外边距，避免定位偏差 */
 }
 
 /* 单选框文字与圆圈的间距控制 */
 :deep(.common-radio .el-radio__label) {
-  padding-left: 5px !important; /* 文字与圆圈的固定间距 */
-  margin: 0 !important;
+  padding-left: 5px !important; /* 文字与圆圈的固定间距，保持一致 */
+  margin: 0 !important; /* 清除默认外边距 */
 }
 
 /* 月指定区域的年份下拉框样式（适配年度指定样式） */
 .monthly-section .sales-sum-date-select {
-  width: 100px !important;
-  min-width: 100px !important;
-  max-width: 100px !important;
+  width: 100px !important; /* 固定宽度 */
+  min-width: 100px !important; /* 最小宽度限制 */
+  max-width: 100px !important; /* 最大宽度限制 */
 }
 
 /* 月指定单选框宽度调整（与年度指定单选框保持一致） */
 .monthly-section .common-radio {
-  width: 80px !important;
+  width: 80px !important; /* 调整宽度，与年度指定单选框保持一致 */
 }
 
 /* 月指定日期组布局对齐控制 */
 .monthly-section .date-group {
-  margin: 0 !important;
-  padding: 0 !important;
+  margin: 0 !important; /* 清除默认外边距 */
+  padding: 0 !important; /* 清除默认内边距 */
 }
 
 /* 日期选择组合容器（年+月） */
 .date-groups-wrapper {
-  display: flex;
-  align-items: center;
+  display: flex; /* 使用Flex布局 */
+  align-items: center; /* 垂直居中对齐子元素 */
   gap: 8px; /* 年和月下拉列表之间的间隔 */
-  flex-wrap: wrap; /* 小屏幕上自动折行 */
+  flex-wrap: wrap; /* 小屏幕上自动折行，避免溢出 */
 }
 
 /* 7. 单选按钮与下拉框的组合容器（不折行） */
 .radio-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  min-width: 0;
-  flex-wrap: nowrap; /* 强制不换行 */
+  display: flex; /* 使用Flex布局 */
+  align-items: center; /* 垂直居中对齐子元素 */
+  gap: 8px; /* 子元素间的水平间距 */
+  width: 100%; /* 占满父容器宽度 */
+  min-width: 0; /* 允许内容收缩 */
+  flex-wrap: nowrap; /* 强制不换行，保持选项与输入框在同一行 */
 }
 
 /* 日期项容器（下拉框+标签） */
 .date-group {
-  display: flex; /* 内部元素不折行 */
-  align-items: center;
+  display: flex; /* 使用Flex布局 */
+  align-items: center; /* 垂直居中对齐子元素 */
   gap: 0; /* 下拉框与标签的间距 */
-  white-space: nowrap; /* 防止内部元素折行 */
+  white-space: nowrap; /* 防止内部元素折行，保持在同一行 */
 }
 
 /* 日期选择器样式 - 年下拉框 */
 .sales-sum-date-select {
-  width: 100px !important;
-  min-width: 80px !important;
-  max-width: 120px !important;
+  width: 100px !important; /* 固定宽度 */
+  min-width: 80px !important; /* 最小宽度限制 */
+  max-width: 120px !important; /* 最大宽度限制 */
   padding: 0 8px !important; /* 减少内边距，节省空间 */
 }
 
 /* 日期选择器样式 - 月下拉框 */
 .sales-sum-date-select-small {
-  width: 80px !important;
-  min-width: 60px !important;
-  max-width: 90px !important;
-  padding: 0 8px !important; /* 减少内边距 */
+  width: 80px !important; /* 固定宽度，比年下拉框略窄 */
+  min-width: 60px !important; /* 最小宽度限制 */
+  max-width: 90px !important; /* 最大宽度限制 */
+  padding: 0 8px !important; /* 减少内边距，节省空间 */
 }
 
 /* 日期标签样式（"年"、"月"、"年度"文字） */
 .date-label {
-  font-size: 14px; /* 字体大小 */
-  color: #606266; /* 文字颜色 */
-  white-space: nowrap; /* 禁止文字折行 */
-  line-height: 1;
-  display: inline-flex;
-  align-items: center;
+  font-size: 14px; /* 字体大小，与其他文字保持一致 */
+  color: #606266; /* 文字颜色，使用中性色调 */
+  white-space: nowrap; /* 禁止文字折行，保持在同一行 */
+  line-height: 1; /* 行高为1，紧凑显示 */
+  display: inline-flex; /*  inline-flex布局，便于对齐 */
+  align-items: center; /* 垂直居中对齐 */
 }
 
 /* 分隔线样式 - 区域分隔 */
 .divider {
-  height: 1px; /* 分隔线高度 */
-  background-color: #FF0066; /* 分隔线颜色 */
-  margin: 10px 27px; /* 上下外边距 */
+  height: 1px; /* 分隔线高度，使用细线 */
+  background-color: #FF0066; /* 分隔线颜色，使用品牌色 */
+  margin: 10px 27px; /* 上下外边距，与上下内容保持距离 */
   width: calc(100% - 27px) !important; /* 宽度自适应，保持右侧对齐 */
-  box-sizing: border-box !important;
+  box-sizing: border-box !important; /* 宽度计算包含边框，避免溢出 */
 }
 
 /* 按钮区域样式 - 集計按钮容器 */
 .btn-section {
-  /* 与标题对齐：27px偏移+80px标题宽度+10px间距 */
-  padding-left: calc(27px + 80px + 10px);
-  margin-top: 25px; /* 顶部外边距 */
-  display: flex; /* Flex布局 */
-  gap: 10px; /* 按钮间距 */
-  align-items: center; /* 垂直居中对齐 */
-  justify-content: start; /* 子元素左对齐 */
-  flex-wrap: wrap; /* 小屏幕下按钮换行 */
+  padding-left: calc(27px + 80px + 10px); /* 与标题对齐：27px偏移+80px标题宽度+10px间距 */
+  margin-top: 25px; /* 顶部外边距，与上方内容保持距离 */
+  display: flex; /* 使用Flex布局 */
+  gap: 10px; /* 按钮间距，区分不同按钮 */
+  align-items: center; /* 垂直居中对齐按钮 */
+  justify-content: start; /* 子元素左对齐，符合操作习惯 */
+  flex-wrap: wrap; /* 小屏幕下按钮换行，避免溢出 */
 }
 
 /* 操作按钮样式 - 集計 */
 .btn-aggregation {
-  background-color: #FF0066; /* 按钮背景色 */
-  color: white; /* 文字颜色 */
-  padding: 6px 10px; /* 内边距 */
-  box-sizing: border-box; /* 确保padding不影响宽度计算 */
-  margin-left: 0; /* 左侧外边距 */
-  white-space: nowrap; /* 禁止文字折行 */
-  width: 120px; /* 固定宽度 */
-  height: 32px; /* 统一高度 */
+  background-color: #FF0066; /* 按钮背景色，使用品牌色 */
+  color: white; /* 文字颜色，白色与背景形成对比 */
+  padding: 6px 10px; /* 内边距，控制按钮大小 */
+  box-sizing: border-box; /* 宽度计算包含内边距和边框 */
+  margin-left: 0; /* 左侧外边距为0 */
+  white-space: nowrap; /* 禁止文字折行，保持按钮文字完整 */
+  width: 120px; /* 固定宽度，与重置按钮保持一致 */
+  height: 32px; /* 统一高度，保持视觉一致性 */
 }
 
 /* 操作按钮样式 - リセット */
 .btn-reset{
-  background-color: #FF0066; /* 按钮背景色 */
-  color: white; /* 文字颜色 */
-  padding: 6px 10px; /* 内边距 */
-  box-sizing: border-box; /* 确保padding不影响宽度计算 */
-  margin-left: 10px; /* 左侧外边距 */
-  white-space: nowrap; /* 禁止文字折行 */
-  width: 120px; /* 固定宽度 */
-  height: 32px; /* 统一高度 */
+  background-color: #FF0066; /* 按钮背景色，使用品牌色 */
+  color: white; /* 文字颜色，白色与背景形成对比 */
+  padding: 6px 10px; /* 内边距，控制按钮大小 */
+  box-sizing: border-box; /* 宽度计算包含内边距和边框 */
+  margin-left: 10px; /* 左侧外边距，与集計按钮保持距离 */
+  white-space: nowrap; /* 禁止文字折行，保持按钮文字完整 */
+  width: 120px; /* 固定宽度，与集計按钮保持一致 */
+  height: 32px; /* 统一高度，保持视觉一致性 */
 }
 
 /* 年度指定整体容器样式 - 不折行控制 */
 .annual-group {
-  display: flex;
-  align-items: center;
+  display: flex; /* 使用Flex布局 */
+  align-items: center; /* 垂直居中对齐子元素 */
   gap: 0 !important; /* 强制消除单选框与下拉列表间距 */
-  width: 100%;
-  flex-wrap: nowrap; /* 强制不折行 */
-  min-width: 300px; /* 确保足够宽度容纳内容 */
+  width: 100%; /* 占满父容器宽度 */
+  flex-wrap: nowrap; /* 强制不折行，保持在同一行 */
+  min-width: 300px; /* 确保有足够宽度容纳内容，避免挤压 */
 }
 
 /* 年度指定单选框样式 - 统一宽度 */
 .annual-group .common-radio {
   width: 80px !important; /* 与其他单选框保持一致 */
-  min-width: 80px;
-  flex-shrink: 0;
+  min-width: 80px; /* 最小宽度限制 */
+  flex-shrink: 0; /* 禁止压缩，保持宽度稳定 */
 }
 
 /* 年度下拉框容器样式 - 优化宽度分配 */
 .annual-group .annual-row {
-  flex: 1; /* 占据剩余空间 */
-  min-width: 0;
-  padding: 0 !important;
-  margin: 0 !important;
+  flex: 1; /* 占据剩余空间，自适应宽度 */
+  min-width: 0; /* 允许收缩 */
+  padding: 0 !important; /* 清除默认内边距 */
+  margin: 0 !important; /* 清除默认外边距 */
 }
 
 /* 日期组合容器样式 */
 .annual-group .date-group {
-  display: flex;
-  align-items: center;
+  display: flex; /* 使用Flex布局 */
+  align-items: center; /* 垂直居中对齐子元素 */
   gap: 0 !important; /* 强制Flex容器内间距为0 */
 }
 
@@ -630,12 +629,12 @@ const resetRegionTreeCheck = (nodes) => {
 
 /* 消除"年度"文字自身可能的左外边距 */
 .annual-group .date-label {
-  margin-left: 4px !important;
+  margin-left: 4px !important; /* 微调间距，与"年"标签对齐 */
 }
 
 /* 下拉框容器 - 自适应剩余宽度，与单选框同行 */
 .annual-row {
-  flex: 1; /* 占据剩余宽度 */
+  flex: 1; /* 占据剩余空间 */
   min-width: 0; /* 允许收缩 */
   margin: 0; /* 清除默认边距 */
   padding: 2px 0; /* 减少内边距，节省空间 */
@@ -649,7 +648,7 @@ const resetRegionTreeCheck = (nodes) => {
   }
 
   .radio-group-horizontal {
-    gap: 30px; /* 增大选项间距 */
+    gap: 30px; /* 增大选项间距，提升可读性 */
   }
 
   /* 1. 统一年度指定区域与月指定区域的父容器布局 */
@@ -660,15 +659,15 @@ const resetRegionTreeCheck = (nodes) => {
 
   /* 2. 消除年度下拉框容器的隐性偏移 */
   .annual-group .annual-row {
-    margin-left: 0 !important;
-    padding-left: 0 !important;
+    margin-left: 0 !important; /* 清除左偏移 */
+    padding-left: 0 !important; /* 清除左内边距 */
   }
 
   /* 3. 强制年度下拉框与年下拉框宽度/位置完全一致 */
   .annual-group .sales-sum-date-select {
-    vertical-align: middle;
-    position: relative !important;
-    transform: translateX(-8px) !important; /* 调整位置，与月指定的年下拉框对齐 */
+    vertical-align: middle; /* 垂直居中对齐 */
+    position: relative !important; /* 相对定位 */
+    transform: translateX(-8px) !important; /* 水平位移调整，与月指定的年下拉框对齐 */
   }
 
   .annual-group .date-group {
@@ -681,14 +680,14 @@ const resetRegionTreeCheck = (nodes) => {
   }
 
   .annual-group .date-group .date-label {
-    margin-left: -5px !important;
+    margin-left: -5px !important; /* 微调年度标签位置，确保与年标签对齐 */
   }
 }
 
 /* 响应式样式 - 平板端（768px-1023px） */
 @media (min-width: 768px) and (max-width: 1023px) {
   .btn-section {
-    padding-left: calc(15px + 70px + 10px); /* 与标题对齐，动态计算 */
+    padding-left: calc(15px + 70px + 10px); /* 与标题对齐，动态计算左侧内边距 */
   }
 
   /* 保持按钮宽度一致 */
@@ -697,7 +696,7 @@ const resetRegionTreeCheck = (nodes) => {
   }
 
   .date-group {
-    gap: 4px;
+    gap: 4px; /* 缩小间距，适应中等屏幕 */
   }
 
   .form-section {
@@ -732,7 +731,7 @@ const resetRegionTreeCheck = (nodes) => {
 
   /* 保持按钮宽度一致 */
   .btn-aggregation, .btn-reset {
-    width: 120px;
+    width: 120px; /* 保持按钮宽度 */
     flex-shrink: 0; /* 禁止按钮宽度被压缩 */
   }
 
@@ -744,7 +743,7 @@ const resetRegionTreeCheck = (nodes) => {
 
   .form-section {
     width: 80px !important; /* 保持宽度为80px */
-    white-space: nowrap !important; /* 禁止换行 */
+    white-space: nowrap !important; /* 禁止换行，确保标题完整显示 */
     margin-left: 0 !important; /* 清除左侧外边距干扰 */
     padding-left: 20px !important; /* 固定左侧内边距 */
     min-width: 80px !important; /* 强制最小宽度 */
@@ -754,48 +753,48 @@ const resetRegionTreeCheck = (nodes) => {
   }
 
   .date-group {
-    align-items: center;
+    align-items: center; /* 垂直居中对齐 */
     gap: 0; /* 缩小间距 */
   }
 
   /* 年度下拉框区域固定宽度，防止被挤压 */
   .date-group > .sales-sum-date-select:first-child {
-    width: 100px !important;
-    min-width: 100px !important;
-    max-width: 100px !important;
-    flex-shrink: 0;
+    width: 100px !important; /* 固定宽度 */
+    min-width: 100px !important; /* 最小宽度限制 */
+    max-width: 100px !important; /* 最大宽度限制 */
+    flex-shrink: 0; /* 禁止压缩 */
   }
 
   /* 年标签与年下拉框绑定，不单独折行 */
   .date-group > .date-label:nth-child(2) {
-    margin-right: 8px;
-    flex-shrink: 0;
+    margin-right: 8px; /* 右侧外边距 */
+    flex-shrink: 0; /* 禁止压缩 */
     font-size: 14px; /* 日期标签字体微调 */
   }
 
   .radio-group-horizontal {
-    gap: 10px; /* 缩小水平间距 */
+    gap: 10px; /* 缩小水平间距，适应小屏幕 */
   }
 
   /* 在小屏幕上，让日期组垂直排列 */
   .date-groups-wrapper {
-    flex-direction: column;
-    align-items: flex-start;
-    width: 100%;
-    padding-left: 0 !important;
+    flex-direction: column; /* 垂直排列 */
+    align-items: flex-start; /* 左对齐 */
+    width: 100%; /* 占满宽度 */
+    padding-left: 0 !important; /* 清除左内边距 */
   }
 
   /* 垂直单选组样式调整 */
   .radio-group-vertical {
-    padding-left: 0 !important;
+    padding-left: 0 !important; /* 清除左内边距 */
   }
 
   /* 年度指定整体容器样式 - 增强不折行控制 */
   .annual-group {
-    display: flex;
-    align-items: center;
+    display: flex; /* Flex布局 */
+    align-items: center; /* 垂直居中 */
     gap: 0 !important; /* 减少年度指定单选框与下拉列表的间隔 */
-    width: 100%;
+    width: 100%; /* 占满宽度 */
     flex-wrap: nowrap; /* 强制不折行 */
     min-width: 300px; /* 确保有足够宽度容纳内容 */
     overflow-x: auto; /* 内容过宽时显示横向滚动条 */
@@ -817,35 +816,35 @@ const resetRegionTreeCheck = (nodes) => {
 
   /* 优化滚动条样式 */
   .annual-group::-webkit-scrollbar {
-    height: 4px;
+    height: 4px; /* 滚动条高度 */
   }
 
   /* 调整单选框宽度，为下拉框留出更多空间 */
   .annual-group .common-radio {
-    width: 80px !important;
-    min-width: 80px !important;
+    width: 80px !important; /* 固定宽度 */
+    min-width: 80px !important; /* 最小宽度限制 */
     padding-right: 0 !important; /* 移除右侧内边距 */
   }
 
   /* 关键修正：让月指定的年下拉框容器与年度下拉框对齐 */
   .monthly-section .date-groups-wrapper {
     margin-left: 0 !important; /* 清除可能的默认左偏移 */
-    padding-left: 0 !important;
+    padding-left: 0 !important; /* 清除左内边距 */
   }
 
   /* 强制月指定的年下拉框与年度下拉框左对齐基准一致 */
   .monthly-section .date-group:first-child {
     margin-left: 0 !important; /* 与年度下拉框的date-group保持相同左偏移 */
-    position: relative;
+    position: relative; /* 相对定位 */
     left: 0 !important; /* 消除任何隐性定位偏移 */
   }
 
   /* 月下拉列表行与年下拉列表对齐 */
   .monthly-section .date-groups-wrapper .date-group:nth-child(2) {
-    /* 匹配"月指定"单选框的宽度（80px），使月下拉列表左对齐基准与年下拉列表一致 */
-    margin-left: 80px !important;
-    margin-top: 8px; /* 添加微小间距，避免与年下拉列表过于拥挤 */
+    margin-left: 80px !important; /* 匹配"月指定"单选框宽度，确保左对齐 */
+    margin-top: 8px; /* 添加微小间距，避免拥挤 */
   }
 }
 </style>
-    
+
+