css

src/views/fcbi/sales/sumSettings.vue

@@ -17,33 +17,33 @@
                   <el-radio class="common-radio" :value="TARGET_PERIOD_TYPE.MONTHLY" v-model="queryParams.targetPeriodType">
                     月指定
                   </el-radio>
-                  <el-select class="sales-sum-date-select" v-model="queryParams.startYear" placeholder=""
+                  <el-select class="date-select-year" 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-text class="date-label">年</el-text>
                 </div>
                 <div class="date-group">
-                  <el-select class="sales-sum-date-select-small" v-model="queryParams.startMonth" placeholder=""
+                  <el-select class="date-select-month" 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>
+                  <el-text class="date-label">月</el-text>
                 </div>
               </div>
             </div>
             <!-- 年度指定行 -->
-            <div class="radio-item annual-group">
+            <div class="annual-section annual-group">
               <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="sales-sum-date-select" v-model="queryParams.annual" placeholder=""
+                  <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>
-                  <span class="date-label">年度</span>
+                  <el-text class="date-label">年度</el-text>
                 </div>
               </div>
             </div>
@@ -53,12 +53,12 @@
 
       <!-- 集計種別区域：同样使用el-form-item的label属性 -->
       <el-form-item
-          label="集計種別"
           class="section-container"
+          label="集計種別"
           label-width="100px"
       >
         <div class="content-group"> <!-- 复用content-group，确保内容区域基准一致 -->
-          <el-radio-group v-model="queryParams.aggregationType" class="radio-group-horizontal">
+          <el-radio-group class="aggregation-radio-horizontal" v-model="queryParams.aggregationType">
             <!-- 为每个radio添加common-radio类，与“対象”区域的单选框样式统一 -->
             <el-radio class="common-radio" :value="AGGREGATION_TYPE.FC">FC別集計</el-radio>
             <el-radio class="common-radio" :value="AGGREGATION_TYPE.AREA">エリア別集計</el-radio>
@@ -384,7 +384,7 @@ const resetForm = () => {
 .section-container {
   display: flex; /* 使用Flex布局，使标题与内容横向排列 */
   align-items: flex-start; /* 顶部对齐，确保各区域垂直基准一致 */
-  margin-bottom: 12px; /* 区域间垂直间距，区分不同设置项 */
+  margin-bottom: 10px; /* 区域间垂直间距，区分不同设置项 */
   gap: 10px; /* 标题与内容区的固定水平间距 */
   margin-left: 0 !important; /* 清除el-form-item默认左间距 */
 }
@@ -404,15 +404,10 @@ const resetForm = () => {
   box-sizing: border-box !important; /* 宽度计算包含边框和内边距，避免尺寸偏差 */
   position: relative !important; /* 建立稳定定位基准，便于子元素定位 */
   top: 0 !important; /* 清除定位偏移，确保顶部对齐 */
-  color: #606266 !important; /* 标题文字颜色，使用中性色调增强可读性 */
+  //color: #606266 !important; /* 标题文字颜色，使用中性色调增强可读性 */
   font-weight: 700 !important; /* 标题文字加粗，突出显示设置项类别 */
 }
 
-/* 公共区域容器 - FC/区域选择部分的布局 */
-.section-fc-area {
-  margin-left: 16px; /* 与其他内容区保持左对齐，统一页面缩进 */
-}
-
 /* 分隔线样式 - 区域间视觉分隔 */
 .custom-divider {
   background-color: var(--color-primary);
@@ -420,16 +415,6 @@ const resetForm = () => {
   margin: 12px 0; /* 上下外边距，与周围内容保持距离 */
 }
 
-/* 按钮区域样式 - 集計和リセット按钮容器 */
-.btn-section {
-  padding-left: calc(15px + 100px + 10px); /* 与标题对齐：15px偏移+100px标题宽度+10px间距 */
-  margin-top: 25px; /* 顶部外边距，与上方内容保持距离 */
-  display: flex; /* 使用Flex布局 */
-  gap: 10px; /* 按钮间距，区分不同按钮 */
-  align-items: center; /* 垂直居中对齐按钮 */
-  justify-content: start; /* 子元素左对齐，符合操作习惯 */
-  flex-wrap: wrap; /* 小屏幕下按钮换行，避免溢出 */
-}
 
 /* 标题首字符样式 - 确保左侧无额外间距 */
 :deep(.el-form-item__label)::first-letter {
@@ -459,7 +444,7 @@ const resetForm = () => {
 }
 
 /* 单选组布局 - 水平排列（集計種別） */
-.radio-group-horizontal {
+.aggregation-radio-horizontal {
   display: flex; /* 使用Flex布局 */
   gap: 20px; /* 集計種別选项间的水平间距，区分不同选项 */
   align-items: center; /* 垂直居中对齐选项 */
@@ -493,18 +478,18 @@ const resetForm = () => {
   margin: 0 !important; /* 清除默认外边距 */
 }
 
+/* 月指定单选框样式 - 与年度指定保持一致 */
+.monthly-section .common-radio {
+  width: 80px !important; /* 调整宽度，与年度指定单选框保持一致 */
+}
+
 /* 月指定区域样式 - 整体布局控制 */
-.monthly-section .sales-sum-date-select {
+.monthly-section .date-select-year {
   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; /* 清除默认外边距 */
@@ -519,16 +504,6 @@ const resetForm = () => {
   flex-wrap: wrap; /* 小屏幕上自动折行，避免溢出 */
 }
 
-/* 单选按钮与下拉框组合容器 - 确保不折行 */
-.radio-item {
-  display: flex; /* 使用Flex布局 */
-  align-items: center; /* 垂直居中对齐子元素 */
-  gap: 8px; /* 子元素间的水平间距 */
-  width: 100%; /* 占满父容器宽度 */
-  min-width: 0; /* 允许内容收缩 */
-  flex-wrap: nowrap; /* 强制不换行，保持选项与输入框在同一行 */
-}
-
 /* 日期项容器 - 下拉框+标签的组合 */
 .date-group {
   display: flex; /* 使用Flex布局 */
@@ -538,7 +513,7 @@ const resetForm = () => {
 }
 
 /* 日期选择器样式 - 年下拉框 */
-.sales-sum-date-select {
+.date-select-year {
   width: 100px !important; /* 固定宽度 */
   min-width: 80px !important; /* 最小宽度限制 */
   max-width: 120px !important; /* 最大宽度限制 */
@@ -546,7 +521,7 @@ const resetForm = () => {
 }
 
 /* 日期选择器样式 - 月下拉框（略窄） */
-.sales-sum-date-select-small {
+.date-select-month {
   width: 80px !important; /* 固定宽度，比年下拉框略窄 */
   min-width: 60px !important; /* 最小宽度限制 */
   max-width: 90px !important; /* 最大宽度限制 */
@@ -555,14 +530,30 @@ const resetForm = () => {
 
 /* 日期标签样式 - "年"、"月"、"年度"文字 */
 .date-label {
-  font-size: 14px; /* 字体大小，与其他文字保持一致 */
-  color: #606266; /* 文字颜色，使用中性色调 */
   white-space: nowrap; /* 禁止文字折行，保持在同一行 */
   line-height: 1; /* 行高为1，紧凑显示 */
   display: inline-flex; /*  inline-flex布局，便于对齐 */
   align-items: center; /* 垂直居中对齐 */
 }
 
+/* 单选按钮与下拉框组合容器 - 确保不折行 */
+.annual-section {
+  display: flex; /* 使用Flex布局 */
+  align-items: center; /* 垂直居中对齐子元素 */
+  gap: 8px; /* 子元素间的水平间距 */
+  width: 100%; /* 占满父容器宽度 */
+  min-width: 0; /* 允许内容收缩 */
+  flex-wrap: nowrap; /* 强制不换行，保持选项与输入框在同一行 */
+}
+
+/* 下拉框容器基础样式 - 自适应宽度 */
+.annual-row {
+  flex: 1; /* 占据剩余空间 */
+  min-width: 0; /* 允许收缩 */
+  margin: 0; /* 清除默认边距 */
+  padding: 2px 0; /* 减少内边距，节省空间 */
+}
+
 /* 年度指定整体容器样式 - 控制不折行 */
 .annual-group {
   display: flex; /* 使用Flex布局 */
@@ -596,7 +587,7 @@ const resetForm = () => {
 }
 
 /* 年度下拉框样式 - 清除右侧边距 */
-.annual-group .sales-sum-date-select {
+.annual-group .date-select-year {
   width: 100px !important; /* 与月指定的年下拉框宽度一致 */
   margin-right: 0 !important; /* 清除下拉框右侧外边距 */
 }
@@ -606,12 +597,15 @@ const resetForm = () => {
   margin-left: 4px !important; /* 微调间距，与"年"标签对齐 */
 }
 
-/* 下拉框容器基础样式 - 自适应宽度 */
-.annual-row {
-  flex: 1; /* 占据剩余空间 */
-  min-width: 0; /* 允许收缩 */
-  margin: 0; /* 清除默认边距 */
-  padding: 2px 0; /* 减少内边距，节省空间 */
+/* 按钮区域样式 - 集計和リセット按钮容器 */
+.btn-section {
+  padding-left: calc(15px + 100px + 10px); /* 与标题对齐：15px偏移+100px标题宽度+10px间距 */
+  margin-top: 25px; /* 顶部外边距，与上方内容保持距离 */
+  display: flex; /* 使用Flex布局 */
+  gap: 10px; /* 按钮间距，区分不同按钮 */
+  align-items: center; /* 垂直居中对齐按钮 */
+  justify-content: start; /* 子元素左对齐，符合操作习惯 */
+  flex-wrap: wrap; /* 小屏幕下按钮换行，避免溢出 */
 }
 
 /* 操作按钮样式 - 集計按钮 */
@@ -634,13 +628,18 @@ const resetForm = () => {
   height: 32px; /* 统一高度，保持视觉一致性 */
 }
 
+/* 公共区域容器 - FC/区域选择部分的布局 */
+.section-fc-area {
+  margin-left: 16px; /* 与其他内容区保持左对齐，统一页面缩进 */
+}
+
 /* 媒体查询 - 大屏幕（≥1024px） */
 @media (min-width: 1024px) {
   .section-container {
     gap: 15px; /* 增大间距提升可读性 */
   }
 
-  .radio-group-horizontal {
+  .aggregation-radio-horizontal {
     gap: 30px; /* 增大选项间距，提升可读性 */
   }
 
@@ -657,7 +656,7 @@ const resetForm = () => {
   }
 
   /* 年度下拉框位置调整 */
-  .annual-group .sales-sum-date-select {
+  .annual-group .date-select-year {
     vertical-align: middle; /* 垂直居中对齐 */
     position: relative !important; /* 相对定位 */
     transform: translateX(-8px) !important; /* 水平位移调整，与月指定的年下拉框对齐 */
@@ -694,7 +693,7 @@ const resetForm = () => {
 
   /* 仅调整年度指定行的布局，与月指定对齐 */
   .annual-group {
-    gap: 5px !important; /* 与月指定的radio-item保持相同间距 */
+    gap: 5px !important; /* 与月指定的annual-section保持相同间距 */
   }
 
   /* 年度下拉框容器与月指定的date-group保持一致的左偏移 */
@@ -703,7 +702,7 @@ const resetForm = () => {
   }
 
   /* 确保年度下拉框与年下拉框宽度/位置一致 */
-  .annual-group .sales-sum-date-select {
+  .annual-group .date-select-year {
     width: 100px !important; /* 与月指定的年下拉框宽度完全一致 */
     margin-left: 0 !important; /* 清除默认左外边距 */
   }
@@ -746,7 +745,7 @@ const resetForm = () => {
   }
 
   /* 年度下拉框区域固定宽度，防止被挤压 */
-  .date-group > .sales-sum-date-select:first-child {
+  .date-group > .date-select-year:first-child {
     width: 100px !important; /* 固定宽度 */
     min-width: 100px !important; /* 最小宽度限制 */
     max-width: 100px !important; /* 最大宽度限制 */
@@ -760,7 +759,7 @@ const resetForm = () => {
     font-size: 14px; /* 日期标签字体微调 */
   }
 
-  .radio-group-horizontal {
+  .aggregation-radio-horizontal {
     gap: 10px; /* 缩小水平间距，适应小屏幕 */
   }
 
@@ -792,7 +791,7 @@ const resetForm = () => {
   }
 
   /* 年度下拉框宽度/位置与年下拉框完全匹配 */
-  .annual-group .sales-sum-date-select {
+  .annual-group .date-select-year {
     width: 100px !important; /* 与月指定的年下拉框宽度相同 */
     margin-left: 0 !important; /* 清除默认左外边距 */
   }