fix: Reward
This commit is contained in:
shenyu
parent
1133c5e1d3
commit
3c6b0e0223
@ -31,6 +31,9 @@
|
|||||||
|
|
||||||
<%- js('js/ayer') %>
|
<%- js('js/ayer') %>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css">
|
||||||
|
|
||||||
<% if (theme.mathjax){ %>
|
<% if (theme.mathjax){ %>
|
||||||
<%- partial('mathjax') %>
|
<%- partial('mathjax') %>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|||||||
@ -32,36 +32,8 @@
|
|||||||
<% } %>
|
<% } %>
|
||||||
<!-- 打赏 -->
|
<!-- 打赏 -->
|
||||||
<% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %>
|
<% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %>
|
||||||
<div class="page-reward">
|
<div id="reward-btn">
|
||||||
<a href="javascript:void(0);" class="page-reward-btn tooltip-top" target="_self">
|
打赏
|
||||||
<div class="tooltip tooltip-east">
|
|
||||||
<span class="tooltip-item">
|
|
||||||
赏
|
|
||||||
</span>
|
|
||||||
<span class="tooltip-content">
|
|
||||||
<span class="tooltip-text">
|
|
||||||
<span class="tooltip-inner">
|
|
||||||
<p class="reward-p"><i class="icon icon-quo-left"></i><%= theme.reward_wording%><i
|
|
||||||
class="icon icon-quo-right"></i></p>
|
|
||||||
<div class="reward-box">
|
|
||||||
<% if(theme.alipay) {%>
|
|
||||||
<div class="reward-box-item">
|
|
||||||
<img class="reward-img" src="<%- url_for(theme.alipay) %>">
|
|
||||||
<span class="reward-type">支付宝</span>
|
|
||||||
</div>
|
|
||||||
<% } %>
|
|
||||||
<% if(theme.weixin) {%>
|
|
||||||
<div class="reward-box-item">
|
|
||||||
<img class="reward-img" src="<%- url_for(theme.weixin) %>">
|
|
||||||
<span class="reward-type">微信</span>
|
|
||||||
</div>
|
|
||||||
<% } %>
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
<% } %>
|
<% } %>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -15,4 +15,4 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script src="https://cdn.bootcss.com/mathjax/2.7.6/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
|
<script src="https://cdn.jsdelivr.net/npm/mathjax@2.7.6/unpacked/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
|
||||||
21
layout/_partial/modal.ejs
Normal file
21
layout/_partial/modal.ejs
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
<div id="mask"></div>
|
||||||
|
|
||||||
|
<!-- #reward -->
|
||||||
|
<div id="reward">
|
||||||
|
<span class="close"><i class="ri-close-line"></i></span>
|
||||||
|
<p class="reward-p"><i class="ri-cup-line"></i><%= theme.reward_wording%></p>
|
||||||
|
<div class="reward-box">
|
||||||
|
<% if(theme.alipay) {%>
|
||||||
|
<div class="reward-item">
|
||||||
|
<img class="reward-img" src="<%- url_for(theme.alipay) %>">
|
||||||
|
<span class="reward-type">支付宝</span>
|
||||||
|
</div>
|
||||||
|
<% } %>
|
||||||
|
<% if(theme.weixin) {%>
|
||||||
|
<div class="reward-item">
|
||||||
|
<img class="reward-img" src="<%- url_for(theme.weixin) %>">
|
||||||
|
<span class="reward-type">微信</span>
|
||||||
|
</div>
|
||||||
|
<% } %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -1,21 +1,21 @@
|
|||||||
<% if (theme.gitalk.enable) { %>
|
<% if (theme.gitalk.enable) { %>
|
||||||
<div class="gitalk" id="gitalk-container"></div>
|
<div class="gitalk" id="gitalk-container"></div>
|
||||||
<%- css('https://unpkg.com/gitalk/dist/gitalk.css') %>
|
<%- css('https://cdn.jsdelivr.net/npm/gitalk@1.5.0/dist/gitalk.css') %>
|
||||||
<%- js('https://unpkg.com/gitalk/dist/gitalk.min.js') %>
|
<%- js('https://cdn.jsdelivr.net/npm/gitalk@1.5.0/dist/gitalk.min.js') %>
|
||||||
<%- js('https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js') %>
|
<%- js('https://cdn.jsdelivr.net/npm/blueimp-md5@2.10.0/js/md5.min.js') %>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var gitalk = new Gitalk({
|
var gitalk = new Gitalk({
|
||||||
clientID: '<%- theme.gitalk.clientID %>',
|
clientID: '<%- theme.gitalk.clientID %>',
|
||||||
clientSecret: '<%- theme.gitalk.clientSecret %>',
|
clientSecret: '<%- theme.gitalk.clientSecret %>',
|
||||||
repo: '<%- theme.gitalk.repo %>',
|
repo: '<%- theme.gitalk.repo %>',
|
||||||
owner: '<%- theme.gitalk.owner %>',
|
owner: '<%- theme.gitalk.owner %>',
|
||||||
admin: ['<%- theme.gitalk.admin %>'],
|
admin: ['<%- theme.gitalk.admin %>'],
|
||||||
// id: location.pathname, // Ensure uniqueness and length less than 50
|
// id: location.pathname, // Ensure uniqueness and length less than 50
|
||||||
id: md5(location.pathname),
|
id: md5(location.pathname),
|
||||||
distractionFreeMode: false, // Facebook-like distraction free mode
|
distractionFreeMode: false, // Facebook-like distraction free mode
|
||||||
pagerDirection: 'last'
|
pagerDirection: 'last'
|
||||||
})
|
})
|
||||||
|
|
||||||
gitalk.render('gitalk-container')
|
gitalk.render('gitalk-container')
|
||||||
</script>
|
</script>
|
||||||
<% } %>
|
<% } %>
|
||||||
@ -5,7 +5,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
|
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
|
||||||
<script src='//unpkg.com/valine@1.3.10/dist/Valine.min.js'></script>
|
<script src='https://cdn.jsdelivr.net/npm/valine@1.3.10/dist/Valine.min.js'></script>
|
||||||
<script>
|
<script>
|
||||||
new Valine({
|
new Valine({
|
||||||
el: '#vcomments',
|
el: '#vcomments',
|
||||||
|
|||||||
@ -16,6 +16,7 @@
|
|||||||
<% } %>
|
<% } %>
|
||||||
<%- partial('_partial/sidebar') %>
|
<%- partial('_partial/sidebar') %>
|
||||||
</aside>
|
</aside>
|
||||||
|
<%- partial('_partial/modal') %>
|
||||||
<%- partial('_partial/after-footer') %>
|
<%- partial('_partial/after-footer') %>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -61,6 +61,16 @@
|
|||||||
text-align center
|
text-align center
|
||||||
transform scale(1.2)
|
transform scale(1.2)
|
||||||
|
|
||||||
|
#mask
|
||||||
|
position fixed
|
||||||
|
left 0
|
||||||
|
top 0
|
||||||
|
width 100%
|
||||||
|
height 100%
|
||||||
|
background-color rgba(0,0,0,.8)
|
||||||
|
z-index 9998
|
||||||
|
display none
|
||||||
|
|
||||||
// Media Query
|
// Media Query
|
||||||
@media (max-width: 768px)
|
@media (max-width: 768px)
|
||||||
.cover-inner
|
.cover-inner
|
||||||
|
|||||||
@ -1,54 +1,81 @@
|
|||||||
.page-reward
|
#reward-btn
|
||||||
margin: 60px 0;
|
position relative
|
||||||
text-align: center;
|
display inline-block
|
||||||
|
height 36px
|
||||||
.page-reward-btn
|
line-height 36px
|
||||||
position: relative;
|
margin-top 3rem
|
||||||
display: inline-block;
|
padding 0 20px
|
||||||
width: 56px;
|
font-size 18px
|
||||||
height: 56px;
|
color #fff
|
||||||
line-height: 56px;
|
background body-color
|
||||||
font-size: 20px;
|
text-decoration none
|
||||||
color: #fff;
|
border-radius 4px
|
||||||
background: body-color;
|
margin-left 50%
|
||||||
border-radius: 50%;
|
transform translateX(-50%)
|
||||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
box-shadow 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
|
||||||
-webkit-transition: .4s ease-in-out;
|
-webkit-transition .4s ease-in-out
|
||||||
transition: .4s ease-in-out;
|
transition .4s ease-in-out
|
||||||
|
cursor pointer
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active
|
&:active
|
||||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 4px 15px rgba(0, 0, 0, 0.2);
|
box-shadow 0 6px 12px rgba(0, 0, 0, 0.2), 0 4px 15px rgba(0, 0, 0, 0.2)
|
||||||
|
|
||||||
|
#reward
|
||||||
.tooltip-item
|
position absolute
|
||||||
display: block;
|
z-index 9999
|
||||||
width: 56px;
|
left 50%
|
||||||
height: 56px;
|
top 20%
|
||||||
|
transform translateX(-50%)
|
||||||
|
margin 60px 0
|
||||||
.reward-box
|
padding 0px 20px 20px
|
||||||
display: flex;
|
background-color lighten(water,30%)
|
||||||
justify-content: space-around;
|
display none
|
||||||
|
.close
|
||||||
|
height 28px
|
||||||
|
line-height 28px
|
||||||
|
width 28px
|
||||||
|
display block
|
||||||
|
text-align center
|
||||||
|
position absolute
|
||||||
|
right: -12px;
|
||||||
|
top: -10px;
|
||||||
|
border-radius: 50%
|
||||||
|
background-color body-color
|
||||||
|
cursor pointer
|
||||||
|
i
|
||||||
|
font-size: 20px
|
||||||
|
color white
|
||||||
.reward-p
|
.reward-p
|
||||||
color: body-color;
|
color body-color
|
||||||
font-weight: bold;
|
font-weight bold
|
||||||
text-shadow: 1px 1px 1px main-color;
|
font-size 20px
|
||||||
|
text-align center
|
||||||
.icon
|
text-shadow 1px 1px 1px main-color
|
||||||
margin: 0 10px;
|
i
|
||||||
color: #ddd;
|
margin 0 10px
|
||||||
|
transform translateY(2px)
|
||||||
|
.reward-box
|
||||||
|
display: flex
|
||||||
|
justify-content space-between
|
||||||
|
width 100%
|
||||||
|
.reward-item
|
||||||
|
text-align center
|
||||||
|
margin: 0 10px
|
||||||
.reward-type
|
.reward-type
|
||||||
font-size: 16px;
|
font-size 16px
|
||||||
display: block;
|
display block
|
||||||
color: #4d4d4d;
|
color black
|
||||||
margin: 20px 0 0 0;
|
margin-top 10px
|
||||||
|
|
||||||
.reward-img
|
.reward-img
|
||||||
width: 130px;
|
display block
|
||||||
height: 130px;
|
width 12rem
|
||||||
border: 6px solid #fff;
|
height 12rem
|
||||||
border-radius: 3px;
|
border-radius 3px
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
#reward
|
||||||
|
padding 0 10px 10px
|
||||||
|
.reward-img
|
||||||
|
max-width 10rem
|
||||||
|
max-height 10rem
|
||||||
|
margin 0 5px
|
||||||
@ -1,29 +0,0 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
.tooltip-top
|
|
||||||
.tooltip
|
|
||||||
display: inline;
|
|
||||||
position: relative;
|
|
||||||
z-index: 999;
|
|
||||||
|
|
||||||
/* Tooltip */
|
|
||||||
|
|
||||||
.tooltip-content
|
|
||||||
position: absolute;
|
|
||||||
z-index: 9999;
|
|
||||||
width: 370px;
|
|
||||||
left: 50%;
|
|
||||||
bottom: 70px;
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 1.4;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #4d4d4d;
|
|
||||||
background: water;
|
|
||||||
margin: 0 0 -10px -185px;
|
|
||||||
cursor: default;
|
|
||||||
display: none;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
|
|
||||||
|
|
||||||
@ -68,7 +68,6 @@ button
|
|||||||
@import "_partial/gitalk"
|
@import "_partial/gitalk"
|
||||||
@import "_partial/apple"
|
@import "_partial/apple"
|
||||||
@import "_partial/reward"
|
@import "_partial/reward"
|
||||||
@import "_partial/tooltip"
|
|
||||||
|
|
||||||
if sidebar
|
if sidebar
|
||||||
@import "_partial/sidebar"
|
@import "_partial/sidebar"
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
(function ($) {
|
(function ($) {
|
||||||
//
|
//
|
||||||
// Search ------------
|
// Search
|
||||||
var $searchWrap = $('.search-form-wrap'),
|
var $searchWrap = $('.search-form-wrap'),
|
||||||
isSearchAnim = false,
|
isSearchAnim = false,
|
||||||
searchAnimDuration = 200;
|
searchAnimDuration = 200;
|
||||||
@ -208,11 +208,15 @@
|
|||||||
$content.addClass('on');
|
$content.addClass('on');
|
||||||
$sidebar.addClass('on');
|
$sidebar.addClass('on');
|
||||||
}
|
}
|
||||||
// 赞赏
|
|
||||||
$('.tooltip-item').hover(function () {
|
// reward
|
||||||
$('.tooltip-content').slideDown(150)
|
$('#reward-btn').on('click', function () {
|
||||||
}, function () {
|
$('#mask').fadeIn(100)
|
||||||
$('.tooltip-content').slideUp(150)
|
$('#reward').fadeIn(100)
|
||||||
|
});
|
||||||
|
$('#reward .close, #mask').on('click', function () {
|
||||||
|
$('#mask').fadeOut(100)
|
||||||
|
$('#reward').fadeOut(100)
|
||||||
})
|
})
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user