book_admin/application/clientweb/view/signagent/index.html

{extend name="layout/layout" /}
{block name="title"}阳光书城下载{/block}
{block name="css"}
<!-- 这里引入css -->
<link href="{:client_asset('/css/frontend/common.css')}" rel="stylesheet" type="text/css">
<link href="{:client_asset('/css/frontend/classify.css')}" rel="stylesheet" type="text/css">
<style type="text/css">
    html, body {
        position: relative;

    }

    body {
        padding-bottom: 20px;
    }
    .body_sytle{
        background: rgba(255, 252, 248, 1);
    }
    .head_tit_box{
        background: rgba(0, 0, 0, 0.2);
        height: 0.88rem;
    }
    .head_tit_box h1{
        color: #fff;
        height: 0.88rem;
        line-height: 0.88rem;
        font-size: 0.35rem;
    }

    .box {
        overflow: hidden;
    }

    .load_head {
        height: 44px;
        background: rgba(0, 0, 0, 0.2)
    }

    .back {
        width: 12px;
        height: 22px;
        overflow: hidden;
        float: left;
        margin: 10px 0 12px 12px;
        box-sizing: border-box;
    }

    .back img {
        display: block;
        width: 100%;
    }

    .load_tit {
        margin: 0 24px;
        text-align: center;
        font-size: 18px;
        color: #fff;
        line-height: 44px;
    }

    .bg_box1 {
        width: 100%;
        height: 5.31rem;
        background:url({:client_asset('/img/frontend/signagent/mengban.png')}) no-repeat center center;
    background-size:100% 100%;
        position:relative;

    }
    .bg_box1 #old{
        position: absolute;
        width: 100%;
        bottom: -0.28rem;
    }
    .bg_box1 img {
        width: 100%;
    }

    .bg_box_bot {
        padding: 0 10px;
        margin-top: 5px;
        background: #fff;
        margin: 0.5rem;
    }

    .bg_box_bot h6 {
        font-size: 14px;
        font-weight: bold;
        color: rgba(255, 120, 40, 1)
    }

    .bg_box_bot p {
        font-size: 12px;
        margin-top: 2px;
        color: #c6c9d5;
    }

    .bg_box_bot li {
        position: relative;
        height: 50px;
        padding: 15px 0 15px 70px;
        display: table;
    }

    .bg_box_bot li span {
        width: 50px;
        height: 50px;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -25px;
        background-size: 100%;
    }
    .bg_box_bot li span.icon1
    {
        background:url({:client_asset('/img/frontend/signagent/c1.png')}) no-repeat center center;
    }

    .bg_box_bot li span.icon2
    {
        background:url({:client_asset('/img/frontend/signagent/c2.png')}) no-repeat center center;
    }
    .bg_box_bot li span.icon3
    {
        background:url({:client_asset('/img/frontend/signagent/c3.png')}) no-repeat center center;
    }
    .bg_box_bot li span.icon4
    {
        background:url({:client_asset('/img/frontend/signagent/c4.png')}) no-repeat center center;
    }

    .box_logo{
        position: absolute;
        top: 0.5rem;
        text-align: center;
        left: 2.6rem;
    }
    .box_logo img{
        width: 2.2rem;
        height: 2.2rem;
    }

    .load_btns {
        padding-top: 15px;
        text-align: center;
    }

    .load_btn {
        width: 5rem;
        background:url({:client_asset('/img/frontend/signagent/loadbtnbg.png')}) no-repeat center center;
        border-radius: 5px;
        height: 1.55rem;
        line-height: 0.9rem;
        color: #fff;
        font-size: 18px;
        display: block;
        margin: 0 auto 20px;
    }

    a.load_fail {
        font-size: 16px;
        color: #797d8a;
        text-decoration: underline;
    }

    .tips_box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background: rgba(0, 0, 0, 0.7);
    }

    .tips_box img {
        display: block;
        width: 80%;
        margin: 0 auto;
        height: auto;
    }

    .bg_box_bot .cell {
        display: table-cell;
        vertical-align: middle;
    }
</style>
{/block}
{block name="zepto"}
<!-- 这是zepto插件 -->
{/block}
{block name="menu_title"}阳光书城下载{/block}
{block name="main"}
<!-- 这是正文 body_sytle_girl -->
<div class="body_sytle">
    <!--<div class="box">
        <div class="load_head">
            <a href="javascript:void(0);" class="back return_page" id="11021"></a>
            <h2 class="load_tit">阳光书城下载</h2>
        </div>
    </div>-->

    <div class="bg_box1">
        <div class="box_logo">
            <img src="{:client_asset('/img/frontend/signagent/yg_logo.png')}">
        </div>
        <div id="old">
            <div class="tips_box" style="display: none;">
                <div class="anroid_img">
                    <img src="http://h5cdn.kkyd.cn/images/app_down/anroid_down_new.png">
                </div>
            </div>
            <div class="load_btns">
                <a class="load_btn load_btn_android" href="http://app.trread.cn/K611006.apk?t=5d6c939083320"
                   onClick="postTongji('androidDown')" id="11123">
                    下载阳光书城
                </a>
            </div>
        </div>
    </div>


    <ul class="bg_box_bot">
        <li>
            <span class="icon1"></span>
            <div class="cell">
                <h6>为什么要下载阳光书城？</h6>
                <p>忘记小说地址，打开【阳光书城】继续看</p>
            </div>
        </li>
        <li>
            <span class="icon2"></span>
            <div class="cell">
                <h6>一键登录，账户云同步</h6>
                <p>微信正在看的小说，精彩不断</p>
            </div>
        </li>
        <li>
            <span class="icon3"></span>
            <div class="cell">
                <h6>签到、充值，优惠不断</h6>
                <p>签到领书币，小说任性看</p>
            </div>
        </li>
        <li>
            <span class="icon4"></span>
            <div class="cell">
                <h6>下载即可领取书币大礼包</h6>
                <p>点击下载，即可免费领取书币大礼包</p>
            </div>
        </li>
    </ul>
</div>

{/block}
{block name="footer"}
{/block}
{block name="js"}
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?a4c87b74a3c51ec8dc419df544fab2a5";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
<script type="text/javascript">
    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            };
        recalc();
        // Abort if browser does not support addEventListener
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);

    })(document, window);
</script>
{/block}