选择方法配置页面

src/pages/business_envInformation_monthly/components/bbtz.js

@@ -1,12 +1,55 @@
-import React from 'react';
+
+import React, { useState } from 'react';
 import styles from './bbtz.less';
+import TemplateLibrary from '../components/content_component_bbtz/TemplateLibrary';
+import LedgerCenter from '../components/content_component_bbtz/LedgerCenter';
+import ReportTask from '../components/content_component_bbtz/ReportTask';
 
 const Bbtz = () => {
+    const [activeMenu, setActiveMenu] = useState('templateLibrary');
+
+    const menuItems = [
+        { key: 'templateLibrary', label: '模板库' },
+        { key: 'ledgerCenter', label: '台账中心' },
+        { key: 'reportTask', label: '报送任务' }
+    ];
+
+    const handleMenuClick = (key) => {
+        setActiveMenu(key);
+    };
+
+    const renderContent = () => {
+        switch (activeMenu) {
+            case 'templateLibrary':
+                return <TemplateLibrary />;
+            case 'ledgerCenter':
+                return <LedgerCenter />;
+            case 'reportTask':
+                return <ReportTask />;
+            default:
+                return <TemplateLibrary />;
+        }
+    };
+
     return (
         <div className={styles.container}>
-            <div style={{ padding: '20px', textAlign: 'center' }}>
+            {/* 左侧菜单 */}
-                <h2>报表台账</h2>
+            <div className={styles.leftMenu}>
-                <p>待开发...</p>
+                {menuItems.map(item => (
+                    <div
+                        key={item.key}
+                        className={`${styles.menuItem} ${activeMenu === item.key ? styles.active : ''}`}
+                        onClick={() => handleMenuClick(item.key)}
+                    >
+                        {activeMenu === item.key && <div className={styles.activeIndicator}></div>}
+                        <span className={styles.menuText}>{item.label}</span>
+                    </div>
+                ))}
+            </div>
+
+            {/* 右侧内容区 */}
+            <div className={styles.rightContent}>
+                {renderContent()}
             </div>
         </div>
     );

src/pages/business_envInformation_monthly/components/bbtz.less

@@ -1,5 +1,75 @@
+
 .container {
     width: 100%;
     height: 100%;
+    display: flex;
+    gap: 10px;
+    padding-left: 5px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    background-color: #f5f5f5;
+
+    .leftMenu {
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+        background-color: #fff;
+
+        .menuItem {
+            width: 140px;
+            height: 50px;
+            background-color: #FFFFFF;
+            border-radius: 4px;
+            display: flex;
+            align-items: center;
+            position: relative;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            padding-left: 20px;
+
+            .menuText {
+                font-size: 14px;
+                color: #999999;
+                font-weight: 400;
+                transition: color 0.3s ease;
+            }
+
+            .activeIndicator {
+                position: absolute;
+                left: 3px;
+                width: 17.35px;
+                height: 1.98px;
+                border-radius: 6px;
+                background-color: #009D6F;
+                transform: rotate(-90deg);
+            }
+
+            &.active {
+                background-color: #D4FFEC;
+                .menuText {
+                    color: #009D6F;
+                }
+            }
+
+            &:hover:not(.active) {
+                background-color: #f9f9f9;
+            }
+        }
+    }
+
+    .rightContent {
+        flex: 1;
+        border-radius: 4px;
+        overflow: auto;
+        .contentPlaceholder {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            color: #666666;
+        }
+    }
 }
 

src/pages/business_envInformation_monthly/components/content_component_bbtz/LedgerCenter.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import './LedgerCenter.less';
+
+const LedgerCenter = () => <div className="ledger-center">待开发三个字</div>;
+
+export default LedgerCenter;

src/pages/business_envInformation_monthly/components/content_component_bbtz/LedgerCenter.less

@@ -0,0 +1,6 @@
+.ledger-center {
+  font-size: 20px;
+  color: #888;
+  text-align: center;
+  padding: 40px 0;
+}

src/pages/business_envInformation_monthly/components/hjbs.less

@@ -9,6 +9,14 @@
     padding-bottom: 10px;
     background-color: #f5f5f5;
 
+
+
+    :global {
+        .ant-tree {
+            background-color: transparent !important;
+        }
+    }
+
     // 左侧菜单
     .leftMenu {
         display: flex;
@@ -17,6 +25,7 @@
         flex-shrink: 0;
         background-color: #fff;
 
+
         .menuItem {
             width: 140px;
             height: 50px;
@@ -81,5 +90,4 @@
             color: #666666;
         }
     }
-}
+}
-