css

src/views/fcbi/sales/sumSettings.vue

@@ -395,6 +395,7 @@ const resetRegionTreeCheck = (nodes) => {
 .content-group {
   flex: 1; /* 占满剩余宽度 */
   margin: 0 !important; /* 清除element-ui默认margin */
+  padding-left: 20px !important; /* 统一内容区左侧缩进，修复对齐问题 */
 }
 
 /* 4. 垂直排列的单选组（月指定/年度指定） */
@@ -443,7 +444,7 @@ const resetRegionTreeCheck = (nodes) => {
 
 /* 只调整月指定区域的年份下拉框，适配年度指定的样式 */
 .monthly-section .date-select {
-  /* 复制年度指定下拉框的宽度（假设年度指定默认宽度是100px，根据实际情况调整） */
+  /* 复制年度指定下拉框的宽度 */
   width: 100px !important;
   min-width: 100px !important;
   max-width: 100px !important;
@@ -451,7 +452,7 @@ const resetRegionTreeCheck = (nodes) => {
 
 /* 调整月指定单选框的宽度，与年度指定的单选框保持一致的左侧空间 */
 .monthly-section .common-radio {
-  /* 与年度指定的单选框宽度保持一致（假设年度指定是80px，根据实际情况调整） */
+  /* 与年度指定的单选框宽度保持一致 */
   width: 80px !important;
 }
 
@@ -476,14 +477,14 @@ const resetRegionTreeCheck = (nodes) => {
   flex-wrap: wrap; /* 允许在小屏幕上折行 */
 }
 
-/* 7. 单选按钮与下拉框的组合容器 - 强制单行显示 */
+/* 7. 单选按钮与下拉框的组合容器 - 确保不折行 */
 .radio-item {
-  display: flex; /* 单选框和下拉框在同一行 */
-  align-items: center; /* 垂直居中对齐 */
-  gap: 8px; /* 缩小间距，为小屏幕预留空间 */
-  width: 100%; /* 占满父容器宽度 */
-  min-width: 0; /* 允许容器缩小 */
-  flex-wrap: nowrap; /* 默认不换行，强制保持同行 */
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  flex-wrap: nowrap; /* 强制不换行 */
 }
 
 /* 下拉框容器 - 自适应剩余宽度，与单选框同行 */
@@ -504,16 +505,16 @@ const resetRegionTreeCheck = (nodes) => {
 
 /* 日期选择器样式 - 年下拉框（强制适配宽度） */
 .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; /* 减少内边距 */
 }
 
 /* 日期选择器样式 - 月下拉框 */
 .date-select-small {
-  width: 80px !important; /* 取消固定宽度，改为自适应内容 */
-  min-width: 60px !important; /* 月下拉框最小宽度 */
+  width: 80px !important;
+  min-width: 60px !important;
   max-width: 90px !important;
   padding: 0 8px !important; /* 减少内边距 */
 }
@@ -536,12 +537,13 @@ const resetRegionTreeCheck = (nodes) => {
 
 /* 按钮区域样式 - 集計按钮容器 */
 .btn-section {
-  padding-left: 90px;   /* 与标题宽度+间距保持一致，确保左对齐 */
+  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; /* 允许在极小屏幕下按钮换行 */
 }
 
 /* 操作按钮样式 - 集計 */
@@ -568,10 +570,21 @@ const resetRegionTreeCheck = (nodes) => {
   height: 32px; /* 统一高度 */
 }
 
+/* 响应式样式 - 大屏幕 (>1023px) */
+@media (min-width: 1024px) {
+  .section-container {
+    gap: 15px; /* 增大间距提升可读性 */
+  }
+
+  .radio-group-horizontal {
+    gap: 30px; /* 增大选项间距 */
+  }
+}
+
 /* 响应式样式 - 平板端 (768px-1023px) */
 @media (min-width: 768px) and (max-width: 1023px) {
   .btn-section {
-    padding-left: 90px; /* 与标题对齐 */
+    padding-left: calc(15px + 70px + 10px); /* 与标题对齐，动态计算 */
   }
 
   /* 保持与移动端相同的宽度 */
@@ -579,7 +592,7 @@ const resetRegionTreeCheck = (nodes) => {
     width: 120px; /* 统一宽度 */
   }
 
-  /* 平板设备（768px以下）适配 */
+  /* 平板设备适配 */
   .radio-item, .monthly-header {
     gap: 5px; /* 进一步缩小间距 */
   }
@@ -591,11 +604,7 @@ const resetRegionTreeCheck = (nodes) => {
   .form-section {
     margin-left: 15px !important; /* 左对齐标题，节省空间 */
     width: 70px !important; /* 缩短标题宽度，为内容区让空间 */
-  }
-
-  /* 标题文字微调，确保“対象”完整显示 */
-  .form-section {
-    font-size: 13px !important;
+    font-size: 13px !important; /* 标题文字微调 */
   }
 }
 
@@ -606,38 +615,42 @@ const resetRegionTreeCheck = (nodes) => {
     justify-content: flex-start; /* 左对齐避免溢出 */
   }
 
-  /* 保持按钮宽度一致，不随屏幕缩小而变化 */
+  /* 保持按钮宽度一致 */
   .btn-aggregation, .btn-reset {
-    width: 120px; /* 与平板端相同的固定宽度 */
-    flex-shrink: 0; /* 禁止按钮被压缩 */
+    width: 120px;
+    flex-shrink: 0;
   }
 
   .annual-row {
-    margin-left: 20px;  /* 左侧外边距 */
-    width: calc(100% - 40px); /* 宽度计算 */
+    margin-left: 20px;
+    width: calc(100% - 40px);
   }
 
   .form-section {
-    width: 80px !important; /* 强制统一宽度 */
-    white-space: nowrap; /* 禁止文字换行，确保内容不影响宽度 */
-    margin-left: 0;     /* 左侧外边距 */
-    padding-left: 20px; /* 左侧内边距 */
+    width: 80px !important;
+    white-space: nowrap;
+    margin-left: 0;
+    padding-left: 20px;
   }
 
   .date-group {
-    align-items: center; /* 确保对齐 */
+    align-items: center;
+    gap: 4px; /* 缩小间距 */
   }
 
   /* 年下拉框区域固定宽度，防止被挤压 */
   .date-group > .date-select:first-child {
-    width: 100px !important; /* 固定年下拉框宽度 */
-    flex-shrink: 0; /* 禁止压缩 */
+    width: 90px !important;
+    min-width: 90px !important;
+    max-width: 90px !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: 13px; /* 日期标签字体微调 */
   }
 
   .radio-group-horizontal {
@@ -649,42 +662,77 @@ const resetRegionTreeCheck = (nodes) => {
     flex-direction: column;
     align-items: flex-start;
     width: 100%;
+    padding-left: 0 !important;
+  }
+
+  /* 垂直单选组样式调整 */
+  .radio-group-vertical {
+    padding-left: 0 !important;
+  }
+
+  /* 年度指定整体容器样式 - 增强不折行控制 */
+  .annual-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    flex-wrap: nowrap; /* 关键修改：强制不折行 */
+    min-width: 300px; /* 确保有足够宽度容纳内容 */
+    overflow-x: auto; /* 当内容过宽时显示横向滚动条 */
+    padding-bottom: 5px; /* 为滚动条预留空间 */
+    scrollbar-width: thin; /* 优化滚动条样式 */
+  }
+
+  /* 防止滚动时影响其他元素 */
+  .annual-group::-webkit-scrollbar {
+    height: 4px;
+  }
+
+  /* 调整单选框宽度，为下拉框留出更多空间 */
+  .annual-group .common-radio {
+    width: 90px !important;
+    min-width: 90px !important;
   }
 }
 
 /* 公共区域标题样式 - 深层选择器修改子组件样式 */
-::v-deep .public-range-title {
+:deep(.public-range-title) {
   text-align: left !important;  /* 强制左对齐 */
   padding-left: 20px;           /* 左侧内边距 */
 }
 
 /* 年度指定整体容器样式 - 核心不折行控制 */
 .annual-group {
-  display: flex; /* 保持内部元素在同一行，不自动折行 */
-  align-items: center; /* 垂直居中对齐，确保视觉关联性 */
-  gap: 8px; /* 单选框与下拉框之间的间距 */
-  width: 100%; /* 宽度随内容自适应，不强制占满一行 */
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  flex-wrap: nowrap; /* 关键修改：强制不折行 */
+  min-width: 300px; /* 确保有足够宽度容纳内容 */
 }
 
-/* 单选框样式调整 - 保持与下拉框的视觉关联 */
+/* 年度指定单选框样式 - 统一宽度 */
 .annual-group .common-radio {
-  width: auto !important; /* 取消强制宽度，按内容自适应 */
-  min-width: 80px; /* 确保"年度指定"文字完整显示 */
-  flex-shrink: 0; /* 不压缩，保持自身尺寸 */
+  width: 100px !important; /* 与其他单选框保持一致 */
+  min-width: 80px;
+  flex-shrink: 0;
 }
 
-/* 年度下拉框容器样式 - 与单选框保持紧凑关联 */
+/* 年度下拉框容器样式 - 优化宽度分配 */
 .annual-group .annual-row {
-  flex: 0 0 auto; /* 不拉伸，不压缩，保持内容所需宽度 */
-  padding: 0 !important; /* 清除可能的额外内边距 */
-  margin: 0 !important; /* 清除可能的额外外边距 */
+  flex: 1; /* 占据剩余空间 */
+  min-width: 0;
+  padding: 0 !important;
+  margin: 0 !important;
 }
 
-/* 日期组合容器不折行 - 确保下拉框与标签作为整体存在 */
+/* 日期组合容器样式 */
 .annual-group .date-group {
-  display: flex; /* 内部元素（下拉框+标签）不折行 */
+  display: flex;
   align-items: center;
-  gap: 6px; /* 下拉框与标签的间距 */
+  gap: 6px;
 }
 
+
+
 </style>