//================common begin=================

//颜色
$u-color-border: #eee;
$u-color-theme: #999;
$u-color-warn: #f44;
$u-color-bg: #eff4ff; //全站背景色
$u-color-theme-light: #ccc;
$u-color-theme-red: #f44;
$u-type-primary: #007aff;
$u-type-warning: #f0ad4e;
$u-type-success: #00af51;
$u-type-info: #5bc0de;
$u-type-error: #dd524d;
$u-main-color: #333;
$u-color-content: #666;
$u-tips-color: #999;
$u-light-color: #ccc;
$u-placeholder-color: #808080;
$u-icon-color: #999;
$u-selectd-color: #52AAFF;
$u-color-link: #72A4E5;

a:hover {
    text-decoration: none;
}

//边框

.bds {
    border: solid 1rpx $u-color-border !important;

}

.bdd {
    border: dashed 1rpx $u-color-border !important;
}

.bdd_t {
    border-top: dashed 1rpx $u-color-border !important;
}

.bdd_l {
    border-left: dashed 1rpx $u-color-border !important;
}

.bdd_r {
    border-right: dashed 1rpx $u-color-border !important;
}

.bdd_t {
    border-top: dashed 1rpx $u-color-border !important;
}

.bds_b {
    border-bottom: solid 1rpx $u-color-border !important;
}

.bds_t {
    border-top: solid 1rpx $u-color-border !important;
}

.bds_l {
    border-left: solid 1rpx $u-color-border !important;
}

.bds_r {
    border-right: solid 1rpx $u-color-border !important;
}

.bdd_b {
    border-bottom: dashed 1rpx $u-color-border !important;
}

.bdn {
    border: none !important;
}

.bdn_b {
    border-bottom: none !important;
}

.bdn_t {
    border-top: none !important;
}

.bdn_l {
    border-left: none !important;
}


.main_bg {
    background-color: #F7F7F7;
}

.cursor {
    cursor: pointer;
}

.cursor_none {
    cursor: default !important;
}


//浮动
.fl {
    float: left !important;
}

.fr {
    float: right !important;
}

.clear_both {
    clear: both;
}



.clearfix:after {
    content: "\20";
    display: block;
    height: 0;
    clear: both;
}

.ma0 {
    margin: 0 auto !important;
}

//文字

.tl {
    text-align: left !important;
}

.tr {
    text-align: right !important;
}

.tc {
    text-align: center !important;
}


.fwb {
    font-weight: bold;
}



//循环
@for $i from 1 through 9 {
    .fwb#{$i*100} {
        font-weight: #{$i*100};
    }
}

@for $i from 0 through 10 {
    .opacity#{$i} {
        opacity: calc($i / 10);
    }
}

@for $i from 12 through 100 {
    .fs#{$i} {
        font-size: $i*1rpx !important;
    }
}

@for $i from 12 through 100 {
    .lh#{$i} {
        line-height: $i*1rpx !important;
    }
}

@for $i from 1 through 150 {
    .h#{$i*10} {
        height: #{$i*10}rpx !important;
    }
}

@for $i from 0 through 40 {
    .m#{$i*5} {
        margin: #{$i*5}rpx !important;
    }
}

@for $i from 0 through 40 {
    .mb#{$i*5} {
        margin-bottom: #{$i*5}rpx !important;
    }
}

@for $i from 0 through 80 {
    .mt#{$i*5} {
        margin-top: #{$i*5}rpx !important
    }
}

@for $i from 0 through 40 {
    .ml#{$i*5} {
        margin-left: #{$i*5}rpx !important;
    }
}

@for $i from 0 through 40 {
    .mr#{$i*5} {
        margin-right: #{$i*5}rpx !important;
    }
}


@for $i from 0 through 24 {
    .p#{$i*5} {
        padding: #{$i*5}rpx !important;
    }
}

@for $i from 0 through 40 {
    .pl#{$i*5} {
        padding-left: #{$i*5}rpx !important;
    }
}

@for $i from 0 through 40 {
    .pr#{$i*5} {
        padding-right: #{$i*5}rpx !important;
    }
}

@for $i from 0 through 40 {
    .pb#{$i*5} {
        padding-bottom: #{$i*5}rpx !important;
    }
}

@for $i from 0 through 40 {
    .pt#{$i*5} {
        padding-top: #{$i*5}rpx !important;
    }
}

@for $i from 1 through 100 {
    .pct#{$i} {
        width: $i*1% !important
    }
}

@for $i from 0 through 80 {
    .w#{$i*20} {
        width: #{$i*20}rpx !important;
    }
}


@for $i from 0 through 80 {
    .border_radius_#{$i} {
        border-radius: #{$i}rpx;
    }
}

@for $i from 1 through 10 {
    .nowrap#{$i} {
        /* 超出部分隐藏 */
        overflow: hidden;
        /* 末尾加省略号 */
        text-overflow: ellipsis;
        display: -webkit-box;
        word-break: break-all;
        -webkit-box-orient: vertical;
        /* 行数，也可以设为1，用来做单行 */
        -webkit-line-clamp:#{$i}; //在第几行加省略号
    }
}

@for $i from 0 through 100 {
    .zindex#{$i*1} {
        z-index: #{$i*1} !important;
    }
}

//字体省略nowrap
.nowrap {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    /*兼容opera*/
    text-overflow: ellipsis;
    /*这就是省略号喽*/
    overflow: hidden;
    /*设置超过的隐藏*/
    white-space: nowrap;
    /*设置不折行*/
}



//定位
.pos_r {
    position: relative;
}

.pos_a {
    position: absolute;
}

.pos_f {
    position: fixed;
}

.pos_s {
    position: sticky;
    top: 0
}



//圆角
.border_radius_s {
    border-radius: 10rpx;
}

.border_radius_m {
    border-radius: 20rpx;
}

.border_radius_l {
    border-radius: 40rpx;
}

//空白
.blank_xxs {
    height: 12rpx;
}

.blank_xs {
    height: 24rpx;
}

.blank_s {
    height: 32rpx;
}

.blank_m {
    height: 48rpx;
}

.blank_l {
    height: 60rpx;
}

.blank_xl {
    height: 72rpx;
}

.blank_xxl {
    height: 84rpx;
}

.black_index {
    height: 140rpx;
}

.blank_tabbar {
    height: 220rpx;
}

//字体颜色
.text_color_theme {
    color: $u-color-theme;
}

.text_color_theme_warn {
    color: $u-color-warn;
}

.text_color_theme_light {
    color: $u-color-theme-light;
}

.text_color_theme_red {
    color: $u-color-theme-red;
}

.text_color_primary {
    color: $u-type-primary;
}

.text_color_warning {
    color: $u-type-warning;
}

.text_color_success {
    color: $u-type-success;
}

.text_color_info {
    color: $u-type-info;
}

.text_color_error {
    color: $u-type-error;
}

.text_color_link {
    color: $u-color-link;
}

.text_color_main {
    color: $u-main-color;
}

.text_color_content {
    color: $u-color-content;
}

.text_color_tips {
    color: $u-tips-color;
}

.text_color_light {
    color: $u-light-color;
}

.text_color_placeholder {
    color: $u-placeholder-color;
}

.text_color_white {
    color: #fff;
}

.text_color_icon {
    color: $u-icon-color;
}

.text_color_selected {
    color: $u-selectd-color;
}

//盒子
.dis_blk {
    display: block !important;
}

.dis_none {
    display: none !important;
}

.dis_inline {
    display: inline !important;
}

.dis_inb {
    display: inline-block !important;
}

.dis_flex {
    display: flex !important;
}

.dis_flex_align_center {
    display: flex;
    align-items: center;
}

.dis_flex_align_right_center {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.dis_flex_align_between_center {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dis_flex_align_around_center {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.dis_flex_align_content_center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dis_flex_align_content_evenly {

    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.dis_flex_align_center_flex_w {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.bg_main {
    background-color: $u-color-bg;
}

.bg_primary {
    background-color: $u-type-primary;
}

.bg_warning {
    background-color: $u-type-warning;
}

.bg_error {
    background-color: $u-type-error;
}

.bg_success {
    background-color: $u-type-success;
}

.bg_f3 {
    background-color: #f3f3f3;
}

//背景色
.bg_f5 {
    background: #F5F5F5;
}

.bg_f7 {
    background: #f7f7f7;
}

.bg_ff {
    background: #fff;
}

.bg_none {
    background: none;
}

.bg_light {
    background-color: #f7fafe;
}