.size(@size){
    width: ~"@{size}rpx";
    height: ~"@{size}rpx";
}
.size(@width, @height){
    width: ~"@{width}rpx";
    height: ~"@{height}rpx";
}
//top right
.rt-pos(@x, @y){
    right: ~"@{x}rpx";
    top: ~"@{y}rpx";
}
.tr-pos(@x, @y){
    right: ~"@{x}rpx";
    top: ~"@{y}rpx";
}
//top left
.lt-pos(@x, @y){
    left: ~"@{x}rpx";
    top: ~"@{y}rpx";
}
.tl-pos(@x, @y){
    left: ~"@{x}rpx";
    top: ~"@{y}rpx";
}
//bottom left
.lb-pos(@x, @y){
    left: ~"@{x}rpx";
    bottom: ~"@{y}rpx";
}
.bl-pos(@x, @y){
    left: ~"@{x}rpx";
    bottom: ~"@{y}rpx";
}
//bottom right
.rb-pos(@x, @y){
    right: ~"@{x}rpx";
    bottom: ~"@{y}rpx";
}
.br-pos(@x, @y){
    right: ~"@{x}rpx";
    bottom: ~"@{y}rpx";
}
//size & bgsize
.bg-size(@width, @height){
    .size(@width, @height);
    .bgs(@width, @height);
}
.bgi(@url){
    background-image: ~"url(@{url})";
}
.bgs(@width, @height){
    background-size: ~"@{width}rpx @{height}rpx";
}
.bgp(@x, @y){
    background-position: ~"@{x}rpx @{y}rpx";
}
.bgr(@repeat:~"no-repeat"){
    background-repeat: @repeat;
}


//文本末尾添加省略号 宽度不固定，适合多行以及移动端显示
.text-over(){
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.tran-ui(){
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    background: none;
}
.trall(@time:0.6s){
    transition: all @time; 
}
.global(){
    .hide{
        display: none !important;
    }
    .fx-box{
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .fx-nw{
        flex-wrap: nowrap;
    }
    .fx-w{
        flex-wrap: wrap;
    }
    .center{
        justify-content: center;
        align-items: center;
    }
    .col{
        flex-direction: column;
    }
    .row{
        flex-direction: row;
    }
    .fake{
        content: " ";
        display: block;
    }
    .pos{
        position: absolute;
    }
    .pos-r{
        position: relative;
    }
    .t{
        background-color: rgba(255,0,0,0.5);
    }
    .authorize-mask{
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}


.dialog(){
    .dialog-closed{
        .size(70);
        .pos;
        .tr-pos(40, 65)
    }
    .dialog-overlay{
        background-color: rgba(0,0,0,0.75);
    }
}

.page-topbar(){

    &::before{
        .fake;
        height: 174rpx;
        height: 0;
    }
    .mini &::before{
        height: 132rpx;
        height: 0;
    }
}