<template>
  <l-detail tit="自定义内容">
    <table>
      <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
      </tr>
    </table>
  </l-detail>
  <l-detail
    data-theme="light"
    tit="详情信息"
    :details="details"
    @click="click"
    :cols="2"
  ></l-detail>
  <l-detail
    data-theme="dark"
    :details="details"
    :cols="2"
    @click="click"
  ></l-detail>
</template>
<script>
export default {
  data() {
    return {
      tit: "详情",
      details: [
        {
          label: "label1",
          val: "val1val1val1val1val1val1val1val1val1val1val1val1val1",
          clickable: true,
        },
        {
          label: "label2",
          val: "val2",
        },
        {
          label: "label3",
          val: "val3",
          clickable: true,
        },
        {
          label: "label4",
          val: "val4",
        },
      ],
    };
  },
  methods: {
    click(item) {
      console.log(item);
    },
  },
};
</script>
<style>
.l-detail-box {
  margin-bottom: 20px;
}
</style>