diff --git a/src/constants/dataTypes.ts b/src/constants/dataTypes.ts
index 8eedfb475bac99bd8f7c55ee0ec295d6a998897d..1ef14b5dff2b075a301985a13eaadf549dd7178c 100644
--- a/src/constants/dataTypes.ts
+++ b/src/constants/dataTypes.ts
@@ -12,14 +12,54 @@ export const DATA_TYPE = {
     RESTAURANT_FACILITY: '399',  // 餐饮企业
   },
   
-  // 环卫行业相关 (示例，根据实际业务填写)
+  // 环卫行业相关
   ENVIRONMENT: {
     SANITATION_EVENT: '20201',   // 环卫事件
     SANITATION_ALERT: '20202',   // 环卫告警
     SANITATION_FACILITY: '499',  // 环卫设施
   },
   
-  // 其他行业可以按照相同模式添加
+  // 市政设施相关
+  MUNICIPAL: {
+    MUNICIPAL_EVENT: '20301',    // 市政设施事件
+    MUNICIPAL_ALERT: '20302',    // 市政设施告警
+    MUNICIPAL_FACILITY: '599',   // 市政设施
+  },
+  
+  // 景观照明相关
+  LANDSCAPE_LIGHTING: {
+    LIGHTING_EVENT: '20401',     // 景观照明事件
+    LIGHTING_ALERT: '20402',     // 景观照明告警
+    LIGHTING_FACILITY: '699',    // 景观照明设施
+  },
+  
+  // 执法管理相关
+  LAW_ENFORCEMENT: {
+    ENFORCEMENT_EVENT: '20501',  // 执法管理事件
+    ENFORCEMENT_ALERT: '20502',  // 执法管理告警
+    ENFORCEMENT_RECORD: '799',   // 执法记录
+  },
+  
+  // 生活垃圾相关
+  DOMESTIC_WASTE: {
+    WASTE_EVENT: '20601',        // 生活垃圾事件
+    WASTE_ALERT: '20602',        // 生活垃圾告警
+    WASTE_FACILITY: '899',       // 生活垃圾设施
+  },
+  
+  // 建筑垃圾相关
+  CONSTRUCTION_WASTE: {
+    CONSTRUCTION_EVENT: '20701', // 建筑垃圾事件
+    CONSTRUCTION_ALERT: '20702', // 建筑垃圾告警
+    CONSTRUCTION_SITE: '999',    // 建筑垃圾场所
+  },
+  
+  // 市容秩序相关
+  CITY_APPEARANCE: {
+    APPEARANCE_EVENT: '20801',   // 市容秩序事件
+    APPEARANCE_ALERT: '20802',   // 市容秩序告警
+    APPEARANCE_RECORD: '1099',   // 市容秩序记录
+  },
 };
 
 // 网格类型常量
@@ -30,11 +70,47 @@ export const GRID_TYPE = {
     RESTAURANT_FACILITY: '09',   // 餐饮企业网格类型
   },
   
-  // 环卫行业相关 (示例，根据实际业务填写)
+  // 环卫行业相关
   ENVIRONMENT: {
     SANITATION_EVENT: '03',      // 环卫事件网格类型
     SANITATION_FACILITY: '10',   // 环卫设施网格类型
   },
+  
+  // 市政设施相关
+  MUNICIPAL: {
+    MUNICIPAL_EVENT: '04',       // 市政设施事件网格类型
+    MUNICIPAL_FACILITY: '11',    // 市政设施网格类型
+  },
+  
+  // 景观照明相关
+  LANDSCAPE_LIGHTING: {
+    LIGHTING_EVENT: '05',        // 景观照明事件网格类型
+    LIGHTING_FACILITY: '12',     // 景观照明设施网格类型
+  },
+  
+  // 执法管理相关
+  LAW_ENFORCEMENT: {
+    ENFORCEMENT_EVENT: '06',     // 执法管理事件网格类型
+    ENFORCEMENT_RECORD: '13',    // 执法记录网格类型
+  },
+  
+  // 生活垃圾相关
+  DOMESTIC_WASTE: {
+    WASTE_EVENT: '07',           // 生活垃圾事件网格类型
+    WASTE_FACILITY: '14',        // 生活垃圾设施网格类型
+  },
+  
+  // 建筑垃圾相关
+  CONSTRUCTION_WASTE: {
+    CONSTRUCTION_EVENT: '08',    // 建筑垃圾事件网格类型
+    CONSTRUCTION_SITE: '15',     // 建筑垃圾场所网格类型
+  },
+  
+  // 市容秩序相关
+  CITY_APPEARANCE: {
+    APPEARANCE_EVENT: '09',      // 市容秩序事件网格类型
+    APPEARANCE_RECORD: '16',     // 市容秩序记录网格类型
+  },
 };
 
 // 面板激活规则
@@ -43,16 +119,37 @@ export const PANEL_ACTIVATION = {
   ACTIVATE_LEFT: [
     DATA_TYPE.RESTAURANT_OIL.OIL_SMOKE_ALERT,
     DATA_TYPE.RESTAURANT_OIL.RESTAURANT_FACILITY,
+    DATA_TYPE.ENVIRONMENT.SANITATION_ALERT,
+    DATA_TYPE.ENVIRONMENT.SANITATION_FACILITY,
+    DATA_TYPE.MUNICIPAL.MUNICIPAL_ALERT,
+    DATA_TYPE.MUNICIPAL.MUNICIPAL_FACILITY,
+    DATA_TYPE.LANDSCAPE_LIGHTING.LIGHTING_ALERT,
+    DATA_TYPE.LANDSCAPE_LIGHTING.LIGHTING_FACILITY,
+    DATA_TYPE.LAW_ENFORCEMENT.ENFORCEMENT_ALERT,
+    DATA_TYPE.LAW_ENFORCEMENT.ENFORCEMENT_RECORD,
+    DATA_TYPE.DOMESTIC_WASTE.WASTE_ALERT,
+    DATA_TYPE.DOMESTIC_WASTE.WASTE_FACILITY,
+    DATA_TYPE.CONSTRUCTION_WASTE.CONSTRUCTION_ALERT,
+    DATA_TYPE.CONSTRUCTION_WASTE.CONSTRUCTION_SITE,
+    DATA_TYPE.CITY_APPEARANCE.APPEARANCE_ALERT,
+    DATA_TYPE.CITY_APPEARANCE.APPEARANCE_RECORD,
   ],
   
   // 哪些数据类型会激活右侧面板
   ACTIVATE_RIGHT: [
     DATA_TYPE.RESTAURANT_OIL.OIL_SMOKE_EVENT,
+    DATA_TYPE.ENVIRONMENT.SANITATION_EVENT,
+    DATA_TYPE.MUNICIPAL.MUNICIPAL_EVENT,
+    DATA_TYPE.LANDSCAPE_LIGHTING.LIGHTING_EVENT,
+    DATA_TYPE.LAW_ENFORCEMENT.ENFORCEMENT_EVENT,
+    DATA_TYPE.DOMESTIC_WASTE.WASTE_EVENT,
+    DATA_TYPE.CONSTRUCTION_WASTE.CONSTRUCTION_EVENT,
+    DATA_TYPE.CITY_APPEARANCE.APPEARANCE_EVENT,
   ],
   
   // 哪些数据类型不改变激活状态
   PRESERVE_ACTIVE: [
-    // DATA_TYPE.RESTAURANT_OIL.RESTAURANT_FACILITY, // 移除，已添加到ACTIVATE_LEFT
+    // 已移除，分配到ACTIVATE_LEFT
   ],
 };
 
@@ -61,14 +158,46 @@ export const DATA_TO_GRID_TYPE_MAP: Record<string, string> = {
   [DATA_TYPE.RESTAURANT_OIL.OIL_SMOKE_EVENT]: GRID_TYPE.RESTAURANT_OIL.OIL_SMOKE_EVENT,
   [DATA_TYPE.RESTAURANT_OIL.OIL_SMOKE_ALERT]: GRID_TYPE.RESTAURANT_OIL.OIL_SMOKE_EVENT, // 告警使用相同的网格类型
   [DATA_TYPE.RESTAURANT_OIL.RESTAURANT_FACILITY]: GRID_TYPE.RESTAURANT_OIL.RESTAURANT_FACILITY,
-  // 其他映射关系
+  
+  [DATA_TYPE.ENVIRONMENT.SANITATION_EVENT]: GRID_TYPE.ENVIRONMENT.SANITATION_EVENT,
+  [DATA_TYPE.ENVIRONMENT.SANITATION_ALERT]: GRID_TYPE.ENVIRONMENT.SANITATION_EVENT,
+  [DATA_TYPE.ENVIRONMENT.SANITATION_FACILITY]: GRID_TYPE.ENVIRONMENT.SANITATION_FACILITY,
+  
+  [DATA_TYPE.MUNICIPAL.MUNICIPAL_EVENT]: GRID_TYPE.MUNICIPAL.MUNICIPAL_EVENT,
+  [DATA_TYPE.MUNICIPAL.MUNICIPAL_ALERT]: GRID_TYPE.MUNICIPAL.MUNICIPAL_EVENT,
+  [DATA_TYPE.MUNICIPAL.MUNICIPAL_FACILITY]: GRID_TYPE.MUNICIPAL.MUNICIPAL_FACILITY,
+  
+  [DATA_TYPE.LANDSCAPE_LIGHTING.LIGHTING_EVENT]: GRID_TYPE.LANDSCAPE_LIGHTING.LIGHTING_EVENT,
+  [DATA_TYPE.LANDSCAPE_LIGHTING.LIGHTING_ALERT]: GRID_TYPE.LANDSCAPE_LIGHTING.LIGHTING_EVENT,
+  [DATA_TYPE.LANDSCAPE_LIGHTING.LIGHTING_FACILITY]: GRID_TYPE.LANDSCAPE_LIGHTING.LIGHTING_FACILITY,
+  
+  [DATA_TYPE.LAW_ENFORCEMENT.ENFORCEMENT_EVENT]: GRID_TYPE.LAW_ENFORCEMENT.ENFORCEMENT_EVENT,
+  [DATA_TYPE.LAW_ENFORCEMENT.ENFORCEMENT_ALERT]: GRID_TYPE.LAW_ENFORCEMENT.ENFORCEMENT_EVENT,
+  [DATA_TYPE.LAW_ENFORCEMENT.ENFORCEMENT_RECORD]: GRID_TYPE.LAW_ENFORCEMENT.ENFORCEMENT_RECORD,
+  
+  [DATA_TYPE.DOMESTIC_WASTE.WASTE_EVENT]: GRID_TYPE.DOMESTIC_WASTE.WASTE_EVENT,
+  [DATA_TYPE.DOMESTIC_WASTE.WASTE_ALERT]: GRID_TYPE.DOMESTIC_WASTE.WASTE_EVENT,
+  [DATA_TYPE.DOMESTIC_WASTE.WASTE_FACILITY]: GRID_TYPE.DOMESTIC_WASTE.WASTE_FACILITY,
+  
+  [DATA_TYPE.CONSTRUCTION_WASTE.CONSTRUCTION_EVENT]: GRID_TYPE.CONSTRUCTION_WASTE.CONSTRUCTION_EVENT,
+  [DATA_TYPE.CONSTRUCTION_WASTE.CONSTRUCTION_ALERT]: GRID_TYPE.CONSTRUCTION_WASTE.CONSTRUCTION_EVENT,
+  [DATA_TYPE.CONSTRUCTION_WASTE.CONSTRUCTION_SITE]: GRID_TYPE.CONSTRUCTION_WASTE.CONSTRUCTION_SITE,
+  
+  [DATA_TYPE.CITY_APPEARANCE.APPEARANCE_EVENT]: GRID_TYPE.CITY_APPEARANCE.APPEARANCE_EVENT,
+  [DATA_TYPE.CITY_APPEARANCE.APPEARANCE_ALERT]: GRID_TYPE.CITY_APPEARANCE.APPEARANCE_EVENT,
+  [DATA_TYPE.CITY_APPEARANCE.APPEARANCE_RECORD]: GRID_TYPE.CITY_APPEARANCE.APPEARANCE_RECORD,
 };
 
 // 行业默认页面IDs
 export const INDUSTRY_PAGE_IDS = {
   RESTAURANT_OIL: 'restaurantOil',
   ENVIRONMENT: 'environment',
-  // 其他行业页面ID
+  MUNICIPAL: 'municipal',
+  LANDSCAPE_LIGHTING: 'landscapeLighting',
+  LAW_ENFORCEMENT: 'lawEnforcement',
+  DOMESTIC_WASTE: 'domesticWaste',
+  CONSTRUCTION_WASTE: 'constructionWaste',
+  CITY_APPEARANCE: 'cityAppearance',
 };
 
 // 页面默认数据类型
@@ -76,7 +205,12 @@ export const PAGE_DEFAULT_DATA_TYPES: Record<string, string> = {
   'home': DATA_TYPE.RESTAURANT_OIL.OIL_SMOKE_EVENT,
   'restaurantOil': DATA_TYPE.RESTAURANT_OIL.OIL_SMOKE_EVENT,
   'environment': DATA_TYPE.ENVIRONMENT.SANITATION_EVENT,
-  // 更多页面默认数据类型
+  'municipal': DATA_TYPE.MUNICIPAL.MUNICIPAL_EVENT,
+  'landscapeLighting': DATA_TYPE.LANDSCAPE_LIGHTING.LIGHTING_EVENT,
+  'lawEnforcement': DATA_TYPE.LAW_ENFORCEMENT.ENFORCEMENT_EVENT,
+  'domesticWaste': DATA_TYPE.DOMESTIC_WASTE.WASTE_EVENT,
+  'constructionWaste': DATA_TYPE.CONSTRUCTION_WASTE.CONSTRUCTION_EVENT,
+  'cityAppearance': DATA_TYPE.CITY_APPEARANCE.APPEARANCE_EVENT,
 };
 
 // 区域代码
diff --git a/src/pages/Home_v_2504/components/MapContainer/NavigationBar/index.less b/src/pages/Home_v_2504/components/MapContainer/NavigationBar/index.less
index 7b294c6932efec0ccc570eb5ac7154ba44d6309f..1755a27a11123f54715cc9e405bf295146ac80db 100644
--- a/src/pages/Home_v_2504/components/MapContainer/NavigationBar/index.less
+++ b/src/pages/Home_v_2504/components/MapContainer/NavigationBar/index.less
@@ -57,7 +57,10 @@
 .subNavItems {
   position: absolute;
   bottom: 81px;
-  width: 205px;
+  width: 505px;  // tsj： 这里宽度要设置为505px，否则会导致子菜单项由于宽度不够展示不出来。
+  left: 0;      // tsj： 这里left要设置为0，否则会导致整个菜单栏偏移。
+  
+  // width: 205px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -78,7 +81,6 @@
   width: 205px;
   height: 60px;
   background: rgb(23, 73, 146);
-  // opacity: 0.7;
   border-radius: 35.5px;
   box-shadow: inset 0px 0px 20px 0px rgb(0, 166, 255);
   display: flex;
@@ -95,7 +97,6 @@
   
   &:hover {
     background: rgb(249, 183, 79);
-    // opacity: 0.7;
     box-shadow: inset 0px 0px 20px 0px rgb(255, 204, 122);
   }
 }
@@ -110,12 +111,46 @@
 // 禁用状态样式
 .subNavItemDisabled {
   cursor: not-allowed;
-  opacity: 0.6;
-  background: rgb(23, 73, 146, 0.5);
+  // opacity: 0.6;   // tsj： 不要用opacity，会导致子菜单项也带有模糊（因为都使用了subNavItem，它没有重置opacity，哪怕重置opacity要用!important才能生效）；这里就用rgba设置background的透明度就可以了。
+  background: rgba(23, 73, 146, 0.6);
   box-shadow: none;
   
   &:hover {
-    background: rgb(23, 73, 146, 0.5);
+    background: rgba(23, 73, 146, 0.6);
     box-shadow: none;
   }
+}
+
+// 有子菜单的导航项样式
+.subNavItemWithChildren {
+  position: relative;
+  
+  &:hover .subSubNavItems {
+    display: flex;
+  }
+}
+
+.subNavArrow {
+  position: absolute;
+  right: 15px;
+  font-size: 18px;
+}
+
+// 二级子菜单样式
+.subSubNavItems {
+  position: absolute;
+  left: 215px;
+  top: 0;
+  display: none;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 13px;
+  padding-bottom: 13px;
+  max-height: 300px;
+  z-index: 1000;
+  
+  // 始终可见的子菜单
+  &.alwaysVisible {
+    display: flex;
+  }
 } 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/MapContainer/NavigationBar/index.tsx b/src/pages/Home_v_2504/components/MapContainer/NavigationBar/index.tsx
index 1117bde7c25d2725c2963f75726fc5777fb50c26..586f19d83aee139491bae78ea3eae697304d34ec 100644
--- a/src/pages/Home_v_2504/components/MapContainer/NavigationBar/index.tsx
+++ b/src/pages/Home_v_2504/components/MapContainer/NavigationBar/index.tsx
@@ -12,6 +12,8 @@ interface NavItem {
   icon: string;
   hasChildren?: boolean;
   children?: NavSubItem[];
+  nonClickable?: boolean; // 添加标识不可点击的属性
+  alwaysShowChildren?: boolean; // 添加标识总是展示子菜单的属性
 }
 
 interface NavSubItem {
@@ -19,6 +21,9 @@ interface NavSubItem {
   label: string;
   pageKey?: string; // 对应的页面key
   serviceId?: string; // 对应专项服务ID
+  children?: NavSubItem[]; // 允许子项嵌套，支持二级子菜单
+  nonClickable?: boolean; // 添加标识不可点击的属性
+  alwaysShowChildren?: boolean; // 允许子项总是显示子菜单
 }
 
 const NavigationBar: React.FC = () => {
@@ -94,13 +99,24 @@ const NavigationBar: React.FC = () => {
       icon: 'map-navigate-logo-4.png',
       hasChildren: true,
       children: [
-        { key: 'industryStatus1', label: '环境卫生' },
-        // { key: 'industryStatus1', label: '环境卫生', pageKey: 'environment' },
-        { key: 'industryStatus2', label: '市容广招' },
-        { key: 'industryStatus3', label: '固废处置' },
-        { key: 'industryStatus4', label: '市政设施' },
-        { key: 'industryStatus5', label: '城市照明' },
-        { key: 'industryStatus6', label: '城管执法' },
+        // { key: 'industryStatus1', label: '环境卫生' },
+        { key: 'industryStatus1', label: '环境卫生', pageKey: 'environment' },
+        { key: 'industryStatus2', label: '市政设施', pageKey: 'municipal' },
+        { key: 'industryStatus3', label: '景观照明', pageKey: 'landscapeLighting' },
+        { 
+          key: 'industryStatus4', 
+          label: '执法管理',
+          nonClickable: true, // 标识不可点击
+          alwaysShowChildren: true, // 标识总是展示子菜单
+          children: [
+            { key: 'lawEnforcement1', label: '行政处罚', pageKey: 'lawEnforcementPunishment' },
+            { key: 'lawEnforcement2', label: '市区协同', pageKey: 'lawEnforcementCoordination' },
+            { key: 'lawEnforcement3', label: '日常巡查', pageKey: 'lawEnforcementPatrol' },
+          ]
+        },
+        { key: 'industryStatus5', label: '生活垃圾', pageKey: 'domesticWaste' },
+        { key: 'industryStatus6', label: '建筑垃圾', pageKey: 'constructionWaste' },
+        { key: 'industryStatus7', label: '市容秩序', pageKey: 'cityAppearance' },
       ]
     },
     {
@@ -123,6 +139,9 @@ const NavigationBar: React.FC = () => {
 
   // 处理导航项点击
   const handleNavItemClick = (item: NavItem) => {
+    if (item.nonClickable) {
+      return; // 如果是不可点击的项，直接返回
+    }
     if (item.key === 'home') {
       // 首页按钮点击时返回首页
       backToHome();
@@ -152,6 +171,10 @@ const NavigationBar: React.FC = () => {
 
   // 处理子导航项点击
   const handleSubItemClick = (parentKey: string, subItem: NavSubItem) => {
+    if (subItem.nonClickable) {
+      return; // 如果是不可点击的项，直接返回
+    }
+    
     // 处理专项服务类型
     if (parentKey === 'specialService' && subItem.serviceId) {
       const serviceConfig = serviceConfigs[subItem.serviceId];
@@ -215,11 +238,39 @@ const NavigationBar: React.FC = () => {
                     key={subItem.key}
                     className={classNames(styles.subNavItem, {
                       [styles.subNavItemActive]: isActiveSubItem(subItem),
-                      [styles.subNavItemDisabled]: isActiveSubItem(subItem)
+                      // [styles.subNavItemDisabled]: false,
+                      // [styles.subNavItemDisabled]: isActiveSubItem(subItem),
+                      [styles.subNavItemDisabled]: isActiveSubItem(subItem) || subItem.nonClickable,
+                      [styles.subNavItemWithChildren]: subItem.children && subItem.children.length > 0
                     })}
-                    onClick={() => !isActiveSubItem(subItem) && handleSubItemClick(item.key, subItem)}
+                    onClick={() => !isActiveSubItem(subItem) && !subItem.children && !subItem.nonClickable && handleSubItemClick(item.key, subItem)}
                   >
                     {subItem.label}
+                    {subItem.nonClickable && subItem.children && <span className={styles.subNavArrow}>›</span>}
+                    
+                    {/* 渲染二级子菜单 */}
+                    {(hoveredKey === item.key || subItem.alwaysShowChildren) && subItem.children && subItem.children.length > 0 && (
+                      <div 
+                        className={classNames(styles.subSubNavItems, {
+                          [styles.alwaysVisible]: subItem.alwaysShowChildren
+                        })}
+                        onMouseEnter={() => setHoveredKey(item.key)} // 确保子菜单悬停时父菜单仍保持激活
+                      >
+                        {subItem.children.map(subSubItem => (
+                          <div
+                            key={subSubItem.key}
+                            // className={classNames(styles.subNavItem)}
+                            className={classNames(styles.subNavItem, {
+                              [styles.subNavItemActive]: isActiveSubItem(subSubItem),
+                              [styles.subNavItemDisabled]: isActiveSubItem(subSubItem)
+                            })}
+                            onClick={() => !isActiveSubItem(subSubItem) && handleSubItemClick(item.key, subSubItem)}
+                          >
+                            {subSubItem.label}
+                          </div>
+                        ))}
+                      </div>
+                    )}
                   </div>
                 ))}
               </div>
diff --git a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/EnvironmentalHealth/index.tsx b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/EnvironmentalHealth/index.tsx
index c87712f71890db92ead50e0827444f140dd9eba6..e40c674bcc5ad01411cdfd0bae297dd31ef56485 100644
--- a/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/EnvironmentalHealth/index.tsx
+++ b/src/pages/Home_v_2504/components/RightContent/IndustryOverview/components/EnvironmentalHealth/index.tsx
@@ -89,7 +89,7 @@ const EnvironmentalHealth: React.FC = () => {
   return (
     <div 
       className={styles.container} 
-      // onClick={() => navigateTo('environment')} 
+      onClick={() => navigateTo('environment')} 
       // style={{ cursor: 'pointer' }}
     >
       {/* 问题统计 */}
diff --git a/src/pages/Home_v_2504/components/SubPages/CityAppearance/components/LeftContent/index.less b/src/pages/Home_v_2504/components/SubPages/CityAppearance/components/LeftContent/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..68da75f466c4d86921560dd15d4ead8943d9d0d3
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/CityAppearance/components/LeftContent/index.less
@@ -0,0 +1,24 @@
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;  
+  background-image: url('~@/assets/images/V-2504/subpage-bg-left.png');
+  background-size: cover;
+  background-position: center;
+  border-radius: 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.content {
+  border-radius: 12px;
+  padding: 15px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+} 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/CityAppearance/components/LeftContent/index.tsx b/src/pages/Home_v_2504/components/SubPages/CityAppearance/components/LeftContent/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a7e5ff2f3b73be7bbbe82e5cc4c12183dcbe90b9
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/CityAppearance/components/LeftContent/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from './index.less';
+import PanelTitle from '@/pages/Home_v_2504/components/common/PanelTitle';
+
+/**
+ * 市容秩序左侧内容组件
+ */
+const LeftContent: React.FC = () => {
+  return (
+    <div className={styles.container}>
+      {/* 标题 */}
+      <div className={styles.header}>
+        <PanelTitle title="整体概况" />
+      </div>
+      
+      <div className={styles.content}>
+        <p>此处为市容秩序监管左侧内容区域</p>
+      </div>
+    </div>
+  );
+};
+
+export default LeftContent; 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/CityAppearance/index.tsx b/src/pages/Home_v_2504/components/SubPages/CityAppearance/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8e96378d101959c915dbcc5414603113b37408b1
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/CityAppearance/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import SubPageTemplate from '../SubPageTemplate';
+import { INDUSTRY_PAGE_IDS } from '@/constants/dataTypes';
+
+// 引入左侧组件
+import LeftContent from './components/LeftContent';
+// 复用餐饮油烟的右侧组件
+import RightContent from '../RestaurantOil/components/RightContent';
+
+interface CityAppearanceProps {
+  visible: boolean;
+}
+
+/**
+ * 市容秩序子页面
+ * 使用通用子页面模板实现
+ */
+const CityAppearance: React.FC<CityAppearanceProps> = ({ visible }) => {
+  return (
+    <SubPageTemplate
+      visible={visible}
+      pageId={INDUSTRY_PAGE_IDS.CITY_APPEARANCE}
+      leftComponent={LeftContent}
+      rightComponent={(props) => (
+        <RightContent
+          {...props}
+          dataTypeKey="市容秩序事件"
+          title="市容秩序事件"
+          useHighFrequencyType={true}
+          isThinLayout={true}
+        />
+      )}
+      title="市容秩序监管"
+    />
+  );
+};
+
+export default CityAppearance; 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/ConstructionWaste/components/LeftContent/index.less b/src/pages/Home_v_2504/components/SubPages/ConstructionWaste/components/LeftContent/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..68da75f466c4d86921560dd15d4ead8943d9d0d3
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/ConstructionWaste/components/LeftContent/index.less
@@ -0,0 +1,24 @@
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;  
+  background-image: url('~@/assets/images/V-2504/subpage-bg-left.png');
+  background-size: cover;
+  background-position: center;
+  border-radius: 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.content {
+  border-radius: 12px;
+  padding: 15px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+} 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/ConstructionWaste/components/LeftContent/index.tsx b/src/pages/Home_v_2504/components/SubPages/ConstructionWaste/components/LeftContent/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..11a738a247a31b7f25a681429db8d4d6e1219190
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/ConstructionWaste/components/LeftContent/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from './index.less';
+import PanelTitle from '@/pages/Home_v_2504/components/common/PanelTitle';
+
+/**
+ * 建筑垃圾左侧内容组件
+ */
+const LeftContent: React.FC = () => {
+  return (
+    <div className={styles.container}>
+      {/* 标题 */}
+      <div className={styles.header}>
+        <PanelTitle title="建筑垃圾处置" />
+      </div>
+      
+      <div className={styles.content}>
+        <p>此处为建筑垃圾监管左侧内容区域</p>
+      </div>
+    </div>
+  );
+};
+
+export default LeftContent; 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/ConstructionWaste/index.tsx b/src/pages/Home_v_2504/components/SubPages/ConstructionWaste/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f417c7ea517da6876ffd5ac85b53ef3391b0e578
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/ConstructionWaste/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import SubPageTemplate from '../SubPageTemplate';
+import { INDUSTRY_PAGE_IDS } from '@/constants/dataTypes';
+
+// 引入左侧组件
+import LeftContent from './components/LeftContent';
+// 复用餐饮油烟的右侧组件
+import RightContent from '../RestaurantOil/components/RightContent';
+
+interface ConstructionWasteProps {
+  visible: boolean;
+}
+
+/**
+ * 建筑垃圾子页面
+ * 使用通用子页面模板实现
+ */
+const ConstructionWaste: React.FC<ConstructionWasteProps> = ({ visible }) => {
+  return (
+    <SubPageTemplate
+      visible={visible}
+      pageId={INDUSTRY_PAGE_IDS.CONSTRUCTION_WASTE}
+      leftComponent={LeftContent}
+      rightComponent={(props) => (
+        <RightContent
+          {...props}
+          dataTypeKey="建筑垃圾事件"
+          title="建筑垃圾事件"
+          useHighFrequencyType={true}
+          isThinLayout={true}
+        />
+      )}
+      title="建筑垃圾监管"
+    />
+  );
+};
+
+export default ConstructionWaste; 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/DomesticWaste/components/LeftContent/index.less b/src/pages/Home_v_2504/components/SubPages/DomesticWaste/components/LeftContent/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..68da75f466c4d86921560dd15d4ead8943d9d0d3
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/DomesticWaste/components/LeftContent/index.less
@@ -0,0 +1,24 @@
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;  
+  background-image: url('~@/assets/images/V-2504/subpage-bg-left.png');
+  background-size: cover;
+  background-position: center;
+  border-radius: 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.content {
+  border-radius: 12px;
+  padding: 15px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+} 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/DomesticWaste/components/LeftContent/index.tsx b/src/pages/Home_v_2504/components/SubPages/DomesticWaste/components/LeftContent/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e677af87b8616006d7e40e9a44d0961f847aca2a
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/DomesticWaste/components/LeftContent/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from './index.less';
+import PanelTitle from '@/pages/Home_v_2504/components/common/PanelTitle';
+
+/**
+ * 生活垃圾左侧内容组件
+ */
+const LeftContent: React.FC = () => {
+  return (
+    <div className={styles.container}>
+      {/* 标题 */}
+      <div className={styles.header}>
+        <PanelTitle title="生活垃圾处置" />
+      </div>
+      
+      <div className={styles.content}>
+        <p>此处为生活垃圾监管左侧内容区域</p>
+      </div>
+    </div>
+  );
+};
+
+export default LeftContent; 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/DomesticWaste/index.tsx b/src/pages/Home_v_2504/components/SubPages/DomesticWaste/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f7b74256a605edecf2c2c5b9f83accaf822dd9e5
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/DomesticWaste/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import SubPageTemplate from '../SubPageTemplate';
+import { INDUSTRY_PAGE_IDS } from '@/constants/dataTypes';
+
+// 引入左侧组件
+import LeftContent from './components/LeftContent';
+// 复用餐饮油烟的右侧组件
+import RightContent from '../RestaurantOil/components/RightContent';
+
+interface DomesticWasteProps {
+  visible: boolean;
+}
+
+/**
+ * 生活垃圾子页面
+ * 使用通用子页面模板实现
+ */
+const DomesticWaste: React.FC<DomesticWasteProps> = ({ visible }) => {
+  return (
+    <SubPageTemplate
+      visible={visible}
+      pageId={INDUSTRY_PAGE_IDS.DOMESTIC_WASTE}
+      leftComponent={LeftContent}
+      rightComponent={(props) => (
+        <RightContent
+          {...props}
+          dataTypeKey="生活垃圾事件"
+          title="生活垃圾事件"
+          useHighFrequencyType={true}
+          isThinLayout={true}
+        />
+      )}
+      title="生活垃圾监管"
+    />
+  );
+};
+
+export default DomesticWaste; 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/LandscapeLighting/components/LeftContent/index.less b/src/pages/Home_v_2504/components/SubPages/LandscapeLighting/components/LeftContent/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..f69bf2442edc9b003ecafe9936ca7671e2b6890b
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/LandscapeLighting/components/LeftContent/index.less
@@ -0,0 +1,28 @@
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;  
+  background-image: url('~@/assets/images/V-2504/subpage-bg-left.png');
+  background-size: cover;
+  background-position: center;
+  border-radius: 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  // margin-bottom: 24px;
+}
+
+.content {
+  // flex: 1;
+  border-radius: 12px;
+  // border: 1px solid rgba(24, 144, 255, 0.3);
+  padding: 15px;
+  display: flex;
+  flex-wrap: wrap;
+  // flex-direction: column;
+  gap: 15px;
+}
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/LandscapeLighting/components/LeftContent/index.tsx b/src/pages/Home_v_2504/components/SubPages/LandscapeLighting/components/LeftContent/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ca4179e4e04a8f57cb5766842757bc14400d5d68
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/LandscapeLighting/components/LeftContent/index.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import styles from './index.less';
+import PanelTitle from '@/pages/Home_v_2504/components/common/PanelTitle';
+
+/**
+ * 景观照明左侧内容组件
+ */
+const LeftContent: React.FC = () => {
+  return (
+    <div className={styles.container}>
+      {/* 标题 */}
+      <div className={styles.header}>
+        <PanelTitle title="景观照明资源" />
+        {/* <DateSelector
+          onChange={handleDateChange}
+          defaultType="day"
+          panelType="left"
+        /> */}
+      </div>
+      
+      <div className={styles.content}>
+        <p>此处为景观照明监管左侧内容区域</p>
+      </div>
+    </div>
+  );
+};
+
+export default LeftContent; 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/LandscapeLighting/index.tsx b/src/pages/Home_v_2504/components/SubPages/LandscapeLighting/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..aa80a8997e7a08b873c72274b001309f342db79f
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/LandscapeLighting/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import SubPageTemplate from '../SubPageTemplate';
+import { INDUSTRY_PAGE_IDS } from '@/constants/dataTypes';
+
+// 引入左侧组件
+import LeftContent from './components/LeftContent';
+// 复用餐饮油烟的右侧组件
+import RightContent from '../RestaurantOil/components/RightContent';
+
+interface LandscapeLightingProps {
+  visible: boolean;
+}
+
+/**
+ * 景观照明子页面
+ * 使用通用子页面模板实现
+ */
+const LandscapeLighting: React.FC<LandscapeLightingProps> = ({ visible }) => {
+  return (
+    <SubPageTemplate
+      visible={visible}
+      pageId={INDUSTRY_PAGE_IDS.LANDSCAPE_LIGHTING}
+      leftComponent={LeftContent}
+      rightComponent={(props) => (
+        <RightContent
+          {...props}
+          dataTypeKey="景观照明事件"
+          title="景观照明事件"
+          useHighFrequencyType={true}
+          isThinLayout={true}
+        />
+      )}
+      title="景观照明监管"
+    />
+  );
+};
+
+export default LandscapeLighting; 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/LawEnforcement/components/LeftContent/index.less b/src/pages/Home_v_2504/components/SubPages/LawEnforcement/components/LeftContent/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..a5b3d5c85f639fc3b7f122e50fd68ea2f952c009
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/LawEnforcement/components/LeftContent/index.less
@@ -0,0 +1,13 @@
+.container {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  color: #fff;
+  background: rgba(7, 28, 67, 0.5);
+  border-radius: 12px;
+  border: 1px solid rgba(24, 144, 255, 0.3);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+} 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/LawEnforcement/components/LeftContent/index.tsx b/src/pages/Home_v_2504/components/SubPages/LawEnforcement/components/LeftContent/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ad678d18f820ed87e610e40105d2190fd2c634a4
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/LawEnforcement/components/LeftContent/index.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import styles from './index.less';
+import PanelTitle from '@/pages/Home_v_2504/components/common/PanelTitle';
+
+/**
+ * 执法管理左侧内容组件
+ */
+const LeftContent: React.FC = () => {
+  return (
+    
+    <div className={styles.container}>
+      {/* 标题 */}
+      <div className={styles.header}>
+        <PanelTitle title="执法管理监管" />
+        {/* <DateSelector
+          onChange={handleDateChange}
+          defaultType="day"
+          panelType="left"
+        /> */}
+      </div>
+      
+      <div className={styles.content}>
+        <p>此处为执法管理监管左侧内容区域</p>
+      </div>
+    </div>
+  );
+};
+
+export default LeftContent; 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/LawEnforcement/index.tsx b/src/pages/Home_v_2504/components/SubPages/LawEnforcement/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fd695bec5420d6011e902ac2a9a127197263b8cc
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/LawEnforcement/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import SubPageTemplate from '../SubPageTemplate';
+import { INDUSTRY_PAGE_IDS } from '@/constants/dataTypes';
+
+// 引入左侧组件
+import LeftContent from './components/LeftContent';
+// 复用餐饮油烟的右侧组件
+import RightContent from '../RestaurantOil/components/RightContent';
+
+interface LawEnforcementProps {
+  visible: boolean;
+}
+
+/**
+ * 执法管理子页面
+ * 使用通用子页面模板实现
+ */
+const LawEnforcement: React.FC<LawEnforcementProps> = ({ visible }) => {
+  return (
+    <SubPageTemplate
+      visible={visible}
+      pageId={INDUSTRY_PAGE_IDS.LAW_ENFORCEMENT}
+      leftComponent={LeftContent}
+      rightComponent={(props) => (
+        <RightContent
+          {...props}
+          dataTypeKey="执法管理事件"
+          title="执法管理事件"
+          useHighFrequencyType={true}
+          isThinLayout={true}
+        />
+      )}
+      title="执法管理监管"
+    />
+  );
+};
+
+export default LawEnforcement; 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/LawEnforcementCoordination/components/LeftContent/index.less b/src/pages/Home_v_2504/components/SubPages/LawEnforcementCoordination/components/LeftContent/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..68da75f466c4d86921560dd15d4ead8943d9d0d3
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/LawEnforcementCoordination/components/LeftContent/index.less
@@ -0,0 +1,24 @@
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;  
+  background-image: url('~@/assets/images/V-2504/subpage-bg-left.png');
+  background-size: cover;
+  background-position: center;
+  border-radius: 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.content {
+  border-radius: 12px;
+  padding: 15px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+} 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/LawEnforcementCoordination/components/LeftContent/index.tsx b/src/pages/Home_v_2504/components/SubPages/LawEnforcementCoordination/components/LeftContent/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..82ca3d1155e008e6cd4b2ff2829b2d63fa136885
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/LawEnforcementCoordination/components/LeftContent/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from './index.less';
+import PanelTitle from '@/pages/Home_v_2504/components/common/PanelTitle';
+
+/**
+ * 市区协同左侧内容组件
+ */
+const LeftContent: React.FC = () => {
+  return (
+    <div className={styles.container}>
+      {/* 标题 */}
+      <div className={styles.header}>
+        <PanelTitle title="整体概况" />
+      </div>
+      
+      <div className={styles.content}>
+        <p>此处为市区协同监管左侧内容区域</p>
+      </div>
+    </div>
+  );
+};
+
+export default LeftContent; 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/LawEnforcementCoordination/index.tsx b/src/pages/Home_v_2504/components/SubPages/LawEnforcementCoordination/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..edac3455c6990b5c2599bc31ee4ebebb149eda10
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/LawEnforcementCoordination/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import SubPageTemplate from '../SubPageTemplate';
+import { INDUSTRY_PAGE_IDS } from '@/constants/dataTypes';
+
+// 引入左侧组件
+import LeftContent from './components/LeftContent';
+// 复用餐饮油烟的右侧组件
+import RightContent from '../RestaurantOil/components/RightContent';
+
+interface LawEnforcementCoordinationProps {
+  visible: boolean;
+}
+
+/**
+ * 市区协同子页面
+ * 使用通用子页面模板实现
+ */
+const LawEnforcementCoordination: React.FC<LawEnforcementCoordinationProps> = ({ visible }) => {
+  return (
+    <SubPageTemplate
+      visible={visible}
+      pageId="lawEnforcementCoordination"
+      leftComponent={LeftContent}
+      rightComponent={(props) => (
+        <RightContent
+          {...props}
+          dataTypeKey="市区协同"
+          title="市区协同"
+          useHighFrequencyType={true}
+          isThinLayout={true}
+        />
+      )}
+      title="市区协同监管"
+    />
+  );
+};
+
+export default LawEnforcementCoordination; 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/LeftContent/index.less b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/LeftContent/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..68da75f466c4d86921560dd15d4ead8943d9d0d3
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/LeftContent/index.less
@@ -0,0 +1,24 @@
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;  
+  background-image: url('~@/assets/images/V-2504/subpage-bg-left.png');
+  background-size: cover;
+  background-position: center;
+  border-radius: 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.content {
+  border-radius: 12px;
+  padding: 15px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+} 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/LeftContent/index.tsx b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/LeftContent/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2b012be31e929789b6958826678202cacf073b82
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/components/LeftContent/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from './index.less';
+import PanelTitle from '@/pages/Home_v_2504/components/common/PanelTitle';
+
+/**
+ * 日常巡查左侧内容组件
+ */
+const LeftContent: React.FC = () => {
+  return (
+    <div className={styles.container}>
+      {/* 标题 */}
+      <div className={styles.header}>
+        <PanelTitle title="整体概况" />
+      </div>
+      
+      <div className={styles.content}>
+        <p>此处为日常巡查监管左侧内容区域</p>
+      </div>
+    </div>
+  );
+};
+
+export default LeftContent; 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/index.tsx b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3658ca11592609824f9bdba540040d1a9c703cef
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPatrol/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import SubPageTemplate from '../SubPageTemplate';
+import { INDUSTRY_PAGE_IDS } from '@/constants/dataTypes';
+
+// 引入左侧组件
+import LeftContent from './components/LeftContent';
+// 复用餐饮油烟的右侧组件
+import RightContent from '../RestaurantOil/components/RightContent';
+
+interface LawEnforcementPatrolProps {
+  visible: boolean;
+}
+
+/**
+ * 日常巡查子页面
+ * 使用通用子页面模板实现
+ */
+const LawEnforcementPatrol: React.FC<LawEnforcementPatrolProps> = ({ visible }) => {
+  return (
+    <SubPageTemplate
+      visible={visible}
+      pageId="lawEnforcementPatrol"
+      leftComponent={LeftContent}
+      rightComponent={(props) => (
+        <RightContent
+          {...props}
+          dataTypeKey="日常巡查"
+          title="日常巡查"
+          useHighFrequencyType={true}
+          isThinLayout={true}
+        />
+      )}
+      title="日常巡查监管"
+    />
+  );
+};
+
+export default LawEnforcementPatrol; 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/LawEnforcementPunishment/components/LeftContent/index.less b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPunishment/components/LeftContent/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..68da75f466c4d86921560dd15d4ead8943d9d0d3
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPunishment/components/LeftContent/index.less
@@ -0,0 +1,24 @@
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;  
+  background-image: url('~@/assets/images/V-2504/subpage-bg-left.png');
+  background-size: cover;
+  background-position: center;
+  border-radius: 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.content {
+  border-radius: 12px;
+  padding: 15px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+} 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/LawEnforcementPunishment/components/LeftContent/index.tsx b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPunishment/components/LeftContent/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..aa8b38a90b7ff4a513c9f509ee1466acb5d40176
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPunishment/components/LeftContent/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from './index.less';
+import PanelTitle from '@/pages/Home_v_2504/components/common/PanelTitle';
+
+/**
+ * 行政处罚左侧内容组件
+ */
+const LeftContent: React.FC = () => {
+  return (
+    <div className={styles.container}>
+      {/* 标题 */}
+      <div className={styles.header}>
+        <PanelTitle title="整体概况" />
+      </div>
+      
+      <div className={styles.content}>
+        <p>此处为行政处罚监管左侧内容区域</p>
+      </div>
+    </div>
+  );
+};
+
+export default LeftContent; 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/LawEnforcementPunishment/index.tsx b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPunishment/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..64e09fb1159651cb71721f80a617d9d7890ce5a6
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/LawEnforcementPunishment/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import SubPageTemplate from '../SubPageTemplate';
+import { INDUSTRY_PAGE_IDS } from '@/constants/dataTypes';
+
+// 引入左侧组件
+import LeftContent from './components/LeftContent';
+// 复用餐饮油烟的右侧组件
+import RightContent from '../RestaurantOil/components/RightContent';
+
+interface LawEnforcementPunishmentProps {
+  visible: boolean;
+}
+
+/**
+ * 行政处罚子页面
+ * 使用通用子页面模板实现
+ */
+const LawEnforcementPunishment: React.FC<LawEnforcementPunishmentProps> = ({ visible }) => {
+  return (
+    <SubPageTemplate
+      visible={visible}
+      pageId="lawEnforcementPunishment"
+      leftComponent={LeftContent}
+      rightComponent={(props) => (
+        <RightContent
+          {...props}
+          dataTypeKey="行政处罚"
+          title="行政处罚"
+          useHighFrequencyType={true}
+          isThinLayout={true}
+        />
+      )}
+      title="行政处罚监管"
+    />
+  );
+};
+
+export default LawEnforcementPunishment; 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/Municipal/components/LeftContent/index.less b/src/pages/Home_v_2504/components/SubPages/Municipal/components/LeftContent/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..f69bf2442edc9b003ecafe9936ca7671e2b6890b
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/Municipal/components/LeftContent/index.less
@@ -0,0 +1,28 @@
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;  
+  background-image: url('~@/assets/images/V-2504/subpage-bg-left.png');
+  background-size: cover;
+  background-position: center;
+  border-radius: 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  // margin-bottom: 24px;
+}
+
+.content {
+  // flex: 1;
+  border-radius: 12px;
+  // border: 1px solid rgba(24, 144, 255, 0.3);
+  padding: 15px;
+  display: flex;
+  flex-wrap: wrap;
+  // flex-direction: column;
+  gap: 15px;
+}
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/Municipal/components/LeftContent/index.tsx b/src/pages/Home_v_2504/components/SubPages/Municipal/components/LeftContent/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fcd6258cd4b99ae0b4a6ab90d610f86e21de500f
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/Municipal/components/LeftContent/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from './index.less';
+import PanelTitle from '@/pages/Home_v_2504/components/common/PanelTitle';
+
+/**
+ * 市政设施左侧内容组件
+ */
+const LeftContent: React.FC = () => {
+  return (
+    <div className={styles.container}>
+      {/* 标题 */}
+      <div className={styles.header}>
+        <PanelTitle title="道桥监管" />
+      </div>
+      
+      <div className={styles.content}>
+        <p>此处为市政设施监管左侧内容区域</p>
+      </div>
+    </div>
+  );
+};
+
+export default LeftContent; 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/components/SubPages/Municipal/index.tsx b/src/pages/Home_v_2504/components/SubPages/Municipal/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f895f8c732a0d4e6fb383fb05e9ff0cf926c384d
--- /dev/null
+++ b/src/pages/Home_v_2504/components/SubPages/Municipal/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import SubPageTemplate from '../SubPageTemplate';
+import { INDUSTRY_PAGE_IDS } from '@/constants/dataTypes';
+
+// 引入左侧组件
+import LeftContent from './components/LeftContent';
+// 复用餐饮油烟的右侧组件
+import RightContent from '../RestaurantOil/components/RightContent';
+
+interface MunicipalProps {
+  visible: boolean;
+}
+
+/**
+ * 市政设施子页面
+ * 使用通用子页面模板实现
+ */
+const Municipal: React.FC<MunicipalProps> = ({ visible }) => {
+  return (
+    <SubPageTemplate
+      visible={visible}
+      pageId={INDUSTRY_PAGE_IDS.MUNICIPAL}
+      leftComponent={LeftContent}
+      rightComponent={(props) => (
+        <RightContent
+          {...props}
+          dataTypeKey="市政设施事件"
+          title="市政设施事件"
+          useHighFrequencyType={true}
+          isThinLayout={true}
+        />
+      )}
+      title="市政设施监管"
+    />
+  );
+};
+
+export default Municipal; 
\ No newline at end of file
diff --git a/src/pages/Home_v_2504/index.tsx b/src/pages/Home_v_2504/index.tsx
index f8a721f9939dcb3169b179f61cd79754a8b0748d..eee2302aa8f3bbba81626caddf3faf16c622fe55 100644
--- a/src/pages/Home_v_2504/index.tsx
+++ b/src/pages/Home_v_2504/index.tsx
@@ -8,6 +8,14 @@ import RightContent from './components/RightContent';
 import { DashboardProvider, useDashboard } from './components/context';
 import RestaurantOil from './components/SubPages/RestaurantOil';
 import Environment from './components/SubPages/Environment';
+import Municipal from './components/SubPages/Municipal';
+import LandscapeLighting from './components/SubPages/LandscapeLighting';
+import LawEnforcementPunishment from './components/SubPages/LawEnforcementPunishment';
+import LawEnforcementCoordination from './components/SubPages/LawEnforcementCoordination';
+import LawEnforcementPatrol from './components/SubPages/LawEnforcementPatrol';
+import DomesticWaste from './components/SubPages/DomesticWaste';
+import ConstructionWaste from './components/SubPages/ConstructionWaste';
+import CityAppearance from './components/SubPages/CityAppearance';
 import classNames from 'classnames';
 import styles from './index.less';
 import { MapStateProvider } from './components/MapStateContext';
@@ -96,40 +104,52 @@ const PageContent: React.FC = () => {
     );
   };
 
+  // 渲染子页面
+  const renderSubPage = (pageId: string, Component: React.ComponentType<{ visible: boolean }>) => {
+    return visiblePages.has(pageId) && (
+      <div 
+        className={classNames(styles.subPageContainer, {
+          [styles.subPage_enter]: activePage === pageId && isTransitioning && transitionDirection === 'in',
+          [styles.subPage_active]: activePage === pageId && !isTransitioning,
+          [styles.subPage_exit]: activePage !== pageId && isTransitioning && transitionDirection === 'out',
+          [styles.hidden]: activePage !== pageId && !isTransitioning && !visiblePages.has(pageId)
+        })}
+      >
+        <Component visible={activePage === pageId} />
+      </div>
+    );
+  };
+
   return (
     <>
       {/* 首页 */}
       {visiblePages.has('home') && renderHomeContent()}
       
       {/* 餐饮油烟子页面 */}
-      {visiblePages.has('restaurantOil') && (
-        <div 
-          className={classNames(styles.subPageContainer, {
-            [styles.subPage_enter]: activePage === 'restaurantOil' && isTransitioning && transitionDirection === 'in',
-            [styles.subPage_active]: activePage === 'restaurantOil' && !isTransitioning,
-            [styles.subPage_exit]: activePage !== 'restaurantOil' && isTransitioning && transitionDirection === 'out',
-            [styles.hidden]: activePage !== 'restaurantOil' && !isTransitioning && !visiblePages.has('restaurantOil')
-          })}
-        >
-          <RestaurantOil visible={activePage === 'restaurantOil'} />
-        </div>
-      )}
+      {renderSubPage('restaurantOil', RestaurantOil)}
       
       {/* 环境卫生子页面 */}
-      {visiblePages.has('environment') && (
-        <div 
-          className={classNames(styles.subPageContainer, {
-            [styles.subPage_enter]: activePage === 'environment' && isTransitioning && transitionDirection === 'in',
-            [styles.subPage_active]: activePage === 'environment' && !isTransitioning,
-            [styles.subPage_exit]: activePage !== 'environment' && isTransitioning && transitionDirection === 'out',
-            [styles.hidden]: activePage !== 'environment' && !isTransitioning && !visiblePages.has('environment')
-          })}
-        >
-          <Environment visible={activePage === 'environment'} />
-        </div>
-      )}
+      {renderSubPage('environment', Environment)}
+      
+      {/* 市政设施子页面 */}
+      {renderSubPage('municipal', Municipal)}
+      
+      {/* 景观照明子页面 */}
+      {renderSubPage('landscapeLighting', LandscapeLighting)}
+      
+      {/* 执法管理子页面 */}
+      {renderSubPage('lawEnforcementPunishment', LawEnforcementPunishment)}
+      {renderSubPage('lawEnforcementCoordination', LawEnforcementCoordination)}
+      {renderSubPage('lawEnforcementPatrol', LawEnforcementPatrol)}
+      
+      {/* 生活垃圾子页面 */}
+      {renderSubPage('domesticWaste', DomesticWaste)}
+      
+      {/* 建筑垃圾子页面 */}
+      {renderSubPage('constructionWaste', ConstructionWaste)}
       
-      {/* 可以添加更多子页面 */}
+      {/* 市容秩序子页面 */}
+      {renderSubPage('cityAppearance', CityAppearance)}
     </>
   );
 };