css

src/views/fcbi/sales/sumSettings.vue

@@ -11,7 +11,7 @@
         <div class="content-group">
           <div class="period-selector-vertical">
             <!-- 月指定行 -->
-            <div class="monthly-section">
+            <div class="section-monthly">
               <div class="date-groups-wrapper">
                 <div class="date-group">
                   <el-radio class="common-radio" :value="TARGET_PERIOD_TYPE.MONTHLY" v-model="queryParams.targetPeriodType">
@@ -33,7 +33,7 @@
               </div>
             </div>
             <!-- 年度指定行 -->
-            <div class="annual-section annual-group">
+            <div class="section-annual annual-group">
               <el-radio class="common-radio" :value="TARGET_PERIOD_TYPE.ANNUAL" v-model="queryParams.targetPeriodType">
                 年度指定
               </el-radio>
@@ -79,7 +79,7 @@
         />
       </div>
 
-      <div class="btn-section">
+      <div class="section-btn">
         <el-button class="btn-aggregation" type="primary" @click="handleAggregate" v-hasPermi="['fcbi:sales:sum']">集計</el-button>
         <el-button class="btn-reset" type="primary" @click="resetForm" icon="Refresh">リセット</el-button>
       </div>
@@ -477,19 +477,19 @@ const resetForm = () => {
 }
 
 /* 月指定单选框样式 - 与年度指定保持一致 */
-.monthly-section .common-radio {
+.section-monthly .common-radio {
   width: 80px !important; /* 调整宽度，与年度指定单选框保持一致 */
 }
 
 /* 月指定区域样式 - 整体布局控制 */
-.monthly-section .date-select-year {
+.section-monthly .date-select-year {
   width: 100px !important; /* 固定宽度 */
   min-width: 100px !important; /* 最小宽度限制 */
   max-width: 100px !important; /* 最大宽度限制 */
 }
 
 /* 月指定日期组样式 - 清除默认边距 */
-.monthly-section .date-group {
+.section-monthly .date-group {
   margin: 0 !important; /* 清除默认外边距 */
   padding: 0 !important; /* 清除默认内边距 */
 }
@@ -535,7 +535,7 @@ const resetForm = () => {
 }
 
 /* 单选按钮与下拉框组合容器 - 确保不折行 */
-.annual-section {
+.section-annual {
   display: flex; /* 使用Flex布局 */
   align-items: center; /* 垂直居中对齐子元素 */
   gap: 8px; /* 子元素间的水平间距 */
@@ -589,7 +589,7 @@ const resetForm = () => {
 }
 
 /* 按钮区域样式 - 集計和リセット按钮容器 */
-.btn-section {
+.section-btn {
   padding-left: calc(15px + 100px + 10px); /* 与标题对齐：15px偏移+100px标题宽度+10px间距 */
   margin-top: 25px; /* 顶部外边距，与上方内容保持距离 */
   display: flex; /* 使用Flex布局 */
@@ -664,7 +664,7 @@ const resetForm = () => {
 
   /* 仅调整年度指定行的布局，与月指定对齐 */
   .annual-group {
-    gap: 5px !important; /* 与月指定的annual-section保持相同间距 */
+    gap: 5px !important; /* 与月指定的section-annual保持相同间距 */
   }
 
   /* 年度下拉框容器与月指定的date-group保持一致的左偏移 */
@@ -678,7 +678,7 @@ const resetForm = () => {
     margin-left: 0 !important; /* 清除默认左外边距 */
   }
 
-  .btn-section {
+  .section-btn {
     padding-left: calc(15px + 100px + 10px); /* 与标题对齐，动态计算左侧内边距 */
   }
 
@@ -772,25 +772,25 @@ const resetForm = () => {
   }
 
   /* 关键修正：让月指定的年下拉框容器与年度下拉框对齐 */
-  .monthly-section .date-groups-wrapper {
+  .section-monthly .date-groups-wrapper {
     margin-left: 0 !important; /* 清除可能的默认左偏移 */
     padding-left: 0 !important; /* 清除左内边距 */
   }
 
   /* 强制月指定的年下拉框与年度下拉框左对齐基准一致 */
-  .monthly-section .date-group:first-child {
+  .section-monthly .date-group:first-child {
     margin-left: 0 !important; /* 与年度下拉框的date-group保持相同左偏移 */
     position: relative; /* 相对定位 */
     left: 0 !important; /* 消除任何隐性定位偏移 */
   }
 
   /* 月下拉列表行与年下拉列表对齐 */
-  .monthly-section .date-groups-wrapper .date-group:nth-child(2) {
+  .section-monthly .date-groups-wrapper .date-group:nth-child(2) {
     margin-left: 80px !important; /* 匹配"月指定"单选框宽度，确保左对齐 */
     margin-top: 8px; /* 添加微小间距，避免拥挤 */
   }
 
-  .btn-section {
+  .section-btn {
     padding-left: 20px; /* 调整左侧内边距，避免溢出 */
     justify-content: flex-start; /* 左对齐避免溢出 */
   }