From 0f2b4e4bb3922517731d60ca8540e2fa1a9dbd3f Mon Sep 17 00:00:00 2001
From: duanxiaohai <1812246227@qq.com>
Date: Fri, 2 Aug 2024 16:34:44 +0800
Subject: [PATCH] gx

---
 src/view/person/index.vue | 1166 +++++++++++++++++++++----------------
 src/view/sy_table.vue     |    2 +-
 2 files changed, 655 insertions(+), 513 deletions(-)

diff --git a/src/view/person/index.vue b/src/view/person/index.vue
index 10c17e3..9dda7b5 100644
--- a/src/view/person/index.vue
+++ b/src/view/person/index.vue
@@ -1,576 +1,718 @@
 <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 ">姓&emsp;&emsp;名</div>
-                        <div class="my-info-content">
-                            <p>{{baseInfo.nm}}</p>
-                        </div>
-                    </div>
-                    <div class="my-info-item">
-                        <div class="my-info-label">证件类型</div>
-                        <div class="my-info-content">
-                            <p>{{baseInfo.zjlx || '身份证'}}</p>
-                        </div>
-                    </div>
-                    <div class="my-info-item">
-                        <div class="my-info-label">证件号码</div>
-                        <div class="my-info-content">
-                            <p>{{baseInfo.identNo}}</p>
-                        </div>
-                    </div>
-                    <div class="my-info-item">
-                        <div class="my-info-label">政治面貌</div>
-                        <div class="my-info-content">
-                            <p>{{baseInfo.zzmm || ''}}</p>
-                        </div>
-                    </div>
-                    <div class="my-info-item">
-                        <div class="my-info-label">居住状态</div>
-                        <div class="my-info-content">
-                            <p v-if="baseInfo.jzzt == 1">居住</p>
-                            <p v-else>未居住</p>
-                        </div>
-                    </div>
-                    <div class="my-info-item">
-                        <div class="my-info-label ">民&emsp;&emsp;族</div>
-                        <div class="my-info-content">
-                            <p>{{baseInfo.ethnic}}</p>
-                        </div>
-                    </div>
-                    <div class="my-info-item">
-                        <div class="my-info-label ">性&emsp;&emsp;别</div>
-                        <div class="my-info-content">
-                            <p>{{baseInfo.gender}}</p>
-                        </div>
-                    </div>
-                    <div class="my-info-item">
-                        <div class="my-info-label">户口登记地</div>
-                        <div class="my-info-content">
-                            <p>{{baseInfo.domicAddr}}</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="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="pagination1.pageSize"
-                        :total="pagination1.total" prev-text="上一页" next-text="下一页"
-                        v-model:current-page="pagination1.currentPage" @current-change="handlePagination" />
-                </div>
-
-            </div>
+  <div class="person-container">
+    <div class="person-content">
+      <div class="person-side">
+        <div class="my-label">
+          <div class="my-label-title">基本信息</div>
         </div>
-        <Dialog :dialogShow="dialogShow" :columns="tableType.columns" :title="tableType.title"
-            :tableData="tableType.data" :pagination="paginationDialog" @close="close" @handle="handlePagination">
-        </Dialog>
+        <div class="my-info">
+          <div class="my-info-item">
+            <div class="my-info-label">姓&emsp;&emsp;名</div>
+            <div class="my-info-content">
+              <p>{{ baseInfo.nm }}</p>
+            </div>
+          </div>
+          <div class="my-info-item">
+            <div class="my-info-label">证件类型</div>
+            <div class="my-info-content">
+              <p>{{ baseInfo.zjlx || "身份证" }}</p>
+            </div>
+          </div>
+          <div class="my-info-item">
+            <div class="my-info-label">证件号码</div>
+            <div class="my-info-content">
+              <p>{{ baseInfo.identNo }}</p>
+            </div>
+          </div>
+          <div class="my-info-item">
+            <div class="my-info-label">政治面貌</div>
+            <div class="my-info-content">
+              <p>{{ baseInfo.zzmm || "" }}</p>
+            </div>
+          </div>
+          <div class="my-info-item">
+            <div class="my-info-label">居住状态</div>
+            <div class="my-info-content">
+              <p v-if="baseInfo.jzzt == 1">居住</p>
+              <p v-else>未居住</p>
+            </div>
+          </div>
+          <div class="my-info-item">
+            <div class="my-info-label">民&emsp;&emsp;族</div>
+            <div class="my-info-content">
+              <p>{{ baseInfo.ethnic }}</p>
+            </div>
+          </div>
+          <div class="my-info-item">
+            <div class="my-info-label">性&emsp;&emsp;别</div>
+            <div class="my-info-content">
+              <p>{{ baseInfo.gender }}</p>
+            </div>
+          </div>
+          <div class="my-info-item">
+            <div class="my-info-label">户口登记地</div>
+            <div class="my-info-content">
+              <p>{{ baseInfo.domicAddr }}</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 dataMyTag.myTag"
+            :key="item"
+            @click="onClickTag(item)"
+            :class="item.show ? 'my-tag-item_active' : ''"
+          >
+            <p>
+              {{ item.name }}
+            </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="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="pagination1.pageSize"
+            :total="pagination1.total"
+            prev-text="上一页"
+            next-text="下一页"
+            v-model:current-page="pagination1.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,onMounted } from 'vue'
+import { reactive, ref, onMounted } from "vue";
 import Dialog from "@/view/dialog/dialog.vue";
 import { useRouter, useRoute } from "vue-router";
 import http from "@/utils/request.js";
 const router = useRouter();
 const routers = useRoute();
 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 dataMyTag = reactive({
+  myTag: [
     {
-        type: '基础养老金',
-        date: '2022-01-01',
-        sum: '1000'
+      name: "低保",
+      jkName: "dbao",
+      show: false,
     },
     {
-        type: '基础养老金',
-        date: '2022-01-01',
-        sum: '1000'
+      name: "低边",
+      jkName: "dbian",
+      show: false,
     },
     {
-        type: '基础养老金',
-        date: '2022-01-01',
-        sum: '1000'
+      name: "特困",
+      jkName: "tk",
+      show: false,
     },
     {
-        type: '基础养老金',
-        date: '2022-01-01',
-        sum: '1000'
+      name: "残疾人",
+      jkName: "",
+      show: false,
     },
-
-])
+    {
+      name: "退役军人",
+      jkName: "tyjr",
+      show: false,
+    },
+    {
+      name: "留守",
+      jkName: "jzzt",
+      show: false,
+    },
+    {
+      name: "困境儿童",
+      jkName: "kjet",
+      show: false,
+    },
+    {
+      name: "医保支出万元以上",
+      jkName: "",
+      show: false,
+    },
+    {
+      name: "残疾",
+      jkName: "cj",
+      show: false,
+    },
+    {
+      name: "高血压",
+      jkName: "gxy",
+      show: false,
+    },
+    {
+      name: "糖尿病",
+      jkName: "tnb",
+      show: false,
+    },
+    {
+      name: "高血脂",
+      jkName: "",
+      show: false,
+    },
+    {
+      name: "高血糖",
+      jkName: "",
+      show: false,
+    },
+    {
+      name: "其他疾病",
+      jkName: "",
+      show: false,
+    },
+    {
+      name: "大病住院",
+      jkName: "",
+      show: false,
+    },
+  ],
+});
 const pagination = reactive({
-    current: 1,
-    pageSize: 5,
-    total: 50,
-    showTotal: 0
-})
+  current: 1,
+  pageSize: 5,
+  total: 50,
+  showTotal: 0,
+});
 const handleTableChange = (pagination) => {
-    console.log(pagination)
-}
-const baseInfo=ref({
-   
-})
+  console.log(pagination);
+};
+const baseInfo = ref({});
 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: '人民医院******'
-    },
-])
+  {
+    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 pagination1 = reactive({
-    current: 1,
-    pageSize: 5,
-    total: 50,
-    showTotal: 0
-})
-const dialogShow = ref(false)
+  current: 1,
+  pageSize: 5,
+  total: 50,
+  showTotal: 0,
+});
+const dialogShow = ref(false);
 const tableType = reactive({
-    title: '基础养老金',
-    columns: [
-        {
-            label: "领取日期",
-            property: "date",
-        },
-        {
-            label: "领取医院",
-            property: "hospital",
-        }, {
-            label: "详情",
-            property: "info",
-        },
-    ],
-    data: [],
-})
+  title: "基础养老金",
+  columns: [
+    {
+      label: "领取日期",
+      property: "date",
+    },
+    {
+      label: "领取医院",
+      property: "hospital",
+    },
+    {
+      label: "详情",
+      property: "info",
+    },
+  ],
+  data: [],
+});
 const onClickTag = (item) => {
-    dialogShow.value = true
-}
+  dialogShow.value = true;
+};
 const paginationDialog = reactive({
-    current: 1,
-    pageSize: 5,
-    total: 50,
-    showTotal: 0
-})
+  current: 1,
+  pageSize: 5,
+  total: 50,
+  showTotal: 0,
+});
 const close = (pagination) => {
-    dialogShow.value = false
-}
+  dialogShow.value = false;
+};
 const handlePagination = (pagination) => {
-    dialogShow.value = false
-}
-const getData =(nm,identNo)=>{
-      http
-    .get(
-      `/api/ggfwyth/ysyzt/getRysmzqDetails?nm=${nm}&identNo=${
-        identNo
-      }`
-    )
+  dialogShow.value = false;
+};
+const getData = (nm, identNo) => {
+  http
+    .get(`/api/ggfwyth/ysyzt/getRysmzqDetails?nm=${nm}&identNo=${identNo}`)
     .then((res) => {
       if (res.code == 200) {
-        baseInfo.value=res.data;
+        baseInfo.value = res.data;
+        dataMyTag.myTag.map((item) => {
+          item.show = res.data[item.jkName];
+          console.log(res.data[item.jkName],555);
+        });
+
       }
     });
-}
-onMounted(()=>{
-    // console.log(routers.query);
-    getData(routers.query.nm,routers.query.identNo)
-})
+};
+onMounted(() => {
+  // console.log(routers.query);
+  getData(routers.query.nm, routers.query.identNo);
+});
 </script>
 
 <style lang="scss" scoped>
 .person-container {
-    width: 100%;
+  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: url('../../assets/person/bg.png') no-repeat;
-    background-size: 100% 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-content {
-        margin-top: 112px;
-        padding: 30px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        height: 870px;
-    }
+  .person-main {
+    flex: content;
+    position: relative;
+    height: 100%;
 
-    .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;
-    }
+    .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;
 
-    .person-main {
-        flex: content;
-        position: relative;
-        height: 100%;
+      &:nth-of-type(1) {
+        top: 70px;
+        left: 70px;
+      }
 
-        .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(2) {
+        top: 170px;
+        left: 170px;
+      }
 
-            &:nth-of-type(1) {
-                top: 70px;
-                left: 70px;
-            }
+      &:nth-of-type(3) {
+        top: 270px;
+        left: 80px;
+      }
 
-            &:nth-of-type(2) {
-                top: 170px;
-                left: 170px;
-            }
+      &:nth-of-type(4) {
+        top: 420px;
+        left: 110px;
+      }
 
-            &:nth-of-type(3) {
-                top: 270px;
-                left: 80px;
-            }
+      &:nth-of-type(5) {
+        top: 70px;
+        right: 70px;
+      }
 
-            &:nth-of-type(4) {
-                top: 420px;
-                left: 110px;
-            }
+      &:nth-of-type(6) {
+        top: 170px;
+        right: 170px;
+      }
 
-            &:nth-of-type(5) {
-                top: 70px;
-                right: 70px;
-            }
+      &:nth-of-type(7) {
+        top: 270px;
+        right: 80px;
+      }
 
-            &:nth-of-type(6) {
-                top: 170px;
-                right: 170px;
-            }
+      &:nth-of-type(8) {
+        top: 420px;
+        right: 110px;
+      }
 
-            &:nth-of-type(7) {
-                top: 270px;
-                right: 80px;
-            }
-
-            &:nth-of-type(8) {
-                top: 420px;
-                right: 110px;
-            }
-
-            &: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;
+      &:hover {
+        background: url("../../assets/person/tag-active.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;
-            }
-        }
-
-
+    .main-tag-item_active {
+      background: url("../../assets/person/tag-active.png") no-repeat;
+      background-size: cover;
     }
 
-    .my-tag {
-        margin-top: 26px;
-        display: flex;
-        flex-wrap: wrap;
-        overflow-y: auto;
-        max-height: 260px;
+    .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;
+    }
+  }
 
-        &::-webkit-scrollbar {
-            width: 4px;
-            height: 4px;
+  .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;
         }
+      }
 
-        &::-webkit-scrollbar-thumb {
-            border-radius: 2px;
-            background: #FFFFFF;
-        }
+      .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;
+      }
 
-        &::-webkit-scrollbar-track {
-            border-radius: 2px;
-            background: rgba(255, 255, 255, 0.2);
-        }
+      .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;
 
-
-        .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);
-        }
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
     }
 
-    .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;
-                }
-            }
-
-        }
+    &::-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
+</style>
diff --git a/src/view/sy_table.vue b/src/view/sy_table.vue
index f9d8642..9032976 100644
--- a/src/view/sy_table.vue
+++ b/src/view/sy_table.vue
@@ -469,7 +469,7 @@ const tapshow = (parentId, childId) => {
   data.taps = childId;
   getData(parentId.name, parentId.son[childId].name);
 
-  // 年龄百分比
+  // 菜单名匹配
   const menuName = [
     "幼有善育",
     "学有优教",