478 lines
8.7 KiB
SCSS
478 lines
8.7 KiB
SCSS
/** flex */
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
.inline-flex{
|
|
display: inline-flex;
|
|
}
|
|
.fdc {
|
|
flex-direction: column;
|
|
}
|
|
.jcc {
|
|
justify-content: center;
|
|
}
|
|
.aic {
|
|
align-items: center;
|
|
}
|
|
.jcsa {
|
|
justify-content: space-around;
|
|
}
|
|
.jcsb{
|
|
justify-content: space-between;
|
|
}
|
|
.jcc {
|
|
justify-content:center;
|
|
}
|
|
.fwr{
|
|
flex-wrap: wrap;
|
|
}
|
|
.flex1 {
|
|
flex: 1;
|
|
}
|
|
.flexnone{//0 0 auto 不放大也不缩小
|
|
flex: none;
|
|
}
|
|
.flexauto{//1 1 auto 根据计算来放大或者缩小
|
|
flex: auto;
|
|
}
|
|
|
|
|
|
//height
|
|
.hb{
|
|
height: calc(100vh - 84rpx);
|
|
}
|
|
@for $i from 0 through 100{
|
|
$m:$i * 1rpx;
|
|
|
|
.hbm#{$i}{
|
|
height:calc(100vh - 84rpx - #{$m}) !important;
|
|
}
|
|
}
|
|
|
|
@for $i from 0 through 100{
|
|
.h#{$i} {
|
|
height: round(percentage($i/100)) !important;
|
|
}
|
|
}
|
|
.height-auto{
|
|
height: auto !important;
|
|
}
|
|
.height-100vh{
|
|
height: 100vh;
|
|
}
|
|
@for $i from 0 through 100{
|
|
.height-#{$i}{
|
|
height:(1rpx * $i) !important
|
|
}
|
|
}
|
|
|
|
//width
|
|
@for $i from 0 through 100{
|
|
.w#{$i} {
|
|
width: round(percentage($i/100)) !important;
|
|
}
|
|
}
|
|
@for $i from 0 through 400{
|
|
.width-#{$i}{
|
|
width:(1rpx * $i) !important
|
|
}
|
|
}
|
|
.width-auto{
|
|
width: auto !important;
|
|
}
|
|
@for $i from 0 through 100{
|
|
.width-#{$i}vh{
|
|
width:(1vh * $i) !important
|
|
}
|
|
}
|
|
//margin
|
|
@for $i from 0 through 100{
|
|
.margin-#{$i}{
|
|
margin:(1rpx * $i) !important
|
|
}
|
|
.margin-tb-#{$i}{
|
|
margin:(1rpx * $i) 0 !important
|
|
}
|
|
.margin-lr-#{$i}{
|
|
margin:0 (1rpx * $i) !important
|
|
}
|
|
.margin-left-#{$i}{
|
|
margin-left:(1rpx * $i) !important
|
|
}
|
|
.margin-right-#{$i}{
|
|
margin-right:(1rpx * $i) !important
|
|
}
|
|
.margin-top-#{$i}{
|
|
margin-top:(1rpx * $i) !important
|
|
}
|
|
.margin-bottom-#{$i}{
|
|
margin-bottom:(1rpx * $i) !important
|
|
}
|
|
}
|
|
.margin-center{
|
|
margin:0 auto !important;
|
|
}
|
|
|
|
//padding
|
|
@for $i from 0 through 100{
|
|
.padding-#{$i}{
|
|
padding:(1rpx * $i) !important
|
|
}
|
|
.padding-tb-#{$i}{
|
|
padding-top:(1rpx * $i) !important;
|
|
padding-bottom:(1rpx * $i) !important;
|
|
}
|
|
.padding-lr-#{$i}{
|
|
padding-left:(1rpx * $i) !important;
|
|
padding-right:(1rpx * $i) !important;
|
|
}
|
|
.padding-left-#{$i}{
|
|
padding-left:(1rpx * $i) !important
|
|
}
|
|
.padding-right-#{$i}{
|
|
padding-right:(1rpx * $i) !important
|
|
}
|
|
.padding-top-#{$i}{
|
|
padding-top:(1rpx * $i) !important
|
|
}
|
|
.padding-bottom-#{$i}{
|
|
padding-bottom:(1rpx * $i) !important
|
|
}
|
|
}
|
|
|
|
//font
|
|
.font-weight-bold{
|
|
font-weight:bold;
|
|
}
|
|
@for $i from 100 through 900{
|
|
.font-weight-#{$i}{
|
|
font-weight:$i !important
|
|
}
|
|
}
|
|
@for $i from 0 through 100{
|
|
.font-size-#{$i}{
|
|
font-size:(1rpx * $i) !important
|
|
}
|
|
}
|
|
// .font-color-primary{
|
|
// color:$--color-primary !important;
|
|
// }
|
|
// .font-color-primary-hover:hover{
|
|
// color:$--color-primary !important;
|
|
// cursor: pointer;
|
|
// }
|
|
// .font-color-success{
|
|
// color:$--color-success !important;
|
|
// }
|
|
// .font-color-warning{
|
|
// color:$--color-warning !important;
|
|
// }
|
|
// .font-color-danger{
|
|
// color:$--color-danger !important;
|
|
// }
|
|
//基础黑色
|
|
.font-color-000{
|
|
color:#000;
|
|
}
|
|
.font-color-danger{
|
|
color:#c33c45
|
|
}
|
|
//基础白色
|
|
.font-color-fff{
|
|
color:#fff;
|
|
}
|
|
.font-color-2b7{
|
|
color:#2b7;
|
|
}
|
|
//主要文字
|
|
.font-color-l1{
|
|
color:#303133;
|
|
}
|
|
.font-color-l2{
|
|
color:#606266;
|
|
}
|
|
.font-color-l3{
|
|
color:#909399
|
|
}
|
|
.font-color-l4{
|
|
color:#C0C4CC;
|
|
}
|
|
.font-color-999{
|
|
color:#999;
|
|
}
|
|
//font-style
|
|
|
|
.font-style-italic{
|
|
font-style:italic !important;
|
|
}
|
|
|
|
//bgcolor
|
|
.background-none{
|
|
background:none !important;
|
|
}
|
|
// .background-color-primary{
|
|
// background-color:$--color-primary;
|
|
// }
|
|
// .background-color-success{
|
|
// background-color:$--color-success;
|
|
// }
|
|
// .background-color-warning{
|
|
// background-color:$--color-warning;
|
|
// }
|
|
// .background-color-danger{
|
|
// background-color:$--color-danger;
|
|
// }
|
|
.background-color-2b7{
|
|
background-color: #2b7;
|
|
}
|
|
.background-color-danger{
|
|
background-color: #c33c45;
|
|
}
|
|
.background-color-fff{
|
|
background-color: #fff;
|
|
}
|
|
.background-color-000{
|
|
background-color: #000;
|
|
}
|
|
.background-color-f3f3f3{
|
|
background-color: #f3f3f3;
|
|
}
|
|
.background-color-transparent{
|
|
background-color: transparent !important;
|
|
}
|
|
.background-color-l1{
|
|
background-color:#303133;
|
|
}
|
|
.background-color-l2{
|
|
background-color:#606266;
|
|
}
|
|
.background-color-l3{
|
|
background-color:#909399
|
|
}
|
|
.background-color-l4{
|
|
background-color:#C0C4CC;
|
|
}
|
|
.background-color-l5{
|
|
background-color:#f1f2f5;
|
|
}
|
|
.background-color-l6{
|
|
background-color:#fafafa;
|
|
}
|
|
.background-color-999{
|
|
background-color:#999;
|
|
}
|
|
|
|
//cursor
|
|
.cursor-pointer{
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
//浮动
|
|
.float-left{
|
|
float:left;
|
|
}
|
|
.float-right{
|
|
float:right;
|
|
}
|
|
//overfolw
|
|
.overflow-auto{
|
|
overflow: auto;
|
|
}
|
|
.overflow-hidden{
|
|
overflow: hidden;
|
|
}
|
|
|
|
//line-height
|
|
.line-height-normal{
|
|
line-height: normal !important;
|
|
}
|
|
@for $i from 0 through 100{
|
|
.line-height-#{$i}{
|
|
line-height:(1rpx * $i) !important
|
|
}
|
|
}
|
|
|
|
//display
|
|
.display-block{
|
|
display: block !important;
|
|
}
|
|
.display-inline{
|
|
display: inline !important;
|
|
}
|
|
.display-inline-block{
|
|
display: inline-block !important;
|
|
}
|
|
|
|
//border-radius
|
|
@for $i from 0 through 100{
|
|
.border-radius-#{$i}{
|
|
border-radius:(1rpx * $i) !important
|
|
}
|
|
.border-top-radius-#{$i}{
|
|
border-top-left-radius:(1rpx * $i) !important;
|
|
border-top-right-radius:(1rpx * $i) !important;
|
|
}
|
|
.border-bottom-radius-#{$i}{
|
|
border-bottom-left-radius:(1rpx * $i) !important;
|
|
border-bottom-right-radius:(1rpx * $i) !important
|
|
}
|
|
.border-left-radius-#{$i}{
|
|
border-top-left-radius:(1rpx * $i) !important;
|
|
border-bottom-left-radius:(1rpx * $i) !important;
|
|
}
|
|
.border-right-radius-#{$i}{
|
|
border-top-right-radius:(1rpx * $i) !important;
|
|
border-bottom-right-radius:(1rpx * $i) !important;
|
|
|
|
}
|
|
.border-top-left-radius-#{$i}{
|
|
border-top-left-radius:(1rpx * $i) !important
|
|
}
|
|
.border-top-right-radius-#{$i}{
|
|
border-top-right-radius:(1rpx * $i) !important
|
|
}
|
|
.border-bottom-left-radius-#{$i}{
|
|
border-bottom-left-radius:(1rpx * $i) !important
|
|
}
|
|
.border-bottom-right-radius-#{$i}{
|
|
border-bottom-right-radius:(1rpx * $i) !important
|
|
}
|
|
}
|
|
|
|
//border
|
|
|
|
.border-none{
|
|
border:none;
|
|
}
|
|
.border-d8d8d8{
|
|
border:1rpx solid #d8d8d8;
|
|
}
|
|
.border-left-d8d8d8{
|
|
border-left:1rpx solid #d8d8d8;
|
|
}
|
|
.border-bottom-d8d8d8{
|
|
border-bottom:1rpx solid #d8d8d8;
|
|
}
|
|
.border-right-d8d8d8{
|
|
border-right:1rpx solid #d8d8d8;
|
|
}
|
|
.border-right-d8d8d8{
|
|
border-bottom:1rpx solid #d8d8d8;
|
|
}
|
|
.border-eee{
|
|
border:1rpx solid #eee;
|
|
}
|
|
.border-left-eee{
|
|
border-left:1rpx solid #eee;
|
|
}
|
|
.border-bottom-eee{
|
|
border-bottom:1rpx solid #eee;
|
|
}
|
|
.border-right-eee{
|
|
border-right:1rpx solid #eee;
|
|
}
|
|
.border-right-eee{
|
|
border-bottom:1rpx solid #eee;
|
|
}
|
|
.border-l1{
|
|
border:1rpx solid #303133;
|
|
}
|
|
.border-left-l1{
|
|
border-left:1rpx solid #303133;
|
|
}
|
|
.border-bottom-l1{
|
|
border-bottom:1rpx solid #303133;
|
|
}
|
|
.border-right-l1{
|
|
border-right:1rpx solid #303133;
|
|
}
|
|
.border-right-l1{
|
|
border-bottom:1rpx solid #303133;
|
|
}
|
|
.border-l2{
|
|
border:1rpx solid #606266;
|
|
}
|
|
.border-left-l2{
|
|
border-left:1rpx solid #606266;
|
|
}
|
|
.border-bottom-l2{
|
|
border-bottom:1rpx solid #606266;
|
|
}
|
|
.border-right-l2{
|
|
border-right:1rpx solid #606266;
|
|
}
|
|
.border-right-l2{
|
|
border-bottom:1rpx solid #606266;
|
|
}
|
|
.border-l3{
|
|
border:1rpx solid #909399;
|
|
}
|
|
.border-left-l3{
|
|
border-left:1rpx solid #909399;
|
|
}
|
|
.border-bottom-l3{
|
|
border-bottom:1rpx solid #909399;
|
|
}
|
|
.border-right-l3{
|
|
border-right:1rpx solid #909399;
|
|
}
|
|
.border-right-l3{
|
|
border-bottom:1rpx solid #909399;
|
|
}
|
|
.border-l4{
|
|
border:1rpx solid #C0C4CC;
|
|
}
|
|
.border-left-l4{
|
|
border-left:1rpx solid #C0C4CC;
|
|
}
|
|
.border-bottom-l4{
|
|
border-bottom:1rpx solid #C0C4CC;
|
|
}
|
|
.border-right-l4{
|
|
border-right:1rpx solid #C0C4CC;
|
|
}
|
|
.border-right-l4{
|
|
border-bottom:1rpx solid #C0C4CC;
|
|
}
|
|
|
|
//闪烁
|
|
/* 定义闪烁效果 */
|
|
@keyframes blink {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.blink {
|
|
animation: blink 1s linear infinite;
|
|
}
|
|
|
|
//box-sizing
|
|
.box-sizing-border-box{
|
|
box-sizing: border-box;
|
|
}
|
|
.box-sizing-content-box{
|
|
box-sizing:content-box
|
|
}
|
|
//position
|
|
.position-absolute{
|
|
position: absolute !important;
|
|
}
|
|
@for $i from 0 through 100 {
|
|
.bottom-#{$i}{
|
|
bottom:(1rpx * $i) !important
|
|
}
|
|
.top-#{$i}{
|
|
top:(1rpx * $i) !important
|
|
}
|
|
.left-#{$i}{
|
|
left:(1rpx * $i) !important
|
|
}
|
|
.right-#{$i}{
|
|
right:(1rpx * $i) !important
|
|
}
|
|
}
|