预算和指标填报

src/views/home/components/indicatorCalendar.vue

@@ -1,14 +1,13 @@
 <template>
   <div style="flex: 1">
-    <Container name="指标填报日历" icon="cockpitItemIcon" size="calendarBg" topSize="calendarTitleBg">
+    <Container name="填报总览" icon="cockpitItemIcon" size="calendarBg" topSize="calendarTitleBg">
       <!-- 1. 移除 .kpi-content 的固定高度，改为自适应 -->
       <div class="kpi-content" style="padding: 14px 14px; display: flex;flex-direction: column; width: 100%;">
         <!-- 2. .top 保持 flex，无需固定高度，自动跟随子元素拉伸 -->
         <div class="bottom"
-          style="display: flex; width: 100%;margin-top: 8px;background-color: rgba(249, 252, 255, 1);height: 844px;padding: 26px 16px;">
+          style="width: 100%;margin-top: 8px;background-color: rgba(249, 252, 255, 1);height: 844px;padding: 26px 0px;">
           <!-- 动态生成12个月的容器：优化flex布局，缩小行间距 -->
-          <div class="month-list"
-            style="display: flex; gap: 16px; flex-wrap: wrap; align-content: flex-start; row-gap: 8px;">
+          <div class="month-list">
             <!-- 循环生成12个月：通过判断当前月份索引，添加current类 -->
             <div class="monthItem" :class="{
               'has-data': month.haveData,
@@ -91,20 +90,20 @@ export default {
 
 // 基础月份样式
 .monthItem {
-  width: 164px;
-  height: 42px;
+  width: 100px;
+  height: 57px;
   border-radius: 4px;
   font-family: PingFangSC, PingFang SC;
   font-weight: 400;
   font-size: 20px;
   color: rgba(0, 0, 0, 0.85);
-  line-height: 42px;
+  line-height: 57px;
   text-align: center;
   font-style: normal;
   cursor: pointer; // 鼠标悬浮手型
   transition: all 0.2s ease; // 过渡效果，样式切换更平滑
   border: 2px solid transparent; // 透明边框，避免选中时布局偏移
-  margin: 0; // 清除默认外边距，进一步缩小缝隙
+  margin: 0 auto 10px; // 清除默认外边距，进一步缩小缝隙
 }
 
 // 有数据的样式（背景色#D1E8FF）