<!DOCTYPE html>
<html>
<head>
    <:include file="./common/title.html" websiteName="热门文章 - ${website.websiteName}" keywords="${website.keywords}"
              description="${website.description}" favicon="${website.favicon}" shop="${shop}"/>
    <link rel="stylesheet" href="${ctxPath}/default/css/article-content.css"/>
    <link rel="stylesheet" type="text/css" id="u0" href="${ctxPath}/assets/libs/tinymce/skins/ui/oxide/skin.min.css">
</head>
<body class="page-no-scroll">
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>
<!-- header -->
<:include file="./common/header-article.html" websiteName="${website.websiteName}"
          websiteLogo="${website.websiteLogo}"/>

<div class="layui-container body-card">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md8">
            <div class="layui-card">
                <div class="layui-card-header">
                    文章详情
                </div>
                <div class="layui-card-body" style="padding: 15px 15px;">
                    <div class="list_info">
                        ${article.content}
                    </div>
                </div>
                <div class="layui-card-footer">
                    <div class="post-list-meta-box ">
                        <ul class="post-list-meta">
                            <li class="post-list-meta-show">
                            <span>
                                <time class="b2timeago" datetime="${article.createTime}" itemprop="datePublished">
                                    ${article.createTime}
                                </time>
                            </span>
                            </li>
                            <li class="post-list-meta-show" id="btnLikes">
                            <span>
                                <i class="layui-icon layui-icon-praise" style="vertical-align: middle; position: relative; top: 2px; font-size: 12px;"></i>&nbsp;
                                <span style="vertical-align: middle;">${article.likes}</span>
                            </span>
                            </li>
                            <li class="post-list-meta-show">
                            <span>
                                <i class="layui-icon layui-icon-light" style="vertical-align: middle; position: relative; top: 1px; font-size: 12px;"></i>&nbsp;
                                <span style="vertical-align: middle;">${article.seeNumber}</span>
                            </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4 sticky">
            <div class="layui-card">
                <div class="layui-card-header">
                    热门商品
                </div>
                <div class="layui-card-body" style="padding: 15px 15px;">
                    <div class="layui-row layui-col-space15">
                        <:for items="${hotProductList}" var="item">
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                                <div class="b2-widget-post-thumb box-in b2-radius">
                                    <div class="b2-widget-post-thumb-product-img">
                                        <img class="lazy loaded" src="<:if test="${item.image == null || item.image == ''}">../default/images/commodity.svg</:if><:if test="${item.image != null || item.image != ''}">${item.image!}</:if>">
                                    </div>
                                    <div class="b2-widget-post-title">
                                        <h2>${item.name}</h2>
                                        <div class="products-price red">
                                            ￥ ${item.price}
                                        </div>
                                    </div>
                                    <a ref="nofollow" class="link-overlay"
                                       href="${ctxPath}/product/${item.link}"></a>
                                </div>
                            </div>
                        </:for>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- footer -->
<:include file="./common/footer.html" websiteName="${website.websiteName}" beianIcp="${website.beianIcp}" shop="${shop}"/>
<!-- footer -->
<:include file="./common/footer-menu-help.html"/>
<!-- js部分 -->
<:include file="./common/js.html"/>
<script>
    layui.use(['layer', 'form'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;

        // 添加
        $('#btnLikes').click(function () {
            $.post('/content/article/updateLike', {
                articleId: ${article.id}
            }, function (res) {
                if (res.code == 200) {
                    layer.msg(res.msg);
                } else {
                    layer.msg(res.msg);
                }
            }, 'json');
        });

    })
</script>
</body>
</html>