<style>
    .title {
        padding: 10px 0;
    }

    .btn {
        margin-bottom: 10px;
    }

    .demo-page {
        padding: 10px;
    }
</style>
<div class="demo-page blk-page">
    {{# content}}
        <p class="title">1.复选按钮</p>
        {{#each checkbox}}
            {{> checkbox}}
            <br><br>
        {{/each}}

        <p class="title">2.单选按钮</p>
        {{#each radio}}
            {{> radio}}
            <br><br>
        {{/each}}

        <p class="title">3. 按钮</p>
        <span class="btn">普通按钮</span>
        <span class="btn disable">不可点按钮</span>
        <span class="btn red">红色按钮</span>
        <span class="btn white">白色按钮</span>
        
        <p class="title">4. 提示文字或者某些链接文字颜色</p>
        <span class="blue">提示文字</span>
        <a class="blue">Link text</a>
    
        <p class="title">5. input</p>
        <input class="input" type="text">

        <p class="bold title">6.文字加粗</p>

        <p class="title">7. 浮动和clearfix</p>
        <div class="clearfix" style="width: 300px;border: 1px solid #000;">
            <p class="left">左浮动</p>
            <p class="right">右浮动</p>
        </div>

        <p class="title">8. 显示和隐藏</p>
        <div style="border: 1px solid #000;">
            <p><span class="hide">我是存在的</span>(左边有个家伙消失啦)</p>
            <p><span class="block">我是block</span></p>
            <p><span class="inline-block" style="height: 30px;border:1px solid #f00;">我是inline-block，我原本是inline元素，现在可以设置高度了</span></p>
            <p><span class="vhide">我是存在的</span>(左边有个家伙隐身了)</p>
        </div>
    
        <p class="title">9. 分页组件</p>
        <div style="border: 1px solid #000; height: 40px; padding: 5px;">
           {{{ pagination paginationOpts }}}
        </div>

        <p class="title">10. 商品信息</p>
        {{# goods}}
            {{> goods}}
        {{/ goods}}
    {{/ content}}
</div>