<template>
  <div class="infors">
    <Model title="随县土地类型">
      <div>
        <div class="flex flex1">
          <div>
            <div class="land-title">耕地面积</div>
            <div class="colors">
              171.18
              <span style="font-size: 14px">万亩</span>
            </div>
          </div>
          <div>
            <div class="land-title">园地面积</div>
            <div class="colors">
              19.33
              <span style="font-size: 14px">万亩</span>
            </div>
          </div>
          <div>
            <div class="land-title">林地面积</div>
            <div class="colors">
              518.69
              <span style="font-size: 14px">万亩</span>
            </div>
          </div>
          <div>
            <div class="land-title">草地面积</div>
            <div class="colors">
              1.47
              <span style="font-size: 14px">万亩</span>
            </div>
          </div>
        </div>
      </div>
    </Model>
  </div>
</template>
<script>
import Model from "../model.vue";

export default {
  name: "",
  components: { Model },
  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
.infors {
  margin-top: 10px;
  .flex {
    display: flex;
    width: 100%;
  }

  .flex1 {
    justify-content: space-between;
    // margin-top: 20px;
    flex-wrap: wrap;

    > div {
      width: 113px;
      padding-bottom: 10px;
      background: url("@/assets/image/dkzs_ic2@2x.png") no-repeat center;
      background-size: 100% 100%;
      margin: 0 auto;
      height: 139px;
      text-align: center;
      //   padding-top: 32px;
      //   margin-top: 10px;
      .land-title {
        padding: 5px 0;
        font-size: 14px;
        margin-top: 40px;
      }

      .colors {
        color: #fdaf19;
        font-size: 24px;
        font-weight: bold;
      }
    }
  }
}
</style>
