<template>
    <div style="display: flex;justify-content: space-between;align-items: center;">
        <span>种植总面积：</span>
        <div>
            <span class="area-num "><span class="color-font">2</span> </span>
            <span class="area-num "><span class="color-font">2</span> </span>
            <span class="area-num "><span class="color-font">2</span> </span>
            <span class="area-num "><span class="color-font">2</span> </span>
        </div>
    </div>
    <div style="">种植种类：</div>
    <div>
        <div class="lands">
            <div class="land" v-for="(item, index) in 33" :key="index">地块</div>
        </div>
    </div>
</template>
<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;

    .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;

    }
}

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