项目中用到的基础样式

/**常量, 以下为最终版**/
//基础颜色
//基础字号 字体尺寸大小
@smallSize:24rem;
@size:28rem;
@largeSize:32rem;
@xLargeSize:48rem;

//基础颜色  即字体的颜色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;

//
/**
    *基础布局  ，鉴于手机端qap 全是基于flex  故布局就几种组合，定义好直接用即可
    *以rowStartCenter 为例  row代表横向 ；第二个参数表示横向的布局  start代表从左侧排列   end 代表从右向左  between  表示space-between 两头分布
      around    表示space-around 即均匀评分  ；但三个参数表示竖向排列 ，与第二的意义一样
 */

.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内部样式
 */
.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;
}
//黄色的标签页
.tagYellow{
    font-size: 20rem;color: @yellowFont-4;
    height: 32rem;padding: 0  8rem;
    border:  1px solid @yellowFont-4;border-radius: 4rem;
    .rowCenterCenter();
}
//绿色的标签页
.tagGreen{
    .tagYellow();
    color: @greenFont-1;
    border:  1px solid  @greenFont-1;
}
//红色的标签页
.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
}