diff --git a/src/assets/images/UrbanElements/bg1.png b/src/assets/images/UrbanElements/bg1.png
new file mode 100644
index 0000000000000000000000000000000000000000..3cd7bbcdf4a606e82df4ad8655899e4eb77b9309
Binary files /dev/null and b/src/assets/images/UrbanElements/bg1.png differ
diff --git a/src/assets/images/UrbanElements/gridBg.png b/src/assets/images/UrbanElements/gridBg.png
new file mode 100644
index 0000000000000000000000000000000000000000..8641d67ba63ecab4654cf17cf1f508e744df02eb
Binary files /dev/null and b/src/assets/images/UrbanElements/gridBg.png differ
diff --git a/src/pages/Common/components/BaseCard/index.tsx b/src/pages/Common/components/BaseCard/index.tsx
index ce64ab68197db7d40fa68fe1eda38410bda318b4..7d29998bdd1b37f6719d835ffa32378b506e2f2b 100644
--- a/src/pages/Common/components/BaseCard/index.tsx
+++ b/src/pages/Common/components/BaseCard/index.tsx
@@ -7,7 +7,7 @@ import styles from './index.less'
  */
 
 interface BaseCardProps {
-  title?: string;
+  title?: string | ReactNode;
   width?: React.CSSProperties['width'];
   style?: React.CSSProperties;
   extra?: ReactNode,
diff --git a/src/pages/UrbanManagementResourceElements/DataElement/LineCharts/index.tsx b/src/pages/UrbanManagementResourceElements/DataElement/LineCharts/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..aebf6825cef5f61b8c4518fc6f4eaa95f67acca9
--- /dev/null
+++ b/src/pages/UrbanManagementResourceElements/DataElement/LineCharts/index.tsx
@@ -0,0 +1,76 @@
+import { useMemo } from 'react'
+import ReactEcharts from 'echarts-for-react';
+const LineCharts = ({ data }: { data: any[] }) => {
+
+  const option = useMemo(() => {
+    const chartData: any = ['100', '90', '80','100', '90', '80','100', '90', '80','100', '90', '80','100', '90', '80','100', '90', '80',]
+    const showXAis = true
+    return {
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        show: showXAis,
+        data: showXAis ? data?.map(item => item.name) : [],
+        axisLabel: {
+          color: '#CBEDFF',
+          interval: 3 // 设置为0以显示所有坐标点  
+        },
+        axisLine: {
+          show: false,
+        },
+      },
+      yAxis: {
+        type: 'value',
+        show: false,
+      },
+      grid: {
+        left: '0',  // 左边距
+        right: '0%', // 右边距
+        top: '10%',   // 上边距
+        bottom: '30%' // 下边距
+      },
+      series: [
+        {
+          data: chartData,
+          symbol: "none",
+          type: 'line',
+          lineStyle: {
+            color: "#57EFE5",
+          },
+
+          areaStyle: {
+            // 区域填充样式。设置后显示成区域面积图。
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 1,
+              x2: 0,
+              y2: 0.2,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: 'rgba(87, 239, 229, 0)', // 0% 处的颜色
+                },
+
+                {
+                  offset: 1,
+                  color: 'rgba(87, 239, 229, 0.36)', // 100% 处的颜色
+                },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+        },
+      ],
+    }
+  }, [data])
+
+  return (
+    <ReactEcharts
+      option={option} // option：图表配置项
+      style={{ width: '1000px', height: '100px' }}
+    />
+  )
+}
+
+export default LineCharts
\ No newline at end of file
diff --git a/src/pages/UrbanManagementResourceElements/DataElement/index.less b/src/pages/UrbanManagementResourceElements/DataElement/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..9b138160709652586185546964fea522a0c5dae2
--- /dev/null
+++ b/src/pages/UrbanManagementResourceElements/DataElement/index.less
@@ -0,0 +1,145 @@
+.wrap {
+  width: 50%;
+  border-radius: 40px;
+  background: linear-gradient(
+    180deg,
+    rgba(27, 50, 89, 0.3),
+    rgba(27, 50, 89, 0.3) 100%
+  );
+  padding: 36px;
+  .top {
+    margin-bottom: 57px;
+    .title {
+      font-family: DingTalk JinBuTi;
+      font-size: 40px;
+      color: #fff;
+    }
+  }
+  .main {
+    flex: 1;
+    .totalSection {
+      font-family: DingTalk JinBuTi;
+      padding: 0 30px;
+      .name {
+        font-size: 30px;
+        font-weight: 400;
+        color: #e4edff;
+      }
+      .totalNum {
+        :global {
+          .ant-statistic-content-value {
+            background: linear-gradient(
+              180deg,
+              rgb(170, 255, 246),
+              rgb(37, 187, 255)
+            );
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+            line-height: normal;
+            font-size: 70px;
+            font-family: DingTalk JinBuTi;
+          }
+        }
+      }
+      .unit {
+        font-family: DingTalk JinBuTi;
+        font-size: 30px;
+        font-weight: 400;
+        color: #e4edff;
+      }
+
+      .todayName {
+        font-family: DingTalk JinBuTi;
+        font-size: 18px;
+        font-weight: 400;
+        color: #fff;
+      }
+
+      .todayunit {
+        font-family: DingTalk JinBuTi;
+        font-size: 18px;
+        font-weight: 400;
+        color: #fff;
+      }
+
+      .todayNum {
+        :global {
+          .ant-statistic-content-value {
+            color: #09c35c;
+            font-size: 20px;
+            font-family: DingTalk JinBuTi;
+            vertical-align: 5px;
+          }
+        }
+      }
+    }
+
+    .chartSection {
+      padding: 0 10px;
+      .title {
+        font-size: 20px;
+        font-weight: 400;
+        color: #E4EDFF;
+      }
+    }
+
+    .cardSection {
+      padding: 0 10px;
+      :global {
+        .ant-statistic-content-value {
+          background: linear-gradient(
+            180deg,
+            rgb(170, 255, 246),
+            rgb(37, 187, 255)
+          );
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          background-clip: text;
+          font-weight: 700;
+          line-height: normal;
+          font-size: 50px;
+          font-family: D-DIN;
+        }
+      }
+      .left {
+        width: 333px;
+        height: 169px;
+        border-radius: 48px;
+        background: rgba(58, 126, 188, 0.2);
+        text-align: center;
+        padding-top: 40px;
+        .unit {
+          font-size: 20px;
+          font-weight: 400;
+          color: #bccee9;
+          line-height: normal;
+        }
+        .name {
+          font-size: 18px;
+          font-weight: 700;
+          color: #bccee9;
+        }
+      }
+      .right {
+        flex: 1;
+        .card {
+          height: 77px;
+          background: rgba(58, 126, 188, 0.2);
+          padding: 0 20px;
+          .name {
+            font-size: 18px;
+            font-weight: 700;
+            color: #bccee9;
+          }
+          .unit {
+            font-size: 20px;
+            font-weight: 400;
+            color: #bccee9;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/pages/UrbanManagementResourceElements/DataElement/index.tsx b/src/pages/UrbanManagementResourceElements/DataElement/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..54ed1a5910b4b21da8c3d295a5ab5c300f4164ee
--- /dev/null
+++ b/src/pages/UrbanManagementResourceElements/DataElement/index.tsx
@@ -0,0 +1,97 @@
+import { Flex, Statistic, Space, Row, Col } from 'antd'
+import type { StatisticProps } from 'antd';
+import CountUp from 'react-countup';
+import styles from './index.less'
+import LineCharts from './LineCharts';
+
+/**
+ * 
+ * @description 数据要素
+ */
+
+const formatter: StatisticProps['formatter'] = (value) => (
+  <CountUp end={value as number} separator="," />
+);
+
+const noSeparatorformatter: StatisticProps['formatter'] = (value) => (
+  <CountUp end={value as number} separator="" />
+);
+
+
+const DataElement = () => {
+  return (
+    <Flex vertical className={styles.wrap}>
+      <Flex className={styles.top}>
+        <span className={styles.title}>数据要素</span>
+      </Flex>
+      <Flex vertical justify='space-between' className={styles.main}>
+        <Flex className={styles.totalSection} justify='space-between' align='center'>
+          <span className={styles.name}>已汇集数据</span>
+          <Space size={20}>
+            <Statistic className={styles.totalNum} value={15890000} formatter={formatter} />
+            <span className={styles.unit}>万条</span>
+          </Space>
+          <Space>
+            <span className={styles.todayName}>今日新增</span>
+            <Statistic className={styles.todayNum} value={15583} formatter={formatter} />
+            <span className={styles.todayunit}>条</span>
+          </Space>
+        </Flex>
+        <Space direction='vertical' size={20} className={styles.chartSection}>
+          <span className={styles.title}>近一月汇聚趋势</span>
+          <LineCharts data={[]} />
+        </Space>
+        <Flex className={styles.cardSection} gap={30}>
+          <Space direction='vertical' className={styles.left}>
+            <Space>
+              <Statistic value={1500} formatter={noSeparatorformatter} />
+              <span className={styles.unit}>个</span>
+            </Space>
+            <span className={styles.name}>数据活跃度</span>
+          </Space>
+
+          <Row gutter={[20, 20]} className={styles.right}>
+            <Col span={12}>
+              <Flex className={styles.card} align='center' justify='space-between'>
+                <span className={styles.name}>基础信息库</span>
+                <Space>
+                  <Statistic value={1500} formatter={noSeparatorformatter} />
+                  <span className={styles.unit}>个</span>
+                </Space>
+              </Flex>
+            </Col>
+            <Col span={12}>
+              <Flex className={styles.card} align='center' justify='space-between'>
+                <span className={styles.name}>业务库</span>
+                <Space>
+                  <Statistic value={1500} formatter={noSeparatorformatter} />
+                  <span className={styles.unit}>个</span>
+                </Space>
+              </Flex>
+            </Col>
+            <Col span={12}>
+              <Flex className={styles.card} align='center' justify='space-between'>
+                <span className={styles.name}>主题库</span>
+                <Space>
+                  <Statistic value={1500} formatter={noSeparatorformatter} />
+                  <span className={styles.unit}>个</span>
+                </Space>
+              </Flex>
+            </Col>
+            <Col span={12}>
+              <Flex className={styles.card} align='center' justify='space-between'>
+                <span className={styles.name}>专题库</span>
+                <Space>
+                  <Statistic value={1500} formatter={noSeparatorformatter} />
+                  <span className={styles.unit}>个</span>
+                </Space>
+              </Flex>
+            </Col>
+          </Row>
+        </Flex>
+      </Flex>
+    </Flex>
+  )
+}
+
+export default DataElement
\ No newline at end of file
diff --git a/src/pages/UrbanManagementResourceElements/ManagementElement/index.less b/src/pages/UrbanManagementResourceElements/ManagementElement/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..3f9b279bf4c968fe546836e94ff2bd4450aef1aa
--- /dev/null
+++ b/src/pages/UrbanManagementResourceElements/ManagementElement/index.less
@@ -0,0 +1,116 @@
+.wrap {
+  width: 50%;
+  border-radius: 40px;
+  background: linear-gradient(
+    180deg,
+    rgba(27, 50, 89, 0.3),
+    rgba(27, 50, 89, 0.3) 100%
+  );
+  padding: 20px 30px 30px;
+  .top {
+    margin-bottom: 57px;
+    .title {
+      font-family: DingTalk JinBuTi;
+      font-size: 40px;
+      color: #fff;
+    }
+    .right {
+      font-size: 20px;
+      color: #bccee9;
+      cursor: pointer;
+    }
+  }
+  .main {
+    flex: 1;
+    border-radius: 20px;
+    background: linear-gradient(
+      180deg,
+      rgba(58, 126, 188, 0.01),
+      rgba(58, 126, 188, 0.1) 100%
+    );
+    padding: 0 100px 50px 100px; 
+
+    .card {
+      width: 228px;
+      height: 127px;
+      border-radius: 20px;
+      background: linear-gradient(
+        180deg,
+        rgba(58, 126, 188, 0),
+        rgba(58, 126, 188, 0.43) 100%
+      );
+      text-align: center;
+      padding-top: 20px;
+      .unit {
+        font-size: 20px;
+        font-weight: 400;
+        color: #bccee9;
+        line-height: normal;
+      }
+      .name {
+        font-size: 18px;
+        font-weight: 700;
+        color: #bccee9;
+      }
+    }
+  }
+
+  .gridSection {
+    .gridItem {
+      width: 180px;
+      height: 117px;
+      text-align: center;
+      background-image: url('@/assets/images/UrbanElements/gridBg.png');
+      background-repeat: no-repeat;
+      background-size: 100%;
+      .unit {
+        font-size: 20px;
+        font-weight: 400;
+        color: #bccee9;
+        line-height: normal;
+      }
+      .name {
+        font-size: 18px;
+        font-weight: 700;
+        color: #fff;
+      }
+    }
+  }
+
+  .bottom {
+    width: 818px;
+    height: 110px;
+    background-image: url('@/assets/images/UrbanElements/bg1.png');
+    background-repeat: no-repeat;
+    background-size: 100%;
+    background-position: bottom;
+    .unit {
+      font-size: 20px;
+      font-weight: 400;
+      color: #bccee9;
+      line-height: normal;
+    }
+    .name {
+      font-size: 18px;
+      font-weight: 700;
+      color: #bccee9;
+    }
+  }
+
+  :global {
+    .ant-statistic-content-value {
+      background: linear-gradient(
+        180deg,
+        rgb(170, 255, 246),
+        rgb(37, 187, 255)
+      );
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      font-family: D-DIN;
+      font-size: 50px;
+      font-weight: 700;
+      line-height: normal;
+    }
+  }
+}
diff --git a/src/pages/UrbanManagementResourceElements/ManagementElement/index.tsx b/src/pages/UrbanManagementResourceElements/ManagementElement/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3865becb898d332bd0527306cb80f5b239e6e805
--- /dev/null
+++ b/src/pages/UrbanManagementResourceElements/ManagementElement/index.tsx
@@ -0,0 +1,77 @@
+
+import { Flex, Statistic, Space } from 'antd'
+import type { StatisticProps } from 'antd';
+import CountUp from 'react-countup';
+import styles from './index.less'
+
+/**
+ * 
+ * @description 管理要素
+ */
+
+const formatter: StatisticProps['formatter'] = (value) => (
+  <CountUp end={value as number} separator="" />
+);
+
+const ManagementElement = () => {
+  return (
+    <Flex vertical className={styles.wrap}>
+      <Flex justify='space-between' align='center' className={styles.top}>
+        <span className={styles.title}>管理要素</span>
+        <span className={styles.right}>进入网格基座查看更多</span>
+      </Flex>
+      <Flex vertical justify='space-between' className={styles.main}>
+        <Flex justify='space-between' style={{ padding: '0 60px' }}>
+          <Space direction='vertical' className={styles.card}>
+            <Space>
+              <Statistic value={1500} formatter={formatter} />
+              <span className={styles.unit}>万个</span>
+            </Space>
+            <span className={styles.name}>部件</span>
+          </Space>
+          <Space direction='vertical' className={styles.card}>
+            <Space>
+              <Statistic value={1500} formatter={formatter} />
+              <span className={styles.unit}>万个</span>
+            </Space>
+            <span className={styles.name}>资源</span>
+          </Space>
+        </Flex>
+        <Flex justify='space-between' className={styles.gridSection}>
+          <Space direction='vertical' className={styles.gridItem}>
+            <Space>
+              <Statistic value={1500} formatter={formatter} />
+              <span className={styles.unit}>个</span>
+            </Space>
+            <span className={styles.name}>网格单元</span>
+          </Space>
+          <Space direction='vertical' className={styles.gridItem}>
+            <Space>
+              <Statistic value={1500} formatter={formatter} />
+              <span className={styles.unit}>个</span>
+            </Space>
+            <span className={styles.name}>责任网格</span>
+          </Space>
+          <Space direction='vertical' className={styles.gridItem}>
+            <Space>
+              <Statistic value={1500} formatter={formatter} />
+              <span className={styles.unit}>个</span>
+            </Space>
+            <span className={styles.name}>资源网格</span>
+          </Space>
+        </Flex>
+        <Flex justify='center' className={styles.bottom}>
+          <Space direction='vertical' style={{ textAlign: 'center'}}>
+            <Space>
+              <Statistic value={1500} formatter={formatter} />
+              <span className={styles.unit}>平方米</span>
+            </Space>
+            <span className={styles.name}>管辖范围</span>
+          </Space>
+        </Flex>
+      </Flex>
+    </Flex>
+  )
+}
+
+export default ManagementElement
\ No newline at end of file
diff --git a/src/pages/UrbanManagementResourceElements/index.less b/src/pages/UrbanManagementResourceElements/index.less
index b96aa13fcb14f626754c6c3f54d471b821601bf9..85b6578490c0f32a2b6e99d186b877c9a5f95fc7 100644
--- a/src/pages/UrbanManagementResourceElements/index.less
+++ b/src/pages/UrbanManagementResourceElements/index.less
@@ -1,3 +1,22 @@
 .container {
+  width: 100%;
   height: 100%;
+  .top {
+    padding: 20px 76px 0 54px;
+    margin-bottom: 20px;
+    .title { 
+      font-family: DingTalk JinBuTi;
+      font-size: 40px;
+      color: #fff;
+    }
+    .right {
+      font-size: 20px;
+      color: #BCCEE9;
+      cursor: pointer;
+    }
+  }
+  .main {
+    flex: 1;
+    padding: 0 25px 25px;
+  }
 }
diff --git a/src/pages/UrbanManagementResourceElements/index.tsx b/src/pages/UrbanManagementResourceElements/index.tsx
index 2f6b349e061fd7182f205dbb2963f47e1a6f08bf..307f216cd3b14bfd3e6b543575242b41b69e1962 100644
--- a/src/pages/UrbanManagementResourceElements/index.tsx
+++ b/src/pages/UrbanManagementResourceElements/index.tsx
@@ -1,11 +1,21 @@
 import { Flex } from 'antd';
 import React from 'react';
+import ManagementElement from './ManagementElement';
+import DataElement from './DataElement';
+
 import styles from './index.less';
 /** @module 城管资源要素 */
 const UrbanManagementResourceElements: React.FC = () => {
   return (
-    <Flex align="center" justify="center" className={styles.container}>
-      <img src={require('@/assets/demo4.png')} alt=""></img>
+    <Flex vertical className={styles.container}>
+      <Flex justify='space-between' align='center' className={styles.top}>
+        <span className={styles.title}>城管资源要素</span>
+        <span className={styles.right}>任意网格态势</span>
+      </Flex>
+      <Flex className={styles.main} justify='space-between' gap={20}>
+        <ManagementElement />
+        <DataElement />
+      </Flex>
     </Flex>
   );
 };