From 7036f152f08b46ce3e493ea6c694cf7a7b7c4bd0 Mon Sep 17 00:00:00 2001 From: lnn19986213 <1667908750@qq.com> Date: Mon, 13 May 2024 13:29:26 +0800 Subject: [PATCH] gx --- src/view/education.vue | 161 ++++++++++++++++++++++++----------------- 1 file changed, 93 insertions(+), 68 deletions(-) diff --git a/src/view/education.vue b/src/view/education.vue index 357826d..d274413 100644 --- a/src/view/education.vue +++ b/src/view/education.vue @@ -6,8 +6,8 @@
-
-
{{ item.value }}%
+
+
{{ item.value }}
{{ item.name }}
@@ -19,33 +19,15 @@
- - + +
- - + +
@@ -105,22 +87,13 @@
-
+
城市
-
+
县镇
-
+
农村
@@ -135,11 +108,7 @@ 资助金额
-
+
幼儿资助 379人次 70.88 @@ -231,28 +200,7 @@ import ePie3 from "./echarts_education/pie3.vue"; import ePie4 from "./echarts_education/pie4.vue"; import ePieRose from "./echarts_education/pieRose.vue"; import eP1 from "./echarts_education/eP1.vue"; -const fl = ref([ - { - name: "留守儿童", - value: 16.1, - cls: "left1", - }, - { - name: "独生子女", - value: 32.1, - cls: "left2", - }, - { - name: "单亲家庭", - value: 65.1, - cls: "left3", - }, - { - name: "享受低保", - value: 0.1, - cls: "left4", - }, -]); +import http from "@/utils/request.js"; const selectData = reactive({ value1: "111", value2: "tes1", @@ -402,9 +350,48 @@ const ratingBtn = (item) => { break; } }; +const data = reactive({ + xsql: [], + zdgz: [ + { + name: "留守儿童", + value: 16.1, + cls: "left1", + }, + { + name: "独生子女", + value: 32.1, + cls: "left2", + }, + { + name: "单亲家庭", + value: 65.1, + cls: "left3", + }, + { + name: "享受低保", + value: 0.1, + cls: "left4", + }, +] +}) onBeforeMount(() => { selectData.list = roseData1.value; selectData.list1 = schoolData.value; + http.get("/api/ggfwyth/education").then((res) => { + if (res.code == 200){ + data.xsql.push(res.data.xssl.zz) + data.xsql.push(res.data.xssl.gz) + data.xsql.push(res.data.xssl.cz) + data.xsql.push(res.data.xssl.xx) + data.xsql.push(res.data.xssl.yey) + data.xsql.push(res.data.xssl.tsjy) + data.zdgz[0].value = res.data.zdgz.lset + data.zdgz[1].value = res.data.zdgz.dszn + data.zdgz[2].value = res.data.zdgz.dqjt + data.zdgz[3].value = res.data.zdgz.xsdb + } + }); }); @@ -760,6 +747,7 @@ onBeforeMount(() => { .flex11 { padding: 12px 0; } + .czr-sl { display: flex; @@ -907,6 +895,7 @@ onBeforeMount(() => { .czrBox { height: 104px; + .column { height: calc(100% - 26px); overflow-y: auto; @@ -936,14 +925,17 @@ onBeforeMount(() => { background-image: url(@/assets/eduImg/jyImg13.png); } } + .school { display: flex; flex-direction: column; justify-content: space-around; + .schoolaBox { display: flex; justify-content: space-between; } + .schoola { width: 124px; height: 79px; @@ -958,6 +950,7 @@ onBeforeMount(() => { justify-content: center; flex-direction: column; justify-content: space-between; + span { // font-weight: 500; // font-size: 14px; @@ -976,6 +969,7 @@ onBeforeMount(() => { text-align: center; font-style: normal; } + .schoola1 { font-family: PingFangSC, PingFang SC; font-weight: 500; @@ -988,6 +982,7 @@ onBeforeMount(() => { font-style: normal; } } + .schoolb { width: 550px; height: 241px; @@ -1000,6 +995,7 @@ onBeforeMount(() => { flex-direction: column; padding: 10px 0; box-sizing: border-box; + span { font-weight: 500; font-size: 14px; @@ -1008,10 +1004,12 @@ onBeforeMount(() => { font-style: normal; font-family: PingFangSC, PingFang SC; } + .grade { display: flex; justify-content: space-between; padding: 36px 0 0px 18px; + .schoolbs { // width: 128px; height: 41px; @@ -1024,16 +1022,19 @@ onBeforeMount(() => { justify-content: center; position: relative; } + .spot { position: relative; margin-right: 7px; } + /* 添加伪元素圆点 */ .spot::before { content: ""; position: absolute; top: 50%; - left: -16px; /* 调整圆点的位置 */ + left: -16px; + /* 调整圆点的位置 */ transform: translateY(-50%); width: 6px; height: 6px; @@ -1043,16 +1044,19 @@ onBeforeMount(() => { filter: blur(0px); } } + .grade1 { padding: 12px 110px 0 138px; box-sizing: border-box; } } } + .fundingBox { display: flex; flex-direction: column; align-items: center; + .funding { width: 520px; height: 34px; @@ -1065,6 +1069,7 @@ onBeforeMount(() => { display: flex; align-items: center; justify-content: space-around; + // align-items: center; // justify-content: center; // flex-direction: column; @@ -1078,6 +1083,7 @@ onBeforeMount(() => { letter-spacing: 3px; } } + .rolling { width: 100%; height: 200px; @@ -1087,6 +1093,7 @@ onBeforeMount(() => { flex-direction: column; align-items: center; padding-left: 6px; + .fundingContent { display: flex; align-items: center; @@ -1110,11 +1117,13 @@ onBeforeMount(() => { } } } + .rating { width: 50%; display: flex; flex-direction: column; align-items: center; + .ratingBtn { display: flex; // align-items: center; @@ -1125,7 +1134,8 @@ onBeforeMount(() => { background-image: url(@/assets/eduImg/jyImg19.png); background-repeat: no-repeat; background-size: 100% 100%; - cursor: pointer; /* 添加指针样式以指示可点击 */ + cursor: pointer; + /* 添加指针样式以指示可点击 */ } .ratingImg { @@ -1135,6 +1145,7 @@ onBeforeMount(() => { background-repeat: no-repeat; background-size: 100% 100%; } + .onImg.active { width: 62px; height: 29px; @@ -1142,6 +1153,7 @@ onBeforeMount(() => { background-repeat: no-repeat; background-size: 100% 100%; } + span { height: 100%; display: flex; @@ -1171,19 +1183,23 @@ onBeforeMount(() => { } .column::-webkit-scrollbar { - display: none; /* Chrome Safari */ + display: none; + /* Chrome Safari */ } + /* 滚动条整体部分 */ .rolling::-webkit-scrollbar { width: 5px; // height: 10px; } + /* 滚动槽 */ .rolling::-webkit-scrollbar-track { border-radius: 1px; background: rgba(0, 128, 231, 0.56); -webkit-box-shadow: inset 0 0 6px rgba(139, 139, 139, 0.3); } + /* 滚动条滑块样式 */ .rolling::-webkit-scrollbar-thumb { background-clip: content-box; @@ -1191,6 +1207,7 @@ onBeforeMount(() => { background: rgba(0, 162, 231, 1); -webkit-box-shadow: inset 0 0 6px rgba(20, 20, 20, 0.3); } + .t_1 { margin: 10px auto; width: 100%; @@ -1199,20 +1216,24 @@ onBeforeMount(() => { background-repeat: no-repeat; background-size: 100% 100%; } + .t_2 { margin-top: 5px; padding: 0 10px; display: flex; justify-content: space-around; + .t_2_1 { display: flex; flex-direction: column; align-items: center; + .top { font-size: 26px; color: #ffffff; line-height: 30px; } + .t_3 { width: 135px; height: 90px; @@ -1231,6 +1252,7 @@ onBeforeMount(() => { background-repeat: no-repeat; background-size: 100% 100%; } + .left2 { position: absolute; left: 15px; @@ -1241,6 +1263,7 @@ onBeforeMount(() => { background-repeat: no-repeat; background-size: 100% 100%; } + .left3 { position: absolute; left: 15px; @@ -1251,6 +1274,7 @@ onBeforeMount(() => { background-repeat: no-repeat; background-size: 100% 100%; } + .left4 { position: absolute; left: 15px; @@ -1261,6 +1285,7 @@ onBeforeMount(() => { background-repeat: no-repeat; background-size: 100% 100%; } + .right { position: absolute; left: 65px;