orico-official-website/app/index/view/pc/article/detail.html

{extend name="public/base" /}
{block name="title"}
{notempty name="detail.seo_title"}<title>{$detail.seo_title}</title>{else /}{__BLOCK__}{/notempty}
{/block}
{block name="seo"}
{notempty name="detail.seo_keywords"}
<meta name="keywords" content="{$detail.seo_keywords}" />
<meta name="description" content="{$detail.seo_desc}" />
{else /}
{__BLOCK__}
{/notempty}
{/block}
{block name="style"}
<link rel="stylesheet" href="__CSS__/article_detail.css">
{/block}
{block name="main"}
<div class="orico_Page_articleDetail">
  <!--内容 -->
  <div class="articleDetailMain">
    <div class="atmleft">
      <div class="ct">
        <div class="blog_title">
          <h2>{$detail.title}</h2>
          <p>{$detail.desc}</p>
        </div>
        <!-- 文本渲染-->
        <div class="blog_content">{$detail.content|raw}</div>
      </div>
      <!-- 评论只显示前面五条--->
      <div class="plmain">
        <div class="pl">
          <span class="titlepp">评论</span>
          <div class="plit">
            <span class="name">张三:</span>
            <p>12sdfksdljfksdljdksf是看大家分厘卡聖誕節分厘卡聖誕節付款了</p>
          </div>
          <div class="plit">
            <span class="name">张三:</span>
            <p>12sdfksdljfksdljdksf是看大家分厘卡聖誕節分厘卡聖誕節付款了</p>
          </div>
          <div class="plit">
            <span class="name">张三:</span>
            <p>12sdfksdljfksdljdksf是看大家分厘卡聖誕節分厘卡聖誕節付款了</p>
          </div>
        </div>
      </div>

    </div>
    <div class="atmright">
      {notempty name="share_config"}
      <div class="blog_share">
        <h3>{:lang_i18n('分享')}</h3>
        <div class="share_list">
          {volist name="share_config" id="sc"}
          <a class="atdit" {if condition="!empty($sc.is_blank) && $sc.is_blank.value == 1" }target="_blank" {/if}
            {notempty name="sc.url.value" }href="{$sc.url.value}" {/notempty}> <img src="{$sc.image.value}" />
          {eq name=":array_key_exists('triggered_qrcode', $sc)" value="true"}
          <div class="triggered_qrcode">
            <img src="{$sc.triggered_qrcode.value}" />
          </div>
          {/eq}
          </a>
          {/volist}
        </div>
      </div>
      {/notempty}
      <div class="repply">
        <h3>{:lang_i18n('留言')}</h3>
        <form action="{:url('article/comment', ['id' => $detail.id])}" method="POST" autocomplete="off">
          <span>{:lang_i18n('名称')}</span>
          <input class="form-control itinp new_name" type="text" name="name" style="text-indent: 10px;">
          <span>{:lang_i18n('电子邮箱')}</span>
          <input class="form-control itinp new_email" type="email" name="email"
            style="text-indent: 10px; margin-bottom:0;">
          <p style="color: #C6C7C9; font-size: 0.75rem; margin-bottom: 0.625rem;">{:lang_i18n('您的电子邮件地址不会被公开')}</p>
          <span>{:lang_i18n('留言内容')}</span>
          <textarea class="form-control itinp new_comment" name="content" rows="3"
            style="text-indent: 10px;width: 98%; margin-top: 0.625rem;margin-bottom: 0.625rem;border: 1px solid #DBDBDB;"></textarea>
          <div class="comment_btn" style="color:#ffffff;">{:lang_i18n('提交留言')}</div>
        </form>
      </div>
    </div>
  </div>
  {notempty name="$recommends"}
  <div class="xq">
    <!-- 猜您喜欢 -->
    <div class="love">
      <div class="love1">
        <p class="tt">{:lang_i18n('你可能还喜欢')}</p>
        <p><img src="__IMAGES__/1line.png" height="7"></p>
      </div>
      <ul class="love2">
        {volist name="recommends" id="vo"}
        <li>
          <a href="{:url('article/detail', ['id' => $vo.id])}">
            <div class="lvimg"><img src="{$vo.image}"></div>
            <p class="lvtit">{$vo.title}</p>
          </a>
        </li>
        {/volist}
        <div class="clear"></div>
      </ul>
    </div>
  </div>
  {/notempty}
</div>
{/block}
{block name="script"}
<script type="text/javascript">
  $(document).ready(function () {
    $('.comment_btn').click(function () {
      var form = $(this).parents('form');
      var form_data = form.serialize();
      $.ajax({
        url: form.attr('action'),
        type: 'POST',
        data: form_data,
        dataType: 'json',
        success: function (data) {
          alert(data.msg);
          if (data.code == 0) {
            window.location.reload();
          }
        }
      })
    })
    // 滚动到猜你喜欢部分，右边提交信息不固定
    // 获取视口高度

    // 保存原始样式
    const originalAlign = $(".orico_Page_articleDetail .articleDetailMain").css("align-items");
    $(document).on("scroll", function () {
      const viewportHeight = $(this).height();
      // 获取当前滚动距离
      const scrollTop = $(this).scrollTop();
      $(".xq").each(function () {
        const $el = $(this);
        const elTop = $el.offset().top;
        const elHeight = $el.outerHeight();
        // 元素底部距离视口顶部还有 50px 时触发动画
        const triggerPosition = scrollTop + viewportHeight;
        if (scrollTop > $('.orico_Page_articleDetail').height()-350-900) {
          $(".atmright").css("position", "static");
          $(".orico_Page_articleDetail .articleDetailMain").css("align-items","flex-end");
        } else {
          // 还原原始样式
          $(".atmright").removeAttr("style"); // 清除自定义样式
          $(".orico_Page_articleDetail .articleDetailMain").css("align-items",
            originalAlign);
        }
      });
    });
  })

  function shareCustomers() {
    // 复制到粘贴板
    const input = document.createElement('input')
    input.setAttribute('readonly', 'readonly')
    let url = window.location.href
    input.setAttribute('value', url)
    document.body.appendChild(input)
    input.select()
    if (document.execCommand('copy')) {
      document.execCommand('copy')
      alert("{:lang_i18n('链接复制成功')}")
    }
    document.body.removeChild(input)
  }
</script>
{/block}