css（color-primary）

src/assets/styles/variables.module.scss

@@ -32,7 +32,7 @@ $base-sub-menu-background: #1f2d3d;
 $base-sub-menu-hover: #001528;
 
 // コンポーネント変数
-$--color-primary: #409EFF;
+$--color-primary: #FF0066;
 $--color-success: #67C23A;
 $--color-warning: #E6A23C;
 $--color-danger: #F56C6C;
@@ -72,4 +72,6 @@ $--color-info: #909399;
   --navbar-text: #303133;
 
   --splitpanes-default-bg: #ffffff;
+
+  --color-primary: #{$--color-primary};
 }

src/views/fcbi/sales/sumSettings.vue

@@ -9,7 +9,7 @@
           label-width="100px"
       >
         <div class="content-group">
-          <div class="radio-group-vertical">
+          <div class="period-selector-vertical">
             <!-- 月指定行 -->
             <div class="monthly-section">
               <div class="date-groups-wrapper">
@@ -67,7 +67,7 @@
         </div>
       </el-form-item>
 
-      <el-divider class="custom-divider"></el-divider>
+      <el-divider class="custom-divider" type="primary"></el-divider>
 
       <div class="section-fc-area">
         <PublicRange
@@ -82,8 +82,8 @@
       </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>
+        <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>
     </div>
   </div>
@@ -114,28 +114,28 @@ const currentYear = new Date().getFullYear();
 const years = Array.from({ length: 11 }, (_, i) => currentYear + i);
 const months = Array.from({ length: 12 }, (_, i) => i + 1);
 
+// 4. 数据字典获取
+const { yamada_fc_brand: yamadaFcBrand } = proxy.useDict('yamada_fc_brand');
+const { yamada_business_type: yamadaBusinessType } = proxy.useDict('yamada_business_type');
+
+// 5. 暴露模板使用的常量
+defineExpose({ AGGREGATION_TYPE, TARGET_PERIOD_TYPE });
+
 // フォームの入力データ
 const data = reactive({
   queryParams: {
     targetPeriodType: TARGET_PERIOD_TYPE.MONTHLY,
     aggregationType: AGGREGATION_TYPE.FC,
-    startYear: null,
-    startMonth: null,
-    annual: null,
+    startYear: null, // 指定年
+    startMonth: null, // 指定月
+    annual: null, // 指定年度
     brandCode: [],
     businessTypeCode: [],
     regions: []
   }
 });
-const { queryParams } = toRefs(data);
-
-// 4. 数据字典获取
-const { yamada_fc_brand: yamadaFcBrand } = proxy.useDict('yamada_fc_brand');
-const { yamada_business_type: yamadaBusinessType } = proxy.useDict('yamada_business_type');
-
-// 5. 暴露模板使用的常量
-defineExpose({ AGGREGATION_TYPE, TARGET_PERIOD_TYPE });
 
+const { queryParams } = toRefs(data);
 // 6. 初始化与生命周期
 onMounted(async () => {
   try {
@@ -415,7 +415,7 @@ const resetForm = () => {
 
 /* 分隔线样式 - 区域间视觉分隔 */
 .custom-divider {
-  background-color: #FF0066; /* 使用品牌色作为分隔线颜色，增强视觉效果 */
+  background-color: var(--color-primary);
   height: 2px; /* 设置分隔线高度，确保视觉效果 */
   margin: 12px 0; /* 上下外边距，与周围内容保持距离 */
 }
@@ -450,10 +450,10 @@ const resetForm = () => {
 }
 
 /* 单选组布局 - 垂直排列（月指定/年度指定） */
-.radio-group-vertical {
+.period-selector-vertical {
   display: flex; /* 使用Flex布局 */
   flex-direction: column; /* 垂直排列子元素 */
-  gap: 15px; /* 月指定与年度指定选项的垂直间距，区分不同选项 */
+  gap: 5px; /* 月指定与年度指定选项的垂直间距，区分不同选项 */
   padding: 0 !important; /* 清除默认内边距 */
   margin: 0 !important; /* 清除默认外边距 */
 }
@@ -616,8 +616,6 @@ const resetForm = () => {
 
 /* 操作按钮样式 - 集計按钮 */
 .btn-aggregation {
-  background-color: #FF0066; /* 按钮背景色，使用品牌色 */
-  color: white; /* 文字颜色，白色与背景形成对比 */
   padding: 6px 10px; /* 内边距，控制按钮大小 */
   box-sizing: border-box; /* 宽度计算包含内边距和边框 */
   margin-left: 0; /* 左侧外边距为0 */
@@ -628,8 +626,6 @@ const resetForm = () => {
 
 /* 操作按钮样式 - リセット按钮 */
 .btn-reset{
-  background-color: #FF0066; /* 按钮背景色，使用品牌色 */
-  color: white; /* 文字颜色，白色与背景形成对比 */
   padding: 6px 10px; /* 内边距，控制按钮大小 */
   box-sizing: border-box; /* 宽度计算包含内边距和边框 */
   margin-left: 10px; /* 左侧外边距，与集計按钮保持距离 */
@@ -776,11 +772,6 @@ const resetForm = () => {
     padding-left: 0 !important; /* 清除左内边距 */
   }
 
-  /* 垂直单选组样式调整 */
-  .radio-group-vertical {
-    padding-left: 0 !important; /* 清除左内边距 */
-  }
-
   /* 年度指定整体容器样式 - 增强不折行控制 */
   .annual-group {
     display: flex; /* Flex布局 */