<style>
    .infoSquareFrameNav{
        width:271px;
        height:70px;
        float:left;
        border-radius: 5px;
        box-shadow: 3px 3px 3px rgb(204,204,204);
    }
    .infoSquareFrameNavBlockLeft{
        width:135.5px;
        height:70px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        float:left;
        color:black;
    }
    .infoSquareFrameNavBlockRight{
        width:135.5px;
        height:70px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        float:left;
        color:black;
    }
    .infoSquareFrameSecongImg{
        width: 30px;
        height: 30px;
        display: inline-block;
        margin-top: 5px;
        margin-left: 6px;
    }
</style>
    <div id="${id}-info" class="infoSquareFrameNav ${class!}" <#if style??> style="${style}" </#if>>
      <div id=${id}>
      </div>
    </div>
<script>

    ${hlsDataSource}.fetch(function(datas){
        var config = ${config};
        config.hlsDataSource = datas;
        ${id} = new HlsInfoSquareFrame();
        ${id}._init(config);
    });
</script>