epmet-work-pc/src/views/dataBoard/overview/components/sq12345.vue

<template>
  <div class="m-subbox m-sq12345">
    <div class="table">
      <div class="tr">
        <div class="th">排名</div>
        <div class="th">社区</div>
        <div class="th">事件数</div>
        <div class="th">处理中</div>
        <div class="th">已办结</div>
      </div>
      <div class="tr" v-for="item in pmList" :key="item.num">
        <div :class="item.num < 4 ? `td tdbg${item.num}` : 'td'">
          {{ item.num }}
        </div>
        <div class="td">{{ item.shequ }}</div>
        <div class="td">{{ item.fwgxs }}</div>
        <div class="td td-or">{{ item.rkgxs }}</div>
        <div class="td td-gr">{{ item.rfgxzs }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "sq12345",
  data() {
    return {
      value2: "2023-02",
      pmList: [
        {
          num: "1",
          shequ: "XX社区",
          fwgxs: "350",
          rkgxs: "12",
          rfgxzs: "410",
        },
        {
          num: "2",
          shequ: "XX社区",
          fwgxs: "350",
          rkgxs: "12",
          rfgxzs: "410",
        },
        {
          num: "3",
          shequ: "XX社区",
          fwgxs: "350",
          rkgxs: "12",
          rfgxzs: "410",
        },
        {
          num: "4",
          shequ: "XX社区",
          fwgxs: "350",
          rkgxs: "12",
          rfgxzs: "410",
        },
        {
          num: "5",
          shequ: "XX社区",
          fwgxs: "350",
          rkgxs: "12",
          rfgxzs: "410",
        },
        {
          num: "6",
          shequ: "XX社区",
          fwgxs: "350",
          rkgxs: "12",
          rfgxzs: "410",
        },
      ],
    };
  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/dataBoard/overview/index.scss"
  scoped
></style>