diff --git a/src/assets/images/sy/ggjt.png b/src/assets/images/sy/ggjt.png new file mode 100644 index 0000000..b8456fc Binary files /dev/null and b/src/assets/images/sy/ggjt.png differ diff --git a/src/assets/images/sy/ggjt1.png b/src/assets/images/sy/ggjt1.png new file mode 100644 index 0000000..301f202 Binary files /dev/null and b/src/assets/images/sy/ggjt1.png differ diff --git a/src/assets/images/sy/ggjt2.png b/src/assets/images/sy/ggjt2.png new file mode 100644 index 0000000..8437fb0 Binary files /dev/null and b/src/assets/images/sy/ggjt2.png differ diff --git a/src/assets/images/sy/ggjt3.png b/src/assets/images/sy/ggjt3.png new file mode 100644 index 0000000..432b3f8 Binary files /dev/null and b/src/assets/images/sy/ggjt3.png differ diff --git a/src/assets/images/sy/ggjt4.png b/src/assets/images/sy/ggjt4.png new file mode 100644 index 0000000..0683a11 Binary files /dev/null and b/src/assets/images/sy/ggjt4.png differ diff --git a/src/assets/images/sy/ggjt5.png b/src/assets/images/sy/ggjt5.png new file mode 100644 index 0000000..80d7bac Binary files /dev/null and b/src/assets/images/sy/ggjt5.png differ diff --git a/src/view/sy.vue b/src/view/sy.vue index bbca533..8b1cf2c 100644 --- a/src/view/sy.vue +++ b/src/view/sy.vue @@ -10,10 +10,16 @@
- 收入:{{ data.LivelihoodWelfare.zgylbxzsr }}万元 + 收入:{{ data.LivelihoodWelfare.zgylbxzsr }}万元
- 支出:{{ data.LivelihoodWelfare.zgylbxzzc }}万元 + 支出:{{ data.LivelihoodWelfare.zgylbxzzc }}万元
@@ -21,10 +27,16 @@
工伤保险
- 收入:{{ data.LivelihoodWelfare.gsbxzsr }}万元 + 收入:{{ data.LivelihoodWelfare.gsbxzsr }}万元
- 支出:{{ data.LivelihoodWelfare.gsbxzzc }}万元 + 支出:{{ data.LivelihoodWelfare.gsbxzzc }}万元
@@ -34,10 +46,16 @@
- 收入:{{ data.LivelihoodWelfare.cxylbxzsr }}万元 + 收入:{{ data.LivelihoodWelfare.cxylbxzsr }}万元
- 支出:{{ data.LivelihoodWelfare.cxylbxzzc }}万元 + 支出:{{ data.LivelihoodWelfare.cxylbxzzc }}万元
@@ -47,10 +65,16 @@
- 收入:{{ data.LivelihoodWelfare.zgyilbxzsr }}万元 + 收入:{{ data.LivelihoodWelfare.zgyilbxzsr }}万元
- 支出:{{ data.LivelihoodWelfare.zgyilbxzzc }}万元 + 支出:{{ data.LivelihoodWelfare.zgyilbxzzc }}万元
@@ -60,10 +84,16 @@
- 收入:{{ data.LivelihoodWelfare.cxyilbxzsr }}万元 + 收入:{{ data.LivelihoodWelfare.cxyilbxzsr }}万元
- 支出:{{ data.LivelihoodWelfare.cxyilbxzzc }}万元 + 支出:{{ data.LivelihoodWelfare.cxyilbxzzc }}万元
@@ -100,10 +130,12 @@
- {{ jysyList[0].title }}学校师生比 + {{ jysyList[0].title }}学校师生比
- {{ jysyList[0].teacher }}:{{ jysyList[0].student }} + {{ jysyList[0].teacher }}:{{ jysyList[0].student }}
@@ -113,7 +145,8 @@
- {{ jysyList[1].title }}学校师生比 + {{ jysyList[1].title }}学校师生比
{{ jysyList[1].teacher }}:{{ jysyList[1].student }} @@ -166,23 +199,44 @@
-
+
公共服务
-
+
企业服务
-
+
政务服务
- + - + @@ -195,7 +249,11 @@
-
+
{{ item.name }}
{{ item.value }}
@@ -204,7 +262,11 @@
-
+
{{ item.name }}
{{ item.value }}{{ item.dw }} @@ -215,7 +277,11 @@
-
+
{{ item.value }}{{ item.dw ? item.dw : "" }}
@@ -226,7 +292,7 @@
- + +
+
+
+ +
+
{{ data.jtsyList[0].name }}
+
+ {{ data.jtsyList[0].key1 }}: + {{ data.jtsyList[0].key1_value }} +
+
+ {{ data.jtsyList[0].key2 }}: + {{ data.jtsyList[0].key2_value }} +
+
+
+
+ +
+
{{ data.jtsyList[1].name }}
+
+ {{ data.jtsyList[1].key1 }}: + {{ data.jtsyList[1].key1_value }} +
+
+ {{ data.jtsyList[1].key2 }}: + {{ data.jtsyList[1].key2_value }} +
+
+
+
+
+
+ +
+
{{ data.jtsyList[2].name }}
+
+ {{ data.jtsyList[2].key1 }}: + {{ data.jtsyList[2].key1_value }} +
+
+ {{ data.jtsyList[2].key2 }}: + {{ data.jtsyList[2].key2_value }} +
+
+
+
+ +
+
{{ data.jtsyList[3].name }}
+
+ {{ data.jtsyList[3].key1 }}: + {{ data.jtsyList[3].key1_value }} +
+
+ {{ data.jtsyList[3].key2 }}: + {{ data.jtsyList[3].key2_value }} +
+
+
+
+ +
+
{{ data.jtsyList[4].name }}
+
+ {{ data.jtsyList[4].key1 }}: + {{ data.jtsyList[4].key1_value }} +
+
+ {{ data.jtsyList[4].key2 }}: + {{ data.jtsyList[4].key2_value }} +
+
+
+
+
- + @@ -259,75 +407,81 @@ import footerball from "../assets/images/sy/footerball.png"; import baskerball from "../assets/images/sy/baskerball.png"; import badminton from "../assets/images/sy/badminton.png"; import running from "../assets/images/sy/running.png"; -import Dialog from "./dialog/dialog.vue"; import tableTennis from "../assets/images/sy/tableTennis.png"; + +import ggjtimg from "../assets/images/sy/ggjt.png"; +import ggjtimg1 from "../assets/images/sy/ggjt1.png"; +import ggjtimg2 from "../assets/images/sy/ggjt2.png"; +import ggjtimg3 from "../assets/images/sy/ggjt3.png"; +import ggjtimg4 from "../assets/images/sy/ggjt4.png"; + +import Dialog from "./dialog/dialog.vue"; import { ref, reactive, onMounted, onBeforeMount, computed } from "vue"; import http from "@/utils/request.js"; -import { CircleCloseFilled } from '@element-plus/icons-vue' +import { CircleCloseFilled } from "@element-plus/icons-vue"; import { columns } from "element-plus/es/components/table-v2/src/common.mjs"; // 详情弹框 -const dialogShow = ref(false) +const dialogShow = ref(false); const tableType = reactive({ - title: '', + title: "", columns: [ { - label: '姓名', - property: 'name', - width: '150' + label: "姓名", + property: "name", + width: "150", }, { - label: '人员类别', - property: 'type', - width: '150' + label: "人员类别", + property: "type", + width: "150", }, { - label: '就失业状态', - property: 'status', - width: '150' + label: "就失业状态", + property: "status", + width: "150", }, { - label: '日期', - property: 'date', + label: "日期", + property: "date", }, { - label: '地址', - property: 'address', + label: "地址", + property: "address", }, ], data: [ { - date: '2016-05-02', - name: 'John Smith', - address: 'No.1518, Jinshajiang Road, Putuo District', + date: "2016-05-02", + name: "John Smith", + address: "No.1518, Jinshajiang Road, Putuo District", }, { - date: '2016-05-04', - name: 'John Smith', - address: 'No.1518, Jinshajiang Road, Putuo District', + date: "2016-05-04", + name: "John Smith", + address: "No.1518, Jinshajiang Road, Putuo District", }, { - date: '2016-05-01', - name: 'John Smith', - address: 'No.1518, Jinshajiang Road, Putuo District', + date: "2016-05-01", + name: "John Smith", + address: "No.1518, Jinshajiang Road, Putuo District", }, { - date: '2016-05-03', - name: 'John Smith', - address: 'No.1518, Jinshajiang Road, Putuo District', + date: "2016-05-03", + name: "John Smith", + address: "No.1518, Jinshajiang Road, Putuo District", }, - ] -}) + ], +}); const showDialog = (title) => { - dialogShow.value = true - tableType.title = title -} + dialogShow.value = true; + tableType.title = title; +}; const close = () => { - dialogShow.value = false -} - + dialogShow.value = false; +}; const data = reactive({ PopulationData: { @@ -527,6 +681,7 @@ const data = reactive({ key1_value: "1172491", key2: "骑行时长", key2_value: "1283h", + img: ggjtimg, }, { name: "电动单车", @@ -534,6 +689,7 @@ const data = reactive({ key1_value: "1172491", key2: "骑行时长", key2_value: "1283h", + img: ggjtimg1, }, { name: "公共汽车", @@ -541,6 +697,7 @@ const data = reactive({ key1_value: "176", key2: "乘坐人次", key2_value: "239741", + img: ggjtimg2, }, { name: "长途汽车", @@ -548,6 +705,7 @@ const data = reactive({ key1_value: "133", key2: "客流量", key2_value: "192874", + img: ggjtimg3, }, { name: "高铁", @@ -555,6 +713,7 @@ const data = reactive({ key1_value: "23", key2: "客流量", key2_value: "113414", + img: ggjtimg4, }, ], }); @@ -654,14 +813,16 @@ const jtsyList = ref([ // 县城学校师生比样式 const cs = computed(() => { - let str = `--teacher: ${jysyList.value[0].teacher}; --total: ${jysyList.value[0].teacher + jysyList.value[0].student - }`; + let str = `--teacher: ${jysyList.value[0].teacher}; --total: ${ + jysyList.value[0].teacher + jysyList.value[0].student + }`; return str; }); // 农村学校师生比样式 const nc = computed(() => { - let str = `--teacher: ${jysyList.value[1].teacher}; --total: ${jysyList.value[1].teacher + jysyList.value[1].student - }`; + let str = `--teacher: ${jysyList.value[1].teacher}; --total: ${ + jysyList.value[1].teacher + jysyList.value[1].student + }`; return str; }); // 服务表格样式 @@ -834,10 +995,25 @@ onBeforeMount(async () => { .tabelPart { height: 60vh; 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%); + 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; + 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; @@ -1084,9 +1260,11 @@ onBeforeMount(async () => { color: #2ef1ff; line-height: 26px; text-shadow: 0px 0px 13px rgba(0, 252, 255, 0.5); - background: linear-gradient(270deg, - rgba(255, 255, 255, 0) 0%, - #3976a1 100%); + background: linear-gradient( + 270deg, + rgba(255, 255, 255, 0) 0%, + #3976a1 100% + ); } } } @@ -1424,26 +1602,26 @@ onBeforeMount(async () => { // border: 1px solid rgba(255, 255, 255, 0.77); background-color: #27628d; position: relative; - border-radius: 8px; + border-radius: 8px; .csbl { position: absolute; left: 0; width: calc(var(--teacher) / var(--total) * 100%); height: 8px; background-color: #00f5ff; - border-radius: 8px; + border-radius: 8px; } .ncbl { - position: absolute; + position: absolute; left: 0; width: calc(var(--teacher) / var(--total) * 100%); height: 8px; background-color: #ffd863; - border-radius: 8px; + border-radius: 8px; } } - &_xia:nth-child(2){ + &_xia:nth-child(2) { background-color: #475e73; } } @@ -1569,6 +1747,111 @@ onBeforeMount(async () => { right: 50px; } } +// 交通事业 +.jtsyBox { + width: 97%; + // background-color: skyblue; + display: flex; + flex-direction: column; + + font-size: 14px; + font-weight: 400; + color: #ffffff; + text-align: left; + font-style: normal; + font-family: PingFangSC, PingFang SC; + + img { + width: 68px; + height: 96px; + margin-right: 4px; + } + .jtsyBoxtop { + display: flex; + justify-content: space-evenly; + margin-bottom: 15px; + padding-top: 20px; + .jtsyBoxtop1 { + display: flex; + span { + font-family: TCloudNumber, TCloudNumber; + font-weight: 400; + font-size: 16px; + color: #ffffff; + line-height: 22px; + text-shadow: 0px 0px 4px #12fbff; + text-align: left; + font-style: normal; + } + .jtsyname { + font-family: PingFangSC, PingFang SC; + font-weight: 500; + font-size: 16px; + color: #ffffff; + line-height: 22px; + text-shadow: 0px 2px 4px #35e0f9; + text-align: left; + font-style: normal; + position: relative; + } + .jtsyname::after { + content: ""; + display: block; + width: 60px; + border-bottom: 1px dashed rgba(0, 238, 250, 1); /* 设置虚线 */ + position: absolute; + bottom: -6px; + left: 0; + } + .jtsytext { + margin-top: 14px; + margin-bottom: 2px; + // width: 80px; + } + } + } + .jtsyBoxbot { + display: flex; + justify-content: space-between; + .jtsyBoxtop1 { + display: flex; + span { + font-family: TCloudNumber, TCloudNumber; + font-weight: 400; + font-size: 16px; + color: #ffffff; + line-height: 22px; + text-shadow: 0px 0px 4px #12fbff; + text-align: left; + font-style: normal; + } + .jtsyname { + font-family: PingFangSC, PingFang SC; + font-weight: 500; + font-size: 16px; + color: #ffffff; + line-height: 22px; + text-shadow: 0px 2px 4px #35e0f9; + text-align: left; + font-style: normal; + position: relative; + } + .jtsyname::after { + content: ""; + display: block; + width: 60px; + border-bottom: 1px dashed rgba(0, 238, 250, 1); /* 设置虚线 */ + position: absolute; + bottom: -6px; + left: 0; + } + .jtsytext { + margin-top: 14px; + margin-bottom: 2px; + } + } + } +} .table { width: 94%; @@ -1584,9 +1867,11 @@ onBeforeMount(async () => { line-height: 40px; width: 170px; height: 40px; - background: linear-gradient(180deg, - rgba(0, 142, 255, 0.35) 0%, - rgba(0, 142, 255, 0.52) 100%); + background: linear-gradient( + 180deg, + rgba(0, 142, 255, 0.35) 0%, + rgba(0, 142, 255, 0.52) 100% + ); box-shadow: inset 0px -2px 0px 0px #00b4ff; border-radius: 2px 0px 0px 2px; color: #ffffff; @@ -1620,7 +1905,7 @@ onBeforeMount(async () => { padding-left: 10px; } -::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td { +::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td { background-color: #2f4b74; }