yzm顶踩插件修改带赏的功能~~

首先安装好官方的自带顶踩插件~~~~

把下面文件复制到文章内容页面

<!-- 顶踩开始 -->
<script type="text/javascript" src="{STATIC_URL}js/digg.js"></script>
        <div class="shang">
          <a class="digg_up pinglun" onclick="digg('{U('digg/init')}', {$modelid}, {$id}, 1)">顶一下 (<span
              id="up">{$up}</span>)</a>
          <span class="desc_shang"  onclick="show_protocol()">赏</span>
          <a class="digg_down desc_fen" onclick="digg('{U('digg/init')}', {$modelid}, {$id}, 0)">踩一下 (<span
              id="down">{$down}</span>)</a>
        </div>
<!-- 顶踩结束 -->
<!-- 弹出 赏 -->
<script src="{STATIC_URL}plugin/layer/layer.js"></script>
   <script type="text/javascript">
    function show_protocol(){
           layer.open({
              type: 1,
              title: '打赏给作者',
              skin: 'layui-layer-rim', 
              area: ['800px', '500px'], 
              content: '<div style="margin:15px 20px"><center><img src="http://cs.xxxxx.com/common/static/shuoshuo/images/pic_payment.jpg"></center></div>'
            });
        }
    </script>    
<style>
    .layui-layer-ico {background: url({STATIC_URL}plugin/layer/theme/default/icon.png) no-repeat;}
</style>
<!-- 弹出 赏 -->

下面是样式 可以放在css

/*打赏*/
.shang{
        display: block;
    margin: auto;
    text-align: center;
    position: relative;
    top: 0;
    left: 0;
   
    width: 300px;
        margin-top: 5px;
    margin-bottom: 20px;
}
.shang .pinglun{
    background: #FF4400; 
}
.shang .desc_fen{
    background: #ECB842;

}
.shang a{
    line-height: 35px;
    text-align: center;
    border-radius: 2px;
    display: inline-block;
    color: #fff;
    width: 140px;
    text-decoration: none;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    box-sizing: border-box;
    font-size: 14px;
    cursor: pointer;
}
.shang a:hover,.shang .desc_shang:hover{
    background: #878787;
    text-decoration: none;
    
    transition: all .2s ease-in 0s;
}
.shang .desc_shang{
    position: absolute;
    left: 125px;
    top: -7px;
    background: #7AB951;
    width: 42px;
    height: 42px;
    font-size: 16px;
    font-weight: 600;
    line-height: 43px;
    border: 4px solid #fff;
    border-radius: 40px;
    color: #fff;
    cursor: pointer;
}

 

posted @ 2021-02-03 12:21  浅岛连云  阅读(205)  评论(0)    收藏  举报