177 lines
2.7 KiB
SCSS
177 lines
2.7 KiB
SCSS
|
|
page {
|
|
-webkit-overflow-scrolling: touch; // 解决ios滑动不流畅
|
|
height: 100%;
|
|
width: 100%;
|
|
word-break: break-all; //英文文本不换行
|
|
white-space: normal;
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
color: transparent;
|
|
display: none;
|
|
}
|
|
.full-page{
|
|
// height: 100%;
|
|
// width: 100%;
|
|
// background-color: #f0f2f5;
|
|
// box-sizing: border-box;
|
|
// padding: 10px;
|
|
// font-size: 14px;
|
|
}
|
|
/*flex布局(colorui里面也有相关基础样式)*/
|
|
/* x水平排列*/
|
|
.x-f {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/*x两端且水平居中*/
|
|
.x-bc {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
/*x平分且水平居中*/
|
|
.x-ac {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
|
|
/*x水平靠上对齐*/
|
|
.x-start {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
/*x水平靠下对齐*/
|
|
.x-end {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
/*上下左右居中*/
|
|
.x-c {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/*y竖直靠左*/
|
|
.y-start {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
/*y竖直靠右*/
|
|
.y-end {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
/*y竖直居中*/
|
|
.y-f {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
/* y竖直两端*/
|
|
.y-b {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
.y-a {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
/*y竖直两端居中*/
|
|
.y-bc {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.flex1{
|
|
flex:1;
|
|
}
|
|
.flex-wrap{
|
|
flex-wrap:wrap ;
|
|
}
|
|
// 颜色
|
|
.white{
|
|
color:#fff ;
|
|
}
|
|
.bg-w{
|
|
background-color: #fff;
|
|
}
|
|
// height,width
|
|
.full-width{
|
|
width: 100%;
|
|
}
|
|
.full-height{
|
|
height: 100%;
|
|
}
|
|
.text-center{
|
|
text-align: center;
|
|
}
|
|
.text-left{
|
|
text-align: left;
|
|
}
|
|
.text-right{
|
|
text-align: right;
|
|
}
|
|
// 字体
|
|
@for $i from 12 through 64 {
|
|
.fs#{$i} {
|
|
font-size: #{$i}px;
|
|
}
|
|
}
|
|
/* 外边距、内边距全局样式 */
|
|
@for $i from 0 through 100 {
|
|
.m#{$i} {
|
|
margin: #{$i}px;
|
|
}
|
|
.mt#{$i} {
|
|
margin-top: #{$i}px;
|
|
}
|
|
.mr#{$i} {
|
|
margin-right: #{$i}px;
|
|
}
|
|
.mb#{$i} {
|
|
margin-bottom: #{$i}px;
|
|
}
|
|
.ml#{$i} {
|
|
margin-left: #{$i}px;
|
|
}
|
|
.p#{$i} {
|
|
padding: #{$i}px;
|
|
}
|
|
.pt#{$i} {
|
|
padding-top: #{$i}px;
|
|
}
|
|
.pr#{$i} {
|
|
padding-right: #{$i}px;
|
|
}
|
|
.pb#{$i} {
|
|
padding-bottom: #{$i}px;
|
|
}
|
|
.pl#{$i} {
|
|
padding-left: #{$i}px;
|
|
}
|
|
}
|
|
// font-weight
|
|
.font-bold{
|
|
font-weight:bold
|
|
}
|
|
.border-b{
|
|
border-bottom: 2px solid rgba(#707070,0.11);
|
|
} |