liuxf 4 months ago
parent
commit
65117b090e
3 changed files with 50 additions and 28 deletions
  1. 3 7
      src/components/PublicRange.vue
  2. 30 13
      src/views/fcbi/sales/sumSettings.vue
  3. 17 8
      src/views/fcbi/survey/form.vue

+ 3 - 7
src/components/PublicRange.vue

@@ -116,8 +116,8 @@ watch(
 <style scoped>
 .public-range-container {
   margin-top: 10px;
-  margin-left: -33px;
-  padding-left: 60px; /* 统一左侧内边距,确保整体左对齐 */
+
+  //padding-left: 60px; /* 统一左侧内边距,确保整体左对齐 */
 }
 
 /* 统一的区块样式,标题和内容横向排列 */
@@ -129,7 +129,7 @@ watch(
 
 /* 标题容器 - 固定宽度确保垂直对齐 */
 .section-title {
-  width: 80px; /* 固定宽度,确保三个标题垂直对齐 */
+  width: 100px; /* 固定宽度,确保三个标题垂直对齐 */
   margin-right: 14px; /* 标题与内容的间距 */
   font-size: 14px;
   color: #606266;
@@ -159,10 +159,6 @@ watch(
 
 /* 响应式调整 */
 @media (max-width: 768px) {
-  .public-range-container {
-    padding-left: 13%; /* 移动端左侧百分比对齐 */
-  }
-
   .section-title {
     width: 80px !important;/* 移动端标题宽度微调 */
     margin-right: 15px;

+ 30 - 13
src/views/fcbi/sales/sumSettings.vue

@@ -62,15 +62,17 @@
         </el-form-item>
       </div>
       <div class="divider"></div>
-      <PublicRange
-          v-model="queryParams"
-          :region-tree="regionTree"
-          :yamada-fc-brand="yamadaFcBrand"
-          :yamada-business-type="yamadaBusinessType"
-          @check-change="handleCheckChange"
-          :show-fc="true"
-          :show-business-type="true"
-      />
+      <div class="section-fc-area">
+        <PublicRange
+            v-model="queryParams"
+            :region-tree="regionTree"
+            :yamada-fc-brand="yamadaFcBrand"
+            :yamada-business-type="yamadaBusinessType"
+            @check-change="handleCheckChange"
+            :show-fc="true"
+            :show-business-type="true"
+        />
+      </div>
       <div class="btn-section">
         <el-button class="btn-aggregation" @click="handleAggregate" v-hasPermi="['fcbi:sales:sum']">集計</el-button>
         <el-button class="btn-reset" @click="resetForm" icon="Refresh">リセット</el-button>
@@ -357,6 +359,10 @@ const resetRegionTreeCheck = (nodes) => {
   gap: 10px; /* 标题与内容的固定间距 */
 }
 
+.section-fc-area {
+  margin-left: 20px; /* 顶部对齐,确保基准一致 */
+}
+
 /* 2. 统一标题样式(确保“対”和“集”字对齐) */
 /* 统一标题文字的垂直对齐基准(核心修正) */
 .form-section {
@@ -372,7 +378,7 @@ const resetRegionTreeCheck = (nodes) => {
   display: inline-block !important; /* 确保宽度和高度计算准确 */
 
   /* 修正对齐的核心属性 - 与分割线严格一致 */
-  margin-left: 27px !important; /* 精确匹配分割线左侧偏移 */
+
   box-sizing: border-box !important; /* 确保宽度计算不包含padding */
   position: relative !important; /* 建立稳定的定位基准 */
   left: 0 !important; /* 清除可能的定位偏移 */
@@ -380,7 +386,11 @@ const resetRegionTreeCheck = (nodes) => {
   color: #606266;
   font-weight: 700;
 }
-
+.form-section {
+  margin-left: 15px !important; /* 左对齐标题,节省空间 */
+  width: 100px !important; /* 缩短标题宽度,为内容区让空间 */
+  font-size: 14px !important; /* 标题文字微调 */
+}
 
 /* 确保标题文字的左侧起点完全一致 */
 .form-section::first-letter {
@@ -610,6 +620,7 @@ const resetRegionTreeCheck = (nodes) => {
   padding: 2px 0; /* 减少内边距,节省空间 */
 }
 
+
  /* 媒体查询 - 适配大屏幕 */
 @media (min-width: 1024px) {
   .section-container {
@@ -647,6 +658,10 @@ const resetRegionTreeCheck = (nodes) => {
   .date-group .date-label {
     margin-left: 4px !important; /* 统一标签与下拉框的间距,不干扰其他样式 */
   }
+
+  .annual-group .date-group .date-label {
+    margin-left: -5px !important;
+  }
 }
 
 /* 响应式样式 - 平板端 (768px-1023px) */
@@ -666,7 +681,7 @@ const resetRegionTreeCheck = (nodes) => {
 
   .form-section {
     margin-left: 15px !important; /* 左对齐标题,节省空间 */
-    width: 70px !important; /* 缩短标题宽度,为内容区让空间 */
+    width: 100px !important; /* 缩短标题宽度,为内容区让空间 */
     font-size: 14px !important; /* 标题文字微调 */
   }
 
@@ -734,7 +749,7 @@ const resetRegionTreeCheck = (nodes) => {
   .date-group > .date-label:nth-child(2) {
     margin-right: 8px;
     flex-shrink: 0;
-    font-size: 13px; /* 日期标签字体微调 */
+    font-size: 14px; /* 日期标签字体微调 */
   }
 
   .radio-group-horizontal {
@@ -808,6 +823,8 @@ const resetRegionTreeCheck = (nodes) => {
     margin-left: 80px !important; /* 匹配"月指定"单选框的宽度(80px),使月下拉列表左对齐基准与年下拉列表一致 */
     margin-top: 8px; /* 可选:添加微小间距,避免与年下拉列表过于拥挤 */
   }
+
+
 }
 
 </style>

+ 17 - 8
src/views/fcbi/survey/form.vue

@@ -19,13 +19,17 @@
           ></el-input>
         </el-form-item>
         <div class="form-range">公開範囲</div>
-        <PublicRange
-            v-model="queryParams"
-            :region-tree="regionTree"
-            :yamada-fc-brand="yamadaFcBrand"
-            :yamada-business-type="yamadaBusinessType"
-            @check-change="handleCheckChange"
-        />
+        <div class="section-fc-bt-area">
+          <PublicRange
+              v-model="queryParams"
+              :region-tree="regionTree"
+              :yamada-fc-brand="yamadaFcBrand"
+              :yamada-business-type="yamadaBusinessType"
+              @check-change="handleCheckChange"
+              :show-fc="true"
+              :show-business-type="true"
+          />
+        </div>
         <!-- 公開期間 -->
         <div class="form-section">公開期間</div>
         <!-- 垂直排列的单选框组 -->
@@ -911,6 +915,11 @@ p {
 .radio-group-vertical {
   margin-left: 65px;
 }
+
+.section-fc-bt-area {
+  margin-left: 60px; /* 顶部对齐,确保基准一致 */
+}
+
 /* 移动端垂直排列的单选框组容器样式适配 */
 @media (max-width:48em) {
   .radio-group-vertical  {
@@ -1132,4 +1141,4 @@ p {
   margin-left: 25px;
   margin-top: 15px;
 }
-</style>
+</style>