浏览代码

css調整

liuxf 4 月之前
父节点
当前提交
b032413f3d
共有 1 个文件被更改,包括 26 次插入10 次删除
  1. 26 10
      src/views/fcbi/sales/sumSettings.vue

+ 26 - 10
src/views/fcbi/sales/sumSettings.vue

@@ -10,7 +10,6 @@
           <div class="radio-group-vertical">
             <!-- 月指定行 -->
             <div class="monthly-section">
-              <div class="monthly-header">
                 <div class="date-groups-wrapper">
                   <div class="date-group">
                     <el-radio class="common-radio" :label="TARGET_PERIOD_TYPE.MONTHLY" v-model="queryParams.targetPeriodType">
@@ -30,7 +29,6 @@
                     <span class="date-label">月</span>
                   </div>
                 </div>
-              </div>
             </div>
             <!-- 年度指定行 -->
             <div class="radio-item annual-group">
@@ -39,7 +37,7 @@
               </el-radio>
               <div class="annual-row">
                 <div class="date-group">
-                  <el-select v-model="queryParams.annual" placeholder="" class="date-select"
+                  <el-select class="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>
@@ -347,7 +345,7 @@ const resetRegionTreeCheck = (nodes) => {
 <style scoped>
 /* 表单容器样式 - 整体布局控制 */
 .form-container {
-  margin-top: 0px;  /* 顶部外边距 */
+  margin-top: 0;  /* 顶部外边距 */
   padding: 0 !important; /* 清除原有左右内边距,避免干扰基准线 */
 }
 
@@ -388,13 +386,12 @@ const resetRegionTreeCheck = (nodes) => {
 }
 
 /* 核心:将FC、業種、エリア三组控件整体向左平移 */
-::v-deep .public-range-container {
+:deep(.public-range-container) {
   /* 计算平移量:原有左内边距(60px) - 目标左偏移(27px) = 需向左移动33px */
   padding-left: 27px !important; /* 直接设置目标左内边距为27px */
   margin-left: 0 !important;
 }
 
-
 .content-group {
   flex: 1; /* 占满剩余宽度 */
   margin: 0 !important; /* 清除element-ui默认margin */
@@ -430,7 +427,7 @@ const resetRegionTreeCheck = (nodes) => {
 }
 
 /* 单选框圆圈(input)定位 - 核心对齐控制 */
-::v-deep .common-radio .el-radio__input {
+:deep(.common-radio .el-radio__input) {
   position: absolute !important; /* 脱离文档流,基于父元素定位 */
   left: 0 !important; /* 固定在左侧,所有单选框left=0对齐 */
   top: 50% !important; /* 垂直居中 */
@@ -439,13 +436,30 @@ const resetRegionTreeCheck = (nodes) => {
 }
 
 /* 单选框文字与圆圈的间距控制 */
-::v-deep .common-radio .el-radio__label {
+:deep(.common-radio .el-radio__label) {
   padding-left: 5px !important; /* 文字与圆圈的固定间距 */
   margin: 0 !important;
 }
 
-.monthly-section {
-  width: 100%;
+/* 只调整月指定区域的年份下拉框,适配年度指定的样式 */
+.monthly-section .date-select {
+  /* 复制年度指定下拉框的宽度(假设年度指定默认宽度是100px,根据实际情况调整) */
+  width: 100px !important;
+  min-width: 100px !important;
+  max-width: 100px !important;
+}
+
+/* 调整月指定单选框的宽度,与年度指定的单选框保持一致的左侧空间 */
+.monthly-section .common-radio {
+  /* 与年度指定的单选框宽度保持一致(假设年度指定是80px,根据实际情况调整) */
+  width: 80px !important;
+}
+
+/* 确保月指定的日期组与年度指定的布局对齐 */
+.monthly-section .date-group {
+  /* 消除可能的额外边距,与年度指定保持一致 */
+  margin: 0 !important;
+  padding: 0 !important;
 }
 
 .monthly-header {
@@ -604,6 +618,8 @@ const resetRegionTreeCheck = (nodes) => {
   }
 
   .form-section {
+    width: 80px !important; /* 强制统一宽度 */
+    white-space: nowrap; /* 禁止文字换行,确保内容不影响宽度 */
     margin-left: 0;     /* 左侧外边距 */
     padding-left: 20px; /* 左侧内边距 */
   }