<template>
    <div class="ht-base-display-two-demo">
        <ht-base-display>
            <template #title>
                <ht-base-title :border=false>一级标题</ht-base-title>
            </template>
            <ht-base-display-item :columns="columns" :title-size="12" :content-size="12">
                <template #title>
                    <ht-base-title border="solid" level="two">二级标题</ht-base-title>
                </template>
            </ht-base-display-item>
            <ht-base-display-item :columns="columns" :title-size="12" :content-size="12">
                <template #title>
                    <ht-base-title border="solid" level="two">二级标题</ht-base-title>
                </template>
            </ht-base-display-item>
        </ht-base-display>
    </div>
</template>

<script>
  export default {
      name: 'HtBaseDisplayTwoDemo',
      data(){
          return {
              columns:[
                  [
                      {
                          title:'详情信息标题1',
                          content:'详细信息内容（单位）'
                      },
                      {
                          title:'详情信息标题2',
                          content:'详细信息内容（单位）2'
                      },
                      {
                          title:'详情信息标题3',
                          content:'详细信息内容（单位）2'
                      }
                  ],
                  [
                      {
                          title:'详情信息标题4',
                          content:'详细信息内容（单位）'
                      },
                      {
                          title:'详情信息标题5',
                          content:'详细信息内容详细信息内容详细信息内容详细信息内容，详细信息内容详细信息内容详细信息内容详细信息内容详细信息内容；详细信息内容详细信息内容。详细信息内容详细信息内容详细信息内容详细信息内容详细信息内容详细信息内容详细信息内容，详细信息内容详细信息内容详细信息内容详细信息内容详细信息内容详细信息内容详细信息内容详细信息内容详细信息内容详细信息内容。'
                      }
                  ],
                  [
                      {
                          title:'详情信息标题6',
                          content:'详细信息内容详细信息内容详细信息内容详细信息内容，详细信息内容详细信息内容详细信息内容详细信息内容详细信息内容；详细信息内容详细信息内容。详细信息内容详细信息内容详细信息内容详细信息内容详细信息内容详细信息内容详细信息内容，详细信息内容详细信息内容详细信息内容详细信息内容详细信息内容详细信息内容详细信息内容详细信息内容详细信息内容详细信息内容。'
                      }
                  ]
              ]
          }
      }
  }
</script>
<style>
    .ht-base-display-two-demo {

    }
</style>

