diff --git a/dist.zip b/dist.zip new file mode 100644 index 0000000..978588a Binary files /dev/null and b/dist.zip differ diff --git a/index.html b/index.html index 8388c4b..46bd8e2 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite + Vue + 人口看板
diff --git a/public/assets/imgs/bottom-bg.png b/public/assets/imgs/bottom-bg.png new file mode 100644 index 0000000..cf8d25d Binary files /dev/null and b/public/assets/imgs/bottom-bg.png differ diff --git a/public/assets/imgs/circle-bg.png b/public/assets/imgs/circle-bg.png new file mode 100644 index 0000000..66c2514 Binary files /dev/null and b/public/assets/imgs/circle-bg.png differ diff --git a/src/App.vue b/src/App.vue index 52765ef..d1e7a50 100644 --- a/src/App.vue +++ b/src/App.vue @@ -39,12 +39,12 @@ import ModuleBottom from './module/ModuleBottom.vue'; .main width 100% height 100% - background-image url('assets/imgs/bg.png') + background-image url(/assets/imgs/bg.png) background-size 100% 120% background-position center .main-title height 100px - background-image url(assets/imgs/title-bg.png) + background-image url(/assets/imgs/title-bg.png) background-size 100% 100% position relative div diff --git a/src/components/card/CardTwoCount.vue b/src/components/card/CardTwoCount.vue index 69b4036..d3ca87f 100644 --- a/src/components/card/CardTwoCount.vue +++ b/src/components/card/CardTwoCount.vue @@ -37,7 +37,7 @@ const props = defineProps({ .container width 360px height 180px - background-image url(assets/imgs/card/bg8.png) + background-image url(/assets/imgs/card/bg8.png) background-size 100% 100% background-repeat no-repeat position relative diff --git a/src/components/card/PersonCount1.vue b/src/components/card/PersonCount1.vue index 02f4a21..26609f1 100644 --- a/src/components/card/PersonCount1.vue +++ b/src/components/card/PersonCount1.vue @@ -20,7 +20,7 @@ const props = defineProps({ .container width 140px height 80px - background-image url(assets/imgs/card/bg5.png) + background-image url(/assets/imgs/card/bg5.png) background-repeat no-repeat background-size 100% 40% background-position bottom diff --git a/src/components/circle/CircleWave.vue b/src/components/circle/CircleWave.vue index 91106b1..5687fc6 100644 --- a/src/components/circle/CircleWave.vue +++ b/src/components/circle/CircleWave.vue @@ -38,5 +38,6 @@ const color = ref(props.color); \ No newline at end of file diff --git a/src/module/ModuleBottom.vue b/src/module/ModuleBottom.vue index 9f900ac..3c1391d 100644 --- a/src/module/ModuleBottom.vue +++ b/src/module/ModuleBottom.vue @@ -62,7 +62,7 @@ const axios = inject('axios'); onMounted(() => { axios.get(`app/query/sqlrelease/q2972694`, {}).then(res => { let data = res.data; - let total = data.total; + let total = data.list[0].value + data.list[1].value + data.list[2].value + data.list[3].value; personData.lnr.value = data.list[0].value; personData.lnr.process = (data.list[0].value / total).toFixed(2); personData.lnr.percent = (data.list[0].value / total * 100).toFixed(2); @@ -90,13 +90,18 @@ onMounted(() => { .module-card3 .module-container display flex - background-image url(assets/imgs/card/bg9.png) .left width 550px height 200px + background-image url(/assets/imgs/bottom-bg.png) + background-size 100% position relative .circle-container transform scale(0.4) + background-image url(/assets/imgs/circle-bg.png) + background-size 128% 100% + background-position center + padding 5px position absolute top 10px left 10px diff --git a/src/module/ModuleCenter.vue b/src/module/ModuleCenter.vue index 48267d8..10bd699 100644 --- a/src/module/ModuleCenter.vue +++ b/src/module/ModuleCenter.vue @@ -7,9 +7,9 @@ - - - + + + @@ -19,6 +19,12 @@ import PersonPercent from '../components/card/PersonPercent.vue'; import CardCount1 from '../components/card/CardCount1.vue'; import CardTwoCount from '../components/card/CardTwoCount.vue'; +const icons = reactive({ + xtl: 'assets/imgs/icon/xtl.png', + mxl: 'assets/imgs/icon/mxl.png', + wsq: 'assets/imgs/icon/wsq.png' +}) + const axios = inject('axios'); const keyCount = reactive({ @@ -94,7 +100,7 @@ axios.get(`app/query/sqlrelease/qdf8f806`, {}).then(res => { .module-center width 800px height 600px - background-image url(assets/imgs/center-map-bg.png) + background-image url(/assets/imgs/center-map-bg.png) background-size 100% 400px background-repeat no-repeat position relative diff --git a/src/module/ModuleLeft1.vue b/src/module/ModuleLeft1.vue index 746a518..f3bcfbc 100644 --- a/src/module/ModuleLeft1.vue +++ b/src/module/ModuleLeft1.vue @@ -33,5 +33,5 @@ axios.get(`app/query/sqlrelease/q419513e`, {}).then(res => { \ No newline at end of file diff --git a/src/module/ModuleRight1.vue b/src/module/ModuleRight1.vue index ed50d03..e8deac2 100644 --- a/src/module/ModuleRight1.vue +++ b/src/module/ModuleRight1.vue @@ -35,5 +35,5 @@ axios.get(`app/query/sqlrelease/q2c03064`, {}).then(res => { \ No newline at end of file diff --git a/src/module/ModuleRight3.vue b/src/module/ModuleRight3.vue index b89e9d8..747b624 100644 --- a/src/module/ModuleRight3.vue +++ b/src/module/ModuleRight3.vue @@ -15,7 +15,7 @@ const axios = inject('axios'); const keyCount = ref(0); const pie3dData = reactive([]); -axios.get(`app/query/sqlrelease/qaf6b78b`, {}).then(res => { +axios.get(`app/query/sqlrelease/qe41cc66`, {}).then(res => { let data = res.data; data.forEach(item => { pie3dData.push(item) @@ -30,5 +30,5 @@ axios.get(`app/query/sqlrelease/qaf6b78b`, {}).then(res => { \ No newline at end of file diff --git a/src/module/card/ModuleCard1.vue b/src/module/card/ModuleCard1.vue index 87ef1e3..2c93a59 100644 --- a/src/module/card/ModuleCard1.vue +++ b/src/module/card/ModuleCard1.vue @@ -37,7 +37,7 @@ const bodyH = ref(`${props.w / 2}px`); position relative .module-card-title height v-bind(titleH) - background-image url(assets/imgs/module/title-left-bg.png) + background-image url(/assets/imgs/module/title-left-bg.png) background-size auto 100% background-repeat no-repeat background-position left diff --git a/src/module/card/ModuleCard2.vue b/src/module/card/ModuleCard2.vue index d588d33..c6c34b0 100644 --- a/src/module/card/ModuleCard2.vue +++ b/src/module/card/ModuleCard2.vue @@ -37,7 +37,7 @@ const bodyH = ref(`${props.w / 2}px`); position relative .module-card-title height v-bind(titleH) - background-image url(assets/imgs/module/title-right-bg.png) + background-image url(/assets/imgs/module/title-right-bg.png) background-size auto 100% background-repeat no-repeat background-position right diff --git a/src/module/card/ModuleCard3.vue b/src/module/card/ModuleCard3.vue index c3287f8..b0b7d49 100644 --- a/src/module/card/ModuleCard3.vue +++ b/src/module/card/ModuleCard3.vue @@ -37,7 +37,7 @@ const bodyH = ref(`${props.w / 4}px`); position relative .module-card-title height v-bind(titleH) - background-image url(assets/imgs/module/title-center-bg.png) + background-image url(/assets/imgs/module/title-center-bg.png) background-size auto 100% background-repeat no-repeat background-position center