xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增：人物图

This commit is contained in:
闫世杰 2024-08-01 14:44:53 +08:00
parent 04f2a0ff54
commit efbbb06572
7 changed files with 546 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/person/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 MiB

BIN
src/assets/person/label.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
src/assets/person/person.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 634 KiB

BIN
src/assets/person/tag-active.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
src/assets/person/tag.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

5
src/router/index.js
View File

@ -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',

541
src/view/person/index.vue Normal file
View File

@ -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>