<template>
  <div class="workItem">
    <div class="title">
      <slot name="title"></slot>
      <slot name="countsum"></slot>
    </div>
    <div class="message-bt">
      <div><slot name="title1"></slot> <slot name="titlecount1"></slot></div>
      <div><slot name="title2"></slot><slot name="titlecount2"></slot></div>
      <div><slot name="title3"></slot><slot name="titlecount3"></slot></div>
      <div><slot name="title4"></slot><slot name="titlecount4"></slot></div>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "workItem",
};
</script>

<style scoped>
.workItem {
  height: auto;
  background-color: #fff;
  border-radius: 2vw;
  margin-top: 4vw;
}
.title {
  line-height: 15vw;
  height: 15vw;
  font-size: 16px;
  border-bottom: 1px solid #d8d8d8;
  padding-left: 5vw;
}
.message-bt {
  display: flex;
  justify-content: space-around;
  line-height: 15vw;
  height: auto;
}
</style>