@mixin colBox($isBtw) { display: flex; flex-direction: column; @if $isBtw { justify-content: space-between; } } @mixin centerBox { display: flex; justify-content: center; align-items: center; } @mixin vCenterBox { display: flex; align-items: center; } @mixin btwBox { display: flex; justify-content: space-between; align-items: center; } @mixin nomalEllipsis { overflow: hidden; text-overflow: ellipsis; word-break: break-all; white-space: nowrap; } @mixin ellipsisWithLine($line) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: $line; overflow: hidden; word-break: break-all; } // 字体 @for $i from 20 through 100{ .fs#{$i} { font-size: #{$i}rpx; } } // 颜色 @for $i from 0 through 9{ .color#{$i} { color: #{$i}#{$i}#{$i}; } } // padding @for $i from 1 through 100{ .p#{$i} { padding: #{$i}rpx; } } @for $i from 1 through 100{ .ptb#{$i} { padding-top: #{$i}rpx ; padding-bottom: #{$i}rpx ; } } @for $i from 1 through 100{ .plr#{$i} { padding-left: #{$i}rpx; padding-right: #{$i}rpx; } } @for $i from 1 through 200{ .pt#{$i} { padding-top: #{$i}rpx; } } @for $i from 1 through 100{ .pl#{$i} { padding-left: #{$i}rpx; } } @for $i from 1 through 100{ .pr#{$i} { padding-right: #{$i}rpx; } } @for $i from 1 through 200{ .pb#{$i} { padding-bottom: #{$i}rpx; } } // margin @for $i from 1 through 100{ .m#{$i} { margin: #{$i}rpx; } } @for $i from 1 through 100{ .mtb#{$i} { margin-top: #{$i}rpx ; margin-bottom: #{$i}rpx ; } } @for $i from 1 through 100{ .mlr#{$i} { margin-left: #{$i}rpx; margin-right: #{$i}rpx; } } @for $i from 1 through 100{ .mt#{$i} { margin-top: #{$i}rpx; } } @for $i from 1 through 100{ .ml#{$i} { margin-left: #{$i}rpx; } } @for $i from 1 through 100{ .mr#{$i} { margin-right: #{$i}rpx; } } @for $i from 1 through 100{ .mb#{$i} { margin-bottom: #{$i}rpx; } } // 圆角 @for $i from 0 through 100{ .radius#{$i} { border-radius: #{$i}rpx; } } // padding 左右+width自动计算 @for $i from 10 through 60{ .w-calc-#{$i} { width: calc(100% - #{$i*2}rpx); padding-left: #{$i}rpx; padding-right: #{$i}rpx; } } // gap @for $i from 1 through 100{ .gap#{$i} { gap: #{$i}rpx; } } // 高 @for $i from 1 through 900{ .h#{$i} { height: #{$i}rpx; } } // 宽 @for $i from 1 through 900{ .w#{$i} { width: #{$i}rpx; } } // 宽 @for $i from 1 through 900{ .lh#{$i} { line-height: #{$i}rpx; } } // font-weight $steps: 100 200 300 400 500 600 700 800 bold; @each $i in $steps { .weight-#{$i} { font-weight: $i; } } .bold { font-weight: bold; } .scrollx { overflow-x: scroll; } .scrolly { overflow-y: scroll; } .color9{ color: #999; } .color6{ color: #666; } .bgf{ background-color: #fff; } .base-color{ color: #018C39; } .colorf { color: #fff; } .bgf { background: #fff; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .w100 { width: 100%; } .h100 { height: 100%; } .card { background: #fff; border-radius: 15rpx; } .cover-height { height: 100%; display: flex; flex-direction: column; box-sizing: border-box; } .row { display: flex; flex-direction: row; } .column { display: flex; flex-direction: column; } .justify-start { display: flex; justify-content: flex-start; } .justify-center { display: flex; justify-content: center; } .justify-end { display: flex; justify-content: flex-end; } .justify-around { display: flex; justify-content: space-around; } .justify-evenly { display: flex; justify-content: space-evenly; } .justify-between { display: flex; justify-content: space-between; } .align-start { display: flex; align-items: flex-start; } .align-center { display: flex; align-items: center; } .align-end { display: flex; align-items: flex-end; } .center { display: flex; justify-content: center; align-items: center; } .centerV { display: flex; justify-content: center; align-items: center; flex-direction: column; } .wrap { flex-wrap: wrap; } .flex-1 { flex: 1; } .ellipsis { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; box-sizing: border-box; width: 100%; -webkit-line-clamp: 1; } .lines-2 { -webkit-line-clamp: 2 !important; } .lines-3 { -webkit-line-clamp: 3 !important; } .bold { font-weight: bold; } .line-through { text-decoration: line-through; } .nowrap { white-space: nowrap; } .scrollx { overflow-x: scroll; } .scrolly { overflow-y: scroll; } .cvauto { content-visibility: auto; }