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" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
<title>人口看板</title>
</head>
<body>
<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
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

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

@ -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

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

@ -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

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

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

9
src/module/ModuleBottom.vue
View File

@ -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

14
src/module/ModuleCenter.vue
View File

@ -7,9 +7,9 @@
<PersonPercent id="manPercent" class="item" :value="manCount"/>
<PersonPercent id="womenPercent" class="item" type="women" :value="womenCount"/>
<CardTwoCount id="cardTwoCount" class="item" :data="populstionTypeData" />
<img id="xtlIcon" class="stree-icon" src="assets/imgs/icon/xtl.png">
<img id="mxlIcon" class="stree-icon" src="assets/imgs/icon/mxl.png">
<img id="wsqIcon" class="stree-icon" src="assets/imgs/icon/wsq.png">
<img id="xtlIcon" class="stree-icon" :src="icons.xtl">
<img id="mxlIcon" class="stree-icon" :src="icons.mxl">
<img id="wsqIcon" class="stree-icon" :src="icons.wsq">
</div>
</template>
@ -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

2
src/module/ModuleLeft1.vue
View File

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

2
src/module/ModuleRight1.vue
View File

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

4
src/module/ModuleRight3.vue
View File

@ -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 => {
<style lang="stylus" scoped>
// .module
// .pie-3d
// background-image url(assets/imgs/card/bg9.png)
// background-image url(/assets/imgs/card/bg9.png)
</style>

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

@ -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

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

@ -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

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

@ -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