<template>
  <div class="listTable">
    <div class="listTile">
      <div class="item" v-for="item of data.title" :key="item">
        {{ item }}
      </div>
    </div>
    <div class="listItem" v-for="item of data.listContent" :key="item">
      <div class="item" v-for="itemText of item" :key="itemText">
        {{ itemText }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ListTable",
  props: {
    data: Object,
  },
  setup(props, ctx) {
    console.log(props.data);
  },
};
</script>

<style lang="scss" scoped>
.listTable {
  width: 100%;
  border: 1px solid silver;
  padding: 0 10px;
  .listTile{
    border-bottom: 1px solid silver;
    padding-bottom: 5px;
  }
  .listTile,
  .listItem {
    display: flex;
    margin:  10px 0;
    .item:nth-of-type(1) {
      width: 120px;
    }
    .item:nth-of-type(2) {
      width: 300px;
    }
    .item:nth-of-type(3) {
      width: 100px;
    }
    .item:nth-of-type(4) {
      width: 120px;
    }
  }
}
</style>