登录 白背景

!!!是typecho的语法不能丢掉

!!!
<style>
#biliBtn button{
    margin: 10px 0px 10px 20px;
}
#post-content {
    background-color: #f1f3f4;
    padding: 0px;
}
.post-img-figcaption{
    margin-top:0px;
}
#bili {
    overflow: hidden;
}
#bili .bili_div {
    position: relative;
    width: 280px;
    height: 227px;
    float: left;
    margin: 15px 0px 30px 80px;
    margin-left:25px;
}
#bili .bili_col {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 25px 10px 10px 10px;
    background-color: #272727;
    box-shadow: -10px 12px 5px #00000050
}
#bili .bili_head {
    margin: 0px;
    background-size: 100% 100%;
    position: absolute;
    top: 0px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: all .5s
}
#bili .bili_head:hover {
    transform: rotate(360deg);
}
#bili .bili_top {
    font-size: 12px;
    padding-left: 50px;
    border-bottom: 1px solid #737373;
}
#bili .bili_bot {
    width: 280px;
    height: 177px;
    border-top: 1px solid #bfbfbf;
    position: relative;
}
#bili .bili_name {
    line-height: 24px;
    height: 20px;
    padding: 0px 0px 0px 0px;
    color: bisque;
}
#bili .bili_time {
    line-height: 20px;
    float: right;
    padding-right: 10px;
}
#bili .bili_title {
    height: 30px;
    overflow: hidden;
    color: #fff;
    line-height: 16px;
}
#bili .bili_title a {
    text-decoration: none;
    color: #f35;
}
#bili .bili_img {
    margin: 0px;
}
#bili .bili_h_desc {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 177px;
    padding: 3px;
    color: white;
    background-color: #000;
    opacity: 0;
    line-height: 19px;
    transition: all .2s;
    white-space: pre-wrap;
}
#bili .bili_bot:hover .bili_h_desc {
    opacity: 0.8;
    top: 0px;
}
</style>
<script>
function imgUrl(imgName,tail){
    tail = tail||'';
    if(typeof(imgName) == 'undefined'){
        return '#';
    }
    return imgName + tail;
}
function build_html(obj,e){
    $('#bili').html('');
    e.attr('title','更新时间:' + obj.last_time_str);
    $.each(obj.list,function(k,i){
        var creat_time = new Date(i.created * 1000);//toLocaleString()
        creat_time = creat_time.toLocaleDateString().replace(/\//g, "-") + " " + creat_time.toTimeString().substr(0, 8)
        $('#bili').append(
        '<div class="bili_div"><a target="_blank" href="//b23.tv/'+i.bvid+'"><div class="bili_col">'
            +'<img class="bili_head" referrerPolicy="no-referrer" src="' + imgUrl(i.face,'@64w_64h.webp') + '">'
            +'<div class="bili_top">'
                +'<div class="bili_name">' + i.author + '<span class="bili_time">' + creat_time + '</span></div>'
                +'<div class="bili_title">' + i.title +'</div>'
            +'</div>'
            +'<div class="bili_bot">'
                +'<img class="bili_img" referrerPolicy="no-referrer" src="'+imgUrl(i.pic,'@280w_175h_100Q_1c.webp')+'"/>'
                +'<div class="bili_h_desc">'+i.desc+'</div>'
            +'</div>'
        +'</div></a></div>');
    });
}
$(document).ready(function(){
    var url_base = '/code/bili';
    $('#myFollow').click(function(){
        $('#biliBtn button').removeClass('active');
        $(this).addClass('active');
        var last_bvid = 0;
        //请求json
        $.ajax({
            url: url_base + '/bili_myFollow.json',
            headers: {
                "Cache-Control": "max-age=120",
            },
            async: false,
            dataType: "json",
        }).success(function(bili_obj){
            if(bili_obj.list.length > 0){
                last_bvid = bili_obj.list[0].bvid;
                build_html(bili_obj,$('#myFollow'));
            }
        });
        //更新json
        // $.ajax({
        //     url: url_base + '/bili.php',
        //     data: {
        //         "type": 'myFollow',
        //         "last_bvid": last_bvid
        //     },
        //     async: false,
        //     dataType: "json",
        // }).success(function(ret_obj){
        //     if(ret_obj.ifRefresh){
        //         build_html(ret_obj,$('#myFollow'));
        //     }
        // });
    });

    $('#hotRanking').click(function(){
        $('#biliBtn button').removeClass('active');
        $(this).addClass('active');
        $.ajax({
            url: url_base + '/bili.php',
            data: {
                "type": 'hotRanking'
            },
            headers: {
                "Cache-Control": "max-age=31536000",
            },
            async: false,
            dataType: "json",
        }).success(function(ret_obj){
            build_html(ret_obj,$('#hotRanking'));
        });
    });
    $('#hotRanking').click();

    $('#nowRanking').click(function(){
        $('#biliBtn button').removeClass('active');
        $(this).addClass('active');
        $.ajax({
            url: url_base + '/bili.php',
            data: {
                "type": 'nowRanking'
            },
            headers: {
                "Cache-Control": "max-age=31536000",
            },
            async: false,
            dataType: "json",
        }).success(function(ret_obj){
            build_html(ret_obj,$('#nowRanking'));
        });
    });

    $('#weekRanking').click(function(){
        $('#biliBtn button').removeClass('active');
        $(this).addClass('active');
        $.ajax({
            url: url_base + '/bili.php',
            data: {
                "type": 'weekRanking'
            },
            headers: {
                "Cache-Control": "max-age=31536000",
            },
            async: false,
            dataType: "json",
        }).success(function(ret_obj){
            build_html(ret_obj,$('#weekRanking'));
        });
    });
});
</script>

<div id="biliBtn">
<button type="button" class="btn btn-warning" id="hotRanking">综合热门</button>
<button type="button" class="btn btn-success" id="nowRanking">排行榜</button>
<button type="button" class="btn btn-primary" id="myFollow">我的关注</button>
<button type="button" class="btn btn-info" id="weekRanking">每周必看</button>
</div>
<div id="bili"></div>
!!!