webapp.pc/core.css

基于Vue的框架Webapp框架核心,控制应用架构

/* 垂直居中 */
.zk-center-y{
    position: absolute;
    transform: translate(0,-50%);
    -webkit-transform: translate(0,-50%);
    top:50%;
}

/* 上下左右居中 */
.zk-center{
    position: absolute;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    top:50%;
    left: 50%;
}

/* 水平居中 */
.zk-center-x{
    margin: auto 0;
}

/*img默认图片 在项目中重写地址*/
.zk-defau-img{
    background-size: 70% auto;    
    background-color: #CCCCCC;
    background-position: center;
    background-repeat: no-repeat;
}
/* 背景图宽适配 */
.zk-defau-img-hfit{
    background-size: auto 70%;
}
/* 背景图高适配 */
.zk-defau-img-wfit{
    background-size: 70% auto;
}


/* 短边适配 */
.zk-img-sfit{
    object-fit: cover;
    overflow: hidden;
    object-position:50% 50%;
}

/* 长边适配 */
.zk-img-lfit{
    object-fit: contain;
    overflow: hidden;
    object-position:50% 50%;
}
.zk-layer-modal{
    width: 100%;
    height: 0;
    position: relative;
    /* left: 0;
    top: 0; */
}
.zk-layer-modal .zk-layer-content{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.zk-layer-modal .zk-mask{
    width: 100%;
    height: 100%;
    position: absolute;
    left:0;
    top:0;
    background-color: #000000;
    filter:alpha(opacity=70); /*IE滤镜，不透明度50%*/
	-moz-opacity:0.7; /*Firefox私有，不透明度50%*/
	opacity:0.7;/*其他，不透明度50%*/
    z-index: -1;
    -webkit-overflow-scrolling:touch;
}
.zk-layer-modal .zk-content{
     position: relative; 
     height: 100%;
     width: 100%;
}
.zk-layer-modal .zk-animal{
    transition: all 1s ease-in-out;
    /* transform: translate(0, 0);
    -webkit-transform: translate(0, 0); */
}
.zk-layer-modal .zk-in-up{
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}

.zk-layer-modal .zk-out-down{
    transform: translate(0, 100%);
    -webkit-transform: translate(0, 100%);
}

.zk-layer-modal .zk-modal-content-enter{
    transform: translate(0, 100%);
    -webkit-transform: translate(0, 100%);
}
.zk-layer-modal .zk-modal-content-leave-to{
    transform: translate(0, 100%);
    -webkit-transform: translate(0, 100%);
}
.zk-layer-modal .zk-modal-content-enter-active,
.zk-layer-modal .zk-modal-content-leave-active{
    transition: all 1s ease-in-out;
}