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.release_time|date_format_i18n}</p>
				</div>
				<!-- 文本渲染-->
				<div class="blog_content">{$detail.content|raw}</div>
			</div>
			<!-- 评论只显示前面五条--->
			{notempty name="comments"}
			<div class="plmain">
				<div class="pl">
					<span class="titlepp">{:lang_i18n('评论')}</span>
					{volist name="comments" id="cm"}
					<div class="plit">
						<span class="name">{$cm.name}:</span>
						<p>{$cm.content}</p>
					</div>
					{/volist}
				</div>
			</div>
			{/notempty}
		</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}