96 lines
2.0 KiB
Vue
96 lines
2.0 KiB
Vue
<template>
|
||
<div style="display: flex;justify-content: space-between;align-items: center;">
|
||
<span>种植总面积: </span>
|
||
<div>
|
||
<span class="area-num " v-for="item in plantData.totalArea"><span class="color-font">{{ item }}</span> </span>
|
||
</div>
|
||
</div>
|
||
<div style="">种植种类:</div>
|
||
<div>
|
||
<div class="lands">
|
||
<div class="land" v-for="(item, index) in plantData.plantKindList" :key="index">{{ item.kind }}</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {areaPlantTypeCountApi} from "@/api.js"
|
||
import {ref,reactive} from "vue"
|
||
|
||
let plantData=reactive({
|
||
totalArea:0,
|
||
plantKindList:[]
|
||
|
||
|
||
})
|
||
// api/dataview.land/areaPlantTypeCount?areaCode=510521&streetCode=510521100
|
||
areaPlantTypeCountApi(
|
||
{
|
||
areaCode:510521,
|
||
streetCode:510521100,
|
||
land_id:12
|
||
}
|
||
).then(res=>{
|
||
for (let key in res.data){
|
||
plantData[key]=res.data[key]
|
||
}
|
||
plantData.totalArea=plantData.totalArea.toString()
|
||
|
||
})
|
||
|
||
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.area-num {
|
||
margin-right: 10px;
|
||
width: 35px;
|
||
height: 40px;
|
||
background-image: url("/static/detail/numbg.png");
|
||
display: inline-block;
|
||
background-size: 100% 100%;
|
||
font-size: 30px;
|
||
text-align: center;
|
||
}
|
||
|
||
|
||
.lands {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
height: 100%;
|
||
// justify-content: space-between;
|
||
font-size: 14px;
|
||
overflow-y: auto;
|
||
margin-top: 1vh;
|
||
height: 15vh;
|
||
flex-wrap: wrap;
|
||
|
||
.land {
|
||
width: 5vw;
|
||
height: 3vh;
|
||
// background-color: #fff;
|
||
background-image: url('/static/detail/ZL.png');
|
||
background-size: 100% 100%;
|
||
color: white;
|
||
text-align: center;
|
||
line-height: 3vh;
|
||
margin-right: 10px;
|
||
|
||
|
||
}
|
||
}
|
||
|
||
.lands::-webkit-scrollbar {
|
||
width: 10px;
|
||
background-color: #153041;
|
||
}
|
||
|
||
.lands::-webkit-scrollbar-track {
|
||
background-color: #153041;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background-color: #15A1DC;
|
||
border-radius: 5px;
|
||
}
|
||
</style> |