优化自动跳转功能

This commit is contained in:
augushong
2020-08-18 12:16:42 +08:00
parent 45f8a09b1c
commit 9d08fe3b5d
6 changed files with 103 additions and 19 deletions

View File

@@ -130,6 +130,13 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.post-item .info .desc {
margin: 0 0 8px;
font-size: 13px;
line-height: 24px;
color: #999;
}
.post-item .info .plus-info { .post-item .info .plus-info {
margin-top: 5px; margin-top: 5px;
} }
@@ -153,6 +160,18 @@
color: #777; color: #777;
} }
.content-container .desc {
margin: 0 0 8px;
font-size: 13px;
line-height: 24px;
color: #999;
margin-top: 15px;
}
.content-container .jump-container {
margin-top: 15px;
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.nav-left-list { .nav-left-list {
text-align: left; text-align: left;
@@ -172,8 +191,7 @@
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
} }
.content-container .title {
.content-container .title{
font-size: 18px; font-size: 18px;
line-height: 28px; line-height: 28px;
} }

View File

@@ -197,7 +197,13 @@
<input type="text" name="jump_to_url" class="layui-input"> <input type="text" name="jump_to_url" class="layui-input">
</div> </div>
</div> </div>
<div class="layui-form-item">
<div class="layui-form-label">跳转按钮名称</div>
<div class="layui-input-block">
<input type="text" name="jump_to_btn_title" value="立即跳转"
class="layui-input">
</div>
</div>
<div class="layui-form-item"> <div class="layui-form-item">
<div class="layui-form-label">跳转链接状态</div> <div class="layui-form-label">跳转链接状态</div>
<div class="layui-input-block"> <div class="layui-input-block">

View File

@@ -200,6 +200,13 @@
class="layui-input"> class="layui-input">
</div> </div>
</div> </div>
<div class="layui-form-item">
<div class="layui-form-label">跳转按钮名称</div>
<div class="layui-input-block">
<input type="text" name="jump_to_btn_title" value="{$post->getData('jump_to_btn_title')}"
class="layui-input">
</div>
</div>
<div class="layui-form-item"> <div class="layui-form-item">
<div class="layui-form-label">跳转链接状态</div> <div class="layui-form-label">跳转链接状态</div>

View File

@@ -9,11 +9,13 @@
<link rel="shortcut icon" href="{:get_source_link(get_system_config('site_favicon','/favicon.ico'))}" /> <link rel="shortcut icon" href="{:get_source_link(get_system_config('site_favicon','/favicon.ico'))}" />
<link rel="icon" href="{:get_source_link(get_system_config('site_favicon','/favicon.ico'))}" > <link rel="icon" href="{:get_source_link(get_system_config('site_favicon','/favicon.ico'))}">
<script> <script>
window.layuiInitSuccess = [];
//JavaScript代码区域 //JavaScript代码区域
layui.use(['element', 'layer', 'util'], function () { layui.use(['element', 'layer', 'util'], function () {
var element = layui.element; var element = layui.element;
@@ -22,11 +24,17 @@
//执行 //执行
util.fixbar({ util.fixbar({
bar1: false bar1: false
,click: function(type){ , click: function (type) {
} }
}); });
window.layuiInitSuccess.forEach(item => {
if(typeof item == "function"){
item(layui)
}
});
}); });
</script> </script>
{:get_system_config('site_tongji')} {:get_system_config('site_tongji')}

View File

@@ -27,7 +27,7 @@
<img src="{$nav.img}"> <img src="{$nav.img}">
<div class="panel"> <div class="panel">
<p class="title">{$nav.title}</p> <p class="title">{$nav.title}</p>
<p>{$nav.desc}</p> <p class="desc">{$nav.desc}</p>
</div> </div>
</a> </a>
{/volist} {/volist}
@@ -65,6 +65,8 @@
<div class="info"> <div class="info">
<div class="title">{$post.title}</div> <div class="title">{$post.title}</div>
<div class="desc">{$post.desc_html}</div>
<div class="plus-info"> <div class="plus-info">
<span>{$post.hits}访问</span> <span>{$post.hits}访问</span>
<span>{$post.comment_count}评论</span> <span>{$post.comment_count}评论</span>

View File

@@ -29,6 +29,49 @@
<div class="info"> <div class="info">
<span>{$post->publish_time_text}</span> <span>{$post->publish_time_text}</span>
</div> </div>
<div class="desc">
{$post.desc_html}
</div>
{if !empty($post.desc) && $post.jump_to_url_status != 0}
<div class="jump-container">
<a href="{$post.jump_to_url}" class="layui-btn jump-btn" target="_blank">{$post.jump_to_btn_title|default='立即跳转'}</a>
</div>
{if $post.jump_to_url_status == 2 }
<script>
window.layuiInitSuccess.push(function () {
var isJumped = false;
var countDownNum = 5;
var closeJump = false;
var jumpUrl = '{$post.jump_to_url}'
window.layerJump = layer.confirm('即将自动打开新页面(倒计时<span class="jump-count-dowm">5</span>秒)', {
btn: ['立即跳转', '取消'],
offset:['20%']
}
, function (index, layero) {
//按钮【按钮一】的回调
window.open(jumpUrl)
isJumped = true
layer.close(index)
}, function (index) {
//按钮【按钮二】的回调
closeJump = true
})
window.timerJump = setInterval(() => {
countDownNum--
$('.jump-count-dowm').text(countDownNum)
if (countDownNum <= 0) {
clearInterval(window.timerJump)
layer.close(window.layerJump)
if (!closeJump && !isJumped) {
window.open(jumpUrl)
}
}
}, 1000);
})
</script>
{/if}
{/if}
<div class="ql-snow"> <div class="ql-snow">
<div class="ql-editor">{$post->content_html|raw}</div> <div class="ql-editor">{$post->content_html|raw}</div>
</div> </div>