├── component.scss ├── uni.scss ├── lh.scss ├── height.scss ├── width.scss ├── area.scss ├── btn.scss ├── font.scss ├── variables.scss ├── index.scss ├── pm.scss ├── shape.scss ├── pos.scss ├── transition.scss ├── base.scss ├── input.scss ├── border.scss ├── common.scss ├── flex.scss ├── color.scss ├── README.md ├── animation.scss └── LICENSE /component.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /uni.scss: -------------------------------------------------------------------------------- 1 | uni-page-body { 2 | // height: 100%; 3 | font-size: 28upx; 4 | } 5 | 6 | uni-input { 7 | font-size: 28upx; 8 | } 9 | -------------------------------------------------------------------------------- /lh.scss: -------------------------------------------------------------------------------- 1 | // 定义行高，历遍10-1000 2 | @for $i from 10 through 1000 { 3 | .lh-#{$i} { 4 | line-height: $i + rpx; 5 | } 6 | } 7 | 8 | .lh-none { 9 | line-height: 1 !important; 10 | } 11 | -------------------------------------------------------------------------------- /height.scss: -------------------------------------------------------------------------------- 1 | // 定义高度 2 | @for $i from 2 through 1000 { 3 | .h-#{$i} { 4 | height: $i + rpx; 5 | } 6 | } 7 | 8 | // 定义高度百分比，遍历1-100 9 | @for $i from 1 through 100 { 10 | .h-#{$i}p { 11 | height: $i * 1%; 12 | } 13 | } 14 | 15 | .h-none { 16 | height: auto !important; 17 | } 18 | -------------------------------------------------------------------------------- /width.scss: -------------------------------------------------------------------------------- 1 | // 定义宽度，历遍2-1000 2 | @for $i from 2 through 1000 { 3 | .w-#{$i} { 4 | width: $i + rpx; 5 | } 6 | } 7 | 8 | // 定义宽度百分比，遍历1-100 9 | @for $i from 1 through 100 { 10 | .w-#{$i}p { 11 | width: $i * 1%; 12 | } 13 | } 14 | 15 | .w-none { 16 | width: auto !important; 17 | } 18 | -------------------------------------------------------------------------------- /area.scss: -------------------------------------------------------------------------------- 1 | @mixin flex { 2 | display: flex; 3 | align-items: center; 4 | flex-flow: column wrap; 5 | justify-content: center; 6 | } 7 | 8 | // 定义宽高值，历遍1-1000 9 | @for $i from 1 through 1000 { 10 | .a-#{$i} { 11 | @include flex; 12 | width: $i + rpx; 13 | height: $i + rpx; 14 | } 15 | } 16 | 17 | .full { 18 | width: 100%; 19 | height: 100%; 20 | } 21 | -------------------------------------------------------------------------------- /btn.scss: -------------------------------------------------------------------------------- 1 | @mixin btn { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | padding: 0 40upx; 6 | } 7 | 8 | .btn { 9 | &-small { 10 | @include btn; 11 | display: inline-flex; 12 | height: 60upx; 13 | } 14 | 15 | &-medium { 16 | @include btn; 17 | display: inline-flex; 18 | height: 80upx; 19 | } 20 | 21 | &-large { 22 | @include btn; 23 | height: 90upx; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /font.scss: -------------------------------------------------------------------------------- 1 | // 定义字体大小，历遍1-300 2 | @for $i from 1 through 300 { 3 | .f-#{$i} { 4 | font-size: $i + rpx; 5 | } 6 | } 7 | 8 | .fw { 9 | &-small { 10 | font-weight: 600; 11 | } 12 | 13 | &-medium { 14 | font-weight: 700; 15 | } 16 | 17 | &-large { 18 | font-weight: 800; 19 | } 20 | 21 | &-none { 22 | font-weight: normal; 23 | } 24 | } 25 | 26 | .ts { 27 | &-small { 28 | text-shadow: 1rpx 1rpx 1rpx #000000; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /variables.scss: -------------------------------------------------------------------------------- 1 | $white: #ffffff; 2 | $blue: #108ee9; 3 | $green: #04be02; 4 | $green-lg: linear-gradient(to right, #04be02, #0d827c); 5 | $yellow: #ffde48; 6 | $yellow-lg: linear-gradient(to right, #eee1a6, #eeda8f); 7 | $orange: #fa8d05; 8 | $orange-lg: linear-gradient(to right, #ffde48, #fa8d05); 9 | $red: #ff414d; 10 | $black: #000000; 11 | $c-33: #333333; 12 | $c-99: #999999; 13 | $c-dd: #dddddd; 14 | $c-ee: #eeeeee; 15 | $c-f5: #f5f5f5; 16 | $active: #f5f6f7 !important; 17 | -------------------------------------------------------------------------------- /index.scss: -------------------------------------------------------------------------------- 1 | @import "./area.scss"; 2 | @import "./base.scss"; 3 | @import "./border.scss"; 4 | @import "./btn.scss"; 5 | @import "./color.scss"; 6 | @import "./common.scss"; 7 | @import "./component.scss"; 8 | @import "./flex.scss"; 9 | @import "./font.scss"; 10 | @import "./height.scss"; 11 | @import "./input.scss"; 12 | @import "./lh.scss"; 13 | @import "./pm.scss"; 14 | @import "./pos.scss"; 15 | @import "./shape.scss"; 16 | @import "./transition.scss"; 17 | @import "./uni.scss"; 18 | @import "./width.scss"; 19 | @import "./animation.scss"; 20 | -------------------------------------------------------------------------------- /pm.scss: -------------------------------------------------------------------------------- 1 | // 定义内外边距，历遍0-600 2 | @for $i from 0 through 600 { 3 | // 只要双数和能被5除尽的数 4 | @if $i % 2 == 0 or $i % 5 == 0 { 5 | // 得出：margin-30或者m-30 6 | .margin-#{$i}, 7 | .m-#{$i} { 8 | margin: $i + rpx !important; 9 | } 10 | 11 | // 得出：padding-30或者p-30 12 | .padding-#{$i}, 13 | .p-#{$i} { 14 | padding: $i + rpx !important; 15 | } 16 | 17 | @each $short, $long in l left, t top, r right, b bottom { 18 | // 缩写版，结果如： m-l-30 19 | // 定义外边距 20 | .m-#{$short}-#{$i} { 21 | margin-#{$long}: $i + rpx !important; 22 | } 23 | 24 | // 定义内边距 25 | .p-#{$short}-#{$i} { 26 | padding-#{$long}: $i + rpx !important; 27 | } 28 | 29 | // 完整版，结果如：margin-left-30 30 | // 定义外边距 31 | .margin-#{$long}-#{$i} { 32 | margin-#{$long}: $i + rpx !important; 33 | } 34 | 35 | // 定义内边距 36 | .padding-#{$long}-#{$i} { 37 | padding-#{$long}: $i + rpx !important; 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /shape.scss: -------------------------------------------------------------------------------- 1 | .badge { 2 | @mixin badge { 3 | display: inline-flex; 4 | align-items: center; 5 | justify-content: center; 6 | padding: 5upx 10upx; 7 | border-radius: 5upx; 8 | } 9 | 10 | &-d { 11 | @include badge; 12 | } 13 | 14 | &-c { 15 | @include badge; 16 | padding: 5upx 20upx; 17 | border-radius: 30upx; 18 | } 19 | 20 | &-m { 21 | @include badge; 22 | border-radius: 0 10upx 10upx 10upx; 23 | } 24 | 25 | &-r { 26 | @include badge; 27 | padding: 5upx 20upx; 28 | border-radius: 30upx 0 0 30upx; 29 | } 30 | } 31 | 32 | .dot { 33 | @mixin dot { 34 | display: inline-block; 35 | border-radius: 50%; 36 | overflow: hidden; 37 | } 38 | 39 | &-small { 40 | @include dot; 41 | width: 10upx; 42 | height: 10upx; 43 | } 44 | 45 | &-medium { 46 | @include dot; 47 | width: 20upx; 48 | height: 20upx; 49 | } 50 | 51 | &-large { 52 | @include dot; 53 | width: 30upx; 54 | height: 30upx; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /pos.scss: -------------------------------------------------------------------------------- 1 | .pos { 2 | position: relative; 3 | 4 | &-fixed { 5 | position: fixed !important; 6 | } 7 | 8 | &-sticky { 9 | position: sticky !important; 10 | } 11 | 12 | &-lt { 13 | position: absolute; 14 | left: 0; 15 | top: 0; 16 | } 17 | 18 | &-lc { 19 | position: absolute; 20 | left: 0; 21 | top: 50%; 22 | transform: translateY(-50%); 23 | } 24 | 25 | &-lb { 26 | position: absolute; 27 | left: 0; 28 | bottom: 0; 29 | } 30 | 31 | &-ct { 32 | position: absolute; 33 | left: 50%; 34 | top: 0; 35 | transform: translateX(-50%); 36 | } 37 | 38 | &-cc { 39 | position: absolute; 40 | left: 50%; 41 | top: 50%; 42 | transform: translate(-50%, -50%); 43 | } 44 | 45 | &-cb { 46 | position: absolute; 47 | left: 50%; 48 | bottom: 0; 49 | transform: translateX(-50%); 50 | } 51 | 52 | &-rt { 53 | position: absolute; 54 | right: 0; 55 | top: 0; 56 | } 57 | 58 | &-rc { 59 | position: absolute; 60 | right: 0; 61 | top: 50%; 62 | transform: translateY(-50%); 63 | } 64 | 65 | &-rb { 66 | position: absolute; 67 | right: 0; 68 | bottom: 0; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /transition.scss: -------------------------------------------------------------------------------- 1 | @mixin transition($time) { 2 | will-change: transform; 3 | transition: all $time; 4 | } 5 | 6 | @mixin transform($type) { 7 | opacity: 0; 8 | transform: $type; 9 | } 10 | 11 | .fade-enter-active, 12 | .fade-leave-active { 13 | @include transition(0.3s); 14 | } 15 | 16 | .fade-enter, 17 | .fade-leave-to { 18 | opacity: 0; 19 | } 20 | 21 | .fade-transform-enter-active, 22 | .fade-transform-leave-active { 23 | @include transition(0.5s); 24 | } 25 | 26 | .fade-transform-enter { 27 | @include transform(translateX(-30px)); 28 | } 29 | 30 | .fade-transform-leave-to { 31 | @include transform(translateX(30px)); 32 | } 33 | 34 | .slide-fade-enter-active, 35 | .slide-fade-leave-active { 36 | @include transition(0.5s); 37 | } 38 | 39 | .slide-fade-enter, 40 | .slide-fade-leave-to { 41 | @include transform(translateX(30px)); 42 | } 43 | 44 | .slide-right-enter-active, 45 | .slide-right-leave-active, 46 | .slide-left-enter-active, 47 | .slide-left-leave-active { 48 | @include transition(0.5s); 49 | } 50 | 51 | .slide-right-enter, 52 | .slide-left-leave-to { 53 | @include transform(translateX(-100%)); 54 | } 55 | 56 | .slide-left-enter, 57 | .slide-right-leave-to { 58 | @include transform(translateX(100%)); 59 | } 60 | -------------------------------------------------------------------------------- /base.scss: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-overflow-scrolling: touch; 3 | -webkit-touch-callout: text; 4 | -webkit-user-select: text; 5 | user-select: text; 6 | touch-action: pan-y; 7 | } 8 | 9 | * { 10 | padding: 0; 11 | margin: 0; 12 | box-sizing: border-box; 13 | } 14 | 15 | * { 16 | &:hover, 17 | &:focus, 18 | &:active { 19 | outline: none; 20 | } 21 | } 22 | 23 | html { 24 | height: 100%; 25 | // overflow: hidden; 26 | } 27 | 28 | body { 29 | height: 100%; 30 | background-color: #f5f5f5; 31 | color: #333333; 32 | } 33 | 34 | // 页面字体基础大小 35 | page { 36 | height: 100%; 37 | font-size: 28rpx; 38 | } 39 | 40 | img, 41 | button, 42 | input, 43 | textarea { 44 | border: none; 45 | outline: none; 46 | resize: none; 47 | } 48 | 49 | img { 50 | display: block; 51 | } 52 | 53 | iframe { 54 | display: none; 55 | } 56 | 57 | #app { 58 | height: 100%; 59 | font-size: 36upx; 60 | word-break: break-all; 61 | } 62 | 63 | // 图片背景基础样式 64 | .bgi { 65 | background-repeat: no-repeat; 66 | background-size: 100%; 67 | } 68 | 69 | // 强制父级节点边缘裁剪 70 | .ofhd { 71 | overflow: hidden; 72 | backface-visibility: hidden; 73 | -webkit-backface-visibility: hidden; 74 | transform: translate3d(0, 0, 0); 75 | -webkit-transform: translate3d(0, 0, 0); 76 | } 77 | 78 | // 文字删除线 79 | .tdlt { 80 | text-decoration: line-through; 81 | } 82 | -------------------------------------------------------------------------------- /input.scss: -------------------------------------------------------------------------------- 1 | @mixin flex { 2 | display: flex; 3 | align-items: center; 4 | } 5 | 6 | @mixin name { 7 | .name { 8 | min-width: 120upx; 9 | padding-right: 20upx; 10 | 11 | &.required:before { 12 | content: '*'; 13 | color: #fe6367; 14 | } 15 | 16 | &:after { 17 | content: '：'; 18 | } 19 | } 20 | } 21 | 22 | @mixin icon { 23 | .icon { 24 | font-size: 40upx; 25 | padding-right: 20upx; 26 | } 27 | } 28 | 29 | @mixin input { 30 | input, 31 | textarea { 32 | -webkit-appearance: none; 33 | flex: 1; 34 | width: 100%; 35 | height: 100%; 36 | background-color: transparent; 37 | color: #999999; 38 | 39 | &::-webkit-input-placeholder { 40 | color: #999999; 41 | } 42 | 43 | &:disabled { 44 | -webkit-opacity: 1; 45 | -webkit-text-fill-color: #999999; 46 | background-color: transparent; 47 | color: #999999; 48 | } 49 | } 50 | } 51 | 52 | .input { 53 | &-small { 54 | @include flex; 55 | @include name; 56 | @include icon; 57 | @include input; 58 | height: 60upx; 59 | } 60 | 61 | &-medium { 62 | @include flex; 63 | @include name; 64 | @include icon; 65 | @include input; 66 | height: 80upx; 67 | } 68 | 69 | &-large { 70 | @include flex; 71 | @include name; 72 | @include icon; 73 | @include input; 74 | height: 90upx; 75 | } 76 | } 77 | 78 | .textarea { 79 | @include flex; 80 | @include name; 81 | @include icon; 82 | @include input; 83 | align-items: flex-start; 84 | } 85 | -------------------------------------------------------------------------------- /border.scss: -------------------------------------------------------------------------------- 1 | @import "./variables.scss"; 2 | 3 | .b { 4 | &-all { 5 | border: 2upx solid $c-dd; 6 | } 7 | 8 | &-b { 9 | border-bottom: 2upx solid $c-ee; 10 | } 11 | 12 | &-r { 13 | border-right: 2upx solid $c-dd; 14 | } 15 | 16 | &-t { 17 | border-top: 2upx solid $c-dd; 18 | } 19 | 20 | &-l { 21 | border-left: 2upx solid $c-dd; 22 | } 23 | 24 | &-ts + &-ts { 25 | border-top: 2upx solid $c-dd; 26 | } 27 | 28 | &-ls + &-ls { 29 | border-left: 2upx solid $c-dd; 30 | } 31 | } 32 | 33 | .b { 34 | &-blue { 35 | border: 2upx solid $blue; 36 | color: $blue; 37 | } 38 | 39 | &-green { 40 | border: 2upx solid $green; 41 | color: $green; 42 | } 43 | 44 | &-yellow { 45 | border: 2upx solid $yellow; 46 | color: $yellow; 47 | } 48 | 49 | &-orange { 50 | border: 2upx solid $orange; 51 | color: $orange; 52 | } 53 | 54 | &-red { 55 | border: 2upx solid $red; 56 | color: $red; 57 | } 58 | 59 | &-99 { 60 | border: 2upx solid $c-99; 61 | color: $c-99; 62 | } 63 | 64 | &-dd { 65 | border: 2upx solid $c-dd; 66 | color: $c-dd; 67 | } 68 | 69 | &-active { 70 | border: 2upx solid $active; 71 | color: $active; 72 | } 73 | 74 | &-none { 75 | border: none !important; 76 | } 77 | } 78 | 79 | // 定义圆角值，历遍1-1000 80 | @for $i from 1 through 1000 { 81 | .br-#{$i} { 82 | border-radius: $i + rpx; 83 | } 84 | } 85 | 86 | .br-50p { 87 | border-radius: 50%; 88 | } 89 | 90 | .bs { 91 | &-all { 92 | box-shadow: 2upx 2upx 6upx rgba(0, 0, 0, 0.3), -2upx -2upx 6upx rgba(0, 0, 0, 0.3), 93 | 2upx -2upx 6upx rgba(0, 0, 0, 0.3), -2upx 2upx 6upx rgba(0, 0, 0, 0.3); 94 | } 95 | 96 | &-b { 97 | box-shadow: 0px 0px 20rpx 0px rgba(108, 108, 108, 0.2); 98 | } 99 | 100 | &-t { 101 | box-shadow: -2upx -2upx 6upx rgba(0, 0, 0, 0.3); 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /common.scss: -------------------------------------------------------------------------------- 1 | .clearfix { 2 | &:after { 3 | content: ' '; 4 | display: block; 5 | visibility: hidden; 6 | height: 0; 7 | font-size: 0; 8 | clear: both; 9 | } 10 | } 11 | 12 | .scroll { 13 | &-x { 14 | overflow-x: auto; 15 | } 16 | 17 | &-y { 18 | overflow-y: auto; 19 | } 20 | 21 | &-none { 22 | overflow: hidden; 23 | } 24 | } 25 | 26 | .z { 27 | &-small { 28 | z-index: 99; 29 | } 30 | 31 | &-medium { 32 | z-index: 999; 33 | } 34 | 35 | &-large { 36 | z-index: 9999; 37 | } 38 | } 39 | 40 | .f { 41 | &l { 42 | float: left; 43 | } 44 | 45 | &r { 46 | float: right; 47 | } 48 | } 49 | 50 | .d { 51 | &b { 52 | display: block !important; 53 | width: 100%; 54 | } 55 | 56 | &ib { 57 | display: inline-block !important; 58 | } 59 | 60 | &n { 61 | display: none !important; 62 | } 63 | } 64 | 65 | .t { 66 | &al { 67 | text-align: left; 68 | } 69 | 70 | &ac { 71 | text-align: center; 72 | } 73 | 74 | &ar { 75 | text-align: right; 76 | } 77 | 78 | &ie { 79 | text-indent: 2em; 80 | } 81 | } 82 | 83 | .toe { 84 | @mixin toe { 85 | -webkit-box-orient: vertical; 86 | display: -webkit-box; 87 | text-overflow: ellipsis; 88 | overflow: hidden; 89 | } 90 | 91 | &-1 { 92 | @include toe; 93 | -webkit-line-clamp: 1; 94 | } 95 | 96 | &-2 { 97 | @include toe; 98 | -webkit-line-clamp: 2; 99 | } 100 | 101 | &-3 { 102 | @include toe; 103 | -webkit-line-clamp: 3; 104 | } 105 | 106 | &-sp { 107 | width: 1em; 108 | white-space: nowrap; 109 | text-overflow: ellipsis; 110 | overflow: hidden; 111 | } 112 | } 113 | 114 | .v { 115 | &at { 116 | vertical-align: top; 117 | } 118 | 119 | &am { 120 | vertical-align: middle; 121 | } 122 | 123 | &ab { 124 | vertical-align: baseline; 125 | } 126 | } 127 | 128 | .ws { 129 | &-wrap { 130 | white-space: normal; 131 | } 132 | 133 | &-none { 134 | white-space: nowrap; 135 | } 136 | } 137 | 138 | .wb { 139 | &-all { 140 | word-break: break-all; 141 | } 142 | 143 | &-word { 144 | word-break: break-word; 145 | } 146 | 147 | &-none { 148 | word-break: keep-all; 149 | } 150 | } 151 | -------------------------------------------------------------------------------- /flex.scss: -------------------------------------------------------------------------------- 1 | @mixin flex { 2 | display: flex; 3 | } 4 | 5 | @mixin flex-rw { 6 | @include flex; 7 | align-items: center; 8 | flex-flow: row wrap; 9 | } 10 | 11 | @mixin flex-cw { 12 | @include flex; 13 | align-items: center; 14 | flex-flow: column wrap; 15 | } 16 | 17 | .flex { 18 | @include flex; 19 | 20 | &-dif { 21 | display: inline-flex !important; 22 | } 23 | 24 | &-all { 25 | > * { 26 | flex: 1; 27 | } 28 | } 29 | 30 | &-1 { 31 | flex: 1; 32 | } 33 | 34 | &-acfs { 35 | align-content: flex-start !important; 36 | } 37 | 38 | &-acc { 39 | align-content: center !important; 40 | } 41 | 42 | &-acfe { 43 | align-content: flex-end !important; 44 | } 45 | 46 | &-aifs { 47 | align-items: flex-start !important; 48 | } 49 | 50 | &-aic { 51 | align-items: center !important; 52 | } 53 | 54 | &-aife { 55 | align-items: flex-end !important; 56 | } 57 | 58 | &-asfs { 59 | align-self: flex-start !important; 60 | } 61 | 62 | &-asc { 63 | align-self: center !important; 64 | } 65 | 66 | &-asfe { 67 | align-self: flex-end !important; 68 | } 69 | 70 | &-frn { 71 | flex-flow: row nowrap !important; 72 | } 73 | 74 | &-fcn { 75 | flex-flow: column nowrap !important; 76 | } 77 | 78 | &-sb { 79 | @include flex-rw; 80 | justify-content: space-between; 81 | } 82 | 83 | &-sa { 84 | @include flex-rw; 85 | justify-content: space-around; 86 | } 87 | 88 | &-fs { 89 | @include flex-rw; 90 | justify-content: flex-start; 91 | } 92 | 93 | &-c { 94 | @include flex-rw; 95 | justify-content: center; 96 | } 97 | 98 | &-fe { 99 | @include flex-rw; 100 | justify-content: flex-end; 101 | } 102 | 103 | &-v { 104 | @include flex; 105 | flex-direction: column; 106 | overflow: hidden; 107 | } 108 | 109 | &-vsb { 110 | @include flex-cw; 111 | justify-content: space-between; 112 | } 113 | 114 | &-vsa { 115 | @include flex-cw; 116 | justify-content: space-around; 117 | } 118 | 119 | &-vfs { 120 | @include flex-cw; 121 | justify-content: flex-start; 122 | } 123 | 124 | &-vc { 125 | @include flex-cw; 126 | justify-content: center; 127 | } 128 | 129 | &-vfe { 130 | @include flex-cw; 131 | justify-content: flex-end; 132 | } 133 | } 134 | -------------------------------------------------------------------------------- /color.scss: -------------------------------------------------------------------------------- 1 | @import "./variables.scss"; 2 | 3 | .c { 4 | &-white { 5 | color: $white; 6 | } 7 | 8 | &-blue { 9 | color: $blue; 10 | } 11 | 12 | &-green { 13 | color: $green; 14 | } 15 | 16 | &-yellow { 17 | color: $yellow; 18 | } 19 | 20 | &-orange { 21 | color: $orange; 22 | } 23 | 24 | &-red { 25 | color: $red; 26 | } 27 | 28 | &-rsm { 29 | color: #e8338f; 30 | } 31 | 32 | &-33 { 33 | color: $c-33; 34 | } 35 | 36 | &-66 { 37 | color: #666666; 38 | } 39 | 40 | &-99 { 41 | color: $c-99; 42 | } 43 | 44 | &-dd { 45 | color: $c-dd; 46 | } 47 | 48 | &-ee { 49 | color: $c-ee; 50 | } 51 | 52 | &-active { 53 | color: $active !important; 54 | } 55 | } 56 | 57 | .bgc { 58 | &-white { 59 | background-color: $white !important; 60 | } 61 | 62 | &-blue { 63 | background-color: $blue; 64 | color: $white; 65 | } 66 | 67 | &-green { 68 | background-color: $green; 69 | color: $white; 70 | } 71 | 72 | &-green-lg { 73 | background-image: $green-lg; 74 | color: $white; 75 | } 76 | 77 | &-yellow { 78 | background-color: $yellow; 79 | color: $white; 80 | } 81 | 82 | &-yellow-lg { 83 | background-image: $yellow-lg; 84 | color: $white; 85 | } 86 | 87 | &-orange { 88 | background-color: $orange; 89 | color: $white; 90 | } 91 | 92 | &-orange-lg { 93 | background-image: $orange-lg; 94 | color: $white; 95 | } 96 | 97 | &-red { 98 | background-color: $red; 99 | color: $white; 100 | } 101 | 102 | &-rsm { 103 | background-color: #e8338f; 104 | color: $white; 105 | } 106 | 107 | &-33 { 108 | background-color: $c-33; 109 | color: $white; 110 | } 111 | 112 | &-99 { 113 | background-color: $c-99; 114 | color: $white; 115 | } 116 | 117 | &-dd { 118 | background-color: $c-dd; 119 | color: $white; 120 | } 121 | 122 | &-f5 { 123 | background-color: $c-f5; 124 | } 125 | 126 | &-rgba-black { 127 | background-color: rgba(0, 0, 0, 0.3); 128 | } 129 | 130 | &-rgba-white { 131 | background-color: rgba(255, 255, 255, 0.3); 132 | } 133 | 134 | &-active { 135 | background-color: $active; 136 | } 137 | 138 | &-disabled { 139 | background-image: none; 140 | background-color: $c-dd; 141 | color: $white; 142 | } 143 | 144 | &-none { 145 | background: none !important; 146 | } 147 | } 148 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 基于uni-app的简单样式库 2 | 3 | ## 快速开始 4 | 5 | 将此文件放入static目录下，并在App.vue的 6 | 7 | ```html 8 | 9 | ``` 10 | 11 | 中引入 12 | 13 | ```css 14 | @import "static/styles/index.scss"; 15 | ``` 16 | 17 | 至此，就可以在项目中使用此样式库中的样式了。 18 | 19 | ## 使用方法 20 | 21 | ### 字体大小 22 | 23 | 样式库提供了一个类```f-x```，这个x为1-300之间(包含1和300)。 24 | 25 | 示例 26 | 27 | ```html 28 | 29 | ``` 30 | 31 | 这个```.f-20```在样式库的内部样式定义为： 32 | 33 | ```css 34 | .f-20 { 35 | font-size: 20rpx; 36 | } 37 | ``` 38 | 39 | ### 字重 40 | 41 | ```css 42 | .fw-small { 43 | font-weight: 600; 44 | } 45 | .fw-medium { 46 | font-weight: 700; 47 | } 48 | .fw-large { 49 | font-weight: 800; 50 | } 51 | .fw-none { 52 | font-weight: normal; 53 | } 54 | ``` 55 | 56 | ### 文字对齐 57 | 58 | ```css 59 | .tal { 60 | text-align: left; 61 | } 62 | .tac { 63 | text-align: center; 64 | } 65 | .tar { 66 | text-align: right; 67 | } 68 | .tie { 69 | text-indent: 2em; 70 | } 71 | ``` 72 | 73 | ### 内外边距 74 | 75 | 样式库定义了一套内外边距的类名，类似p-x、p-l-x等，这里的x取值规则如下： 76 | 77 | + 0-600(可以等于600)之间的偶数(双数) 78 | + 能被5除尽的0-600之间的数，如5，25，50，75等 79 | 80 | 示例 81 | 82 | 如果我们想定义```60rpx```的左外边距： 83 | 84 | ```html 85 | 86 | ``` 87 | 88 | 这个```.m-l-60```在样式库的内部样式定义为： 89 | 90 | ```css 91 | .m-l-60 { 92 | margin-left: 60rpx; 93 | } 94 | ``` 95 | 96 | 以此类推。 97 | 98 | ### flex布局 99 | 100 | 样式库尽可能的将flex布局所要用到的样式都列出来，通过组合，可以满足大部分flex布局需求。 101 | 102 | 示例 103 | 104 | ```html 105 | 106 | ``` 107 | 108 | 可以让该元素内的子盒子左右贴边并上下居中，我们可以用 109 | 110 | ```html 111 | 112 | ``` 113 | 114 | 来重置子盒子在交叉轴上的对齐方式（```.flex-aifs```让子盒子在交叉轴上位于起始位置）。 115 | 116 | ```html 117 | 118 | ``` 119 | 120 | 可以让该元素内的子盒子在垂直方向处于结束位置，其中```.flex-vfe```把主轴改为了垂直方向，我们同样可以用```.flex-aifs```来重置交叉轴的对齐方式。 121 | 122 | 更多flex布局样式可以查看```flex.scss```源码。 123 | 124 | ### 宽高 125 | 126 | 样式库定义了一套宽高的类名，类似w-x、h-x等，这里的x取值规则如下： 127 | 128 | + 2-1000(可以等于1000) 129 | 130 | 示例 131 | 132 | 如果我们想定义```426rpx```的宽： 133 | 134 | ```html 135 | 136 | ``` 137 | 138 | 这个```.w-426```在样式库的内部样式定义为： 139 | 140 | ```css 141 | .w-426 { 142 | width: 426rpx; 143 | } 144 | ``` 145 | 146 | 以此类推。 147 | 148 | ### 宽高百分比 149 | 150 | 样式库定义了一套宽高百分比的类名，类似w-xp、h-xp等，这里的x取值规则如下： 151 | 152 | + 1-100(可以等于100) 153 | 154 | 示例 155 | 156 | 如果我们想定义```66%```的高度百分比： 157 | 158 | ```html 159 | 160 | ``` 161 | 162 | 这个```.h-66p```在样式库的内部样式定义为： 163 | 164 | ```css 165 | .h-66p { 166 | height: 66%; 167 | } 168 | ``` 169 | 170 | 以此类推。 171 | 172 | ### 行高 173 | 174 | 样式库定义了一套行高的类名，类似lh-x等，这里的x取值规则如下： 175 | 176 | + 10-1000(可以等于1000) 177 | 178 | 示例 179 | 180 | 如果我们想定义```32rpx```的高度百分比： 181 | 182 | ```html 183 | 184 | ``` 185 | 186 | 这个```.lh-32```在样式库的内部样式定义为： 187 | 188 | ```css 189 | .lh-32 { 190 | line-height: 32rpx; 191 | } 192 | ``` 193 | 194 | 以此类推。 195 | 196 | ### 定位 197 | 198 | ```css 199 | .pos { 200 | position: relative; 201 | } 202 | /* 固定定位 */ 203 | .pos-fixed { 204 | position: fixed !important; 205 | } 206 | /* 粘性定位 */ 207 | .pos-sticky { 208 | position: sticky !important; 209 | } 210 | ``` 211 | 212 | 定位位置 213 | 214 | 示例 215 | 216 | ```html 217 | 218 | ``` 219 | 220 | 这个```.p-ct```在样式库的内部样式定义为： 221 | 222 | ```css 223 | .p-ct { 224 | position: absolute; 225 | left: 50%; 226 | top: 0; 227 | transform: translateX(-50%); 228 | } 229 | ``` 230 | 231 | 更多定位方式可以查看```pos.scss```源码。 232 | -------------------------------------------------------------------------------- /animation.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Animation 微动画 3 | */ 4 | 5 | /* css 滤镜 控制黑白底色gif的 */ 6 | .gif-black { 7 | mix-blend-mode: screen; 8 | } 9 | .gif-white { 10 | mix-blend-mode: multiply; 11 | } 12 | 13 | /* Animation css */ 14 | [class*="animation-"] { 15 | animation-duration: 0.5s; 16 | animation-timing-function: ease-out; 17 | animation-fill-mode: both; 18 | } 19 | 20 | .animation-fade { 21 | animation-name: fade; 22 | animation-duration: 0.8s; 23 | animation-timing-function: linear; 24 | } 25 | 26 | .animation-scale-up { 27 | animation-name: scale-up; 28 | } 29 | 30 | .animation-scale-down { 31 | animation-name: scale-down; 32 | } 33 | 34 | .animation-slide-top { 35 | animation-name: slide-top; 36 | } 37 | 38 | .animation-slide-bottom { 39 | animation-name: slide-bottom; 40 | } 41 | 42 | .animation-slide-left { 43 | animation-name: slide-left; 44 | } 45 | 46 | .animation-slide-right { 47 | animation-name: slide-right; 48 | } 49 | 50 | .animation-shake { 51 | animation-name: shake; 52 | } 53 | 54 | .animation-scale-up-infinite { 55 | animation-name: scale-up; 56 | animation-iteration-count: infinite; 57 | animation-duration: 1s; 58 | } 59 | 60 | .animation-shake-infinite { 61 | animation-name: shake; 62 | animation-iteration-count: infinite; 63 | animation-duration: 1s; 64 | } 65 | 66 | .animation-reverse { 67 | animation-direction: reverse; 68 | } 69 | 70 | @keyframes fade { 71 | 0% { 72 | opacity: 0; 73 | } 74 | 75 | 100% { 76 | opacity: 1; 77 | } 78 | } 79 | 80 | @keyframes scale-up { 81 | 0% { 82 | opacity: 0; 83 | transform: scale(0.2); 84 | } 85 | 86 | 100% { 87 | opacity: 1; 88 | transform: scale(1); 89 | } 90 | } 91 | 92 | @keyframes scale-down { 93 | 0% { 94 | opacity: 0; 95 | transform: scale(1.8); 96 | } 97 | 98 | 100% { 99 | opacity: 1; 100 | transform: scale(1); 101 | } 102 | } 103 | 104 | @keyframes slide-top { 105 | 0% { 106 | opacity: 0; 107 | transform: translateY(-100%); 108 | } 109 | 110 | 100% { 111 | opacity: 1; 112 | transform: translateY(0); 113 | } 114 | } 115 | 116 | @keyframes slide-bottom { 117 | 0% { 118 | opacity: 0; 119 | transform: translateY(100%); 120 | } 121 | 122 | 100% { 123 | opacity: 1; 124 | transform: translateY(0); 125 | } 126 | } 127 | 128 | @keyframes shake { 129 | 0%, 130 | 100% { 131 | transform: translateX(0); 132 | } 133 | 134 | 10% { 135 | transform: translateX(-9px); 136 | } 137 | 138 | 20% { 139 | transform: translateX(8px); 140 | } 141 | 142 | 30% { 143 | transform: translateX(-7px); 144 | } 145 | 146 | 40% { 147 | transform: translateX(6px); 148 | } 149 | 150 | 50% { 151 | transform: translateX(-5px); 152 | } 153 | 154 | 60% { 155 | transform: translateX(4px); 156 | } 157 | 158 | 70% { 159 | transform: translateX(-3px); 160 | } 161 | 162 | 80% { 163 | transform: translateX(2px); 164 | } 165 | 166 | 90% { 167 | transform: translateX(-1px); 168 | } 169 | } 170 | 171 | @keyframes slide-left { 172 | 0% { 173 | opacity: 0; 174 | transform: translateX(-100%); 175 | } 176 | 177 | 100% { 178 | opacity: 1; 179 | transform: translateX(0); 180 | } 181 | } 182 | 183 | @keyframes slide-right { 184 | 0% { 185 | opacity: 0; 186 | transform: translateX(100%); 187 | } 188 | 189 | 100% { 190 | opacity: 1; 191 | transform: translateX(0); 192 | } 193 | } 194 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | --------------------------------------------------------------------------------