diff --git a/src/assets/img/shuju/card/bg.png b/src/assets/img/shuju/card/bg.png
new file mode 100644
index 00000000..89d483b5
Binary files /dev/null and b/src/assets/img/shuju/card/bg.png differ
diff --git a/src/assets/img/shuju/card/l-b.png b/src/assets/img/shuju/card/l-b.png
new file mode 100644
index 00000000..eaa27965
Binary files /dev/null and b/src/assets/img/shuju/card/l-b.png differ
diff --git a/src/assets/img/shuju/card/l-t.png b/src/assets/img/shuju/card/l-t.png
new file mode 100644
index 00000000..cd34c828
Binary files /dev/null and b/src/assets/img/shuju/card/l-t.png differ
diff --git a/src/assets/img/shuju/card/line-b.png b/src/assets/img/shuju/card/line-b.png
new file mode 100644
index 00000000..0ee88b33
Binary files /dev/null and b/src/assets/img/shuju/card/line-b.png differ
diff --git a/src/assets/img/shuju/card/line-l.png b/src/assets/img/shuju/card/line-l.png
new file mode 100644
index 00000000..b863ea77
Binary files /dev/null and b/src/assets/img/shuju/card/line-l.png differ
diff --git a/src/assets/img/shuju/card/line-r.png b/src/assets/img/shuju/card/line-r.png
new file mode 100644
index 00000000..27776f0d
Binary files /dev/null and b/src/assets/img/shuju/card/line-r.png differ
diff --git a/src/assets/img/shuju/card/line-t.png b/src/assets/img/shuju/card/line-t.png
new file mode 100644
index 00000000..7daff282
Binary files /dev/null and b/src/assets/img/shuju/card/line-t.png differ
diff --git a/src/assets/img/shuju/card/r-b.png b/src/assets/img/shuju/card/r-b.png
new file mode 100644
index 00000000..611c69df
Binary files /dev/null and b/src/assets/img/shuju/card/r-b.png differ
diff --git a/src/assets/img/shuju/card/r-t.png b/src/assets/img/shuju/card/r-t.png
new file mode 100644
index 00000000..a4a918de
Binary files /dev/null and b/src/assets/img/shuju/card/r-t.png differ
diff --git a/src/assets/img/shuju/title-tip.png b/src/assets/img/shuju/title-tip.png
new file mode 100644
index 00000000..3f97c7c4
Binary files /dev/null and b/src/assets/img/shuju/title-tip.png differ
diff --git a/src/assets/img/shuju/youby.png b/src/assets/img/shuju/youby.png
new file mode 100644
index 00000000..020cfb57
Binary files /dev/null and b/src/assets/img/shuju/youby.png differ
diff --git a/src/assets/scss/people.scss b/src/assets/scss/people.scss
new file mode 100644
index 00000000..f03939d0
--- /dev/null
+++ b/src/assets/scss/people.scss
@@ -0,0 +1,7 @@
+@import "c/config";
+@import "c/function";
+
+.m-people {
+    width: 400px;
+    // height: 400px;
+}
diff --git a/src/assets/scss/shuju-card.scss b/src/assets/scss/shuju-card.scss
new file mode 100644
index 00000000..3ebe3f46
--- /dev/null
+++ b/src/assets/scss/shuju-card.scss
@@ -0,0 +1,72 @@
+@import "c/config";
+@import "c/function";
+
+.m-card {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    padding: 11px;
+
+    .corner {
+        position: absolute;
+        display: block;
+        &.corner-1 {
+            top: 0;
+            left: 0;
+        }
+        &.corner-2 {
+            top: 0;
+            right: 0;
+        }
+        &.corner-3 {
+            bottom: 0;
+            right: 0;
+        }
+        &.corner-4 {
+            bottom: 0;
+            left: 0;
+        }
+    }
+
+    .line {
+        position: absolute;
+        display: block;
+        background-repeat: repeat;
+
+        &.line-t {
+            background-image: url(../img/shuju/card/line-t.png);
+            left: 11px;
+            right: 120px;
+            top: 0;
+            height: 11px;
+        }
+        &.line-r {
+            background-image: url(../img/shuju/card/line-r.png);
+            top: 11px;
+            bottom: 11px;
+            right: 0;
+            width: 11px;
+        }
+        &.line-b {
+            background-image: url(../img/shuju/card/line-b.png);
+            left: 11px;
+            right: 120px;
+            bottom: 0;
+            height: 11px;
+        }
+        &.line-l {
+            background-image: url(../img/shuju/card/line-l.png);
+            top: 11px;
+            bottom: 11px;
+            left: 0;
+            width: 11px;
+        }
+    }
+
+    .cnt {
+        height: 300px;
+        background-image: url(../img/shuju/card/bg.png);
+        background-repeat: repeat;
+    }
+}
diff --git a/src/router/index.js b/src/router/index.js
index 5f6e7ab7..a81d4d7f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -97,6 +97,15 @@ export const moduleShujuRoutes = {
         isTab: true,
       },
     },
+    {
+      path: "/main-shuju/visual-basicinfo-people",
+      component: () => import("@/views/modules/visual/basicinfo/people"),
+      name: "visual-basicinfo-people",
+      meta: {
+        title: "个人详情",
+        isTab: true,
+      },
+    },
   ],
 };
 
diff --git a/src/views/modules/visual/basicinfo/people.vue b/src/views/modules/visual/basicinfo/people.vue
new file mode 100644
index 00000000..c6bbcd3c
--- /dev/null
+++ b/src/views/modules/visual/basicinfo/people.vue
@@ -0,0 +1,175 @@
+<template>
+  <div class="g-cpt">
+    <div class="g-l">
+      <div class="m-people">
+        <cpt-card>
+          哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
+        </cpt-card>
+      </div>
+    </div>
+    <div class="g-r"></div>
+  </div>
+</template>
+
+<script>
+import { Loading } from 'element-ui'; //引入Loading服务
+import { requestPost } from "@/js/dai/request";
+import cptCard from "@/views/modules/visual/cpts/card";
+
+export default {
+  name: 'HomeMap',
+  data () {
+    return {
+      centerPoint: [],//中心点位置
+      zoom: 14,//缩放范围：区14
+      minZoom: 1,//最小缩放
+
+      orgData: {},//当前组织对象
+      orgId: '',
+      orgLevel: '',
+
+      subAgencyArray: [],//下拉框数据
+
+      selPolygonId: '',//选择的多边形id
+      selPolygon: {},
+
+      //右侧列表
+      name: "",
+
+      //下钻层级记录
+      runNum: 0,
+      runAgency: [],
+
+    }
+  },
+
+    props: {
+
+    vueFlag: {
+      type: String,
+      default: "alarm"
+    }
+  },
+  computed: {
+
+    mapHeight () {
+
+      return this.clientHeight - 120;
+
+    },
+    // zoom: {
+    //   get () {
+    //     //根据不同屏幕分辨率，控制zoom大小
+    //     if (this.clientHeight < 900) {
+    //       return 2.3
+    //     } else {
+    //       return 2.8
+    //     }
+    //   },
+    //   set (value) {
+    //   }
+    // },
+
+  },
+  components: {
+    cptCard
+  },
+  async mounted () {
+    
+
+  },
+  methods: {
+    handleSearch () {
+
+    },
+
+    //加载组织数据
+    async loadOrgData () {
+      const url = "/gov/org/agency/maporg"
+      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/maporg"
+      let params = {
+        orgId: this.orgId,
+        level: this.orgLevel
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.orgData = data
+        this.runAgency.push(data)
+
+        if (data.children && data.children.length > 0) {
+          this.subAgencyArray = data.children
+
+        }
+
+      } else {
+        this.$message.error(msg)
+      }
+
+    },
+
+    //加载当前园区的标注
+    loadPolygon (subAgencyArray) {
+      polygonSource.clear()//清空变电站标注
+
+      let featureData = []//标注数据
+      if (subAgencyArray && subAgencyArray.length > 0) {//判断是否存在下级标注
+        let oneData = {}
+
+        subAgencyArray.forEach(agencyItem => {
+
+          if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标
+            oneData = {
+              type: 'Feature',
+              id: agencyItem.id,
+              properties: {
+                id: agencyItem.id,
+                level: agencyItem.level,
+                name: agencyItem.name
+              },
+              geometry: {
+                type: 'Polygon',
+                coordinates: [],
+              },
+            }
+            let coorArray = agencyItem.coordinates.split(',')//坐标数组
+
+            let itemArray = []//单个点位的[lon,lat]，数组
+            let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组
+
+            coorArray.forEach((item, index) => {
+              itemArray.push(item)
+              if (index % 2 == 0) {//偶
+
+              } else {//奇
+                polygonArray.push(itemArray)
+                itemArray = []
+              }
+
+            });
+            oneData.geometry.coordinates.push(polygonArray)
+            featureData.push(oneData)
+          }
+
+        });
+
+      }
+
+      if (featureData && featureData.length > 0) {
+        var geojsonObject = {
+          'type': 'FeatureCollection',
+          'features': featureData
+        };
+        let feature = (new GeoJSON()).readFeatures(geojsonObject)
+        polygonSource.addFeatures(feature)
+
+      }
+
+    },
+  }
+};
+</script>
+
+<style lang="scss" src="@/assets/scss/people.scss" scoped></style>
+ 
\ No newline at end of file
diff --git a/src/views/modules/visual/cpts/card.vue b/src/views/modules/visual/cpts/card.vue
new file mode 100644
index 00000000..592608d4
--- /dev/null
+++ b/src/views/modules/visual/cpts/card.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="m-card">
+    <div class="wrap">
+      <img src="@/assets/img/shuju/card/l-t.png" class="corner corner-1" />
+      <img src="@/assets/img/shuju/card/r-t.png" class="corner corner-2" />
+      <img src="@/assets/img/shuju/card/r-b.png" class="corner corner-3" />
+      <img src="@/assets/img/shuju/card/l-b.png" class="corner corner-4" />
+      <div class="line line-t"></div>
+      <div class="line line-l"></div>
+      <div class="line line-r"></div>
+      <div class="line line-b"></div>
+      <div class="cnt">
+        <solt></solt>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "shuju-card",
+  data() {
+    return {
+
+    };
+  },
+  props: {
+  },
+
+  methods: {
+
+  },
+};
+</script>
+
+<style lang="scss" src="@/assets/scss/shuju-card.scss" scoped></style>