common 方法

兼容 iphoneX底部 的空白

<div class="AdaptationIphoneX" style="height:34px;width:100%;position:fixed;bottom:0;background:#fff;"></div>
<div class="AdaptationIphoneX"></div>

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .purchaseDiv, .closeBookList, .BottomProgress {
        bottom: 34px !important;
    }
    .choiceHtml .QusetionDiv {
        margin-bottom: 85px !important;
    }

    .AdaptationIphoneX {
        display: block!important;
    }
    .bookDetailCommon.rewardSystem {
        padding-bottom: 50px!important;
    }
}
   .AdaptationIphoneX {
       display: block!important;
   }
/*iphoneX兼容*/
.AdaptationIphoneX {
    display: none;
    z-index: 999999;
    height: 34px;
    width: 100%;
    position: fixed;
    bottom: 0;
    background: #000;
}
    if (window.location.href.indexOf("iphoneX")) {
        var body = document.getElementsByTagName("body")[0];
        var div = document.createElement("div")
        div.setAttribute("style", "position:fixed;height:38px;bottom:-38px;width:100%;background:#fff;z-index:+1")
        body.appendChild(div)
    }
  (function ($) {
        $.getUrlParam = function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
    })(jQuery);
        if ($.getUrlParam("iphoneX") == "true") {
            $("body").append("<div style='position:fixed;height:38px;bottom:-38px;width:100%;background:#26272B;z-index:+1'></div>")
        }

px=>rem像素单位转换


        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;

                    if (clientWidth >= 840) {
                        docEl.style.fontSize = '150px';
                    } else if (clientWidth >= 640) {
                        docEl.style.fontSize = '100px';
                    } else {
                        docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                    }
                };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);

vue router跳转:

<router-link tag="li" v-for="(item,index) in channelList"  :key="item.uuid" :to="{name:'video-list',params:{curItem:item}}">
</router-link>
<router-link tag="div" :to="{path:'/edit-video',query:{value: this.checked_resource_items}}" class="confirm_video" v-show="cur_checked!=0">
</router-link>

css 限制字的行数。多出的部分用省略号表示

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;

猜你喜欢

转载自blog.csdn.net/wcy7916/article/details/81108667