real3d-portalsite/src/views/farmlandProtection/components/statistics.vue

<template>
  <div class="statistics">
    <div class="echartTitle">
      <div class="block-title">{{ title }}</div>
    </div>
    <div class="cityList" :style="{ height: height + 'px' }">
      <div class="listCon" v-for="(item,i) in cityList" :key="i">
        <div class="listArea">
          <span>天涯区</span>
          <span>48.73km²</span>
        </div>
        <div class="listItem">
          <div class="itemBg"></div>
        </div>
        <div class="listNum">
          <span>图斑数152个</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
    },
    height: {
      type: Number,
    },
    cityList: {
      type: Array,
    },
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  mounted() {},
  methods: {},
  watch: {},
  watch: {},
  beforeDestroy() {},
};
</script>

<style lang="less" scoped>
.statistics {
  .cityList {
    width: 100%;
    // background: rgba(255, 192, 203, 0.445);
    overflow: hidden;
    overflow-y: auto;
    .listCon {
      width: 100%;
      height: 55px;
    //   background: rgba(152, 251, 152, 0.685);
      margin: 5px 0px;
      .listArea{
        width: 365px;
        display: flex;
        justify-content: space-between;
      }
      .listItem {
        width: 365px;
        height: 10px;
        background: inherit;
        background-color: rgba(242, 242, 242, 0.43921568627451);
        border: none;
        border-radius: 85px;
        box-shadow: none;
        margin-bottom: 3px;
        .itemBg {
          width: 233px;
          height: 100%;
          background-color: rgba(30, 159, 255, 1);
          border: none;
          border-radius: 85px;
        }
      }
      .listNum {
      font-size: 11px;
      color: #fff;
      text-align: left;
    }
    }

  }
}
</style>