diff --git a/src/pages/business_envInformation_monthly/components/bbtz.js b/src/pages/business_envInformation_monthly/components/bbtz.js index 4fb7fad..bc0defa 100644 --- a/src/pages/business_envInformation_monthly/components/bbtz.js +++ b/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 ; + case 'ledgerCenter': + return ; + case 'reportTask': + return ; + default: + return ; + } + }; + return (
-
-

报表台账

-

待开发...

+ {/* 左侧菜单 */} +
+ {menuItems.map(item => ( +
handleMenuClick(item.key)} + > + {activeMenu === item.key &&
} + {item.label} +
+ ))} +
+ + {/* 右侧内容区 */} +
+ {renderContent()}
); diff --git a/src/pages/business_envInformation_monthly/components/bbtz.less b/src/pages/business_envInformation_monthly/components/bbtz.less index 085d2b4..5926ef8 100644 --- a/src/pages/business_envInformation_monthly/components/bbtz.less +++ b/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; + } + } } diff --git a/src/pages/business_envInformation_monthly/components/content_component_bbtz/LedgerCenter.js b/src/pages/business_envInformation_monthly/components/content_component_bbtz/LedgerCenter.js new file mode 100644 index 0000000..36a1471 --- /dev/null +++ b/src/pages/business_envInformation_monthly/components/content_component_bbtz/LedgerCenter.js @@ -0,0 +1,6 @@ +import React from 'react'; +import './LedgerCenter.less'; + +const LedgerCenter = () =>
待开发三个字
; + +export default LedgerCenter; diff --git a/src/pages/business_envInformation_monthly/components/content_component_bbtz/LedgerCenter.less b/src/pages/business_envInformation_monthly/components/content_component_bbtz/LedgerCenter.less new file mode 100644 index 0000000..372dd8c --- /dev/null +++ b/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; +} diff --git a/src/pages/business_envInformation_monthly/components/hjbs.less b/src/pages/business_envInformation_monthly/components/hjbs.less index 9e9668a..b75abe0 100644 --- a/src/pages/business_envInformation_monthly/components/hjbs.less +++ b/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; } } -} - +} \ No newline at end of file