This commit is contained in:
duanxiaohai 2024-08-01 15:15:55 +08:00
commit 30ef9a5590
10 changed files with 1270 additions and 171 deletions

View File

@ -4842,6 +4842,7 @@
"properties": {
"gml_id": "layer_township_pg.28416",
"name": "小高山村",
"center":[119.19367045599486,29.043581738399308],
"layer": "乡镇",
"code": "330825002000",
"grade": 4,
@ -4925,6 +4926,7 @@
"properties": {
"gml_id": "layer_township_pg.28416",
"name": "桥蔬村",
"center":[119.18395255988275,29.039233943618996],
"layer": "乡镇",
"code": "330825002000",
"grade": 4,
@ -5080,6 +5082,7 @@
"properties": {
"gml_id": "layer_township_pg.28416",
"name": "湖底叶村",
"center":[119.20020794974299,29.049326754736285],
"layer": "乡镇",
"code": "330825002000",
"grade": 4,
@ -5183,6 +5186,7 @@
"properties": {
"gml_id": "layer_township_pg.28416",
"name": "唐尧村",
"center":[119.21045591291573,29.044513384628157],
"layer": "乡镇",
"code": "330825002000",
"grade": 4,
@ -5246,6 +5250,7 @@
"properties": {
"gml_id": "layer_township_pg.28416",
"name": "项家村",
"center":[119.21512336122863,29.050098532339906],
"layer": "乡镇",
"code": "330825002000",
"grade": 4,
@ -5325,6 +5330,7 @@
"properties": {
"gml_id": "layer_township_pg.28416",
"name": "张王村",
"center":[119.22282026434472,29.055509301153847],
"layer": "乡镇",
"code": "330825002000",
"grade": 4,
@ -5372,6 +5378,7 @@
"properties": {
"gml_id": "layer_township_pg.28416",
"name": "槐王村",
"center":[119.21650880378954,29.058485101751426],
"layer": "乡镇",
"code": "330825002000",
"grade": 4,
@ -5527,6 +5534,7 @@
"properties": {
"gml_id": "layer_township_pg.28416",
"name": "桥下村",
"center":[119.18147891359968,29.029295432003362],
"layer": "乡镇",
"code": "330825002000",
"grade": 4,
@ -5578,6 +5586,7 @@
"properties": {
"gml_id": "layer_township_pg.28416",
"name": "童家村",
"center":[119.21850999859971,29.055103503441067],
"layer": "乡镇",
"code": "330825002000",
"grade": 4,
@ -5693,6 +5702,7 @@
"properties": {
"gml_id": "layer_township_pg.28416",
"name": "十里铺村",
"center":[119.22158875984614,29.037787965011955],
"layer": "乡镇",
"code": "330825002000",
"grade": 4,
@ -5956,6 +5966,7 @@
"properties": {
"gml_id": "layer_township_pg.28416",
"name": "高仙塘村",
"center":[119.2254365536337,29.021743550656367],
"layer": "乡镇",
"code": "330825002000",
"grade": 4,
@ -6175,6 +6186,7 @@
"properties": {
"gml_id": "layer_township_pg.28416",
"name": "新建村",
"center":[119.22759055128023,29.032206249403114],
"layer": "乡镇",
"code": "330825002000",
"grade": 4,
@ -6422,6 +6434,7 @@
"properties": {
"gml_id": "layer_township_pg.28416",
"name": "晨东社区",
"center":[119.2305984612208,29.04078674871668],
"layer": "乡镇",
"code": "330825002000",
"grade": 4,
@ -6513,6 +6526,7 @@
"properties": {
"gml_id": "layer_township_pg.28416",
"name": "鸡鸣村",
"center":[119.19066674265112,29.019666576963417],
"layer": "乡镇",
"code": "330825002000",
"grade": 4,
@ -6648,6 +6662,7 @@
"properties": {
"gml_id": "layer_township_pg.28416",
"name": "下杨村",
"center":[119.18165560261991,29.00910485423712],
"layer": "乡镇",
"code": "330825002000",
"grade": 4,
@ -6823,6 +6838,7 @@
"properties": {
"gml_id": "layer_township_pg.28416",
"name": "上杨村",
"center":[119.19408508395115,28.997727909784622],
"layer": "乡镇",
"code": "330825002000",
"grade": 4,
@ -7058,6 +7074,7 @@
"properties": {
"gml_id": "layer_township_pg.28416",
"name": "灵江社区",
"center":[119.2065687544709,29.021996221855108],
"layer": "乡镇",
"code": "330825002000",
"grade": 4,
@ -7265,6 +7282,7 @@
"properties": {
"gml_id": "layer_township_pg.28416",
"name": "方坦村",
"center":[119.19514023609747,28.98078498164279],
"layer": "乡镇",
"code": "330825002000",
"grade": 4,
@ -8300,6 +8318,7 @@
"properties": {
"gml_id": "layer_township_pg.28416",
"name": "横路祝村",
"center":[119.21048701444509,28.998745614406825],
"layer": "乡镇",
"code": "330825002000",
"grade": 4,
@ -8855,6 +8874,7 @@
"properties": {
"gml_id": "layer_township_pg.28416",
"name": "官村",
"center":[119.18792157912283,28.95682479002027],
"layer": "乡镇",
"code": "330825002000",
"grade": 4,
@ -8930,6 +8950,7 @@
"properties": {
"gml_id": "layer_township_pg.28416",
"name": "瑶山村",
"center":[119.20798479489451,28.97752916932524],
"layer": "乡镇",
"code": "330825002000",
"grade": 4,
@ -9029,6 +9050,7 @@
"properties": {
"gml_id": "layer_township_pg.28416",
"name": "街路村",
"center":[119.20797707469151,28.98630701739274],
"layer": "乡镇",
"code": "330825002000",
"grade": 4,
@ -9508,6 +9530,7 @@
"properties": {
"gml_id": "layer_township_pg.28416",
"name": "上圩头村",
"center":[119.2105089896564,28.964812143264005],
"layer": "乡镇",
"code": "330825002000",
"grade": 4,
@ -10283,6 +10306,7 @@
"properties": {
"gml_id": "layer_township_pg.28416",
"name": "岩头村",
"center":[119.2296538271089,28.980889736490933],
"layer": "乡镇",
"code": "330825002000",
"grade": 4,
@ -10487,6 +10511,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "杨家村",
"center":[119.20296386968322,29.063011673534746],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -10902,6 +10927,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "张家埠村",
"center":[119.20546399708938,29.075877275427057],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -11345,6 +11371,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "周家村",
"center":[119.23225107644114,28.99614720549206],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -11468,6 +11495,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "范家村",
"center":[119.22225056681651,29.073680824117893],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -13031,6 +13059,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "曹垅村",
"center":[119.23903713654366,29.07681859722188],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -13222,6 +13251,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "隔塘村",
"center":[119.23296539855718,29.05422447650217],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -13273,6 +13303,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "七都村",
"center":[119.2426087471239,29.060187299856008],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -13444,6 +13475,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "马报桥村",
"center":[119.24439455241397,29.044494911649114],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -14431,6 +14463,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "文林村",
"center":[119.23117959326706,29.011847019541374],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -14714,6 +14747,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "客路村",
"center":[119.24439455241397,29.00462540436998],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -14981,6 +15015,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "希唐村",
"center":[119.2686815043596,29.010277146579696],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -15088,6 +15123,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "大路村",
"center":[119.26796718224357,29.051713709822216],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -15155,6 +15191,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "下库村",
"center":[119.26725286012751,29.038845061436813],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -15226,6 +15263,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "下潘村",
"center":[119.25368073992263,29.06144258669738],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -15533,6 +15571,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "地圩村",
"center":[119.27439608128799,29.059245824591894],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -15668,6 +15707,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "塘马村",
"center":[119.26510989377935,29.073680824117904],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -15791,6 +15831,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "下叶村",
"center":[119.26475273272133,29.059559650644978],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -16034,6 +16075,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "竺溪桥村",
"center":[119.27475324234602,29.066463579645916],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -16165,6 +16207,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "新建村",
"center":[119.2279481259175,29.031780150548556],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -16400,6 +16443,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "联合村",
"center":[119.28975400678304,29.045750391471657],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -16455,6 +16499,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "溪底杜村",
"center":[119.2818964635065,29.018126270365357],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -16730,6 +16775,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "坪湖村",
"center":[119.30725489862621,29.05108600850329],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -16801,6 +16847,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "龙廻陈村",
"center":[119.29904019429165,29.037275603133075],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -17016,6 +17063,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "湖镇镇",
"center":[119.29153981207315,29.069915368969884],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -17507,6 +17555,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "洪畈村",
"center":[119.24975196828433,29.021893635738927],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -17622,6 +17671,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "上溪头村",
"center":[119.28153930244848,29.083721358222107],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -17765,6 +17815,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "新圆村",
"center":[119.29439710053735,29.08183883338317],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -18172,6 +18223,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "后陈村",
"center":[119.304040449104,29.083407606496095],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -18267,6 +18319,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "下童村",
"center":[119.3129694755546,29.085290102368987],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -18358,6 +18411,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "茆头村",
"center":[119.31975553565705,29.088113781001894],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -18485,6 +18539,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "童村",
"center":[119.32654159575952,29.084035108982587],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -18684,6 +18739,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "上下范村",
"center":[119.32654159575952,29.07650482425568],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -18755,6 +18811,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "星火村",
"center":[119.31082650920645,29.07587727542706],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -19282,6 +19339,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "彭塘村",
"center":[119.29725438900154,29.014672730136176],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -19341,6 +19399,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "东金村",
"center":[119.30904070391634,29.042925540164518],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -19736,6 +19795,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "历寺村",
"center":[119.3101121870904,29.019696022811615],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -19991,6 +20051,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "大坪村",
"center":[119.31832689142496,29.026602647190746],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -20150,6 +20211,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "下田畈村",
"center":[119.31868405248298,29.04010061071676],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -20413,6 +20475,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "童家仓村",
"center":[119.31725540825089,29.06363930151395],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,
@ -20864,6 +20927,7 @@
"properties": {
"gml_id": "layer_township_pg.28417",
"name": "蒲塘村",
"center":[119.32511295152742,29.04700585585809],
"layer": "乡镇",
"code": "330825101000",
"grade": 4,

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 MiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 634 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

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

View File

@ -0,0 +1,319 @@
<template>
<div class="dialogPage">
<el-dialog
v-model="dialogShow"
width="80vw"
:show-close="false"
center
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<template #header="{ close, titleId, titleClass }">
<div class="my-header">
<el-icon size="26" color="#fff" @click="closeDialog">
<CircleCloseFilled />
</el-icon>
</div>
</template>
<div class="tabelPart">
<div class="bo">
<div class="title">
<div class="title_top">
<img
src="@/assets/images/table_l.png"
alt=""
style="margin-right: 10px"
/>
<div class="name">{{ title }}详情</div>
<img
src="@/assets/images/table_r.png"
alt=""
style="margin-left: 10px"
/>
</div>
<img
class="title_botton"
src="@/assets/images/table_c.png"
alt=""
/>
</div>
</div>
<div style="width: 100%; height: calc(100% - 110px)">
<el-table
:data="data.tableData"
height="100%"
:header-cell-style="{ background: '#008FCD' }"
:key="tableKey"
@row-click="handleRowClick"
class="custom-table-font"
>
<!-- <el-table-column
v-for="(item, index) in data.columns"
:key="index"
:property="item.property"
:label="item.label"
:width="item.width"
align="center"
/> -->
<template v-for="item in data.columns">
<el-table-column
:key="item.label"
v-if="item.type === 'slot'"
:show-overflow-tooltip="true"
:label="item.label"
:property="item.property"
:align="item.align || 'center'"
>
<template #default="scope">
<slot
:name="item.property"
:currentCol="item"
:currentData="scope.row"
></slot>
</template>
</el-table-column>
<el-table-column
v-else
:property="item.property"
:label="item.label"
:show-overflow-tooltip="true"
:align="item.align || 'center'"
/>
</template>
</el-table>
</div>
<div class="pagePart">
<el-pagination
class="small-pagination"
background
layout="prev, pager, next,total"
:page-size="pagination.pageSize"
:total="pagination.total"
prev-text="上一页"
next-text="下一页"
@current-change="handle"
v-model:current-page="pagination.currentPage"
/>
</div>
</div>
</el-dialog>
</div>
</template>
<script setup>
import {
onMounted,
reactive,
ref,
onBeforeMount,
defineProps,
watch,
nextTick,
} from "vue";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const routers = useRoute();
const props = defineProps({
dialogShow: {
type: Boolean,
default: () => {
return false;
},
},
columns: {
type: Array,
default: () => {
return [];
},
},
tableData: {
type: Array,
default: () => {
return [];
},
},
title: {
type: String,
default: () => {
return "";
},
},
pagination: {
type: Object,
required: true,
},
});
const emit = defineEmits(["close", "handle"]);
const handleRowClick = (row, column, event) => {
// row
console.log(row);
router.push({
path: `/home/index/person`,
});
};
//
const dialogShow = ref();
const data = reactive({
title: "",
columns: [],
tableData: [],
pagination: {},
});
const gridData = [];
//
const tableKey = ref(Math.random());
//
watch(
() => props.dialogShow,
(newVal, oldVal) => {
dialogShow.value = newVal;
// data.tableData = props.tableData;
data.columns = props.columns;
}
);
watch(
() => props.tableData,
(newVal, oldVal) => {
data.tableData = props.tableData;
tableKey.value = Math.random();
}
);
// 使
onMounted(() => {
dialogShow.value = props.dialogShow;
data.columns = props.columns;
data.title = props.title;
data.tableData = props.tableData;
const paginationTotal = document.querySelector(".el-pagination__total");
// console.log(paginationTotal);
// paginationTotal.innerText = ` ${props.pagination.total} `;
});
const closeDialog = () => {
dialogShow.value = false;
emit("close");
};
//
const handle = (current) => {
emit("handle", current);
};
</script>
<style lang="scss" scoped>
:deep(.el-dialog) {
--el-dialog-bg-color: none;
--el-dialog-width: 76% !important;
}
.my-header {
display: flex;
flex-direction: row-reverse;
}
.tabelPart {
padding: 16px;
background: linear-gradient(
270deg,
rgba(0, 77, 131, 0.69) 0%,
rgba(0, 51, 83, 0.77) 50%,
rgba(0, 77, 131, 0.74) 100%
),
radial-gradient(
66% 40% at 50% 0%,
rgba(1, 150, 243, 0.55) 0%,
rgba(0, 116, 255, 0) 100%
);
box-shadow: inset 0px 0px 56px 0px rgba(100, 191, 255, 0.5);
border: 2px solid;
border-image: linear-gradient(
180deg,
rgba(21, 150, 255, 1),
rgba(0, 157, 227, 0)
)
2 2;
:deep(.el-table) {
--el-table-bg-color: none;
--el-table-tr-bg-color: none;
--el-table-header-bg-color: none;
background: none;
border: none;
--el-table-text-color: #fff;
--el-table-header-text-color: #fff;
}
// :deep(.el-table th) {
// text-align: center;
// }
}
.pagePart {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
: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;
}
:deep(.el-pagination button:disabled) {
background-color: rgba(0, 116, 255, 0) !important;
}
:deep(.el-pagination > .is-last) {
color: #ffffff;
}
}
.bo {
width: 100%;
display: flex;
}
.title {
margin: 0px auto;
display: flex;
flex-direction: column;
&_top {
display: flex;
align-items: end;
justify-content: center;
img {
height: 33px;
width: 33px;
}
.name {
font-family: PangMenZhengDao, PangMenZhengDao;
font-weight: 600;
font-size: 20px;
color: #ffffff;
line-height: 38px;
text-align: center;
font-style: normal;
letter-spacing: 2px;
background: linear-gradient(180deg, #ffffff 0%, #51ffef 100%);
-webkit-background-clip: text;
/*将设置的背景颜色限制在文字中*/
-webkit-text-fill-color: transparent;
/*给文字设置成透明*/
}
}
&_botton {
margin-top: 5px;
height: 19px;
}
}
.custom-table-font {
font-size: 10px;
}
</style>

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>

View File

@ -7,8 +7,22 @@
<div class="title">
<div class="title_name">
<span @click="csh()">龙游县</span>
<span v-if="title_jd" @click="to_jd(title_jd)"
>>{{ title_jd }}</span
>
<span v-if="title_cs">>{{ title_cs }}</span>
</div>
</div>
<div
class="content_item2"
v-for="(item, index) in personTotal.slice(0, 1)"
:class="{ choose: item.id == choose.person }"
@click="buten(item)"
:key="index"
>
<div class="content_item_name">{{ ageLess0(item.ages) }}</div>
<div class="content_item_value">{{ item.rksl }}</div>
</div>
<div class="age-container">
<div class="progress-wrapper">
<div
@ -58,29 +72,27 @@
</div>
</div>
</div>
<div class="content">
<div
class="content_item"
v-for="(item, index) in personTotal"
v-for="(item, index) in personTotal.slice(1)"
:class="{ choose: item.id == choose.person }"
@click="buten(item)"
:key="index"
>
<div class="content_item_name">{{ ageLess0(item.ages) }}</div>
<div class="content_item_value">
{{ item.rksl }}
<div class="content_item_percent" v-if="item.ages != '总人口'">
({{ item.percent }}%)
</div>
<div class="content_item_percent">({{ item.percent }}%)</div>
</div>
</div>
</div>
</div>
<div class="tsbq">
<div class="title">
<div class="title_name"><span>特殊标签</span></div>
<div class="title_name">
<span>特殊标签</span>
</div>
</div>
<div class="content">
<div
@ -139,6 +151,16 @@
</div>
</div>
</div>
<Dialog
:dialogShow="dialogShow"
:columns="tableType.columns"
:title="tableType.title"
:tableData="tableType.data"
:pagination="pagination"
@close="close"
@handle="handlePagination"
>
</Dialog>
</teleport>
</div>
</template>
@ -187,6 +209,7 @@ import b5 from "@/assets/images/map/b5.png";
import b6 from "@/assets/images/map/b6.png";
import xcbg from "@/assets/images/map/xcbg.png";
import AED from "@/assets/images/map/AED.png";
import Dialog from "./dialog/dialogMapDp.vue";
//---------------
//
const jdm_arr = ref([]); //
@ -920,6 +943,64 @@ const yaosuTotal = ref([
]);
//
let currentMarker = null; //
//
const dialogShow = ref(false);
const tableType = reactive({
url: "",
title: "人员列表",
columns: [
{
label: "姓名",
property: "xm",
},
{
label: "证件类型",
property: "szdw",
},
{
label: "证件号码",
property: "zy",
},
{
label: "政治面貌",
property: "zzmm",
},
{
label: "居住状态",
property: "jzzt",
},
{
label: "民族",
property: "mz",
},
{
label: "性别",
property: "xb",
},
{
label: "户口登记地",
property: "hkdjd",
},
],
data: [
{
xm: "张三",
szdw: "身份证",
zy: "123456789012345678",
zzmm: "党员",
jzzt: "未居住",
mz: "汉族",
xb: "男",
hkdjd: "浙江省杭州市西湖区",
},
],
});
//
const pagination = reactive({
total: 100,
pageSize: 10,
currentPage: 1,
});
//------------------------------------------------
//
const initMap = () => {
@ -1065,6 +1146,29 @@ const getData = async (i, e) => {
});
});
// console.log(personTotal.value,"111");
//
const agename = [
"09Percent",
"1019Percent",
"2029Percent",
"3039Percent",
"4049Percent",
"5059Percent",
"6069Percent",
"7079Percent",
"8089Percent",
"9099Percent",
"100nlPercent",
];
if (res.data.ageGroupsPercent) {
console.log(PopulationRatio.value[0].progress);
agename.forEach((key, index) => {
if (PopulationRatio.value[index]) {
PopulationRatio.value[index].progress =
res.data.ageGroupsPercent[key];
}
});
}
}
mapTownCount.map((item) => {
item.swrs = 0;
@ -1082,28 +1186,6 @@ const getData = async (i, e) => {
}
});
});
//
const agename = [
"09Percent",
"1019Percent",
"2029Percent",
"3039Percent",
"4049Percent",
"5059Percent",
"6069Percent",
"7079Percent",
"8089Percent",
"9099Percent",
"100nlPercent",
];
if (res.data.ageGroupsPercent) {
agename.forEach((key, index) => {
if (PopulationRatio.value[index]) {
PopulationRatio.value[index].progress =
res.data.ageGroupsPercent[key];
}
});
}
}
} catch (error) {
console.error("Error fetching data:", error);
@ -1227,6 +1309,7 @@ const getDatas = async (e, i) => {
"100nlPercent",
];
if (res.data.ageGroupsPercent) {
console.log(PopulationRatio.value[0].progress);
agename.forEach((key, index) => {
if (PopulationRatio.value[index]) {
PopulationRatio.value[index].progress =
@ -1234,7 +1317,6 @@ const getDatas = async (e, i) => {
}
});
}
}
});
};
@ -1308,6 +1390,7 @@ const getDatas2 = async (e, i, cs) => {
"100nlPercent",
];
if (res.data.ageGroupsPercent) {
console.log(PopulationRatio.value[0].progress);
agename.forEach((key, index) => {
if (PopulationRatio.value[index]) {
PopulationRatio.value[index].progress =
@ -1499,6 +1582,9 @@ const changeRs2 = (id) => {
addJd2();
}
};
const changeys = (id) => {
choose.value.yaosu = id;
};
//
const to_jd = (item_name) => {
clear();
@ -1513,14 +1599,15 @@ const to_jd = (item_name) => {
// } else {
// console.log(111, choose.value.person);
cfJd.value = item_name;
//
let jdCenter = [];
if (item_name == "溪口镇") {
BMAP();
if (choose.value.person == "") {
getDatas("溪口镇", "");
}
loadCs(item_name);
addPolygonCountyCs();
getDataBq(cfJd.value, "");
if (choose.value.person == "") {
getDatas(cfJd.value, "");
}
if (
choose.value.person == "cjr" ||
choose.value.person == "dibian" ||
@ -1531,29 +1618,48 @@ const to_jd = (item_name) => {
choose.value.person == "kjer"
) {
getDataBqs2(cfJd.value, cfCs.value, choose.value.person, false);
getDatas("溪口镇", "");
getDatas(cfJd.value, "");
} else if (choose.value.person != "") {
if (choose.value.person == "9999") {
getDatas("溪口镇", "");
getDatas(cfJd.value, "");
} else {
if (choose.value.person == 1) {
getDatas("溪口镇", "0"); //0
getDatas(cfJd.value, "0"); //0
} else {
getDatas("溪口镇", choose.value.person - 1);
getDatas(cfJd.value, choose.value.person - 1);
}
}
}
loadCs(item_name);
addPolygonCountyCs();
mapTownCount.map((item) => {
if (item.name == item_name) {
jdCenter = item.center;
// if (title_jd.value == item.name) {
// } else {
// title_jd.value = item.name;
// }
mapTownCount.map((itemm) => {
if (itemm.name == item_name) {
jdCenter = itemm.center;
}
});
goMapCenter(jdCenter, 13);
}
// }
};
//
const open_detail = () => {
dialogShow.value = true;
console.log(1111111111, dialogShow.value);
};
const close = () => {
dialogShow.value = false;
pagination.total = 100;
};
//
const handlePagination = (current) => {
pagination.currentPage = current;
getTable(tableType.url, pagination.currentPage);
};
//
const person_detail = () => {};
//-------------------
//
const changeFwq = async (id, name, names) => {
@ -2068,7 +2174,7 @@ const addPolygonCountyCs = () => {
});
map.addOverlay(cs_qk_arr.value[index]);
cs_qk_arr.value[index].addEventListener("click", () => {
console.log("名字", item.name);
// console.log("", item.name);
cfCs.value = item.name;
title_cs.value = item.name;
@ -2328,7 +2434,7 @@ const createCs2 = (polygon, indexx) => {
div.style.alignItems = "center";
div.style.cursor = "pointer";
div.style.padding = "5px";
div.style.minWidth = "90px";
div.style.minWidth = "60px";
div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
div.style.transform = "translateY(50px)";
div.setAttribute("name", this.properties.title);
@ -2385,6 +2491,10 @@ const createCs2 = (polygon, indexx) => {
},
});
map.addOverlay(cs_number_name_arr.value[indexx]);
cs_number_name_arr.value[indexx].addEventListener("click", () => {
console.log(polygon.name);
open_detail();
});
};
//
const DGcreateCs = (polygon, indexx) => {
@ -2463,7 +2573,7 @@ const DGcreateCs2 = (polygon, indexx) => {
div.style.alignItems = "center";
div.style.cursor = "pointer";
div.style.padding = "5px";
div.style.minWidth = "90px";
div.style.minWidth = "60px";
div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
div.style.transform = "translateY(50px)";
div.setAttribute("name", this.properties.title);
@ -2520,6 +2630,10 @@ const DGcreateCs2 = (polygon, indexx) => {
},
});
map.addOverlay(cs_dd_arr.value[indexx]);
cs_dd_arr.value[indexx].addEventListener("click", () => {
console.log(cfJd.value, polygon.name);
open_detail();
});
};
//
const reset_font = () => {
@ -2539,7 +2653,7 @@ const reset_font = () => {
}
};
onMounted(() => {
tools.data.set("token", "6b0e380b4a8f46baae4923f83faf670d");
// tools.data.set("token", "6b0e380b4a8f46baae4923f83faf670d");
reset_font();
initMap();
getData();
@ -2594,44 +2708,9 @@ onMounted(() => {
//
.lyx {
.content {
box-sizing: border-box;
margin-top: 20px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
.content_item2 {
color: #ffffff;
height: 350px;
overflow: auto;
.content_item {
cursor: pointer;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px;
padding-left: 24px;
padding-right: 5px;
width: 48%;
position: relative;
// height: 57px;
background-image: url(@/assets/images/map/unchoose.png);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 12px;
font-size: 18px;
}
// .content_item_bg {
// position: absolute;
// top: 0;
// left: 0;
// width: 40%;
// height: 100%;
// background: RGBA(53, 85, 114, 0.8);
// z-index: -1;
// }
.content_item:first-child {
box-sizing: border-box;
display: flex;
align-items: center;
@ -2645,22 +2724,6 @@ onMounted(() => {
background-size: 100% 100%;
margin-bottom: 12px;
}
.content_item:nth-child(2) {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px;
padding-left: 24px;
width: 100%;
// height: 57px;
background-image: url(@/assets/images/map/unchoose.png);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 12px;
}
.content_item_name {
position: relative;
}
@ -2686,13 +2749,101 @@ onMounted(() => {
}
}
.content {
box-sizing: border-box;
margin-top: 20px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
color: #ffffff;
height: 300px;
overflow: auto;
.content_item {
cursor: pointer;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px;
padding-left: 24px;
padding-right: 5px;
width: 48%;
position: relative;
// height: 57px;
background-image: url(@/assets/images/map/unchoose.png);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 12px;
font-size: 18px;
}
.content_item:first-child {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px;
padding-left: 24px;
width: 100%;
// height: 57px;
background-image: url(@/assets/images/map/unchoose.png);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 12px;
}
// .content_item:nth-child(2) {
// box-sizing: border-box;
// display: flex;
// align-items: center;
// justify-content: space-between;
// padding: 18px;
// padding-left: 24px;
// width: 100%;
// // height: 57px;
// background-image: url(@/assets/images/map/unchoose.png);
// background-repeat: no-repeat;
// background-size: 100% 100%;
// margin-bottom: 12px;
// }
// .content_item_name {
// position: relative;
// }
// .content_item_name::before {
// content: "";
// position: absolute;
// width: 3px;
// height: 3px;
// background: #29ffc1;
// border: 3px solid rgba(0, 255, 189, 0.31);
// border-radius: 6px;
// top: 7.5px;
// left: -13px;
// }
// .content_item_value {
// display: flex;
// .content_item_percent {
// margin-left: 2px;
// color: #6bfeff;
// text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
// }
// }
// .choose {
// background-image: url(@/assets/images/map/choose.png) !important;
// background-repeat: no-repeat !important;
// background-size: 100% 100% !important;
// }
}
.choose {
background-image: url(@/assets/images/map/choose.png) !important;
background-repeat: no-repeat !important;
background-size: 100% 100% !important;
}
}
.content::-webkit-scrollbar {
display: none;
}
@ -2932,7 +3083,7 @@ onMounted(() => {
cursor: pointer;
display: flex;
font-family: YouSheBiaoTiHei;
font-size: 34px;
font-size: 30px;
font-weight: 900;
// line-height: 44px;
letter-spacing: 4px;
@ -2943,15 +3094,15 @@ onMounted(() => {
/* 为了兼容性添加渐变背景到IE */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding-left: 23px;
span {
display: block;
font-family: YouSheBiaoTiHei;
font-size: 34px;
font-size: 30px;
font-weight: 900;
// line-height: 44px;
letter-spacing: 4px;
margin-bottom: 15px;
margin-bottom: 18px;
background: linear-gradient(
180deg,
#ffffff 0%,
@ -2976,6 +3127,7 @@ onMounted(() => {
.age-container {
position: relative;
left: 10px;
width: 450px;
height: 120px;
display: flex;
@ -3103,4 +3255,22 @@ onMounted(() => {
border-radius: 0 5px 5px 0;
}
}
:deep(.el-table) {
background: rgba(32, 64, 115, 1);
--el-table-border-color: none;
border: 1px solid #7aceff;
}
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
background-color: #2f4b74;
}
:deep(.el-table__empty-block) {
background-color: #122560;
}
:deep(.el-table .el-table__row) {
border-bottom: none;
}
</style>