<template>
  <div class="work">
    <work-item v-for="(item, index) in classifylist" :key="index">
      <span slot="title">{{ item.name }}</span>
      <span slot="countsum" class="count">{{ item.quantity }}</span>

      <div class="second-context">
        <div v-for="(item, index) in item.children" class="second" :key="index">
          <span slot="title1">{{ item.name }}</span>
          <span slot="titlecount1" class="count">{{ item.quantity }}</span>
        </div>
      </div>
    </work-item>
  </div>
</template>

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

export default {
  name: "work",
  components: {
    workItem,
  },
  props: {
    // 一级分类
    classifylist: {
      type: Array,
      default() {
        return [];
      },
    },
    // 二级分类
    // classifyNEXTlist: {
    //   type: Array,
    //   default() {
    //     return [];
    //   },
    // },
  },
  computed: {},
};
</script>

<style scoped>
.second-context {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.title-ba {
  display: flex;
}
.second {
  line-height: 15vw;
  height: auto;
  margin-right: 1vw;
}
.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;
}
.Snd_type {
  line-height: 15vw;
}
</style>