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