Tenlion/bt-xtgxq-population-bigdata
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加背景，修改样式，修改接口

Browse Source
This commit is contained in:
TS-QD1 2023-11-23 23:17:10 +08:00
parent a9a128a2ca
commit 51cbbd8cdd
16 changed files with 30 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.zip Normal file
View File

Binary file not shown.

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title> <title>人口看板</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

BIN
public/assets/imgs/bottom-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

BIN
public/assets/imgs/circle-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

4
src/App.vue
View File

@ -39,12 +39,12 @@ import ModuleBottom from './module/ModuleBottom.vue';
.main .main
width 100% width 100%
height 100% height 100%
background-image url('assets/imgs/bg.png') background-image url(/assets/imgs/bg.png)
background-size 100% 120% background-size 100% 120%
background-position center background-position center
.main-title .main-title
height 100px height 100px
background-image url(assets/imgs/title-bg.png) background-image url(/assets/imgs/title-bg.png)
background-size 100% 100% background-size 100% 100%
position relative position relative
div div

2
src/components/card/CardTwoCount.vue
View File

@ -37,7 +37,7 @@ const props = defineProps({
.container .container
width 360px width 360px
height 180px height 180px
background-image url(assets/imgs/card/bg8.png) background-image url(/assets/imgs/card/bg8.png)
background-size 100% 100% background-size 100% 100%
background-repeat no-repeat background-repeat no-repeat
position relative position relative

2
src/components/card/PersonCount1.vue
View File

@ -20,7 +20,7 @@ const props = defineProps({
.container .container
width 140px width 140px
height 80px height 80px
background-image url(assets/imgs/card/bg5.png) background-image url(/assets/imgs/card/bg5.png)
background-repeat no-repeat background-repeat no-repeat
background-size 100% 40% background-size 100% 40%
background-position bottom background-position bottom

1
src/components/circle/CircleWave.vue
View File

@ -38,5 +38,6 @@ const color = ref(props.color);
<style lang="stylus" scoped> <style lang="stylus" scoped>
.circle-wave .circle-wave
.svg .svg
opacity 0.8
filter drop-shadow(0 0 5px v-bind(color)) filter drop-shadow(0 0 5px v-bind(color))
</style> </style>

9
src/module/ModuleBottom.vue
View File

@ -62,7 +62,7 @@ const axios = inject('axios');
onMounted(() => { onMounted(() => {
axios.get(`app/query/sqlrelease/q2972694`, {}).then(res => { axios.get(`app/query/sqlrelease/q2972694`, {}).then(res => {
let data = res.data; 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.value = data.list[0].value;
personData.lnr.process = (data.list[0].value / total).toFixed(2); personData.lnr.process = (data.list[0].value / total).toFixed(2);
personData.lnr.percent = (data.list[0].value / total * 100).toFixed(2); personData.lnr.percent = (data.list[0].value / total * 100).toFixed(2);
@ -90,13 +90,18 @@ onMounted(() => {
.module-card3 .module-card3
.module-container .module-container
display flex display flex
background-image url(assets/imgs/card/bg9.png)
.left .left
width 550px width 550px
height 200px height 200px
background-image url(/assets/imgs/bottom-bg.png)
background-size 100%
position relative position relative
.circle-container .circle-container
transform scale(0.4) transform scale(0.4)
background-image url(/assets/imgs/circle-bg.png)
background-size 128% 100%
background-position center
padding 5px
position absolute position absolute
top 10px top 10px
left 10px left 10px

14
src/module/ModuleCenter.vue
View File

@ -7,9 +7,9 @@
<PersonPercent id="manPercent" class="item" :value="manCount"/> <PersonPercent id="manPercent" class="item" :value="manCount"/>
<PersonPercent id="womenPercent" class="item" type="women" :value="womenCount"/> <PersonPercent id="womenPercent" class="item" type="women" :value="womenCount"/>
<CardTwoCount id="cardTwoCount" class="item" :data="populstionTypeData" /> <CardTwoCount id="cardTwoCount" class="item" :data="populstionTypeData" />
<img id="xtlIcon" class="stree-icon" src="assets/imgs/icon/xtl.png"> <img id="xtlIcon" class="stree-icon" :src="icons.xtl">
<img id="mxlIcon" class="stree-icon" src="assets/imgs/icon/mxl.png"> <img id="mxlIcon" class="stree-icon" :src="icons.mxl">
<img id="wsqIcon" class="stree-icon" src="assets/imgs/icon/wsq.png"> <img id="wsqIcon" class="stree-icon" :src="icons.wsq">
</div> </div>
</template> </template>
@ -19,6 +19,12 @@ import PersonPercent from '../components/card/PersonPercent.vue';
import CardCount1 from '../components/card/CardCount1.vue'; import CardCount1 from '../components/card/CardCount1.vue';
import CardTwoCount from '../components/card/CardTwoCount.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 axios = inject('axios');
const keyCount = reactive({ const keyCount = reactive({
@ -94,7 +100,7 @@ axios.get(`app/query/sqlrelease/qdf8f806`, {}).then(res => {
.module-center .module-center
width 800px width 800px
height 600px 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-size 100% 400px
background-repeat no-repeat background-repeat no-repeat
position relative position relative

2
src/module/ModuleLeft1.vue
View File

@ -33,5 +33,5 @@ axios.get(`app/query/sqlrelease/q419513e`, {}).then(res => {
<style lang="stylus" scoped> <style lang="stylus" scoped>
// .module // .module
// .bar-spike // .bar-spike
// background-image url(assets/imgs/card/bg9.png) // background-image url(/assets/imgs/card/bg9.png)
</style> </style>

2
src/module/ModuleRight1.vue
View File

@ -35,5 +35,5 @@ axios.get(`app/query/sqlrelease/q2c03064`, {}).then(res => {
<style lang="stylus" scoped> <style lang="stylus" scoped>
// .module // .module
// .bar // .bar
// background-image url(assets/imgs/card/bg9.png) // background-image url(/assets/imgs/card/bg9.png)
</style> </style>

4
src/module/ModuleRight3.vue
View File

@ -15,7 +15,7 @@ const axios = inject('axios');
const keyCount = ref(0); const keyCount = ref(0);
const pie3dData = reactive([]); const pie3dData = reactive([]);
axios.get(`app/query/sqlrelease/qaf6b78b`, {}).then(res => { axios.get(`app/query/sqlrelease/qe41cc66`, {}).then(res => {
let data = res.data; let data = res.data;
data.forEach(item => { data.forEach(item => {
pie3dData.push(item) pie3dData.push(item)
@ -30,5 +30,5 @@ axios.get(`app/query/sqlrelease/qaf6b78b`, {}).then(res => {
<style lang="stylus" scoped> <style lang="stylus" scoped>
// .module // .module
// .pie-3d // .pie-3d
// background-image url(assets/imgs/card/bg9.png) // background-image url(/assets/imgs/card/bg9.png)
</style> </style>

2
src/module/card/ModuleCard1.vue
View File

@ -37,7 +37,7 @@ const bodyH = ref(`${props.w / 2}px`);
position relative position relative
.module-card-title .module-card-title
height v-bind(titleH) 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-size auto 100%
background-repeat no-repeat background-repeat no-repeat
background-position left background-position left

2
src/module/card/ModuleCard2.vue
View File

@ -37,7 +37,7 @@ const bodyH = ref(`${props.w / 2}px`);
position relative position relative
.module-card-title .module-card-title
height v-bind(titleH) 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-size auto 100%
background-repeat no-repeat background-repeat no-repeat
background-position right background-position right

2
src/module/card/ModuleCard3.vue
View File

@ -37,7 +37,7 @@ const bodyH = ref(`${props.w / 4}px`);
position relative position relative
.module-card-title .module-card-title
height v-bind(titleH) 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-size auto 100%
background-repeat no-repeat background-repeat no-repeat
background-position center background-position center