diff --git a/src/assets/person/bg.png b/src/assets/person/bg.png
new file mode 100644
index 0000000..47552e0
Binary files /dev/null and b/src/assets/person/bg.png differ
diff --git a/src/assets/person/label.png b/src/assets/person/label.png
new file mode 100644
index 0000000..ed8033f
Binary files /dev/null and b/src/assets/person/label.png differ
diff --git a/src/assets/person/person.png b/src/assets/person/person.png
new file mode 100644
index 0000000..9788233
Binary files /dev/null and b/src/assets/person/person.png differ
diff --git a/src/assets/person/tag-active.png b/src/assets/person/tag-active.png
new file mode 100644
index 0000000..16b09cb
Binary files /dev/null and b/src/assets/person/tag-active.png differ
diff --git a/src/assets/person/tag.png b/src/assets/person/tag.png
new file mode 100644
index 0000000..417a2f8
Binary files /dev/null and b/src/assets/person/tag.png differ
diff --git a/src/router/index.js b/src/router/index.js
index efe386d..bbf2f54 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -65,6 +65,11 @@ const router = createRouter({
           path: '/home/index/table/details',
           component: () => import('../view/sy_details.vue'),
         },
+        {
+          name: '人物图',
+          path: '/home/index/person',
+          component: () => import('../view/person/index.vue'),
+        },
         // {
         //   name: '首页地图2',
         //   path: '/home/index/map2',
diff --git a/src/view/person/index.vue b/src/view/person/index.vue
new file mode 100644
index 0000000..2f36d98
--- /dev/null
+++ b/src/view/person/index.vue
@@ -0,0 +1,541 @@
+<template>
+    <div class="person-container">
+        <div class="person-content">
+            <div class="person-side">
+                <div class="my-label">
+                    <div class="my-label-title">
+                        基本信息
+                    </div>
+                </div>
+                <div class="my-info">
+
+                    <div class="my-info-item">
+                        <div class="my-info-label ">姓名</div>
+                        <div class="my-info-content">
+                            <p>王一</p>
+                        </div>
+                    </div>
+                    <div class="my-info-item">
+                        <div class="my-info-label">证件类型</div>
+                        <div class="my-info-content">
+                            <p>身份证</p>
+                        </div>
+                    </div>
+                    <div class="my-info-item">
+                        <div class="my-info-label">证件号码</div>
+                        <div class="my-info-content">
+                            <p>330223********5665</p>
+                        </div>
+                    </div>
+                    <div class="my-info-item">
+                        <div class="my-info-label">政治面貌</div>
+                        <div class="my-info-content">
+                            <p>党员</p>
+                        </div>
+                    </div>
+                    <div class="my-info-item">
+                        <div class="my-info-label">居住状态</div>
+                        <div class="my-info-content">
+                            <p>居住</p>
+                        </div>
+                    </div>
+                    <div class="my-info-item">
+                        <div class="my-info-label ">民族</div>
+                        <div class="my-info-content">
+                            <p>汉</p>
+                        </div>
+                    </div>
+                    <div class="my-info-item">
+                        <div class="my-info-label ">性别</div>
+                        <div class="my-info-content">
+                            <p>男</p>
+                        </div>
+                    </div>
+                    <div class="my-info-item">
+                        <div class="my-info-label">户口登记地</div>
+                        <div class="my-info-content">
+                            <p>浙江省衢州市龙游县*******王村</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="my-label">
+                    <div class="my-label-title">
+                        标签
+                    </div>
+                </div>
+                <div class="my-tag">
+                    <div class="my-tag-item" v-for="item in 25" :key="item" @click="onClickTag(item)">
+                        <p>标签</p>
+                    </div>
+                </div>
+            </div>
+            <div class="person-main">
+                <div class="main-tag-item">出生</div>
+                <div class="main-tag-item">学习</div>
+                <div class="main-tag-item">工作</div>
+                <div class="main-tag-item">婚育</div>
+                <div class="main-tag-item">置业</div>
+                <div class="main-tag-item">退休<br />养老</div>
+                <div class="main-tag-item">身后事</div>
+                <div class="person-main-person">
+                </div>
+            </div>
+            <div class="person-side">
+                <div class="my-label">
+                    <div class="my-label-title">
+                        养老金发放情况
+                    </div>
+                </div>
+                <div class="my-table">
+                    <el-table :data="data" border style="width: 100%" max-height="250" :header-cell-style="{
+                        border: 'none',
+                        height: '60px',
+                        fontSize: '18px',
+                        color: '#fff',
+                    }" :row-style="{
+                        letterSpacing: '1px',
+                        fontSize: '16px',
+                        height: '50px',
+                        backgroundColor: 'rgba(31, 63, 113, 1)',
+                        color: '#fff',
+                    }">
+                        <el-table-column prop="type" label="养老金类型" width="160" align="center" />
+                        <el-table-column prop="date" label="发放日期" width="160" align="center" />
+                        <el-table-column prop="sum" label="发放金额(元）" width="160" align="center" />
+
+                    </el-table>
+                    <el-pagination background layout="prev, pager, next" :page-size="pagination.pageSize"
+                        :total="pagination.total" prev-text="上一页" next-text="下一页"
+                        v-model:current-page="pagination.currentPage" @current-change="handlePagination" />
+                </div>
+                <div class="my-label">
+                    <div class="my-label-title">
+                        医疗金发放情况
+                    </div>
+                </div>
+                <div class="my-table">
+                    <el-table :data="data1" border style="width: 100%" max-height="250" :header-cell-style="{
+                        border: 'none',
+                        height: '60px',
+                        fontSize: '18px',
+                        color: '#fff',
+                    }" :row-style="{
+                        letterSpacing: '1px',
+                        fontSize: '16px',
+                        height: '50px',
+                        backgroundColor: 'rgba(31, 63, 113, 1)',
+                        color: '#fff',
+                    }">
+                        <el-table-column prop="type" label="医疗类型" width="115" align="center" />
+                        <el-table-column prop="date" label="使用日期" width="115" align="center" />
+                        <el-table-column prop="sum" label="使用金额" width="115" align="center" />
+                        <el-table-column prop="sum" label="详情" width="135" align="center" />
+                    </el-table>
+                    <el-pagination background layout="prev, pager, next" :page-size="pagination.pageSize"
+                        :total="pagination.total" prev-text="上一页" next-text="下一页"
+                        v-model:current-page="pagination.currentPage" @current-change="handlePagination" />
+                </div>
+
+            </div>
+        </div>
+        <Dialog :dialogShow="dialogShow" :columns="tableType.columns" :title="tableType.title"
+            :tableData="tableType.data" :pagination="paginationDialog" @close="close" @handle="handlePagination">
+        </Dialog>
+    </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import Dialog from "@/view/dialog/dialog.vue";
+const data = ref([
+    {
+        type: '基础养老金',
+        date: '2022-01-01',
+        sum: '1000'
+    },
+    {
+        type: '基础养老金',
+        date: '2022-01-01',
+        sum: '1000'
+    },
+    {
+        type: '基础养老金',
+        date: '2022-01-01',
+        sum: '1000'
+    },
+    {
+        type: '基础养老金',
+        date: '2022-01-01',
+        sum: '1000'
+    },
+
+])
+const pagination = reactive({
+    current: 1,
+    pageSize: 5,
+    total: 50,
+    showTotal: 0
+})
+const handleTableChange = (pagination) => {
+    console.log(pagination)
+}
+const data1 = ref([
+    {
+        type: '职工医疗',
+        date: '2023/12',
+        sum: '500',
+        info: '人民医院******'
+    },
+    {
+        type: '职工医疗',
+        date: '2023/12',
+        sum: '500',
+        info: '人民医院******'
+    },
+    {
+        type: '职工医疗',
+        date: '2023/12',
+        sum: '500',
+        info: '人民医院******'
+    },
+    {
+        type: '职工医疗',
+        date: '2023/12',
+        sum: '500',
+        info: '人民医院******'
+    },
+])
+
+const dialogShow = ref(false)
+const tableType = reactive({
+    title: '基础养老金',
+    columns: [
+        {
+            label: "领取日期",
+            property: "date",
+        },
+        {
+            label: "领取医院",
+            property: "hospital",
+        }, {
+            label: "详情",
+            property: "info",
+        },
+    ],
+    data: [],
+})
+const onClickTag = (item) => {
+    dialogShow.value = true
+}
+const paginationDialog = reactive({
+    current: 1,
+    pageSize: 5,
+    total: 50,
+    showTotal: 0
+})
+const close = (pagination) => {
+    console.log
+}
+const handlePagination = (pagination) => {
+    console.log
+}
+
+</script>
+
+<style lang="scss" scoped>
+.person-container {
+    width: 100%;
+    height: 100%;
+    background: url('../../assets/person/bg.png') no-repeat;
+    background-size: 100% 100%;
+
+    .person-content {
+        margin-top: 112px;
+        padding: 30px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 870px;
+    }
+
+    .person-side {
+        width: 480px;
+        height: 100%;
+        background: linear-gradient(270deg, rgba(0, 52, 131, 0.69) 0%, rgba(0, 32, 83, 0.77) 50%, rgba(0, 60, 131, 0.74) 100%), radial-gradient(128% 99% at 100% 46%, rgba(0, 48, 125, 0.29) 0%, rgba(0, 61, 134, 0.42) 100%);
+        box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
+        border-radius: 8px;
+        backdrop-filter: blur(3px);
+        padding: 32px;
+    }
+
+    .person-main {
+        flex: content;
+        position: relative;
+        height: 100%;
+
+        .main-tag-item {
+            background: url('../../assets/person/tag.png') no-repeat;
+            background-size: 100% 100%;
+            width: 100px;
+            height: 100px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #FFFFFF;
+            position: absolute;
+            cursor: pointer;
+            z-index: 5;
+
+            &:nth-of-type(1) {
+                top: 70px;
+                left: 70px;
+            }
+
+            &:nth-of-type(2) {
+                top: 170px;
+                left: 170px;
+            }
+
+            &:nth-of-type(3) {
+                top: 270px;
+                left: 80px;
+            }
+
+            &:nth-of-type(4) {
+                top: 30px;
+                right: 220px;
+            }
+
+            &:nth-of-type(5) {
+                top: 70px;
+                right: 70px;
+            }
+
+            &:nth-of-type(6) {
+                top: 170px;
+                right: 170px;
+            }
+
+            &:nth-of-type(7) {
+                top: 270px;
+                right: 80px;
+            }
+
+            &:hover {
+                background: url('../../assets/person/tag-active.png') no-repeat;
+                background-size: 100% 100%;
+            }
+
+        }
+
+        .main-tag-item_active {
+            background: url('../../assets/person/tag-active.png') no-repeat;
+            background-size: cover;
+        }
+
+
+        .person-main-person {
+            position: absolute;
+            top: 55%;
+            left: 50%;
+            transform: translate(-50%, -48%);
+            width: 340px;
+            height: 813px;
+            background: url('../../assets/person/person.png') no-repeat;
+            background-size: 100% 100%;
+            z-index: 3;
+        }
+    }
+
+    .my-label {
+        background: url('../../assets/person/label.png') no-repeat;
+        background-size: 100% 100%;
+        padding-left: 32px;
+        padding-bottom: 16px;
+
+        .my-label-title {
+            display: inline-block;
+            font-family: PangMenZhengDao, PangMenZhengDao;
+            font-weight: normal;
+            font-size: 34px;
+            color: #b8fcfc;
+            line-height: 39px;
+            letter-spacing: 2px;
+            text-shadow: 0px 2px 4px rgba(56, 50, 50, 0.5);
+            text-align: left;
+            font-style: normal;
+        }
+    }
+
+    .my-info {
+        margin-top: 24px;
+
+        .my-info-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 30px;
+
+            .my-info-label {
+                position: relative;
+                min-width: 80px;
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 400;
+                font-size: 18px;
+                color: #A8E0FF;
+                line-height: 25px;
+                letter-spacing: 2px;
+
+                &::after {
+                    content: ":";
+                    position: absolute;
+                    right: -10px;
+                    top: 0;
+                }
+
+            }
+
+
+
+            .my-info-content {
+                margin-left: 18px;
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 500;
+                font-size: 18px;
+                color: #FFFFFF;
+                line-height: 25px;
+                text-align: left;
+                font-style: normal;
+
+
+            }
+
+            .my-info-content {
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 500;
+                font-size: 18px;
+                color: #FFFFFF;
+                line-height: 25px;
+                letter-spacing: 1px;
+                text-align: left;
+                font-style: normal;
+            }
+        }
+
+
+    }
+
+    .my-tag {
+        margin-top: 26px;
+        display: flex;
+        flex-wrap: wrap;
+        overflow-y: auto;
+        max-height: 260px;
+
+        &::-webkit-scrollbar {
+            width: 4px;
+            height: 4px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            border-radius: 2px;
+            background: #FFFFFF;
+        }
+
+        &::-webkit-scrollbar-track {
+            border-radius: 2px;
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+
+
+        .my-tag-item {
+            display: inline-block;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 2px;
+            border: 1px solid #FFFFFF;
+            padding: 10px 20px;
+            font-family: PingFangSC, PingFang SC;
+            font-weight: 500;
+            font-size: 16px;
+            color: #FFFFFF;
+            line-height: 22px;
+            letter-spacing: 2px;
+            text-align: center;
+            font-style: normal;
+            margin-right: 10px;
+            margin-bottom: 20px;
+            cursor: pointer;
+
+            &:hover {
+                background: rgba(0, 158, 255, 0.38);
+                box-shadow: inset 0px 0px 11px 0px rgba(255, 255, 255, 0.5);
+            }
+        }
+
+        .my-tag-item_active {
+            background: rgba(0, 158, 255, 0.38);
+            box-shadow: inset 0px 0px 11px 0px rgba(255, 255, 255, 0.5);
+        }
+    }
+
+    .my-table {
+        margin: 36px 0 52px;
+
+        :deep(.el-table) {
+            --el-table-header-bg-color: #ffffff3a;
+            --el-table-header-text-color: #ffffff;
+            --el-table-row-hover-bg-color: rgba(255, 255, 255, 0.1);
+            --el-table-header-hover-bg-color: rgba(255, 255, 255, 0.1);
+            --el-table-border-color: rgba(255, 255, 255, 0.1);
+            --el-table-row-hover-bg-color: rgba(255, 255, 255, 0.1);
+            --el-table-bg-color: none;
+            --el-table-tr-bg-color: none;
+            --el-table-border-color: rgba(255, 255, 255, 0.32);
+            --el-table-row-hover-bg-color: rgba(255, 255, 255, 0.1);
+            --el-table-text-color: #ffffff;
+        }
+
+        :deep(.el-pagination) {
+            --el-pagination-button-disabled-bg-color: none;
+            --el-pagination-bg-color: none;
+            --el-pagination-button-bg-color: none;
+            --el-pagination-button-color: #fff;
+            color: #fff;
+            justify-content: center;
+            margin-top: 24px;
+
+            .btn-prev,
+            .btn-next {
+                margin: 0;
+                color: #fff;
+                background: rgba(255, 255, 255, 0.14);
+                border: 1px solid #6bade1;
+
+                &:disabled {
+                    color: #fff;
+                    background: rgba(255, 255, 255, 0.14);
+                    border: 1px solid #6bade1;
+                }
+            }
+
+            .el-pager {
+                li {
+                    color: #fff;
+                    background: rgba(255, 255, 255, 0.14);
+                    border: 1px solid #6bade1;
+                    margin: 0;
+                }
+
+                .is-active {
+                    background: rgba(0, 144, 255, 0.49);
+                    border: 1px solid #6bade1;
+                }
+            }
+
+        }
+    }
+}
+</style>
\ No newline at end of file