<style>
    .kbs_title_box {
        display: flex;
        align-items: center;
    }
    .kbs_title {
        font-size: 18px;
        line-height: 24px;
        color: #333;
        padding: 0;
    }
    .kbs_other {
        margin: 10px 0 15px 0;
    }
    .kbs_other span {
        margin-right: 10px;
    }
    .kbs-content {
        position: relative;
        overflow: hidden;
        word-break: break-all;
        line-height: 1.6;
        font-size: 15px;
        color: #1a1a1a;
        margin: 0 0 15px 0;
        overflow-wrap: break-word;
    }
    .kbs-content img {
        max-width: 100%;
        height: auto !important;
        margin: 5px 0;
        vertical-align: text-bottom;
    }
    .kbs-bottom {
        padding: 10px 0;
        text-align: center;
    }
    .kbs-bottom button {
        min-width: 120px;
    }
    .fs16 {
        font-size: 16px;
    }
    .link-dark {
        color: #11181f;
        text-decoration: none;
    }
    .link-dark:hover {
        color: #11181f;
        text-decoration: underline;
    }
    .data_empty {
        color: #999;
    }
</style>
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="kbs_title_box">
                        <div class="kbs_title col-xs-12 col-md-10">{$kbs.title}</div>
                        <div class="col-md-2 hidden-xs">
                            <a href="{:url('workorder/create')}" class="btn btn-info pull-right"><i class="fa fa-plus"></i> 提交工单</a>
                        </div>
                    </div>
                    <div class="kbs_other text-muted">
                        <span>发布于 {$kbs.createtime}</span>
                        <span><i class="fa fa-eye"></i> {$kbs.views}</span>
                        <span><i class="fa fa-thumbs-o-up"></i> {$kbs.likes}</span>
                    </div>

                    <!--  内容详情  -->
                    <div class="kbs-content" itemprop="text" style="max-height: 9999px;">
                        {$kbs.content}
                    </div>
                    <!--  内容详情end  -->

                    <div class="kbs-bottom">
                        <button data-id="{$kbs.id}" class="btn btn-info btn-lg likes_btn text-sm">
                            <i class="fa fa-thumbs-up"></i> 有帮助(<span>{$kbs.likes}</span>)
                        </button>
                        <button data-id="{$kbs.id}" class="btn btn-primary btn-lg dislikes_btn text-sm">
                            <i class="fa fa-thumbs-down"></i> 没有帮助(<span>{$kbs.dislikes}</span>)
                        </button>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-xs-12 col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title fs16">推荐知识点</h3>
                </div>
                <div class="panel-body">
                    {volist name="rec_kbs" id="item" key="key" empty="<div class='data_empty'>暂时没有数据...</div>"}
                    <div class="media media-number">
                        <div class="media-left">
                            <span class="num text-muted">{$key}</span>
                        </div>
                        <div class="media-body">
                            <a class="link-dark text-muted" href="{$item.url ? $item.url : url('index/workorder/kbs', ['id' => $item.id, 'category' => $category])}" title="{$item.title}">{$item.title}</a>
                        </div>
                    </div>
                    {/volist}
                </div>
            </div>
        </div>
    </div>
</div>