fix: Reward
This commit is contained in:
shenyu
parent
1133c5e1d3
commit
3c6b0e0223
@ -31,6 +31,9 @@
|
||||
|
||||
<%- 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){ %>
|
||||
<%- partial('mathjax') %>
|
||||
<% } %>
|
||||
|
||||
@ -32,36 +32,8 @@
|
||||
<% } %>
|
||||
<!-- 打赏 -->
|
||||
<% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %>
|
||||
<div class="page-reward">
|
||||
<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 id="reward-btn">
|
||||
打赏
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
|
||||
@ -15,4 +15,4 @@
|
||||
});
|
||||
</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,9 +1,9 @@
|
||||
<% if (theme.gitalk.enable) { %>
|
||||
<div class="gitalk" id="gitalk-container"></div>
|
||||
<%- css('https://unpkg.com/gitalk/dist/gitalk.css') %>
|
||||
<%- js('https://unpkg.com/gitalk/dist/gitalk.min.js') %>
|
||||
<%- js('https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js') %>
|
||||
<script type="text/javascript">
|
||||
<div class="gitalk" id="gitalk-container"></div>
|
||||
<%- css('https://cdn.jsdelivr.net/npm/gitalk@1.5.0/dist/gitalk.css') %>
|
||||
<%- js('https://cdn.jsdelivr.net/npm/gitalk@1.5.0/dist/gitalk.min.js') %>
|
||||
<%- js('https://cdn.jsdelivr.net/npm/blueimp-md5@2.10.0/js/md5.min.js') %>
|
||||
<script type="text/javascript">
|
||||
var gitalk = new Gitalk({
|
||||
clientID: '<%- theme.gitalk.clientID %>',
|
||||
clientSecret: '<%- theme.gitalk.clientSecret %>',
|
||||
@ -17,5 +17,5 @@
|
||||
})
|
||||
|
||||
gitalk.render('gitalk-container')
|
||||
</script>
|
||||
</script>
|
||||
<% } %>
|
||||
@ -5,7 +5,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
new Valine({
|
||||
el: '#vcomments',
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
<% } %>
|
||||
<%- partial('_partial/sidebar') %>
|
||||
</aside>
|
||||
<%- partial('_partial/modal') %>
|
||||
<%- partial('_partial/after-footer') %>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -61,6 +61,16 @@
|
||||
text-align center
|
||||
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 (max-width: 768px)
|
||||
.cover-inner
|
||||
|
||||
@ -1,54 +1,81 @@
|
||||
.page-reward
|
||||
margin: 60px 0;
|
||||
text-align: center;
|
||||
|
||||
.page-reward-btn
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
background: body-color;
|
||||
border-radius: 50%;
|
||||
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;
|
||||
transition: .4s ease-in-out;
|
||||
|
||||
#reward-btn
|
||||
position relative
|
||||
display inline-block
|
||||
height 36px
|
||||
line-height 36px
|
||||
margin-top 3rem
|
||||
padding 0 20px
|
||||
font-size 18px
|
||||
color #fff
|
||||
background body-color
|
||||
text-decoration none
|
||||
border-radius 4px
|
||||
margin-left 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)
|
||||
-webkit-transition .4s ease-in-out
|
||||
transition .4s ease-in-out
|
||||
cursor pointer
|
||||
&:hover,
|
||||
&:active
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
|
||||
|
||||
.tooltip-item
|
||||
display: block;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
|
||||
|
||||
.reward-box
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
box-shadow 0 6px 12px rgba(0, 0, 0, 0.2), 0 4px 15px rgba(0, 0, 0, 0.2)
|
||||
|
||||
#reward
|
||||
position absolute
|
||||
z-index 9999
|
||||
left 50%
|
||||
top 20%
|
||||
transform translateX(-50%)
|
||||
margin 60px 0
|
||||
padding 0px 20px 20px
|
||||
background-color lighten(water,30%)
|
||||
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
|
||||
color: body-color;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 1px main-color;
|
||||
|
||||
.icon
|
||||
margin: 0 10px;
|
||||
color: #ddd;
|
||||
|
||||
color body-color
|
||||
font-weight bold
|
||||
font-size 20px
|
||||
text-align center
|
||||
text-shadow 1px 1px 1px main-color
|
||||
i
|
||||
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
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
color: #4d4d4d;
|
||||
margin: 20px 0 0 0;
|
||||
|
||||
font-size 16px
|
||||
display block
|
||||
color black
|
||||
margin-top 10px
|
||||
.reward-img
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
border: 6px solid #fff;
|
||||
border-radius: 3px;
|
||||
display block
|
||||
width 12rem
|
||||
height 12rem
|
||||
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/apple"
|
||||
@import "_partial/reward"
|
||||
@import "_partial/tooltip"
|
||||
|
||||
if sidebar
|
||||
@import "_partial/sidebar"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
(function ($) {
|
||||
//
|
||||
// Search ------------
|
||||
// Search
|
||||
var $searchWrap = $('.search-form-wrap'),
|
||||
isSearchAnim = false,
|
||||
searchAnimDuration = 200;
|
||||
@ -208,11 +208,15 @@
|
||||
$content.addClass('on');
|
||||
$sidebar.addClass('on');
|
||||
}
|
||||
// 赞赏
|
||||
$('.tooltip-item').hover(function () {
|
||||
$('.tooltip-content').slideDown(150)
|
||||
}, function () {
|
||||
$('.tooltip-content').slideUp(150)
|
||||
|
||||
// reward
|
||||
$('#reward-btn').on('click', function () {
|
||||
$('#mask').fadeIn(100)
|
||||
$('#reward').fadeIn(100)
|
||||
});
|
||||
$('#reward .close, #mask').on('click', function () {
|
||||
$('#mask').fadeOut(100)
|
||||
$('#reward').fadeOut(100)
|
||||
})
|
||||
})(jQuery);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user