diff --git a/src/assets/images/home_btns_active.png b/src/assets/images/home_btns_active.png
new file mode 100644
index 0000000..d7675c9
Binary files /dev/null and b/src/assets/images/home_btns_active.png differ
diff --git a/src/views/KeyPopulations/index.vue b/src/views/KeyPopulations/index.vue
new file mode 100644
index 0000000..56afc70
--- /dev/null
+++ b/src/views/KeyPopulations/index.vue
@@ -0,0 +1,44 @@
+<template>
+    <div class="homeBox">
+        <!-- 头部 -->
+        <Head type="importantPerson"></Head>
+        <!-- 内容 -->
+        <div class="home-contant">
+            <!-- 左边 -->
+            <div class="home-aside asideL" style="left:0">
+                <ImportantPerson></ImportantPerson>
+            </div>
+            <!-- 右边 -->
+            <div class="home-aside asideR" style="right:0">
+                <div class="aside-middle mt60">
+                    <Zdrqhd></Zdrqhd>
+                </div>
+                <div class="aside-middle">
+                    <Yjclqktj></Yjclqktj>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Head from '@/views/home/layout/head.vue';
+import ImportantPerson from './model/importantPerson.vue'
+import Zdrqhd from './model/zdrqhd.vue'
+import Yjclqktj from './model/yjclqktj.vue'
+</script>
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+.asideL{
+    background: linear-gradient( to right, rgba(78, 98, 132,0.8) 0%, #fff 100%);
+}
+.asideR{
+    background: linear-gradient( to left, rgba(78, 98, 132,0.8) 0%, #fff 100%);
+}
+.homeBox .home-contant .home-aside .aside-middle{
+    height: calc((100% - 60px)/2);
+}
+.transition {
+  transition: all 0.5s;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/KeyPopulations/model/importantPerson.vue b/src/views/KeyPopulations/model/importantPerson.vue
new file mode 100644
index 0000000..87e0261
--- /dev/null
+++ b/src/views/KeyPopulations/model/importantPerson.vue
@@ -0,0 +1,158 @@
+<template>
+    <div class="personBox" id="zdrxxtj">
+        <div class="asideTitle mt60">
+            <div>
+                <span class="title">重点人信息统计</span>
+                <span :class="active == it ? 'active'+`${idx}`:''" @click="changeDate(it)" class="tabsBtn pointer" v-for="(it,idx) in btns" :key="it">{{ it }}</span>
+            </div>
+            <span style="color:#00B7FF;" class="f12 pointer">查看更多 》</span>
+        </div>
+        <div class="asideCnt">
+            <div class="seachBox flex">
+                <!-- 搜索 -->
+                <MOSTY.Select v-model="listQuery.bqm" style="width: 120px;margin-right:10px" :dictEnum="search.xd" clearable placeholder="选择标签" />
+                <MOSTY.Other v-model="listQuery.nr" clearable placeholder="输入内容" />
+                <el-button type="primary">搜索</el-button>
+            </div>
+            <MyTable @changePage="changePage" customClass="zdy_peo_table" :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" >
+            </MyTable>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import * as MOSTY from "@/components/MyComponents/index";
+import MyTable from "@/components/aboutTable/DarkTable.vue";
+import { reactive, ref,onMounted } from "vue";
+const btns = ref(['重点人','重点群体'])
+const active = ref('重点人');
+const pageData = reactive({
+  tableData: [
+    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
+    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
+    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
+    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
+    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
+    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
+    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
+    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
+    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
+    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
+    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
+    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
+    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
+    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
+    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
+    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
+    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
+    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
+    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
+    { xm: "王五", sfzh: "330102199505057890", bq: "吸毒人员" },
+  
+  ],
+  keyCount: 0,
+  tableConfiger: {
+    loading: false,
+    rowHieght: 61,
+    haveControls: false,
+    showSelectType: "null",
+    stripe:true
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageNum: 1
+  }, //分页
+  tableColumn: [
+    { label: "姓名", prop: "xm", showOverflowTooltip: true },
+    { label: "身份证号码", prop: "sfzh",showOverflowTooltip: true },
+    { label: "标签", prop: "bq",showOverflowTooltip: true },
+  ]
+});
+const search = reactive({
+  xd: [
+    { label: "吸毒", value: "10" },
+    { label: "贩毒", value: "20" }
+  ],
+});
+const listQuery = ref([])
+onMounted(() => {
+  tabHeightFn();
+  window.onresize = function () {
+    tabHeightFn();
+  };
+});
+
+const changeDate = (val) =>{
+    active.value = val;
+}
+// 滚动分页加载
+const changePage = () =>{
+
+}
+// 表格高度计算
+const tabHeightFn = () => {
+  pageData.tableHeight =  document.getElementById('zdrxxtj').offsetHeight - 160;
+};
+
+</script>
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+.personBox{
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    padding: 0 10px;
+    box-sizing: border-box;
+    .seachBox{
+        height: 40px;
+        margin: 10px 0;
+    }
+    ::v-deep .el-input__inner{
+        background: rgba(0,22,83,0.4);
+        border-radius: 0;
+        border: 1px solid #0072FF;
+        color: #fff;
+        height: 40px;
+    }
+    ::v-deep .el-button {
+        height: 40px;
+        border-radius: 0 4px 4px 0;
+    }
+}
+.tabsBtn{
+    font-size: 12px;
+    padding: 5px 10px;
+    background: #17459E;
+    border: 1px solid #36A0FF;
+    box-shadow: inset 0 0 1px #5D82D9;
+}
+.active0{
+    background: #36A0FF;
+    border-radius: 4px 0px 0px 4px;
+    border: 1px solid #36A0FF;
+}
+.active1{
+    background: #36A0FF;
+    border-radius: 0px 4px 4px 0px;
+    border: 1px solid #36A0FF;
+}
+.transition {
+  transition: all 0.5s;
+}
+</style>
+<style lang="scss">
+.zdy_peo_table td.el-table__cell {
+    color: #ffffff !important;
+}
+.zdy_peo_table th.el-table__cell {
+    color: #ffffff !important;
+    font-size: 15px;
+}
+.zdy_peo_table .el-table__body tr.el-table__row--striped td.el-table__cell{
+    background: transparent !important;
+}
+.zdy_peo_table  .table_blue_row{
+    background: linear-gradient( to right, #001D4B 0%, rgba(0,29,75,0.1) 100%) !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/KeyPopulations/model/yjclqktj.vue b/src/views/KeyPopulations/model/yjclqktj.vue
new file mode 100644
index 0000000..29cd874
--- /dev/null
+++ b/src/views/KeyPopulations/model/yjclqktj.vue
@@ -0,0 +1,91 @@
+<template>
+<div class="yjclqkBox" id="yjqktj">
+    <div class="asideTitle">
+        <span class="title">预警处理情况统计</span>
+        <span style="color:#00B7FF;" class="f12 pointer">查看更多 》</span>
+    </div>
+    <div class="asideCnt">
+        <MyTable @changePage="changePage" customClass="zdy_peo_table" :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" >
+        </MyTable>
+    </div>
+</div>
+</template>
+
+<script setup>
+import MyTable from "@/components/aboutTable/DarkTable.vue";
+import { reactive, ref,onMounted } from "vue";
+const pageData = reactive({
+  tableData: [
+    { mc: "聚集事件", rs: "30", sj: "2024-10-10" },
+    { mc: "聚集事件", rs: "30", sj: "2024-10-10" },
+    { mc: "聚集事件", rs: "30", sj: "2024-10-10" },
+    { mc: "聚集事件", rs: "30", sj: "2024-10-10" },
+    { mc: "聚集事件", rs: "30", sj: "2024-10-10" },
+    { mc: "聚集事件", rs: "30", sj: "2024-10-10" },
+    { mc: "聚集事件", rs: "30", sj: "2024-10-10" },
+    { mc: "聚集事件", rs: "30", sj: "2024-10-10" },
+    { mc: "聚集事件", rs: "30", sj: "2024-10-10" },
+    { mc: "聚集事件", rs: "30", sj: "2024-10-10" },
+  
+  ],
+  keyCount: 0,
+  tableConfiger: {
+    loading: false,
+    rowHieght: 61,
+    haveControls: false,
+    showSelectType: "null",
+    stripe:true
+  },
+  total: 0,
+  pageConfiger: {
+    pageSize: 20,
+    pageNum: 1
+  }, //分页
+  tableColumn: [
+    { label: "任务名称", prop: "mc", showOverflowTooltip: true },
+    { label: "已稳控人数", prop: "rs",showOverflowTooltip: true },
+    { label: "时间", prop: "sj",showOverflowTooltip: true },
+  ]
+});
+onMounted(() => {
+  tabHeightFn();
+  window.onresize = function () {
+    tabHeightFn();
+  };
+});
+
+const changeDate = (val) =>{
+    active.value = val;
+}
+// 滚动分页加载
+const changePage = () =>{
+
+}
+// 表格高度计算
+const tabHeightFn = () => {
+  pageData.tableHeight =  document.getElementById('yjqktj').offsetHeight - 40;
+};
+
+</script>
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+.homeBox .home-contant .home-aside .asideTitle{
+ padding:  0 0 0 10px;
+}
+.yjclqkBox{
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    padding: 0 10px;
+    box-sizing: border-box;
+    ::v-deep .el-input__inner{
+        background: rgba(0,22,83,0.4);
+        border-radius: 0;
+        border: 1px solid #0072FF;
+        color: #fff;
+        height: 40px;
+    }
+    
+}
+
+</style>
diff --git a/src/views/KeyPopulations/model/zdrqhd.vue b/src/views/KeyPopulations/model/zdrqhd.vue
new file mode 100644
index 0000000..e489ed8
--- /dev/null
+++ b/src/views/KeyPopulations/model/zdrqhd.vue
@@ -0,0 +1,56 @@
+<template>
+    <div class="rqBox" id="zdrxxtj">
+        <div class="asideTitle">
+            <span class="title">重点人群活动</span>
+            <MOSTY.Select v-model="listQuery.time" style="width: 120px;margin-right:10px" :dictEnum="time" clearable placeholder="选择标签" />
+        </div>
+        <div class="asideCnt">
+           <lineEcharts echartsId="zdrqEcharts" :data="listDate"></lineEcharts>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import lineEcharts from "@/views/home/echarts/lineEcharts.vue";
+import * as MOSTY from "@/components/MyComponents/index";
+import { reactive, ref,onMounted } from "vue";
+const time = reactive( [
+    { label: "今天", value: "10" },
+    { label: "昨天", value: "20" },
+    { label: "近三天", value: "30" },
+    { label: "近一周", value: "40" },
+    { label: "近一月", value: "50" },
+]);
+const listQuery = ref({})
+const listDate = ref([
+    {label:'2021',value:10},
+    {label:'2022',value:20},
+    {label:'2023',value:50},
+    {label:'2024',value:40},
+    {label:'2025',value:30},
+    {label:'2026',value:45},
+])
+
+</script>
+<style lang="scss" scoped>
+@import "@/assets/css/homeScreen.scss";
+.homeBox .home-contant .home-aside .asideTitle{
+ padding:  0 0 0 10px;
+}
+.rqBox{
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    padding: 0 10px;
+    box-sizing: border-box;
+    ::v-deep .el-input__inner{
+        background: rgba(0,22,83,0.4);
+        border-radius: 0;
+        border: 1px solid #0072FF;
+        color: #fff;
+        height: 40px;
+    }
+    
+}
+
+</style>
diff --git a/src/views/home/echarts/lineEcharts.vue b/src/views/home/echarts/lineEcharts.vue
index da9ba00..45d8380 100644
--- a/src/views/home/echarts/lineEcharts.vue
+++ b/src/views/home/echarts/lineEcharts.vue
@@ -25,7 +25,7 @@ function chartFn() {
     grid: {
       top: "8%",
       right: "2%",
-      left: "2%",
+      left: "10%",
       bottom: "7%",
       containLabel:true
     },
@@ -46,15 +46,14 @@ function chartFn() {
     xAxis: {
       type: "category",
       data:props.data.map(v=>{return v.label}),
-      boundaryGap: false,
-      axisTick: {
-        show: false
-      },
-      axisLine: {
-       show: false
-      },
+      axisTick: { show: false },
+      axisLine: { show: false },
+      axisLabel: { color: "#fff" },
       axisLabel: {
-        show: false
+        show: true,
+        color: "#fff",
+        interval: 0, // 强制显示所有标签
+        // rotate: 15, // 标签旋转角度
       }
     },
     yAxis: {
@@ -66,22 +65,16 @@ function chartFn() {
           color: "rgba(14,95,255,0.5)"
         }
       },
-      axisTick: {
-        show: false
-      },
-      axisLine: {
-        show: false
-      },
-      axisLabel: {
-        show:false
-      },
+      axisTick: { show: false },
+      axisLine: { show: false },
+      axisLabel: { color: "#fff" },
     },
     series: [
       {
         type: "line",
         smooth:true,
         showSymbol:false,
-        data: props.data.map(v=>{return v.val}),
+        data: props.data.map(v=>{return v.value}),
         areaStyle: {
             normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
diff --git a/src/views/home/echarts/moreLineEcharts.vue b/src/views/home/echarts/moreLineEcharts.vue
index 11b1ca5..e576085 100644
--- a/src/views/home/echarts/moreLineEcharts.vue
+++ b/src/views/home/echarts/moreLineEcharts.vue
@@ -85,7 +85,6 @@ function chartFn(series) {
     xAxis: {
       type: "category",
       data:props.data.xData,
-      boundaryGap: false,
       axisTick: { show: false },
       axisLine: { show: false },
       axisLabel: { color: "#fff" },
diff --git a/src/views/home/model/yszs.vue b/src/views/home/model/yszs.vue
index 6ab93c8..eee0535 100644
--- a/src/views/home/model/yszs.vue
+++ b/src/views/home/model/yszs.vue
@@ -4,7 +4,7 @@
         <div class="mr10"><img :src="item.icon" alt=""></div>
         <div class="vountItem">
             <div style="color:#0072FF" class="f16 lh20">{{ item.label }}</div>
-            <div class="mt4 f12">{{ item.value }}</div>
+            <div class="mt4 f12" style="color: #333;">{{ item.value }}</div>
         </div>
     </div>
   </div>
