diff --git a/package-lock.json b/package-lock.json
index a8e65a1..4500e3b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "btgxq-population-bigdata",
       "version": "0.0.0",
       "dependencies": {
+        "axios": "^1.6.2",
         "echarts": "^5.4.3",
         "echarts-gl": "^2.0.9",
         "stylus": "^0.61.0",
@@ -663,6 +664,21 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.8.tgz",
       "integrity": "sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw=="
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -682,6 +698,17 @@
       "resolved": "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz",
       "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -708,6 +735,14 @@
         }
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/echarts": {
       "version": "5.4.3",
       "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.3.tgz",
@@ -771,6 +806,32 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.3.tgz",
+      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -834,6 +895,25 @@
         "node": ">=12"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -915,6 +995,11 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/rollup": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.4.1.tgz",
@@ -1455,6 +1540,21 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.8.tgz",
       "integrity": "sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw=="
     },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "axios": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1474,6 +1574,14 @@
       "resolved": "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz",
       "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
     },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1492,6 +1600,11 @@
         "ms": "2.1.2"
       }
     },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
     "echarts": {
       "version": "5.4.3",
       "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.3.tgz",
@@ -1545,6 +1658,21 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "follow-redirects": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.3.tgz",
+      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q=="
+    },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -1592,6 +1720,19 @@
         "@jridgewell/sourcemap-codec": "^1.4.15"
       }
     },
+    "mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
+    },
+    "mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "requires": {
+        "mime-db": "1.52.0"
+      }
+    },
     "minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -1638,6 +1779,11 @@
         "source-map-js": "^1.0.2"
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "rollup": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.4.1.tgz",
diff --git a/package.json b/package.json
index 8cdc21f..baa12c6 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.6.2",
     "echarts": "^5.4.3",
     "echarts-gl": "^2.0.9",
     "stylus": "^0.61.0",
diff --git a/public/assets/imgs/icon/shbz1.png b/public/assets/imgs/icon/shbz1.png
index d9041f7..84db4e0 100644
Binary files a/public/assets/imgs/icon/shbz1.png and b/public/assets/imgs/icon/shbz1.png differ
diff --git a/public/assets/imgs/icon/shbz2.png b/public/assets/imgs/icon/shbz2.png
index 84db4e0..d9041f7 100644
Binary files a/public/assets/imgs/icon/shbz2.png and b/public/assets/imgs/icon/shbz2.png differ
diff --git a/public/assets/imgs/icon/shbz3.png b/public/assets/imgs/icon/shbz3.png
index 4e21cd8..6e8c015 100644
Binary files a/public/assets/imgs/icon/shbz3.png and b/public/assets/imgs/icon/shbz3.png differ
diff --git a/public/assets/imgs/icon/shbz4.png b/public/assets/imgs/icon/shbz4.png
index 6e8c015..4e21cd8 100644
Binary files a/public/assets/imgs/icon/shbz4.png and b/public/assets/imgs/icon/shbz4.png differ
diff --git a/src/App.vue b/src/App.vue
index afb6b9a..52765ef 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,10 @@
 <template>
     <div class="main">
-        <div class="main-title"></div>
+        <div class="main-title">
+            <DateTime/>
+            <div class="title">人口系统数据看板</div>
+            <div class="weather"></div>
+        </div>
         <div class="main-body">
             <ModuleLeft1 class="left1"/>
             <ModuleLeft2 class="left2"/>
@@ -17,6 +21,7 @@
 </template>
 
 <script setup>
+import DateTime from './components/datetime/DateTime.vue';
 import ModuleLeft1 from './module/ModuleLeft1.vue';
 import ModuleLeft2 from './module/ModuleLeft2.vue';
 import ModuleLeft3 from './module/ModuleLeft3.vue';
@@ -41,13 +46,30 @@ import ModuleBottom from './module/ModuleBottom.vue';
         height 100px
         background-image url(assets/imgs/title-bg.png)
         background-size 100% 100%
+        position relative
+        div
+            color #FFF
+        .datetime
+            position absolute
+            top 6px
+            left 40px
+        .title
+            width 100%
+            height 50px
+            line-height 50px
+            padding-top 5px
+            font-size 30px
+            font-weight bold
+            text-align center
     .main-body
         margin-top -25px
-        padding 0 45px 20px 45px
+        padding 0 45px
         display grid
         grid-template-columns 400px 1fr 400px
         grid-gap 30px
         grid-auto-rows auto
+        justify-content space-between
+        align-content space-between
         .left1
             grid-column 1
             grid-row 1
diff --git a/src/components/card/CardCount2.vue b/src/components/card/CardCount2.vue
index a67c2a7..096031c 100644
--- a/src/components/card/CardCount2.vue
+++ b/src/components/card/CardCount2.vue
@@ -59,6 +59,7 @@ const props = defineProps({
             text-align center
             font-weight bold
             font-size 22px
+            color v-bind(color)
         .title
             padding 0 5px
             text-align center
diff --git a/src/components/card/CardTwoCount.vue b/src/components/card/CardTwoCount.vue
index c743db0..69b4036 100644
--- a/src/components/card/CardTwoCount.vue
+++ b/src/components/card/CardTwoCount.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="container">
-        <CardCount2 class="left"/>
-        <CardCount2 class="right"/>
+        <CardCount2 class="left" :title="props.data.count1.title" :unit="props.data.count1.unit" :value="props.data.count1.value" :percent="props.data.count1.percent" :color="props.data.count1.color"/>
+        <CardCount2 class="right" :title="props.data.count2.title" :unit="props.data.count2.unit" :value="props.data.count2.value" :percent="props.data.count2.percent" :color="props.data.count2.color"/>
     </div>    
 </template>
 
@@ -10,6 +10,25 @@ import {ref, defineProps} from 'vue';
 import CardCount2 from './CardCount2.vue';
 
 const props = defineProps({
+    data: {
+        type: Object,
+        default: {
+            count1: {
+                value: 0,
+                title: '标题',
+                unit: '',
+                percent: 0,
+                color: 'white',
+            },
+            count2: {
+                value: 0,
+                title: '标题',
+                unit: '',
+                percent: 0,
+                color: 'white',
+            },
+        }
+    }
 })
 
 </script>
diff --git a/src/components/card/PersonPercent.vue b/src/components/card/PersonPercent.vue
index 6b63700..6040442 100644
--- a/src/components/card/PersonPercent.vue
+++ b/src/components/card/PersonPercent.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="container">
         <img class="icon" :src="iconSrc">
-        <div class="value">{{ props.value }}%</div>
+        <div class="value">{{ props.value }}</div>
     </div>    
 </template>
 
diff --git a/src/components/circle/CircleWave.vue b/src/components/circle/CircleWave.vue
index 77da6bc..91106b1 100644
--- a/src/components/circle/CircleWave.vue
+++ b/src/components/circle/CircleWave.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="container">
+    <div class="circle-wave">
         <svg class="svg" width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
             <!-- Wave -->
             <g id="wave">
@@ -29,14 +29,14 @@ const props = defineProps({
     },
     value: {
         type: Number,
-        default: 20.0
+        default: 0
     }
 })
 const color = ref(props.color);
 
 </script>
 <style lang="stylus" scoped>
-.container
+.circle-wave
     .svg
         filter drop-shadow(0 0 5px v-bind(color))
 </style>
\ No newline at end of file
diff --git a/src/components/datetime/DateTime.vue b/src/components/datetime/DateTime.vue
new file mode 100644
index 0000000..3b9db93
--- /dev/null
+++ b/src/components/datetime/DateTime.vue
@@ -0,0 +1,71 @@
+<template>
+    <div class="datetime">
+        <div class="date">
+            <span>日期：</span>
+            <span class="value">{{ datetime[0] }}</span>
+            <span>年</span>
+            <span class="value">{{ datetime[1] }}</span>
+            <span>月</span>
+            <span class="value">{{ datetime[2] }}</span>
+            <span>日</span>
+        </div>
+        <div class="time">
+            <span>时间：</span>
+            <span class="value">{{ datetime[3] }}</span>
+            <span>时</span>
+            <span class="value">{{ datetime[4] }}</span>
+            <span>分</span>
+            <span class="value">{{ datetime[5] }}</span>
+            <span>秒</span>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+
+const datetime = reactive([]);
+
+const init = () => {
+    let date = new Date();
+    let year = date.getFullYear() + '';
+    let month = date.getMonth() + 1;
+    month = month < 10 ? '0' + month : month;
+    let day = date.getDay();
+    day = day < 10 ? '0' + day : day;
+
+    let hour = date.getHours();
+    hour = hour < 10 ? '0' + hour : hour;
+    let minute = date.getMinutes();
+    minute = minute < 10 ? '0' + minute : minute;
+    let second = date.getSeconds();
+    second = second < 10 ? '0' + second : second;
+
+    datetime[0] = year;
+    datetime[1] = month;
+    datetime[2] = day;
+    datetime[3] = hour;
+    datetime[4] = minute;
+    datetime[5] = second;
+    requestAnimationFrame(init);
+}
+requestAnimationFrame(init);
+
+</script>
+
+<style lang="stylus" scoped>
+.datetime
+    div
+        display inline-block
+    .date
+        width 202px
+        .value
+            padding 2px 5px
+            background linear-gradient(rgba(255, 255, 255, 0.5), transparent, rgba(255, 255, 255, 0.5))
+    .time   
+        white 120px
+        margin-left 30px
+        .value
+            padding 2px 5px
+            background linear-gradient(rgba(255, 255, 255, 0.5), transparent, rgba(255, 255, 255, 0.5))
+</style>
\ No newline at end of file
diff --git a/src/components/echarts/Bar.vue b/src/components/echarts/Bar.vue
index 1f0a5ed..2c159dd 100644
--- a/src/components/echarts/Bar.vue
+++ b/src/components/echarts/Bar.vue
@@ -42,6 +42,10 @@ const init = () => {
             text: props.title
         },
         tooltip: {},
+        grid: {
+            left: 50,
+            top: 10
+        },
         xAxis: {
             type: 'category',
             data: props.xData
diff --git a/src/components/echarts/BarSpike.vue b/src/components/echarts/BarSpike.vue
index 7e87501..8664e90 100644
--- a/src/components/echarts/BarSpike.vue
+++ b/src/components/echarts/BarSpike.vue
@@ -42,6 +42,10 @@ const init = () => {
             text: props.title
         },
         tooltip: {},
+        grid: {
+            left: 50,
+            top: 10
+        },
         xAxis: {
             type: 'category',
             data: props.xData
diff --git a/src/components/echarts/Pie3d.vue b/src/components/echarts/Pie3d.vue
index 6b43015..0e96e44 100644
--- a/src/components/echarts/Pie3d.vue
+++ b/src/components/echarts/Pie3d.vue
@@ -274,7 +274,7 @@ const dataSource = [
 const init = () => {
     // const colorList = ["#D98053", "#E2B062", "#5A9CF1", "#6ED3D3"];
     const colorList = [];
-    const paramsList = dataSource.map((item, index) => {
+    const paramsList = props.data.map((item, index) => {
         return {
             ...item,
             shading: "realistic",
diff --git a/src/components/scroll/ScrollPanel.vue b/src/components/scroll/ScrollPanel.vue
index 1f72ae9..a6d70b8 100644
--- a/src/components/scroll/ScrollPanel.vue
+++ b/src/components/scroll/ScrollPanel.vue
@@ -7,12 +7,12 @@
             <span class="item item4">占有率(%)</span>
         </div>
         <div class="scroll">
-            <vue3-seamless-scroll :list="listData" :step="0.5">
-                <div class="line" v-for="item in listData" :key="item">
-                    <span class="item item1">序号</span>
-                    <span class="item item2">民族民族民族民族民族</span>
-                    <span class="item item3">人数(人)</span>
-                    <span class="item item4">占有率(%)</span>
+            <vue3-seamless-scroll :list="props.data" :step="0.5">
+                <div class="line" v-for="(item, index) in props.data" :key="item">
+                    <span class="item item1">{{ index + 1 }}</span>
+                    <span class="item item2">{{ item.name }}</span>
+                    <span class="item item3">{{ item.value }}</span>
+                    <span class="item item4">{{ item.percent }}</span>
                 </div>
             </vue3-seamless-scroll>
         </div>
@@ -21,46 +21,15 @@
 </template>
 
 <script setup>
-import { reactive } from 'vue';
+import { reactive, defineProps } from 'vue';
 import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
 
-const listData = reactive([{
-          title: "无缝滚动第一行无缝滚动第一行",
-          date: "2017-12-16",
-        },
-        {
-          title: "无缝滚动第二行无缝滚动第二行",
-          date: "2017-12-16",
-        },
-        {
-          title: "无缝滚动第三行无缝滚动第三行",
-          date: "2017-12-16",
-        },
-        {
-          title: "无缝滚动第四行无缝滚动第四行",
-          date: "2017-12-16",
-        },
-        {
-          title: "无缝滚动第五行无缝滚动第五行",
-          date: "2017-12-16",
-        },
-        {
-          title: "无缝滚动第六行无缝滚动第六行",
-          date: "2017-12-16",
-        },
-        {
-          title: "无缝滚动第七行无缝滚动第七行",
-          date: "2017-12-16",
-        },
-        {
-          title: "无缝滚动第八行无缝滚动第八行",
-          date: "2017-12-16",
-        },
-        {
-          title: "无缝滚动第九行无缝滚动第九行",
-          date: "2017-12-16",
-        }])
-
+const props = defineProps({
+    data: {
+        type: Array,
+        default: []
+    }
+})
 </script>
 
 <style lang="stylus" scoped>
diff --git a/src/main.js b/src/main.js
index 6c92545..189196c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import './style.css'
 import * as echarts from 'echarts';
+import axios from 'axios';
 import App from './App.vue'
 
 const createEcharts = {
@@ -8,7 +9,17 @@ const createEcharts = {
         app.provide('echarts', echarts);
     }
 }
+const createAxios = {
+    install(app, options) {
+        axios.defaults.baseURL = 'http://219.147.99.164:8082/datahouse/';
+        axios.defaults.timeout = 20000;
+        axios.defaults.headers.common['PKEY'] = 'a0a25c1e-818a-489e-98c0-0f3a282a49d2';
+        axios.defaults.headers.common['PPASS'] = '5be81fdf-2c5d-4ee6-ae45-ffe82b5db2ff';
+        app.provide('axios', axios);
+    }
+}
 
 const app = createApp(App);
 app.use(createEcharts);
+app.use(createAxios);
 app.mount('#app');
diff --git a/src/module/ModuleBottom.vue b/src/module/ModuleBottom.vue
index a5b3323..9f900ac 100644
--- a/src/module/ModuleBottom.vue
+++ b/src/module/ModuleBottom.vue
@@ -1,18 +1,18 @@
 <template>
     <div class="module">
-        <ModuleCard3 class="module-card3" title="宗教信仰统计">
+        <ModuleCard3 class="module-card3" title="社会保障类人员">
             <div class="module-container">
                 <div class="left">
-                    <CircleWave class="circle-container"/>
-                    <CircleWave class="circle-container"/>
-                    <CircleWave class="circle-container"/>
-                    <CircleWave class="circle-container"/>
+                    <CircleWave class="circle-container" id="lnrPercent" ref="lnrPercent" :value="personData.lnr.percent" :color="personData.lnr.color" :key="personData.lnr.keyCount"/>
+                    <CircleWave class="circle-container" id="cjrPercent" ref="cjrPercent" :value="personData.cjr.percent" :color="personData.cjr.color" :key="personData.cjr.keyCount"/>
+                    <CircleWave class="circle-container" id="tyfyPercent" ref="tyfyPercent" :value="personData.tyfy.percent" :color="personData.tyfy.color" :key="personData.tyfy.keyCount"/>
+                    <CircleWave class="circle-container" id="shjzPercent" ref="shjzPercent" :value="personData.shjz.percent" :color="personData.shjz.color" :key="personData.shjz.keyCount"/>
                 </div>
                 <div class="right">
-                    <Process class="process"/>
-                    <Process class="process"/>
-                    <Process class="process"/>
-                    <Process class="process"/>
+                    <Process class="process" title="老年人" :icon-type="1" :value="personData.lnr.value" :process="personData.lnr.process" :color="personData.lnr.color" :bg-color="personData.lnr.bgColor" :key="personData.lnr.keyCount" />
+                    <Process class="process" title="残疾人保障" :icon-type="2" :value="personData.cjr.value" :process="personData.cjr.process" :color="personData.cjr.color" :bg-color="personData.cjr.bgColor" :key="personData.cjr.keyCount" />
+                    <Process class="process" title="退役/服役情况" :icon-type="3" :value="personData.tyfy.value" :process="personData.tyfy.process" :color="personData.tyfy.color" :bg-color="personData.tyfy.bgColor" :key="personData.tyfy.keyCount" />
+                    <Process class="process" title="社会救助信息" :icon-type="4" :value="personData.shjz.value" :process="personData.shjz.process" :color="personData.shjz.color" :bg-color="personData.shjz.bgColor" :key="personData.shjz.keyCount" />
                 </div>
             </div>
         </ModuleCard3>
@@ -20,11 +20,69 @@
 </template>
 
 <script setup>
-import { reactive } from 'vue';
+import { ref, reactive, inject } from 'vue';
+import { nextTick, onMounted } from 'vue';
 import ModuleCard3 from './card/ModuleCard3.vue';
 import Process from '../components/process/Process.vue';
 import CircleWave from '../components/circle/CircleWave.vue';
 
+const personData = reactive({
+    lnr: {
+        value: 0,
+        percent: 0,
+        color: 'rgb(34, 149, 230)',
+        bgColor: 'rgb(34, 149, 230, 0.44)',
+        keyCount: 0,
+    },
+    cjr: {
+        value: 0,
+        percent: 0,
+        color: 'rgb(255, 255, 0)',
+        bgColor: 'rgb(255, 255, 0, 0.44)',
+        keyCount: 0,
+    },
+    tyfy: {
+        value: 0,
+        percent: 0,
+        color: 'rgb(247, 147, 30)',
+        bgColor: 'rgb(247, 147, 30, 0.44)',
+        keyCount: 0,
+    },
+    shjz: {
+        value: 0,
+        percent: 0,
+        color: 'rgb(0, 169, 157)',
+        bgColor: 'rgb(0, 169, 157, 0.44)',
+        keyCount: 0,
+    }
+})
+
+const axios = inject('axios');
+
+onMounted(() => {
+    axios.get(`app/query/sqlrelease/q2972694`, {}).then(res => {
+        let data = res.data;
+        let total = data.total;
+        personData.lnr.value = data.list[0].value;
+        personData.lnr.process = (data.list[0].value / total).toFixed(2);
+        personData.lnr.percent = (data.list[0].value / total * 100).toFixed(2);
+        personData.lnr.keyCount++;
+        personData.cjr.value = data.list[1].value;
+        personData.cjr.process = (data.list[1].value / total).toFixed(2);
+        personData.cjr.percent = (data.list[1].value / total * 100).toFixed(2);
+        personData.cjr.keyCount++;
+        personData.tyfy.value = data.list[2].value;
+        personData.tyfy.process = (data.list[2].value / total).toFixed(2);
+        personData.tyfy.percent = (data.list[2].value / total * 100).toFixed(2);
+        personData.tyfy.keyCount++;
+        personData.shjz.value = data.list[3].value;
+        personData.shjz.process = (data.list[3].value / total).toFixed(2);
+        personData.shjz.percent = (data.list[3].value / total * 100).toFixed(2);
+        personData.shjz.keyCount++;
+    }).catch(err => {
+        console.error(err)
+    })
+})
 </script>
 
 <style lang="stylus" scoped>
@@ -42,6 +100,18 @@ import CircleWave from '../components/circle/CircleWave.vue';
                     position absolute
                     top 10px
                     left 10px
+                #lnrPercent
+                    top -40px
+                    left 0px
+                #cjrPercent
+                    top 30px
+                    left 120px
+                #tyfyPercent
+                    top -40px
+                    left 240px
+                #shjzPercent
+                    top 30px
+                    left 350px
             .right
                 width 250px
                 height 200px
diff --git a/src/module/ModuleCenter.vue b/src/module/ModuleCenter.vue
index 5718dee..48267d8 100644
--- a/src/module/ModuleCenter.vue
+++ b/src/module/ModuleCenter.vue
@@ -1,12 +1,12 @@
-1<template>
+<template>
     <div class="module-center">
-        <CardCount1 id="xtlCount" class="item" :type="1" title="稀土路街道" unit="人"/>
-        <CardCount1 id="mxlCount" class="item" :type="3" title="民馨路街道" unit="人"/>
-        <CardCount1 id="wsqCount" class="item" :type="4" title="万水泉镇" unit="人"/>
-        <CardCount1 id="totalCount" class="item" :type="2" title="总人口数" unit="人"/>
-        <PersonPercent id="manPercent" class="item"/>
-        <PersonPercent id="womenPercent" class="item" type="women"/>
-        <CardTwoCount id="cardTwoCount" class="item"/>
+        <CardCount1 id="xtlCount" class="item" :type="1" title="稀土路街道" unit="人" :value="xtlCount" :key="keyCount.xtl"/>
+        <CardCount1 id="mxlCount" class="item" :type="3" title="民馨路街道" unit="人" :value="mxlCount" :key="keyCount.mxl"/>
+        <CardCount1 id="wsqCount" class="item" :type="4" title="万水泉镇" unit="人" :value="wsqCount" :key="keyCount.wsq"/>
+        <CardCount1 id="totalCount" class="item" :type="2" title="总人口数" unit="人" :value="totalCount" :key="keyCount.total"/>
+        <PersonPercent id="manPercent" class="item" :value="manCount"/>
+        <PersonPercent id="womenPercent" class="item" type="women" :value="womenCount"/>
+        <CardTwoCount id="cardTwoCount" class="item" :data="populstionTypeData" />
         <img id="xtlIcon" class="stree-icon" src="assets/imgs/icon/xtl.png">
         <img id="mxlIcon" class="stree-icon" src="assets/imgs/icon/mxl.png">
         <img id="wsqIcon" class="stree-icon" src="assets/imgs/icon/wsq.png">
@@ -14,9 +14,80 @@
 </template>
 
 <script setup>
+import { ref, reactive, inject } from 'vue';
 import PersonPercent from '../components/card/PersonPercent.vue';
 import CardCount1 from '../components/card/CardCount1.vue';
 import CardTwoCount from '../components/card/CardTwoCount.vue';
+
+const axios = inject('axios');
+
+const keyCount = reactive({
+    xtl: 0,
+    mxl: 0,
+    wsq: 0,
+    totalCount: 0
+});
+
+const xtlCount = ref(0);
+const mxlCount = ref(0);
+const wsqCount = ref(0);
+const totalCount = ref(0);
+
+// 人口
+axios.get(`app/query/sqlrelease/q3cd32d5`, {}).then(res => {
+    let data = res.data;
+    xtlCount.value = data.xiTu;
+    mxlCount.value = data.minXin;
+    wsqCount.value = data.wanShuiQuan;
+    totalCount.value = data.renKou;
+
+    keyCount.xtl += 1;
+    keyCount.mxl += 1;
+    keyCount.wsq += 1;
+    keyCount.totalCount += 1;
+}).catch(err => {
+    console.error(err);
+})
+
+const manCount = ref(0);
+const womenCount = ref(0);
+// 性别
+axios.get(`app/query/sqlrelease/q1152adc`, {}).then(res => {
+    let data = res.data;
+    manCount.value = data[0].value;
+    womenCount.value = data[1].value;
+}).catch(err => {
+    console.error(err);
+});
+
+const populstionTypeData = reactive({
+    count1: {
+        value: 0,
+        title: '常住人口',
+        unit: '人',
+        percent: 0,
+        color: 'white',
+    },
+    count2: {
+        value: 0,
+        title: '流动人口',
+        unit: '人',
+        percent: 0,
+        color: 'white',
+    },
+})
+// 常驻人口
+axios.get(`app/query/sqlrelease/qdf8f806`, {}).then(res => {
+    let data = res.data;
+    let total = data[0].value + data[1].value;
+    populstionTypeData.count1.value = data[0].value;
+    populstionTypeData.count1.percent = (data[0].value / total).toFixed(2);
+    populstionTypeData.count2.value = data[1].value;
+    populstionTypeData.count2.percent = (data[1].value / total).toFixed(2);
+}).catch(err => {
+    console.error(err);
+})
+
 </script>
 
 <style lang="stylus" scoped>
@@ -58,15 +129,14 @@ import CardTwoCount from '../components/card/CardTwoCount.vue';
         top 220px
         left 600px
     #manPercent
-        top 400px
-        left 210px
+        top 450px
+        left 120px
+        transform scale(1.2)
     #womenPercent
-        top 420px
-        left 240px
-        transform scale(0.6)
-    #cardTwoCount
-        top 400px
-        left 320px
+        top 470px
+        left 160px
         transform scale(0.8)
-
+    #cardTwoCount
+        top 450px
+        left 380px
 </style>
\ No newline at end of file
diff --git a/src/module/ModuleLeft1.vue b/src/module/ModuleLeft1.vue
index f47b7c8..746a518 100644
--- a/src/module/ModuleLeft1.vue
+++ b/src/module/ModuleLeft1.vue
@@ -1,26 +1,37 @@
 <template>
     <div class="module">
         <ModuleCard1 title="民族分布统计">
-            <BarSpike id="barSpike" w="400" h="300" :x-data="barChart.xData" :data="barChart.data" />
+            <BarSpike id="barSpike" w="440" h="300" :x-data="barChart.xData" :data="barChart.data" title="" :key="keyCount"/>
         </ModuleCard1>
     </div>
 </template>
 
 <script setup>
-import { reactive } from 'vue';
+import { ref, reactive, inject } from 'vue';
 import ModuleCard1 from './card/ModuleCard1.vue';
 import BarSpike from '../components/echarts/BarSpike.vue';
 
+const axios = inject('axios');
 
+const keyCount = ref(0);
 const barChart = reactive({
-    xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    data: [120, 200, 150, 80, 70, 110, 130]
-})
-
+    xData: [],
+    data: []
+});
+axios.get(`app/query/sqlrelease/q419513e`, {}).then(res => {
+    let data = res.data;
+    data.forEach((item, index) => {
+        barChart.xData.push(item.name);
+        barChart.data.push(item.value);
+    })
+    keyCount.value++;
+}).catch(err => {
+    console.error(err);
+});
 </script>
 
 <style lang="stylus" scoped>
-.module
-    .bar-spike
-        background-image url(assets/imgs/card/bg9.png)
+// .module
+//     .bar-spike
+//         background-image url(assets/imgs/card/bg9.png)
 </style>
\ No newline at end of file
diff --git a/src/module/ModuleLeft2.vue b/src/module/ModuleLeft2.vue
index 9da45af..45dddec 100644
--- a/src/module/ModuleLeft2.vue
+++ b/src/module/ModuleLeft2.vue
@@ -1,35 +1,35 @@
 <template>
     <div class="module">
         <ModuleCard1 title="信访管理类人员">
-            <PolarHalf id="polarHalf" w="440" :data="polarHalfChart.data" :unit="polarHalfChart.unit" />
+            <PolarHalf id="polarHalf" w="500" :data="polarHalfChart.data" :unit="polarHalfChart.unit" title="" :key="keyCount"/>
         </ModuleCard1>
     </div>
 </template>
 
 <script setup>
-import { reactive } from 'vue';
+import { ref, reactive, inject } from 'vue';
 import ModuleCard1 from './card/ModuleCard1.vue';
 import PolarHalf from '../components/echarts/PolarHalf.vue';
 
+const axios = inject('axios');
+const keyCount = ref(0);
+
 const polarHalfChart = reactive({
     unit: '人',
-    data: [{
-        name: '矛盾纠纷类',
-        value: 40
-    }, {
-        name: '涉邪人员',
-        value: 10
-    }, {
-        name: '吸毒人员',
-        value: 20
-    }, {
-        name: '社会治安',
-        value: 10
-    }, {
-        name: '重点上访',
-        value: 900
-    }]
-})
+    data: []
+});
+axios.get('app/query/sqlrelease/qfe27ad0', {}).then(res => {
+    let data = res.data;
+    data.forEach((item, value) => {
+        polarHalfChart.data.push({
+            name: item.name,
+            value: item.value
+        })
+    });
+    keyCount.value++;
+}).catch(err => {
+    console.error(err);
+});
 </script>
 
 <style lang="stylus" scoped>
diff --git a/src/module/ModuleLeft3.vue b/src/module/ModuleLeft3.vue
index 6955ce8..0194e88 100644
--- a/src/module/ModuleLeft3.vue
+++ b/src/module/ModuleLeft3.vue
@@ -1,16 +1,38 @@
 <template>
     <div class="module">
         <ModuleCard1 title="宗教信仰统计">
-            <ScrollPanel/>
+            <ScrollPanel :data="scrollData" :key="keyCount"/>
         </ModuleCard1>
     </div>
 </template>
 
 <script setup>
-import { reactive } from 'vue';
+import { ref, reactive, inject } from 'vue';
 import ModuleCard1 from './card/ModuleCard1.vue';
 import ScrollPanel from '../components/scroll/ScrollPanel.vue';
 
+const axios = inject('axios');
+const keyCount = ref(0)
+const scrollData = reactive([])
+
+axios.get(`app/query/sqlrelease/qaf6b78b`, {}).then(res => {
+    let data = res.data;
+    let total = 0;
+    data.forEach((item, index) => {
+        total += item.value;
+    });
+    data.forEach((item, index) => {
+        scrollData.push({
+            name: item.name,
+            value: item.value,
+            percent: (item.value / total * 100).toFixed(2)
+        })
+    })
+    keyCount.value++;
+}).catch(err => {
+    console.error(err);
+})
+
 </script>
 
 <style lang="stylus" scoped>
diff --git a/src/module/ModuleRight1.vue b/src/module/ModuleRight1.vue
index a96f9d1..ed50d03 100644
--- a/src/module/ModuleRight1.vue
+++ b/src/module/ModuleRight1.vue
@@ -1,25 +1,39 @@
 <template>
     <div class="module">
         <ModuleCard2 title="年龄分布情况">
-            <Bar id="bar" w="400" h="300" :x-data="barChart.xData" :data="barChart.data" />
+            <Bar id="bar" w="400" h="300" :x-data="barChart.xData" :data="barChart.data" title="" :key="keyCount"/>
         </ModuleCard2>
     </div>
 </template>
 
 <script setup>
-import { reactive } from 'vue';
+import { ref, reactive, inject } from 'vue';
 import ModuleCard2 from './card/ModuleCard2.vue';
 import Bar from '../components/echarts/Bar.vue';
 
+const axios = inject('axios');
+const keyCount = ref(0);
+
 const barChart = reactive({
-    xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    data: [120, 200, 150, 80, 70, 110, 130]
+    xData: [],
+    data: []
 })
 
+
+axios.get(`app/query/sqlrelease/q2c03064`, {}).then(res => {
+    let data = res.data;
+    data.forEach(item => {
+        barChart.xData.push(item.name);
+        barChart.data.push(item.value);
+    })
+    keyCount.value++;
+}).catch(err => {
+    console.error(err);
+})
 </script>
 
 <style lang="stylus" scoped>
-.module
-    .bar
-        background-image url(assets/imgs/card/bg9.png)
+// .module
+//     .bar
+//         background-image url(assets/imgs/card/bg9.png)
 </style>
\ No newline at end of file
diff --git a/src/module/ModuleRight2.vue b/src/module/ModuleRight2.vue
index 3a50b1d..1584343 100644
--- a/src/module/ModuleRight2.vue
+++ b/src/module/ModuleRight2.vue
@@ -3,11 +3,11 @@
         <ModuleCard2 title="特殊信息类人员">
             <div class="module-card2-container">
                 <div class="person-count1-container">
-                    <PersonCount1/>
+                    <PersonCount1 :value="totalCount" :key="keyCount"/>
                 </div>
                 <div class="person-count2-container">
-                    <PersonCount2 class="count1"/>
-                    <PersonCount2 class="count2" :bg-type="2"/>
+                    <PersonCount2 class="count1" title="社区矫正" :value="sqjzCount" :key="keyCount"/>
+                    <PersonCount2 class="count2" title="刑满释放" :value="xmsfCount" :bg-type="2" :key="keyCount"/>
                 </div>
             </div>
         </ModuleCard2>
@@ -15,11 +15,27 @@
 </template>
 
 <script setup>
-import { reactive } from 'vue';
+import { ref, reactive, inject } from 'vue';
 import ModuleCard2 from './card/ModuleCard2.vue';
 import PersonCount1 from '../components/card/PersonCount1.vue';
 import PersonCount2 from '../components/card/PersonCount2.vue';
 
+const axios = inject('axios');
+const keyCount = ref(0);
+
+const totalCount = ref(0);
+const sqjzCount = ref(0);
+const xmsfCount = ref(0);
+axios.get(`app/query/sqlrelease/qab48a3b`).then(res => {
+    let data = res.data;
+    totalCount.value = data[0].value + data[1].value;
+    sqjzCount.value = data[0].value;
+    xmsfCount.value = data[1].value;
+    keyCount.value++;
+}).catch(err => {
+    console.error(err);
+})
+
 </script>
 
 <style lang="stylus" scoped>
diff --git a/src/module/ModuleRight3.vue b/src/module/ModuleRight3.vue
index 6e01d9c..b89e9d8 100644
--- a/src/module/ModuleRight3.vue
+++ b/src/module/ModuleRight3.vue
@@ -1,20 +1,34 @@
 <template>
     <div class="module">
         <ModuleCard2 title="政治面貌统计">
-            <Pie3d id="pie3d" w="400" h="200" />
+            <Pie3d id="pie3d" w="400" h="200" :data="pie3dData" :key="keyCount"/>
         </ModuleCard2>
     </div>
 </template>
 
 <script setup>
-import { reactive } from 'vue';
+import { ref, reactive, inject } from 'vue';
 import ModuleCard2 from './card/ModuleCard2.vue';
 import Pie3d from '../components/echarts/Pie3d.vue';
 
+const axios = inject('axios');
+const keyCount = ref(0);
+const pie3dData = reactive([]);
+
+axios.get(`app/query/sqlrelease/qaf6b78b`, {}).then(res => {
+    let data = res.data;
+    data.forEach(item => {
+        pie3dData.push(item)
+    })
+    keyCount.value++;
+}).catch(err => {
+    console.error(err);
+})
+
 </script>
 
 <style lang="stylus" scoped>
-.module
-    .pie-3d
-        background-image url(assets/imgs/card/bg9.png)
+// .module
+//     .pie-3d
+//         background-image url(assets/imgs/card/bg9.png)
 </style>
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index 2340bb3..d515d51 100644
--- a/src/style.css
+++ b/src/style.css
@@ -14,6 +14,7 @@ html, body {
   height: max-content;
   margin: 0;
   padding: 0;
+  background-color: rgba(0, 2, 5)
 }
 
 #app {
diff --git a/vite.config.js b/vite.config.js
index 05c1740..9c87972 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -3,5 +3,9 @@ import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: './',
+  server: {
+    host: '0.0.0.0',
+  },
   plugins: [vue()],
 })