<template>
    <div class="ht-base-single-row-vertical-demo">
        <ht-base-list item-layout="vertical">
            <ht-base-list-item v-for="item in data" :key="item.title">
                <ht-base-list-item-meta :avatar="item.avatar" :title="item.title" :description="item.description" />
                <p class="demo-list-vertical-content">{{ item.content }}</p>
                <template slot="action">
                    <li>
                        <ht-base-icon type='LiRa_star'/> 123
                    </li>
                    <li>
                        <ht-base-icon type='LiRa_fabulous' /> 234
                    </li>
                    <li>
                        <ht-base-icon type='LiRa_dialogue'/> 345
                    </li>
                </template>
                <div slot="extra" class="demo-list-extra">
                    <img src="http://39.106.250.14:8082/base-components/static/SuCo_picture.png">
                </div>
            </ht-base-list-item>
        </ht-base-list>
    </div>
</template>

<script>
  export default {
    name: 'HtBaseSingleRowVerticalDemo',
      data () {
          return {
              data: [
                  {
                      title: '标题 1',
                      description: '列表详情内容展示区域',
                      avatar: 'http://39.106.250.14:8082/base-components/static/SuCo_user.svg',
                      content: '用户体验设计中心，一直以来负责创新设计，界面视觉，规范评估，原型设计以及与开发一起推动设计的样式实现等用户体验设计工作。根据长久以来的专业实践，对设计的本质和关键要素定义了自己团队的要诀：“专注思维，创新理念，把握细节，微笑沟通”'
                  },
                  {
                      title: '标题 2',
                      description: '列表详情内容展示区域',
                      avatar: 'http://39.106.250.14:8082/base-components/static/SuCo_user.svg',
                      content: '用户体验设计中心，一直以来负责创新设计，界面视觉，规范评估，原型设计以及与开发一起推动设计的样式实现等用户体验设计工作。根据长久以来的专业实践，对设计的本质和关键要素定义了自己团队的要诀：“专注思维，创新理念，把握细节，微笑沟通”'
                  },
                  {
                      title: '标题 3',
                      description: '列表详情内容展示区域',
                      avatar: 'http://39.106.250.14:8082/base-components/static/SuCo_user.svg',
                      content: '用户体验设计中心，一直以来负责创新设计，界面视觉，规范评估，原型设计以及与开发一起推动设计的样式实现等用户体验设计工作。根据长久以来的专业实践，对设计的本质和关键要素定义了自己团队的要诀：“专注思维，创新理念，把握细节，微笑沟通”'
                  }
              ]
          }
      },
  }
</script>
<style lang="less">
    .ht-base-single-row-vertical-demo {
        .demo-list-vertical-content{
            margin-top: 16px;
        }
        .demo-list-extra{
            width: 270px;
            height: 170px;
            border: 1px solid #E4E4E4;
            text-align: center;
            background: #F9FCFF;
            img{
                width: auto;
                height: auto;
                max-width: 100%;
                max-height: 100%;
            }
        }
    }
</style>

