el-divder

src/views/fcbi/sales/sumSettings.vue

@@ -61,7 +61,7 @@
           </el-radio-group>
         </el-form-item>
       </div>
-      <div class="divider"></div>
+      <el-divider class="custom-divider"></el-divider>
       <div class="section-fc-area">
         <PublicRange
             v-model="queryParams"
@@ -366,13 +366,13 @@ const resetForm = () => {
 </script>
 
 <style scoped>
-/* 表单容器样式 - 控制整体布局结构 */
+/* 基础容器样式 - 最外层布局控制 */
 .form-container {
   margin-top: 0;  /* 清除顶部默认外边距，避免与父容器产生额外间距 */
   padding: 0 !important; /* 清除默认内边距，确保布局基准线一致 */
 }
 
-/* 1. 统一标题与内容的布局容器 */
+/* 布局容器 - 统一标题与内容的排列结构 */
 .section-container {
   display: flex; /* 使用Flex布局，使标题与内容横向排列 */
   align-items: flex-start; /* 顶部对齐，确保各区域垂直基准一致 */
@@ -380,12 +380,30 @@ const resetForm = () => {
   gap: 10px; /* 标题与内容区的固定水平间距 */
 }
 
-/* 公共区域（FC/区域选择）容器样式 */
+/* 公共区域容器 - FC/区域选择部分的布局 */
 .section-fc-area {
   margin-left: 16px; /* 与其他内容区保持左对齐，统一页面缩进 */
 }
 
-/* 2. 统一标题样式（确保"対象"和"集計種別"左对齐） */
+/* 分隔线样式 - 区域间视觉分隔 */
+.custom-divider {
+  background-color: #FF0066; /* 使用品牌色作为分隔线颜色，增强视觉效果 */
+  height: 2px; /* 设置分隔线高度，确保视觉效果 */
+  margin: 12px 0; /* 上下外边距，与周围内容保持距离 */
+}
+
+/* 按钮区域样式 - 集計和リセット按钮容器 */
+.btn-section {
+  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; /* 小屏幕下按钮换行，避免溢出 */
+}
+
+/* 标题样式 - 统一"対象"和"集計種別"的显示 */
 .form-section {
   width: 80px !important; /* 固定宽度，确保标题左侧起点一致 */
   font-size: 14px !important; /* 统一字体大小，保持视觉一致性 */
@@ -410,7 +428,7 @@ const resetForm = () => {
   font-size: 14px !important; /* 微调字体大小保持一致性 */
 }
 
-/* 确保标题首字符（"対"、"集"）左侧无额外间距 */
+/* 标题首字符样式 - 确保左侧无额外间距 */
 .form-section::first-letter {
   margin-left: 0 !important; /* 清除首字符可能的默认左间距，确保对齐精确 */
 }
@@ -421,14 +439,14 @@ const resetForm = () => {
   padding-left: 20px; /* 左侧内边距，与其他标题保持对齐 */
 }
 
-/* 3. 内容区域容器样式 */
+/* 内容区域容器 - 标题右侧的内容部分 */
 .content-group {
   flex: 1; /* 占满剩余宽度，自适应不同屏幕尺寸 */
   margin: 0 !important; /* 清除element-ui默认外边距，避免布局偏差 */
   padding-left: 0 !important; /* 统一内容区左侧缩进，确保对齐一致 */
 }
 
-/* 4. 垂直排列的单选组（月指定/年度指定） */
+/* 单选组布局 - 垂直排列（月指定/年度指定） */
 .radio-group-vertical {
   display: flex; /* 使用Flex布局 */
   flex-direction: column; /* 垂直排列子元素 */
@@ -437,7 +455,7 @@ const resetForm = () => {
   margin: 0 !important; /* 清除默认外边距 */
 }
 
-/* 5. 水平排列的单选组（集計種別） */
+/* 单选组布局 - 水平排列（集計種別） */
 .radio-group-horizontal {
   display: flex; /* 使用Flex布局 */
   gap: 20px; /* 集計種別选项间的水平间距，区分不同选项 */
@@ -447,7 +465,7 @@ const resetForm = () => {
   padding: 0 !important; /* 清除默认内边距 */
 }
 
-/* 6. 所有单选框统一样式（确保左侧对齐） */
+/* 单选框基础样式 - 统一所有单选框的对齐 */
 .common-radio {
   width: 100px !important; /* 固定宽度，确保文字左侧起点对齐 */
   flex-shrink: 0 !important; /* 禁止压缩，保持宽度稳定 */
@@ -457,7 +475,7 @@ const resetForm = () => {
   position: relative !important; /* 建立定位基准，便于单选框圆圈定位 */
 }
 
-/* 单选框圆圈（input）定位 - 核心对齐控制 */
+/* 单选框内部圆圈定位 - 核心对齐控制 */
 :deep(.common-radio .el-radio__input) {
   position: absolute !important; /* 脱离文档流，基于父元素定位 */
   left: 0 !important; /* 固定在左侧，所有单选框左对齐 */
@@ -466,31 +484,31 @@ const resetForm = () => {
   margin: 0 !important; /* 清除默认外边距，避免定位偏差 */
 }
 
-/* 单选框文字与圆圈的间距控制 */
+/* 单选框文字样式 - 控制与圆圈的间距 */
 :deep(.common-radio .el-radio__label) {
   padding-left: 5px !important; /* 文字与圆圈的固定间距，保持一致 */
   margin: 0 !important; /* 清除默认外边距 */
 }
 
-/* 月指定区域的年份下拉框样式（适配年度指定样式） */
+/* 月指定区域样式 - 整体布局控制 */
 .monthly-section .sales-sum-date-select {
   width: 100px !important; /* 固定宽度 */
   min-width: 100px !important; /* 最小宽度限制 */
   max-width: 100px !important; /* 最大宽度限制 */
 }
 
-/* 月指定单选框宽度调整（与年度指定单选框保持一致） */
+/* 月指定单选框样式 - 与年度指定保持一致 */
 .monthly-section .common-radio {
   width: 80px !important; /* 调整宽度，与年度指定单选框保持一致 */
 }
 
-/* 月指定日期组布局对齐控制 */
+/* 月指定日期组样式 - 清除默认边距 */
 .monthly-section .date-group {
   margin: 0 !important; /* 清除默认外边距 */
   padding: 0 !important; /* 清除默认内边距 */
 }
 
-/* 日期选择组合容器（年+月） */
+/* 日期选择组合容器 - 年+月的整体布局 */
 .date-groups-wrapper {
   display: flex; /* 使用Flex布局 */
   align-items: center; /* 垂直居中对齐子元素 */
@@ -498,7 +516,7 @@ const resetForm = () => {
   flex-wrap: wrap; /* 小屏幕上自动折行，避免溢出 */
 }
 
-/* 7. 单选按钮与下拉框的组合容器（不折行） */
+/* 单选按钮与下拉框组合容器 - 确保不折行 */
 .radio-item {
   display: flex; /* 使用Flex布局 */
   align-items: center; /* 垂直居中对齐子元素 */
@@ -508,7 +526,7 @@ const resetForm = () => {
   flex-wrap: nowrap; /* 强制不换行，保持选项与输入框在同一行 */
 }
 
-/* 日期项容器（下拉框+标签） */
+/* 日期项容器 - 下拉框+标签的组合 */
 .date-group {
   display: flex; /* 使用Flex布局 */
   align-items: center; /* 垂直居中对齐子元素 */
@@ -524,7 +542,7 @@ const resetForm = () => {
   padding: 0 8px !important; /* 减少内边距，节省空间 */
 }
 
-/* 日期选择器样式 - 月下拉框 */
+/* 日期选择器样式 - 月下拉框（略窄） */
 .sales-sum-date-select-small {
   width: 80px !important; /* 固定宽度，比年下拉框略窄 */
   min-width: 60px !important; /* 最小宽度限制 */
@@ -532,7 +550,7 @@ const resetForm = () => {
   padding: 0 8px !important; /* 减少内边距，节省空间 */
 }
 
-/* 日期标签样式（"年"、"月"、"年度"文字） */
+/* 日期标签样式 - "年"、"月"、"年度"文字 */
 .date-label {
   font-size: 14px; /* 字体大小，与其他文字保持一致 */
   color: #606266; /* 文字颜色，使用中性色调 */
@@ -542,51 +560,7 @@ const resetForm = () => {
   align-items: center; /* 垂直居中对齐 */
 }
 
-/* 分隔线样式 - 区域分隔 */
-.divider {
-  height: 1px; /* 分隔线高度，使用细线 */
-  background-color: #FF0066; /* 分隔线颜色，使用品牌色 */
-  margin: 10px 27px; /* 上下外边距，与上下内容保持距离 */
-  width: calc(100% - 27px) !important; /* 宽度自适应，保持右侧对齐 */
-  box-sizing: border-box !important; /* 宽度计算包含边框，避免溢出 */
-}
-
-/* 按钮区域样式 - 集計按钮容器 */
-.btn-section {
-  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; /* 宽度计算包含内边距和边框 */
-  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; /* 宽度计算包含内边距和边框 */
-  margin-left: 10px; /* 左侧外边距，与集計按钮保持距离 */
-  white-space: nowrap; /* 禁止文字折行，保持按钮文字完整 */
-  width: 120px; /* 固定宽度，与集計按钮保持一致 */
-  height: 32px; /* 统一高度，保持视觉一致性 */
-}
-
-/* 年度指定整体容器样式 - 不折行控制 */
+/* 年度指定整体容器样式 - 控制不折行 */
 .annual-group {
   display: flex; /* 使用Flex布局 */
   align-items: center; /* 垂直居中对齐子元素 */
@@ -611,25 +585,25 @@ const resetForm = () => {
   margin: 0 !important; /* 清除默认外边距 */
 }
 
-/* 日期组合容器样式 */
+/* 年度日期组合容器样式 - 控制内部间距 */
 .annual-group .date-group {
   display: flex; /* 使用Flex布局 */
   align-items: center; /* 垂直居中对齐子元素 */
   gap: 0 !important; /* 强制Flex容器内间距为0 */
 }
 
-/* 消除下拉框自身可能的右外边距 */
+/* 年度下拉框样式 - 清除右侧边距 */
 .annual-group .sales-sum-date-select {
   width: 100px !important; /* 与月指定的年下拉框宽度一致 */
   margin-right: 0 !important; /* 清除下拉框右侧外边距 */
 }
 
-/* 消除"年度"文字自身可能的左外边距 */
+/* 年度标签样式 - 调整左侧间距 */
 .annual-group .date-label {
   margin-left: 4px !important; /* 微调间距，与"年"标签对齐 */
 }
 
-/* 下拉框容器 - 自适应剩余宽度，与单选框同行 */
+/* 下拉框容器基础样式 - 自适应宽度 */
 .annual-row {
   flex: 1; /* 占据剩余空间 */
   min-width: 0; /* 允许收缩 */
@@ -637,8 +611,31 @@ const resetForm = () => {
   padding: 2px 0; /* 减少内边距，节省空间 */
 }
 
+/* 操作按钮样式 - 集計按钮 */
+.btn-aggregation {
+  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; /* 宽度计算包含内边距和边框 */
+  margin-left: 10px; /* 左侧外边距，与集計按钮保持距离 */
+  white-space: nowrap; /* 禁止文字折行，保持按钮文字完整 */
+  width: 120px; /* 固定宽度，与集計按钮保持一致 */
+  height: 32px; /* 统一高度，保持视觉一致性 */
+}
 
-/* 媒体查询 - 适配大屏幕（≥1024px） */
+/* 媒体查询 - 大屏幕（≥1024px） */
 @media (min-width: 1024px) {
   .section-container {
     gap: 15px; /* 增大间距提升可读性 */
@@ -648,19 +645,19 @@ const resetForm = () => {
     gap: 30px; /* 增大选项间距，提升可读性 */
   }
 
-  /* 1. 统一年度指定区域与月指定区域的父容器布局 */
+  /* 统一年度指定区域布局 */
   .annual-group {
     gap: 8px !important; /* 与月指定的date-groups-wrapper保持相同间距（8px） */
     align-items: center !important; /* 确保垂直居中对齐 */
   }
 
-  /* 2. 消除年度下拉框容器的隐性偏移 */
+  /* 消除年度下拉框容器偏移 */
   .annual-group .annual-row {
     margin-left: 0 !important; /* 清除左偏移 */
     padding-left: 0 !important; /* 清除左内边距 */
   }
 
-  /* 3. 强制年度下拉框与年下拉框宽度/位置完全一致 */
+  /* 年度下拉框位置调整 */
   .annual-group .sales-sum-date-select {
     vertical-align: middle; /* 垂直居中对齐 */
     position: relative !important; /* 相对定位 */
@@ -671,7 +668,7 @@ const resetForm = () => {
     gap: 0 !important; /* 覆盖大屏下的可能间距 */
   }
 
-  /* 3. 保证“年度”标签与“年”标签对齐 */
+  /* 日期标签对齐调整 */
   .date-group .date-label {
     margin-left: 4px !important; /* 统一标签与下拉框的间距 */
   }
@@ -681,7 +678,7 @@ const resetForm = () => {
   }
 }
 
-/* 响应式样式 - 平板端（768px-1023px） */
+/* 媒体查询 - 平板端（768px-1023px） */
 @media (min-width: 768px) and (max-width: 1023px) {
   .btn-section {
     padding-left: calc(15px + 70px + 10px); /* 与标题对齐，动态计算左侧内边距 */