jyyqfk_zjd/src/views/Poice/children/work.vue

<template>
  <div class="work">
    <work-item>
      <span slot="title">流调工作组</span>
      <span slot="countsum" class="count">1</span>

      <span slot="title1">国家级</span>
      <span slot="titlecount1" class="count">1</span>

      <span slot="title2">省级</span>
      <span slot="titlecount2" class="count">1</span>

      <span slot="title3">市级</span>
      <span slot="titlecount3" class="count">1</span>

      <span slot="title4">县级</span>
      <span slot="titlecount4" class="count">1</span>
    </work-item>

    <work-item v-for="(item, index) in classifylist" :key="index">
      <span slot="title">{{ item.name }}</span>
      <span slot="countsum" class="count">{{ item.quantity }}</span>
      <span slot="title1">国家级</span>
      <span slot="titlecount1" class="count">1</span>

      <span slot="title2">省级</span>
      <span slot="titlecount2" class="count">1</span>

      <span slot="title3">市级</span>
      <span slot="titlecount3" class="count">1</span>

      <span slot="title4">县级</span>
      <span slot="titlecount4" class="count">1</span>
      <!-- <div class="second-context">
        <div class="second" >
          <div>
            <span slot="title4"></span>
            <span slot="titlecount4" class="count"></span>
          </div>
        </div>
      </div> -->
    </work-item>
  </div>
</template>

<script>
// 导入子组件
import workItem from "./workItem.vue";

export default {
  name: "work",
  components: {
    workItem,
  },
  props: {
    classifylist: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  computed:{

  }
};
</script>

<style scoped>
.second-context {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.title-ba {
  display: flex;
}
.second {
  display: flex;
  justify-content: space-around;
  line-height: 15vw;
  height: auto;
  margin-right: 1vw;
  margin-left: 4vw;
}
.count {
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  background-color: #1677ff;
  padding-left: 1vw;
  padding-right: 1vw;
  color: #fff;
  margin-left: 1vw;
  margin-right: 0vw;
}
</style>