css

src/views/fcbi/sales/sumSettings.vue

@@ -15,14 +15,14 @@
                     <el-radio class="common-radio" :label="TARGET_PERIOD_TYPE.MONTHLY" v-model="queryParams.targetPeriodType">
                       月指定
                     </el-radio>
-                    <el-select class="date-select" v-model="queryParams.startYear" placeholder=""
+                    <el-select class="sales-sum-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>
                   </div>
                   <div class="date-group">
-                    <el-select class="date-select-small" v-model="queryParams.startMonth" placeholder=""
+                    <el-select class="sales-sum-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>
@@ -37,7 +37,7 @@
               </el-radio>
               <div class="annual-row">
                 <div class="date-group">
-                  <el-select class="date-select" v-model="queryParams.annual" placeholder=""
+                  <el-select class="sales-sum-date-select" 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>
@@ -377,6 +377,8 @@ const resetRegionTreeCheck = (nodes) => {
   position: relative !important; /* 建立稳定的定位基准 */
   left: 0 !important; /* 清除可能的定位偏移 */
   top: 0 !important;
+  color: #606266;
+  font-weight: 700;
 }
 
 
@@ -444,7 +446,7 @@ const resetRegionTreeCheck = (nodes) => {
 }
 
 /* 只调整月指定区域的年份下拉框，适配年度指定的样式 */
-.monthly-section .date-select {
+.monthly-section .sales-sum-date-select {
   /* 复制年度指定下拉框的宽度 */
   width: 100px !important;
   min-width: 100px !important;
@@ -490,7 +492,7 @@ const resetRegionTreeCheck = (nodes) => {
 }
 
 /* 日期选择器样式 - 年下拉框（强制适配宽度） */
-.date-select {
+.sales-sum-date-select {
   width: 100px !important;
   min-width: 80px !important;
   max-width: 120px !important;
@@ -498,7 +500,7 @@ const resetRegionTreeCheck = (nodes) => {
 }
 
 /* 日期选择器样式 - 月下拉框 */
-.date-select-small {
+.sales-sum-date-select-small {
   width: 80px !important;
   min-width: 60px !important;
   max-width: 90px !important;
@@ -508,7 +510,7 @@ const resetRegionTreeCheck = (nodes) => {
 /* 日期标签样式 - "年"和"月"文字 */
 .date-label {
   font-size: 14px;   /* 字体大小 */
-  color: #666;       /* 文字颜色 */
+  color: #606266;       /* 文字颜色 */
   white-space: nowrap; /* 禁止文字折行 */
 }
 
@@ -619,13 +621,9 @@ const resetRegionTreeCheck = (nodes) => {
   }
 
   /* 3. 强制年度下拉框与年下拉框宽度/位置完全一致 */
-  .annual-group .date-select {
-    width: 100px !important; /* 与月指定的年下拉框宽度严格一致 */
-    min-width: 100px !important;
-    max-width: 100px !important;
-    margin-left: -8px !important; /* 清除默认左外边距 */
-    padding: 0 8px !important; /* 统一内边距 */
-    box-sizing: border-box !important; /* 确保宽度计算包含边框 */
+  .annual-group .sales-sum-date-select {
+    position: relative !important;
+    left: -8px !important; /* 用left替代margin-left，避免影响相邻元素间距 */
   }
 }
 
@@ -661,7 +659,7 @@ const resetRegionTreeCheck = (nodes) => {
   }
 
   /* 确保年度下拉框与年下拉框宽度/位置一致 */
-  .annual-group .date-select {
+  .annual-group .sales-sum-date-select {
     width: 100px !important; /* 与月指定的年下拉框宽度完全一致 */
     margin-left: 0 !important; /* 清除默认左外边距 */
   }
@@ -703,7 +701,7 @@ const resetRegionTreeCheck = (nodes) => {
   }
 
   /* 年度下拉框区域固定宽度，防止被挤压 */
-  .date-group > .date-select:first-child {
+  .date-group > .sales-sum-date-select:first-child {
     width: 100px !important;
     min-width: 100px !important;
     max-width: 100px !important;
@@ -753,7 +751,7 @@ const resetRegionTreeCheck = (nodes) => {
   }
 
   /* 年度下拉框宽度/位置与年下拉框完全匹配 */
-  .annual-group .date-select {
+  .annual-group .sales-sum-date-select {
     width: 100px !important; /* 与月指定的年下拉框宽度相同 */
     margin-left: 0 !important; /* 清除默认左外边距 */
   }