<template>
    <div class="ht-base-page-header-artical-demo" style="overflow-x: scroll">
        <ht-base-page-header-artical v-bind="formData" style="width: 710px;">
            <template slot="content">
                <div class="content" style="padding-top: 12px;">
                    <div class="ht-typography" v-for="(i,index) in contentArray" :key="index">
                        {{i}}
                    </div>
                    <p class="contentLink">
                        <a v-for="(item,index) in contentLinkArray" :key="index" @click="articalFun(index)">
                            <ht-base-icon :type='item.iconType' style="width: 16px;height: 16px;" />
                            {{item.linkText}}
                        </a>
                    </p>
                </div>
                <div class="extraContent">
                    <img src="http://39.106.250.14:8082/base-components/static/pageHeader.png" alt="content" style="width:196px;height:144px">
                </div>
            </template>
        </ht-base-page-header-artical>
    </div>
</template>

<script>
  export default {
    name: 'HtBasePageHeaderArticalDemo',
      data(){
          return {
              formData:{
                  breadcrumbArray:[{
                      to:'/',
                      text:'首页'
                  },{
                      to:'/components/breadcrumb',
                      text:'文章列表'
                  },{
                      to:'',
                      text:'文章正文'
                  }],
                  title:'设计理念',
                  subTitle:'Design Idea',
              },
              contentArray:[
                  '在天源迪科产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，给设计师和工程师带来很多困扰和重复建设，大大降低了产品的研发效率。我们用户体验部经过大量的项目实践和总结，沉淀出一个天源迪科设计规范。旨在统一天源迪科项目的前端 UI 设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源。',
                  '本规范是一个致力于提升『用户』和『设计者』使用体验的设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行 UE 设计和 UI 设计人员统称为『设计者』，利用统一的规范进行设计赋能，全面提高天源迪科产品体验和研发效率。'
              ],
              contentLinkArray:[
                  {
                      iconType:'LiRa_release',
                      linkText:'发布文章'
                  },   {
                      iconType:'LiRa_edit',
                      linkText:'编辑文章'
                  },   {
                      iconType:'LiRa_delete',
                      color:'red',
                      linkText:'删除文章'
                  }
              ]
          }
      },
      methods:{
          articalFun(index){

          }
      }
  }
</script>
<style>
    .ht-base-page-header-artical-demo {

    }
</style>

