sheyang
/
sheyangCoastalSystem
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新

Browse Source
dev^2
独树的风 1 year ago
parent f904028c4f
commit a9701a7391
2 changed files with 238 additions and 242 deletions
Show Stats Download Patch File Download Diff File

209
src/views/coastalMap/components/actualBuilding.vue
Unescape View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<!-- 房屋小图标标题 --> <!-- 房屋小图标标题 -->
<div class="house_icon_title"> <div class="house_icon_title">
<div class="house_icon_title_box"></div> <div class="house_icon_title_box"></div>
<div class="house_text">实有房屋</div> <div class="house_text">实有房屋</div>
@ -21,7 +21,7 @@
></div> ></div>
</div> </div>
</div> </div>
<!-- 出租房，群组房 --> <!-- 出租房，群组房 -->
<div class="icon_bottom_flex"> <div class="icon_bottom_flex">
<div class="icon_bottom1"> <div class="icon_bottom1">
<div class="icon_buttom1_text">出租房</div> <div class="icon_buttom1_text">出租房</div>
@ -32,24 +32,24 @@
<div class="icon_bottom2_number">3</div> <div class="icon_bottom2_number">3</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name:'ActualBuilding', name: 'ActualBuilding',
data(){ data() {
return{ return {
iconlist: [ iconlist: [
{ id: '1', name: '住宅', number: '35' }, { id: '1', name: '住宅', number: '35' },
{ id: '2', name: '商铺', number: '0' }, { id: '2', name: '商铺', number: '0' },
{ id: '3', name: '商住两用', number: '2' }, { id: '3', name: '商住两用', number: '2' },
{ id: '4', name: '空置', number: '27' } { id: '4', name: '空置', number: '27' }
], ]
} }
}, },
methods:{ methods: {
back_change(id) { back_change(id) {
console.log(id, 'lll') console.log(id, 'lll')
switch (id) { switch (id) {
case '1': case '1':
@ -61,109 +61,108 @@
case '4': case '4':
return `url(${require('@/assets/house-hza/bg15.png')})` return `url(${require('@/assets/house-hza/bg15.png')})`
} }
},
}
} }
}
}
</script> </script>
<style lang="scss" > <style lang="scss">
.house_icon_title { .house_icon_title {
width: 18vw; width: 18vw;
height: 3.5vh; height: 3.5vh;
// background-color: #fff; // background-color: #fff;
margin-left: 1vw;
margin-top: 1vh;
display: flex;
.house_icon_title_box {
width: 1vw;
height: 2vh;
background-image: url(@/assets/house-hza/bg17.png);
background-size: 100% 100%;
}
.house_text {
width: 5vw;
color: antiquewhite;
margin-left: 1vw; margin-left: 1vw;
margin-top: 1vh; font-size: 16px;
display: flex; font-weight: 700;
.house_icon_title_box { // background-color: orange;
width: 1vw;
height: 2vh;
background-image: url(@/assets/house-hza/bg17.png);
background-size: 100% 100%;
}
.house_text {
width: 5vw;
color: antiquewhite;
margin-left: 1vw;
font-size: 16px;
font-weight: 700;
// background-color: orange;
}
.house_icon_number {
height: 2.5vh;
width: 4vw;
margin-left: 9vw;
// background-color: pink;
color: #00f5ff;
}
} }
.house_icon_number {
height: 2.5vh;
width: 4vw;
margin-left: 9vw;
// background-color: pink;
color: #00f5ff;
}
}
.icon_bottom_flex { .icon_bottom_flex {
display: flex;
margin-left: 1vw;
// margin-top: 1vh;
color: #fff;
.icon_bottom1 {
display: flex; display: flex;
margin-left: 1vw; padding-left: 2.5vw;
// margin-top: 1vh; width: 8.5vw;
color: #fff; height: 4vh;
.icon_bottom1 { background-image: url(@/assets/house-hza/bg-1.png);
display: flex; background-size: 100% 100%;
padding-left: 2.5vw; padding-top: 1vh;
width: 8.5vw; .icon_bottom1_number {
height: 4vh; margin-left: 2vw;
background-image: url(@/assets/house-hza/bg-1.png);
background-size: 100% 100%;
padding-top: 1vh;
.icon_bottom1_number {
margin-left: 2vw;
}
}
.icon_bottom2 {
display: flex;
padding-left: 2.5vw;
width: 8.5vw;
height: 4vh;
background-image: url(@/assets/house-hza/bg-22.png);
background-size: 100% 100%;
margin-left: 1vw;
padding-top: 1vh;
.icon_bottom2_number {
margin-left: 2vw;
}
} }
} }
.house_icon_box_for { .icon_bottom2 {
display: flex; display: flex;
height: 11vh; padding-left: 2.5vw;
width: 18vw; width: 8.5vw;
height: 4vh;
background-image: url(@/assets/house-hza/bg-22.png);
background-size: 100% 100%;
margin-left: 1vw; margin-left: 1vw;
// background-color: orange; padding-top: 1vh;
// margin-top: 1vh; .icon_bottom2_number {
.house_icon_box { margin-left: 2vw;
}
}
}
.house_icon_box_for {
display: flex;
height: 11vh;
width: 18vw;
margin-left: 1vw;
// background-color: orange;
// margin-top: 1vh;
.house_icon_box {
width: 4vw;
margin-right: 1vw;
width: 4vw;
margin-right: 1vw;
// background-color: #fff; // background-color: #fff;
text-align: center; text-align: center;
.house_number { .house_number {
width: 1.5vw; width: 1.5vw;
margin-left: 1vw; margin-left: 1vw;
height: 3vh; height: 3vh;
// background-color: pink; // background-color: pink;
font-family: D-DIN Bold; font-family: D-DIN Bold;
color: #e5f5f9; color: #e5f5f9;
font-size: 1.3rem; font-size: 1.3rem;
} }
.house_title { .house_title {
// background-color: pink; // background-color: pink;
margin-top: 0.5vh; margin-top: 0.5vh;
font-size: 0.7rem; font-size: 0.7rem;
color: #cbd2d7; color: #cbd2d7;
} }
.house_icon { .house_icon {
width: 3.5vw; width: 3.5vw;
height: 6vh; height: 6vh;
// background-color: blue; // background-color: blue;
background-size: 100% 100%; background-size: 100% 100%;
margin-top: 0.5vh; margin-top: 0.5vh;
}
} }
} }
</style> }
</style>

271
src/views/coastalMap/components/actualPeople.vue
Unescape View File

@ -1,14 +1,14 @@
<template> <template>
<div> <div>
<div class="people_title"> <div class="people_title">
<div class="people_icon"></div> <div class="people_icon"></div>
<div class="people_text">实有人口</div> <div class="people_text">实有人口</div>
</div> </div>
<!-- echarts --> <!-- echarts -->
<div class="people_echarts"> <div class="people_echarts">
<div class="echarts_icon"></div> <div class="echarts_icon"></div>
<div class="people_type"> <div class="people_type">
<div class="people_type_list">人户一致</div> <div class="people_type_list">人户一致</div>
<div class="type_number">51</div> <div class="type_number">51</div>
</div> </div>
@ -31,9 +31,8 @@
<div class="people_type5"> <div class="people_type5">
<div class="people_type_list">关爱人员</div> <div class="people_type_list">关爱人员</div>
<div class="type_number">51</div> <div class="type_number">51</div>
</div> </div>
<div class="list_number">80</div> <div class="list_number">80</div>
<div class="list_number_text">总数</div> <div class="list_number_text">总数</div>
</div> </div>
@ -55,148 +54,146 @@
<div class="people1_number">5</div> <div class="people1_number">5</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name:"ActualPeople" name: 'ActualPeople'
} }
</script> </script>
<style lang="scss" > <style lang="scss">
.people_title {
.people_title { width: 18vw;
width: 18vw; height: 3.5vh;
height: 3.5vh; // background-color: #fff;
// background-color: #fff; margin-left: 1vw;
margin-left: 1vw; margin-top: 1vh;
margin-top: 1vh; display: flex;
display: flex; .people_icon {
.people_icon { width: 1vw;
width: 1vw; height: 2.2vh;
height: 2.2vh; background-image: url(@/assets/house-hza/bg17.png);
background-image: url(@/assets/house-hza/bg17.png); background-size: 100% 100%;
background-size: 100% 100%;
// background-color: pink;
margin-top: 0.5vh;
}
.people_text {
color: antiquewhite;
margin-left: 1vw;
font-size: 16px;
font-weight: 700;
line-height: 3.5vh;
text-shadow: 0px 0px 10px #0b4672;
letter-spacing: 2px;
// background-color: orange;
}
}
.people_echarts {
width: 18vw;
height: 15vh;
// background-color: pink; // background-color: pink;
margin-top: 0.5vh;
}
.people_text {
color: antiquewhite;
margin-left: 1vw; margin-left: 1vw;
margin-top: 1vh; font-size: 16px;
position: relative; font-weight: 700;
color: #ffffff; line-height: 3.5vh;
font-size: 10px; text-shadow: 0px 0px 10px #0b4672;
letter-spacing: 2px;
// background-color: orange;
}
}
.people_echarts {
width: 18vw;
height: 15vh;
// background-color: pink;
margin-left: 1vw;
margin-top: 1vh;
position: relative;
color: #ffffff;
font-size: 10px;
.echarts_icon { .echarts_icon {
height: 15vh; height: 15vh;
width: 10.5vw; width: 10.5vw;
background-image: url(@/assets/house-hza/bg11.png); background-image: url(@/assets/house-hza/bg11.png);
background-size: 100% 100%; background-size: 100% 100%;
margin-left: 4vw; margin-left: 4vw;
} }
.people_type { .people_type {
width: 3.2vw; width: 3.2vw;
height: 5vh; height: 5vh;
// background-color: #fff; // background-color: #fff;
position: absolute; position: absolute;
top: 0; top: 0;
.people_type_list{ .people_type_list {
font-size: 10px; font-size: 10px;
}
}
.people_type1 {
position: absolute;
top: 5vh;
}
.people_type2 {
position: absolute;
top: 11vh;
}
.people_type3 {
position: absolute;
top: 0;
right: 0;
}
.people_type4 {
position: absolute;
top: 5vh;
right: 0;
}
.people_type5 {
position: absolute;
top: 11vh;
right: 0;
}
.list_number {
// background-color: #fff;
position: absolute;
top: 0;
font-size: 24px;
left: 8.2vw;
top: 5vh;
}
.list_number_text {
// background-color: #fff;
position: absolute;
top: 0;
left: 8.3vw;
top: 8.5vh;
font-size: 12px;
} }
} }
.people_bottom { .people_type1 {
width: 18vw; position: absolute;
top: 5vh;
}
.people_type2 {
position: absolute;
top: 11vh;
}
.people_type3 {
position: absolute;
top: 0;
right: 0;
}
.people_type4 {
position: absolute;
top: 5vh;
right: 0;
}
.people_type5 {
position: absolute;
top: 11vh;
right: 0;
}
.list_number {
// background-color: #fff;
position: absolute;
top: 0;
font-size: 24px;
left: 8.2vw;
top: 5vh;
}
.list_number_text {
// background-color: #fff;
position: absolute;
top: 0;
left: 8.3vw;
top: 8.5vh;
font-size: 12px;
}
}
.people_bottom {
width: 18vw;
height: 4vh;
// background-color: orange;
margin-left: 1vw;
display: flex;
justify-content: space-between;
margin-top: 1vh;
.people1 {
width: 5.5vw;
height: 4vh; height: 4vh;
// background-color: orange; // background-color: #fff;
margin-left: 1vw; background-image: url(@/assets/house-hza/bg-6.png);
background-size: 100% 100%;
text-align: center;
display: flex; display: flex;
justify-content: space-between; .people1_text {
margin-top: 1vh; font-size: 0.8rem;
.people1 { margin-top: 1vh;
width: 5.5vw; margin-left: 0.2vw;
height: 4vh; color: #ffffff;
// background-color: #fff; }
background-image: url(@/assets/house-hza/bg-6.png); .people1_number {
background-size: 100% 100%; margin-left: 0.8vw;
text-align: center; margin-top: 0.5vh;
display: flex; font-size: 1.3rem;
.people1_text { color: #ffffff;
font-size: 0.8rem; }
margin-top: 1vh;
margin-left: 0.2vw;
color: #ffffff;
}
.people1_number {
margin-left: 0.8vw;
margin-top: 0.5vh;
font-size: 1.3rem;
color: #ffffff;
}
.dit { .dit {
width: 0.3vw; width: 0.3vw;
height: 0.6vh; height: 0.6vh;
border-radius: 50%; border-radius: 50%;
background-color: #00f5ff; background-color: #00f5ff;
margin-top: 0.8vw; margin-top: 0.8vw;
margin-left: 0.5vw; margin-left: 0.5vw;
}
} }
} }
</style> }
</style>

Write Preview
Loading…
Cancel
Save