样式处理

src/components/CollapseNavigation/index.vue

@@ -52,9 +52,18 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  // 折叠面板的 v-model 绑定值（用于自动展开折叠面板）
+  collapseActiveNames: {
+    type: Array,
+    default: null,
+  },
 });
 
-const emit = defineEmits(["update:activeItem", "navClick"]);
+const emit = defineEmits([
+  "update:activeItem",
+  "navClick",
+  "update:collapseActiveNames",
+]);
 
 const currentItem = ref("");
 const scrollContainerEl = ref(null);

src/styles/manage.less

@@ -383,3 +383,43 @@
   }
 }
 // ==========================设置定制化样式 end ==========================
+
+// ==========================表格双色条纹样式 start ==========================
+.table-stripe-colors {
+  border: 1px solid #ebeef5;
+
+  // 奇数行 1、3、5、7…
+  .odd-row {
+    background-color: #f5f5f5 !important;
+  }
+
+  // 偶数行 2、4、6、8…
+  .even-row {
+    background-color: #edf0f5 !important;
+  }
+
+  // 鼠标悬停
+  .el-table__body tr:hover > td {
+    background-color: #e8f4ff !important;
+  }
+
+  // 表头
+  .el-table__header-wrapper {
+    th {
+      background-color: #f0f2f5 !important;
+      color: #333;
+      font-weight: 600;
+      text-align: center;
+      border-color: #ebeef5;
+    }
+  }
+
+  // 表格主体单元格
+  .el-table__body-wrapper {
+    td {
+      border-color: #ebeef5;
+      padding: 8px 0;
+    }
+  }
+}
+// ==========================表格双色条纹样式 end ==========================

src/views/everydayPage/annualPlan.vue

@@ -6,7 +6,7 @@
       <table class="investment-table">
         <!-- 表头行 -->
         <thead>
-          <tr style="background: #f5f7fa">
+          <tr>
             <td class="first-col" colspan="5">指标名称</td>
             <td>合计</td>
           </tr>
@@ -151,14 +151,7 @@
 
     <!-- 右侧：Element 时间输入表格（绑定**内部响应式数据**，不再直接绑props） -->
     <div class="right-table">
-      <el-table
-        :data="tableData"
-        style="width: 100%"
-        border
-        :cell-style="tableCellStyle"
-        :row-style="{ height: '48px' }"
-        :header-row-style="{ height: '48px', background: '#f5f7fa' }"
-      >
+      <el-table :data="tableData" :row-class-name="tableRowClassName" border>
         <el-table-column
           v-for="time in validDynamicTimeList"
           :key="`time-col-${time}`"
@@ -201,7 +194,9 @@ const props = defineProps({
   dynamicTimeList: { type: Array, default: () => [] }, // 父组件必须传
   isPreview: { type: Boolean, default: false },
 });
-
+const tableRowClassName = ({ rowIndex }) => {
+  return rowIndex % 2 === 0 ? "even-row" : "odd-row";
+};
 const emit = defineEmits([
   "update:modelValue", // v-model双向绑定
   "handleAnnualPlanChange", // 原有业务事件
@@ -322,19 +317,31 @@ const getAllRowsTotal = () => {
   return total.toFixed(2);
 };
 
-// 合计行样式（保持不变）
-const tableCellStyle = ({ row }) =>
-  row?.isTotal ? { background: "#f5f7fa", fontWeight: "bold" } : {};
+// 表格单元格样式
+const tableCellStyle = ({ row, columnIndex }) => {
+  const baseStyle = {
+    border: "1px solid #ebeef5",
+  };
 
-// 调试日志（打印内部数据字段，确认是否保留）
-onMounted(() => {
-  if (tableData.value.length > 0) {
+  if (row.isTotal) {
+    return { ...baseStyle, background: "#f5f7fa", fontWeight: "bold" };
   }
-});
+  // 左边三列（序号、指标项、合计）使用 #f7faff 背景色
+  if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
+    return { ...baseStyle, background: "#f7faff" };
+  }
+  return baseStyle;
+};
 </script>
 
 <style scoped lang="scss">
-// 所有样式保持不变，仅优化input样式，确保能看见
+::v-deep .odd-row {
+  background-color: #f5f5f5 !important;
+}
+// 偶数行 2、4、6、8…
+::v-deep .even-row {
+  background-color: #edf0f5 !important;
+}
 .annual-plan-wrap {
   display: flex;
   align-items: flex-start;
@@ -368,24 +375,9 @@ onMounted(() => {
 .investment-table thead td {
   height: 48px;
   font-weight: bold;
-  background: #f7faff;
-}
-.first-col {
-  font-weight: bold;
-  // background-color: #f5f7fa;
-}
-.second-col {
-  // background-color: #f5f7fa;
-}
-.third-col {
-  font-weight: 500;
-  // background-color: #f5f7fa;
-}
-// 新增：第四列样式（计划投资回款等模块）
-.fourth-col {
-  // background-color: #f5f7fa;
-  font-weight: 500;
+  // background: #f7faff;
 }
+
 // 样式优化：移除不必要的隐藏，确保元素可见
 :deep(.el-table) {
   --el-table-border-color: #ebeef5;