媒体列表-GJ-UI前端组件

发布时间::2018-06-12 20:26:14 已收录 阅读:325次

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

媒体列表1[ul-mt1]:

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 ul-mt1">
        <div class="gtw-ul gclear">
            <div class="gtw-img gj-left">
                <a href="javascript:(0)"><img src="images/gjui.jpg" alt=""></a>
            </div>
            <div class="gtw-body">
                <a href="javascript:(0)">
                    <h4>这里是文章的标题部分内容</h4>
                </a>
                <p>这里是文章简介部分内容...</p>
                <div class="gtw-sx">
                    <i class="fa fa-plus-square"> 原创</i>
                    <i class="fa fa-clock-o"> 2017-10-19</i>
                    <i class="fa fa-eye"> 668</i>
                    <a href="javascript:(0)"><i class="fa fa-folder-open"> 学无止境</i></a>
                </div>
            </div>
        </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 ul-mt1">
        {m:lists field="title,thumb,url,description,inputtime,click,catid,copyfrom" modelid="1" limit="6" page="page"}
        {loop $data $v}
        <div class="gtw-ul gclear">
            <div class="gtw-img gj-left">
                <a href="{$v[url]}"><img src="{$v[thumb]}" alt="{$v[title]}"></a>
            </div>
            <div class="gtw-body">
                <a href="{$v[url]}">
                    <h4>{$v[title]}</h4>
                </a>
                <p>{$v[description]}</p>
                <div class="gtw-sx">
                    <i class="fa fa-plus-square"> {$v[copyfrom]}</i>
                    <i class="fa fa-clock-o"> {date('Y-m-d',$v['inputtime'])}</i>
                    <i class="fa fa-eye"> {$v[click]}</i>
                    <a href="{get_category($v['catid'], 'pclink')}"><i class="fa fa-folder-open"> {get_catname($v['catid'])}</i></a>
                </div>
            </div>
        </div>
        {/loop}
    </div>
    <!-- 若需,请再次加上分页按钮代码-->
</div>

媒体列表2[ul-mt2]:

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 ul-mt2 gclear">
        <div class="gj-lg-3 gj-md-4 gj-sm-4 gj-xs-6">
            <div class="cul">
                <a href="javascript:(0)"><img src="images/01.jpg" alt=""></a>
                <a class="cbq" href="javascript:(0)">栏目名称</a>
                <a href="javascript:(0)">
                    <h4>这里是媒体文章的标题部分内容的标题部分内容</h4>
                </a>
                <p>这里是文章简介部分内容...</p>
                <div class="csx">
                    <span>阅读:668</span> |
                    <span>发布时间:2018-04-04</span>
                </div>
            </div>
        </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 ul-mt2 gclear">
        {m:lists field="title,thumb,url,description,inputtime,click,catid" modelid="1" limit="6" page="page"}
        {loop $data $v}
        <div class="gj-lg-3 gj-md-4 gj-sm-4 gj-xs-6">
            <div class="cul">
                <a href="{$v[url]}"><img src="{$v[thumb]}" alt="{$v[title]}"></a>
                <a class="cbq" href="{get_category($v['catid'], 'pclink')}">{get_catname($v['catid'])}</a>
                <a href="{$v[url]}">
                    <h4>{$v[title]}</h4>
                </a>
                <p>{$v[description]}</p>
                <div class="csx">
                    <span>阅读:{$v[click]}</span> |
                    <span>发布时间:{date('Y-m-d',$v['inputtime'])}</span>
                </div>
            </div>
        </div>
        {/loop}
    </div>
    <!-- 若需,请再次加上分页按钮代码-->
</div>