book_admin/application/index/view/share/landpage.html

{extend name="layout/layout" /}
{block name="title"}{$data.title}{/block}
{block name="css"}
<style>
    div {
        /* 如果需要让图片各方位居中 */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* 让图片自适应父级大小 */
    img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }

    .dialoge_bg { position: fixed; left:0; top:0; right:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index: 1; }
    .dialoge_main_div {position: fixed; top:50%; left:50%; margin:-1.655rem 0 0 -1.5125rem; width:3.025rem; height:3.31rem; z-index: 2;}

    .dialoge_main_div .h3 {position:absolute; top:0; left:0; width:100%; height:0.46rem; background:url({:asset('/img/frontend/recharge/pop-tit-bk.png')}) no-repeat center; background-size:2.725rem;
        padding-top:.16rem;
        font-size:0.175rem;
        font-family:PingFang-SC-Bold,PingFang-SC;
        font-weight:bold;
        color:rgba(81,61,61,1);
        text-align: center;
        z-index: 3;
    }
    .dialoge_main { position: relative; margin-top:.395rem;padding-top:.28rem; width:3.025rem; height:2.17rem; background:#fff; border-radius:0.115rem; text-align: center;}

    .suc_ico { margin:0 auto; width:.96rem;}
    .suc_p1,.suc_p1 a {font-size:.175rem;font-family:PingFangSC-Regular,PingFang SC;color:black;line-height:.18rem;text-align: center;margin-bottom: 100px}
    .dialoge_main .suc_btn_look {
        position:absolute; left:50%; bottom:.19rem;  margin-left:-1.2375rem;
        display:block; width:2.475rem;height:.365rem;line-height:.365rem;background:rgba(255,180,115,1);border-radius:.18rem;color:#fff;font-size: 15px;}
    .suc_close { position: absolute; right:0; top:-0.4rem; margin-left:-0.13rem; width:.26rem;}
    .suc_close img {width:.26rem;}
</style>
{/block}
{block name="zepto"}
<!-- 这是zepto插件 -->
{/block}
{block name="menu"}{/block}
{block name="main"}
<div>
    <img src="{$data.lead_img}">
</div>
<div class="dialoge_bg" style="display: none">
    <div class="dialoge_main_div">
        <h3 class="h3" style="background:url({:asset('/img/frontend/recharge/pop-tit-bk.png')}) no-repeat center;background-size:2.725rem;"></h3>
        <div class="dialoge_main">
            <p class="suc_p1">请到<a href="/index/recharge/record">个人中心>充值记录</a>查看</p>
            <a class="suc_btn_look" style="background:#77a4ff;" href="/index/user/recent">去看书</a>
        </div>
    </div>
</div>
{/block}
{block name="footer"}
{/block}

{block name="js"}
<!-- 这里引入底部footer -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript" charset="utf-8"></script>
<script>
    $(function () {
        var tooltip = function (title, msg) {
            $('.dialoge_bg').show();
            $('.h3').html(title);
            $('.suc_p1').html(msg);
            setTimeout(function(){
                $('.dialoge_bg').hide();
            },3000);
        };
        $('.suc_close').click(function(){
            $('.dialoge_bg').hide();
        });
        wx.config({$wxjson});
        var config = {
            title: '{$data.share_title}', // 分享标题
            desc: '{$data.share_desc}', // 分享描述
            link: '{$data.share_url}', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: '{$data.share_icon}', // 分享图标
            success: function () {
                cpslog([702, {map: {id: '{$data.id}'}}, 'share']);
                $('.dialoge_bg').hide();
                $.ajax({
                    url: '/index/share/addkandian',
                    data: {
                        id: '{$data.id}'
                    },
                    success: function (result) {
                        tooltip(result.msg, result.data)
                    }
                });
            }
        }
        wx.ready(function () {
            wx.onMenuShareTimeline(config);
            wx.onMenuShareAppMessage(config);
            wx.onMenuShareQQ(config);
            wx.onMenuShareQZone(config);
        });
    })
</script>
{/block}