/**常量, 以下為最終版**/
//基礎(chǔ)顏色
//基礎(chǔ)字號 字體尺寸大小
@smallSize:24rem;
@size:28rem;
@largeSize:32rem;
@xLargeSize:48rem;

//基礎(chǔ)顏色  即字體的顏色F
@whiteFont: #ffffff;
@grayFont-1: #C7C7C7;
@grayFont-2: #999999;
@grayFont-3: #666666;
@grayFont-4: #333333;
@grayFont-5: #DCDEE3;
@grayFont-6: #3D4145;
@grayFont-7: #E6E7EB;
@grayFont-8: #5F646E;
@grayFont-9: #9E9E9E;
@grayFont-10: #3F3F3F;
@redFont-1: #f54531;
@redFont-2: #f21800;
@redFont-3: #FFF6F5;
@redFont-4: #FF724F;
@redFont-5: #EE4443;
@redFont-6: #F23C3C;
@redFont-7: #FAE7E7;
@redFont-8: #E41010;
@redFont-9: #FD5A5C;
@yellowFont-1: #FFA033;
@yellowFont-2: #FFE2D0;
@yellowFont-3: #F48608;
@yellowFont-4: #FFA033;
@greenFont-1: #1DC11D;
@redIconColor: #F55358;
@blueColor: #0891FB;
// 背景顏色
@bg-1: #FFFFFF;
@bg-2: #F7F8FA;
@grayBg: #F7F8FA;
@whiteBg: #FFFFFF;
@bg-3: #EFF0F4;
@bg-4: #EBECF0;
@bg-5: #F2F3F7;
@bg-6: #F8E71C;
@bg-7: #EAEBF0;
//邊框顏色
@borderColor: #e6e7eb;
@borderColor1: #C4C6CF;
@borderColor2: #F54531;
@borderColor3: #DFDFDF;

//
/**
    *基礎(chǔ)布局  签餐，鑒于手機端qap 全是基于flex  故布局就幾種組合太示，定義好直接用即可
    *以rowStartCenter 為例  row代表橫向 土居；第二個參數(shù)表示橫向的布局  start代表從左側(cè)排列   end 代表從右向左  between  表示space-between 兩頭分布
      around    表示space-around 即均勻評分  暂幼；但三個參數(shù)表示豎向排列 眼滤，與第二的意義一樣
 */

.rowBetweenCenter{
    //橫向排 ，橫向左起，豎向居中
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}.rowStartCenter{
     //橫向排 ，橫向左起急膀，豎向居中
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
 }
.rowEndCenter{
    //橫向排 ，橫向右起坛猪，豎向居中
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
 .rowStartStart{
     //橫向排 脖阵，橫向左起，豎向上起
     flex-direction: row;
     justify-content: flex-start;
     align-items: flex-start;
 }
.rowCenterCenter{
    //橫向排 墅茉，橫向居中命黔，豎向居中
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.rowAroundCenter{
    //橫向排 ，橫向居中就斤，豎向居中
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.rowAroundEnd{
    //橫向排 悍募，橫向均分空白，豎向居下
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-end;
}
.rowRightCenter{
    //橫向排 洋机，橫向左起坠宴，豎向居中
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
.columnStartCenter{
    //豎向排 ，橫向左起绷旗，豎向居中
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.columnStartBetween{
    //豎向排 喜鼓，橫向左起，豎向兩端
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}
.columnStartStart{
    //豎向排 衔肢，橫向左起庄岖，豎向上起
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.columnCenterStart{
    //豎向排 ，橫向左起角骤，豎向上起
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.columnCenterEnd{
    //豎向排 隅忿，橫向左起，豎向上起
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
.columnCenterCenter{
    //豎向排 邦尊，橫向居中背桐，豎向居中
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/**
    常用的文字  大小以及行高
 */
.font-10{
    font-size: 20rem;
    line-height: 30rem;
}
.font-12{
    font-size: @smallSize;
    line-height: 36rem;
}
.font-14{
    font-size: @size;
    line-height: 40rem;
}
.font-16{
    font-size: @largeSize;
    line-height: 44rem;
}

.font-18{
    font-size: 36rem;
    line-height: 48rem;
}
/**
    頁面布局常用樣式
 */
.container{
    //幾乎每個頁的總View 都用這個，保證頁面的大小和全面屏適配
    flex: 1;
    justify-content:flex-start ;
    align-items: flex-start;
    background-color: @grayBg;
    width:750rem;
    flex-direction: column;
}

.flex750{
    //很多組件都需要繼承寬度占滿全屏蝉揍，這樣保證兼容性
    flex: 1;
    width: 750rem;

}
/**
tab切換激活
 */
.activeBorder {
    border-bottom: 2rem solid @redFont-1;
}
/**
tab內(nèi)部樣式
 */
.inactiveBorder {
    border-bottom: 1px solid @grayFont-5;
}
//所有的長列表的下拉刷新樣式
.refresh{
    height:80rem;
    width:750rem;
    justify-content:center;
    align-items:center;
}
//所有的長列表的下拉刷新樣式
.loading{
    height:80rem;
    display:flex;
    width:750rem;
   .rowCenterCenter();
    background-color:@bg-2 ;
}
//列表加載中
.loadingText{
    color:@grayFont-2;
    .font-12();
}
//
.myCheckBox{

}
//被選中的checkBox
.checkedCheckBox{
    border-color:@redFont-1 ;
    background-color: @redFont-1;
    color: @whiteFont;
}
.checkedCheckBox1{
    border: 2rem solid @redFont-1;
    background-color: @whiteFont;
    color: @redFont-1;
}
//黃色的標(biāo)簽頁
.tagYellow{
    font-size: 20rem;color: @yellowFont-4;
    height: 32rem;padding: 0  8rem;
    border:  1px solid @yellowFont-4;border-radius: 4rem;
    .rowCenterCenter();
}
//綠色的標(biāo)簽頁
.tagGreen{
    .tagYellow();
    color: @greenFont-1;
    border:  1px solid  @greenFont-1;
}
//紅色的標(biāo)簽頁
.tagRed{
    .tagYellow();
    color: @redFont-6;
    border:  1px solid @redFont-6;
}
.greenTagFont{
    font-size: 20rem;color: @greenFont-1;line-height: 26rem;
}
.yellowTagFont{
    font-size: 20rem;color: @yellowFont-4;line-height: 26rem;
}
.redTagFont{
    font-size: 20rem;color: @redFont-6;line-height: 26rem;
}
.gradientBg1{
    background-image: linear-gradient("to right", @redFont-4, @redFont-4); /* Safari 5.1 - 6.0 */
}
//常用的一些字
.darkFont{
    color:@grayFont-6;
    .font-14();
};
.grayFont{
    color:@grayFont-2;
    .font-14();
};
.smallGrayFont{
    color:@grayFont-2;
    .font-12();
};
.smallDarkFont{
    color:@grayFont-6;
    .font-12();
};
.largeDarkFont{
    color:@grayFont-6;
    .font-16();
};
.largeGrayFont{
    color: @grayFont-2;;
    .font-16();
};
.largeRedFont{
    color:@redFont-6;
    .font-16();
};
.xLargeFont{
    .font-18();
}
//各種邊框
.border{
   border:1rem solid @borderColor1
}
.borderLeft{
    border-left:1rem solid @borderColor1
}
.borderRight{
    border-right:1rem solid @borderColor1
}
//邊框
.bottomBorder{
    border-bottom:1rem solid @borderColor1
}
.bottomTop{
    border-top:1rem solid @borderColor1
}
//邊框
.bottomBorderCommon{
    border-bottom:1rem solid @borderColor
}