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

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

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

Write Preview
Loading…
Cancel
Save