lojk-ui
Version:
lojk vue ui components library
116 lines (115 loc) • 2.17 kB
text/less
@import (reference) "../../style/config";
@import (reference) "../../style/set1Px";
@register: lotus-num-key-board;
.@{register} {
position: fixed;
left:0;
bottom:0;
z-index: 100;
width:100%;
background: #fff;
transform: translateY(100%);
transition: transform 200ms ease-in-out;
&-body{
.flex();
.flex-hvc();
justify-content: space-between;
text-align: center;
position: relative;
.heightSingle(430);
overflow: hidden;
&:before{
.setTopLine(#ebedf0);
}
}
&-left{
.flexN(3);
}
&-right{
.flexN(1);
.lineHeight(216);
.box-sizing();
overflow: hidden;
}
&-flex{
.flex();
.fontSize(48);
.lineHeight(108);
li{
.flexN(1);
.box-sizing();
}
}
&-zero{
.flexN(2);
}
&-dot{
.flexN(1);
}
&-item{
position: relative;
&::after{
content: ' ';
position: absolute;
pointer-events: none;
box-sizing: border-box;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
border: 0 solid #ebedf0;
border-width: 0 1px 1px 0;
}
.transition();
}
&-delete{
.fontSize(32);
color:#333;
background: #ebedf0;
position: relative;
.box-sizing();
}
&-finish{
.fontSize(32);
color:#fff;
background: #1989fa;
position: relative;
.box-sizing();
}
&-hide{
transform: translateY(100%);
/*animation: keyBoardDownMove 0.2s linear;
animation-fill-mode: forwards;*/
}
&-show{
transform: translateY(0%);
/*animation: keyBoardUpMove 0.2s linear;
animation-fill-mode: forwards;*/
}
}
//显示动画
@keyframes keyBoardUpMove {
0%{
transform: translateY(100%);
}
50%{
transform: translateY(50%);
}
100%{
transform: translateY(0%);
}
}
//隐藏动画
@keyframes keyBoardDownMove {
0%{
transform: translateY(0%);
}
50%{
transform: translateY(50%);
}
100%{
transform: translateY(100%);
}
}