图片列表_GJ-UI前端组件

发布时间::2018-06-02 22:16:42 已收录 阅读:470次

将将下列html代码复制粘贴在html文件的相应位置即可(可参考组件附带index.html文件中相应的注释说明位置);

图片列表[gul-img1]:

HTML代码:

<div class="gj-wk">
    <div class="gj-bt">
        <h3><i class="fa fa-list-ul" aria-hidden="true"></i> 组件标题</h3>
    </div>
    <div class="gj-body clear gul-img1">
        <div class="gj-lg-4 gj-md-4 gj-sm-4 gj-xs-4">
            <a href="javascript:(0)">
                <div class="img">
                    <img src="images/gjui.jpg" alt="" class="gj-img">
                    <h3>这里是图片的标题部分内容</h3>
                </div>
            </a>
        </div>
        ...
    </div>
</div>

YzmCMS代码:

<div class="gj-wk">
    <div class="gj-bt">
        <h3><i class="fa fa-list-ul" aria-hidden="true"></i> 组件标题</h3>
    </div>
    <div class="gj-body clear gul-img1">
        {m:lists field="title,thumb,url" modelid="1" limit="6"}
        {loop $data $v}
        <div class="gj-lg-4 gj-md-4 gj-sm-4 gj-xs-4">
            <a href="{$v[url]}">
                <div class="img">
                    <img src="{$v[thumb]}" alt="{$v[title]}" class="gj-img">
                    <h3>{$v[title]}</h3>
                </div>
            </a>
        </div>
        {/loop}
    </div>
</div>