bootstrap常用样式

固定头部

fixed-top

手机弹窗预览内容

.form-pop{
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        top: 0;
        left: 0;
        position: fixed;
        z-index: 999;
        display: none;
    }
    .form-pop-con{
        width: 290px;
        height: 590px;
        background-image: url("/static/images/phone.png");
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    .form-pop-con-con{
        width: 255px;
        height: 424px;
        /*background-color: #0a001f;*/
        position: absolute;
        top: 97px;
        left: 50%;
        transform: translateX(-50%);
        overflow: auto;
        overflow-x: hidden;
        overflow-y: scroll;
    }

<button type="button" id="open-form-pop" class="layui-btn ">预览</button>
<div class="form-pop">
    <div class="form-pop-con">
        <div class="form-pop-con-con">
            <p>
                这里是手机里里面预览的内容
            </p>
        </div>
    </div>
</div>

$('#open-form-pop').on('click',function () {
    $('.form-pop').show();
});
$(document).on('click',function () {
    $(".form-pop").hide();
});
$(".form-pop-con").on('click',function () {
    event.stopPropagation();
});
$("#open-form-pop").on('click',function () {
    event.stopPropagation();
});

图片渐变

background-image: linear-gradient(0deg,rgba(29,41,49,.5),rgba(255,255,255,0)); 

字体颜色

--key-color: #333;
--main-color: #4e5358;
--main-shadow: rgba(116, 116, 116, 0.08);
--muted-color: #777;
--muted-2-color: #999;
--muted-3-color: #b1b1b1;
--body-bg-color: #f5f6f7;
--main-bg-color: #fff;
--muted-bg-color: #eee;