plantScreen/src/components/detail/leftTop.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>