book_admin/application/kuaifen/view/public/tabbar.html

<div id="tabbar">
    <div class="tab_nav {if $tab_choice == 'bookshelf' }choice{/if}">
        {if condition="$showBookShelf"}
        <a href="javascript:void(0);" data-href="{:getCurrentDomain($channel_id,'/index/book/shelf')}" onclick="do_burydot($(this), 'bookshelf')">
            <div class="tab_icon bookshelf"></div>
            <div style="font-size: .1rem">书架</div>
        </a>
        {else}
        <a href="javascript:void(0);" data-href="{:getCurrentDomain($channel_id,'/index/user/recent')}" onclick="do_burydot($(this), 'bookshelf')">
            <div class="tab_icon bookshelf"></div>
            <div style="font-size: .1rem">书架</div>
        </a>
        {/if}
    </div>
    <div class="tab_nav {if $tab_choice == 'bookcity' }choice{/if}">
        <a href="javascript:void(0);" data-href="{:getCurrentDomain($channel_id,'/index')}" onclick="do_burydot($(this), 'bookcity')">
            <div class="tab_icon bookcity"></div>
            <div style="font-size: .1rem">书城</div>
        </a>
    </div>
    <div class="tab_nav {if $tab_choice == 'recharge' }choice{/if}">
        <a href="javascript:void(0);" data-href="{:getCurrentDomain($channel_id,'/index/recharge/pay')}" onclick="do_burydot($(this), 'recharge')">
            <div class="tab_icon recharge"></div>
            <div style="font-size: .1rem">充值</div>
        </a>
    </div>
    <!--<div class="tab_nav {if $tab_choice == 'rank_list' }choice{/if}">
        <a href="javascript:void(0);" data-href="{:getCurrentDomain($channel_id,'/index/book/list?sex=1&type=click')}" onclick="do_burydot($(this), 'rank_list')">
            <div class="tab_icon rank_list"></div>
            <div style="font-size: .1rem">排行</div>
        </a>
    </div>-->
    <div class="tab_nav {if $tab_choice == 'my' }choice{/if}">
        <a href="javascript:void(0);" data-href="{:getCurrentDomain($channel_id,'/index/user')}" onclick="do_burydot($(this), 'my')">
            <div class="tab_icon my"></div>
            <div style="font-size: .1rem">我的</div>
        </a>
    </div>
</div>
<style type="text/css">
    .footer_box{
        padding-bottom: .56rem;
    }
    /** Tab Bar **/
    #tabbar {
        width: 100%;
        position: fixed;
        bottom: 0rem;
        left: 0;
        right: 0;
        height: .46rem;
        background: #f9f9f9;
        display: flex;
        justify-content: space-around;
        padding-top: 0.05rem;
        z-index:999;
        padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
        padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
    }

    .tab_nav {
        color: #B0B0B0;
        font-size: .1rem;
        text-align: center;
    }

    .tab_nav a{
        color: #B0B0B0;
    }

    .tab_nav .icon {
        width: .27rem;
        height: .268rem;
    }
    .tab_icon {
        width: 0.27rem;
        height: 0.27rem;
        background-size: .27rem, .27rem;
    }
    .choice a{
        color: #E63B64;
    }
    .choice .tab_icon {
        width: 0.27rem;
        height: 0.27rem;
        background: url("{:asset('/img/bookcity-select.png')}") 50% 50% no-repeat;
        background-size: .27rem, .27rem;
    }

    /** 书架 **/
    .bookshelf{
        background: url("{:asset('/img/bookshelf-no.png')}") 50% 50% no-repeat;
        background-size: .27rem, .27rem;
    }
    .choice .bookshelf{
        background: url("{:asset('/img/bookshelf-select.png')}") 50% 50% no-repeat;
        background-size: .27rem, .27rem;
    }

    /** 书城 **/
    .bookcity{
        background: url("{:asset('/img/bookcity-no.png')}") 50% 50% no-repeat;
        background-size: .27rem, .27rem;
    }
    .choice .bookcity{
        background: url("{:asset('/img/bookcity-select.png')}") 50% 50% no-repeat;
        background-size: .27rem, .27rem;
    }

    /** 充值 **/
    .recharge{
        background: url("{:asset('/img/bookcity-no.png')}") 50% 50% no-repeat;
        background-size: .27rem, .27rem;
    }
    .choice .recharge{
        background: url("{:asset('/img/bookcity-select.png')}") 50% 50% no-repeat;
        background-size: .27rem, .27rem;
    }

    /** 我的 **/
    .my{
        background: url("{:asset('/img/my-no.png')}") 50% 50% no-repeat;
        background-size: .27rem, .27rem;
    }
    .choice .my{
        background: url("{:asset('/img/my-select.png')}") 50% 50% no-repeat;
        background-size: .27rem, .27rem;
    }
    /** 排行榜 **/
    .rank_list{
        background: url("{:asset('/img/rank-list-no.png')}") 50% 50% no-repeat;
        background-size: .27rem, .27rem;
    }
    .choice .rank_list{
        background: url("{:asset('/img/rank-list-select.png')}") 50% 50% no-repeat;
        background-size: .27rem, .27rem;
    }
</style>
<script>
    function do_burydot(obj, idstr ='') {
        cpslog([702, {
            map: {
                page: obj.data('href'),
                idstr: idstr,
            }
        }, 'tabbar']);
        location.href = obj.data('href');
    }
</script>